UI设计中的原型图用什么工具?怎么做?给谁看?

(阅读时间:5分钟)

我们应该理清到底什么工具配合制作什么样的原型给谁看?

设计师小伙伴们肯定都知道,在网站或者应用开发的前期,是需要设计原型图然后给开发和客户展示的。

原型图的目的:

第一是给自己看,方便规划整个设计并持续下一步的完成度;

第二是给开发看的,可以更好的说服,并且更佳的完善软件;

第三个目的是给客户看的,更高质量的原型图可以推动合作并让客户更满意。


但是在实际操作中,很多UI初学者对原型度的界限不是非常清晰,拿着给客户看的原型图去给开发,有的被拒绝,有的事效率低下,严重的沟通问题产生。有的拿着给开发看的原型去给客户看,导致客户不清楚并不满意,谈判过程较艰难。更甚者拿着自己看的原型图去给开发/客户看的话,后果不堪设想。

所以接下来我们就来理清到底什么工具配合制作什么样的原型给谁看。



1.给自己看的原型图

重点:草图

工具:UX流程图卡、白板、纸笔、Balsamiq、Xmind

给自己看的原型图可以略简单一些,可以不需要太多花里胡哨的东西,但是UX流程图卡兼备了花里胡哨和实用,强大的网站结构规划工具,专业的网站建设者,涵盖54种常用UX模板,让设计师能够快速搭建专业的用户体验流程图,节省大量时间且架构清晰。帮助设计师和产品经理把握产品全貌,思考用户体验,聚焦重要环节。


UX流程图卡

UX流程图卡

官网:https://www.uxdock.com/

这款卡牌可以配合白纸板和笔的直接交互,这样可以省下用笔画出又线又框的时间,UX流程图卡任你搭出无数想法

原型讲解,需求可视化

流程卡是非常有效的将需求转化为具体设计稿的思考工具。

方案探讨,随时修改纠错

修改、移动、自定义都很容易,大大节省创建修改的时间成本。

头脑风暴,快速搭建思维模型

操作简单,帮助设计师和产品经理快速记录思路。


Balsamiq Mockups

Balsamiq Mockups   

网址:https://www.macbl.com/app/graphics-design/balsamiq-mockups

可以更有效的整理线框图,这款工具虽然没有交互设置,但是素描风格也是很不错的灵感来源了,虽然组件不是非常多,但也是够满足原型图的要求了。


Xmind

Xmind

官网:https://www.xmind.cn/xmind8-pro/

这是一款帮助你整理属于你自己的思维导图,更佳的完善所有流程步骤,简单易用、美观、功能强大,拥有高效的可视化思维模式,具备可扩展、跨平台、稳定性和性能,真正帮助用户提高生产率,促进有效沟通及协作。



2、给开发人员看的原型图

重点:交互

工具:UX流程图卡、Axure RP、Mockplus

每个人看每件事物都是不一样的,所以为了更好的和开发人员达成一致,我们该尽心尽力的去使用工具制作更直观的原型图,来减少误解,提高效率加快节奏。

这里UX流程图卡又派上用场了,它并不仅是为了给设计师自己看,还可以拿出卡牌和开发人员一起探讨跳转的交互,随时修改纠错。

再来进阶版的是AxureRP和Mockplus这两款工具,敏捷开发的团队中,时间是宝贵的,我们想要的还是创造出更快、更好的效果来表达出最接近客户想法的设计,然后更好的与开发沟通探讨。


AxureRP

AxureRP

网址:https://www.macbl.com/app/business/axure-rp-pro

这是一款专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。


Mockplus

Mockplus

官网:https://www.mockplus.cn/product/mockplus

这是一款简洁、快速、免费的原型图工具,适合软件团队、个人在软件开发的设计阶段使用。该工具具有低保真、无需学习、快速上手等功能特点,可以帮助用户轻松的做出专业化的原型设计。



3、给客户看的原型图

重点:精致度

工具:Origami Studio、Framer

对于不是非常了解软件设计的客户,他们需要的是一个99.99%接近应用的原型。

这个时候就请使用Origami Studio、Framer这两款工具,为什么这种不仅可以保证精致度,还可以保证高保真的工具我到这个时候才拿出来?原因很简单,这两款的工具步骤相对复杂,后者基本依靠代码。这两款工具无论是画面效果还是交互动效都可以与真正的App相媲美,做到以假乱真的效果。不过由于要求高,时间成本高,不建议日常使用,可以留到最后以应防不测。

Origami Studio

Origami Studio

网址:https://www.macbl.com/app/graphics-design/origami-studio

这款由 Facebook 推出,在 iOS 与 Android 设计风格基础之上采用 Facebook 设计语言的原型开发工具,这款工具提供了必要的设计要素、动画效果以及各种库,可以让产品设计师更快更方便地进行原型开发。


Framer

Framer

网址:https://www.macbl.com/app/graphics-design/framer

它是一款屏幕设计和交互式原型制作的最佳工具。让你从简单的代码开始你的设计生活。


以上就是对三种情况下的基础说明了。还有很多比较优秀的工具这里没有提到,希望大家还是能够根据自己的实际情况,合理选择工具,更好的沟通,更敏捷的开发做更好的设计。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,884评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,347评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,435评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,509评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,611评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,837评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,987评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,730评论 0 267
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,194评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,525评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,664评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,334评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,944评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,764评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,997评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,389评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,554评论 2 349

推荐阅读更多精彩内容