产品UI设计流程

本篇是为杰妞同学写的产品UI设计流程,其实对于产品UI设计流程特别是对于大型的互联网公司的要求特别高,经过不断的挑“刺”后才得以面世,得到的设计稿件完全与最初版本不同,商业类的产品会让产品和商业气息相兼容,与UI设计师的最初思想完全不同,而UI设计师会将自己的风格带到产品中来,会给产品灌输一种“性格”,该产品特有的“性格 ”。
一般公司只将把UI设计流程分为四个简单的阶段:分析、设计、配合、验证。

1、分析阶段
需求分析、用户场景模拟、竞品分析(聆听用户心声)。
需求分析:对于一个产品来说,必然有对用户需求的分析内容,更多的是从MRD与PRD获得,或者从产品需求评审会议上得到需求分析的内容,当然可以直接与产品经理交流获得相关产品需求。如果说设计原则是所有设计的出发点的话,那么用户需求就是本次设计的出发点。
用户场景模拟:好的设计建立在对用户深刻了解之上。因此用户使用场景分析就很重要,了解产品的现有交互以及用户使用产品习惯等,但是设计人员在分析的时候一定要站在用户角度思考:如果我是用户,这里我会需要什么。
竞品分析(聆听用户心声):竞争产品能够上市并且被UI设计者知道,必然有其长处。这就是所谓三人行必有我师的意思。每个设计者的思维都有局限性,看到别人的设计会有触类旁通的好处。当市场上存在竞品时,去听听用户的评论,哪怕是骂声都好,别沉迷于自己的设计中,让真正的用户说话。

输入物:MRD、PRD、市场需求文档、市场调查报告、竞品分析文档(或其一或全部)

输出物:设计初稿(或许只是几个简单的界面)

2、设计阶段
设计方法采用面向场景、面向事件驱动和面向对象的设计方法。面向场景是针对该产品使用场所等模拟,模拟用户在多种情况下产品使用的模拟。面向事件驱动则是对产品响应与触发事件的设计,一个提示框,一个提交按钮……这类都是对事件驱动的设计。面向对象,产品面向的用户不同对于产品的设计要求不同,不同年龄层的用户对于产品的要求不同,产品的用户定位将对UI设计师影响因素。

输入物:交互文档(高保真原型)

输出物:设计终稿(所有的设计稿)

3、配合
UI设计师交出产品设计图时,更多的配合开发人员、测试人员进行截图配合。配合开发人员对于PSD格式的图片切图操作,对于不同的开发人员的要求,切图方式也有不同,UI设计师需配合相关的开发人员进行最适合的切图配合。

输入物:设计终稿

输出物:设计修改稿(设计稿切片)

4、验证
产品出来后,UI设计师需对产品的效果进行验证,与当初设计产品时的想法是否一致,是否可用,用户是否接受,以及与需求是否一致。都需要UI设计师验证,UI设计师是将产品需求用图片展现给用户最直接的经手人,对于产品的理解会更加深刻。

输入物:产品

输出物:产品(面向用户最终版本)

产品UI设计中夹杂着许多设计原则要求,统一公司UI设计流程,使UI设计师参与到产品设计整个环节中来,对产品的易用性进行全流程负责,使UI设计的流程规范化,保证UI设计流程的可操作性。UI设计师应该分析公司产品的特点,制定符合产品生命周期的UI设计流程。每个产品的生命周期中,UI设计师应该严格按照流程,完成每个环节的职责,确保流程准确有效的得到执行,从而提高产品的可用性,提升产品质量。

建议:UI设计师有自己的风格,同样有自己的个性,建议在时间充裕时,UI设计师做二套设计稿,一套适合企业的,一套适合自己的,当老板对企业那套设计不满意时,将适合自己的一套展示给用户,或许会有不同的效果哦!

手机原型设计工具–PPT篇

PPT,一种演示文稿图形程序,是Power Point 简称。Visio做原型还是比较多的,至少我看过迅雷的人用Visio画原型 的产品经理还是变多的,用PPT来做原型的并不多,但还是有存在的,其实最早看到用PPT做原型还是从朋友那看到的,所以好奇之下做过一些PPT原型,当然不建议做网站的PPT,但做手机原型还是蛮不错的。
很多产品经理用PPT来做MRD,因为在展示效果上确实比WORD好看很多,而越来越多的PPT模版的使用,让MRD写的漂亮的同时,也让原型设计做的更漂亮了。

PPT画原型优点:
1、普及度高。相信PPT的普及度比Visio还更高,在装MS-office时三套件WORD、Excel、PPT,所以基本上每个电脑上都有了PPT。做产品演讲时最多用到的还是PPT,所以对一个产品经理来说PPT永远没有被淘汰的一天。
2、界面展示效果好,带来视觉冲击。比起Axure,Visio能做的原型,PPT自身定义就昌演示文稿图形程序,展示的效果确实更好,全屏的演示,在做评审时,展示的效果很能让评审的人满意(切身经验)。使用数十个新增的 SmartArt 布局可以创建多种类型的图表,例如组织系统图、列表和图片图表。将文字转换为令人印象深刻的可以更好的说明您的想法的直观内容。这点上比其它设计软件强的不仅仅是一二点了。
3、母版使用——丰富的组件库和拓展组件库。画图表?SmartArt?当Office2010的到来更加美化了PPT原型设计,母版的使用让组件库的使用得到了进一步的升华。这点上和Axure上一样,母版的效果二者在使用上同样等效。做一个手机原型后,就可以直接做成母版使用了。
4、同步协作。这是2010版的PPT具有的功能,您可以同时与不同位置的其他人合作同一个演示文稿。当您访问文件时,可以看到谁在与您合著演示文稿,并在保存演示文稿时看到他们所作的更改。对于企业和组 织,与 Office Communicator 集合可以查看作者的联机状态,并可以与没有离开应用程序的人轻松启动会话。这一点等同于Axure的SVN功能。
5、展示多样性。这也是在2010版中得到实现,将演示文稿发布到 Web,从计算机或 Smartphone 联机访问、查看和编辑,使用PPT您可以按照计划在多个位置和设备完成这些操作。Microsoft PowerPoint Web 应用程序,将 Office 体验扩展到 Web 并享受全屏、高质量复制的演示文稿。当您离开办公室、家时,创建然后联机存储演示文稿,并通过 PowerPoint Web 应用程序编辑工作。
……

PPT画原型缺点:
1、使用成本高。如果做展示我觉得非常不错,但是成本确实太高了,做一个PPT原型要花费的时间是Axure的三倍,而且是在熟悉的基本上。
2、流程表现能力差。如果用PPT做原型对于整个流程演示效果不太好,PPT可以画流程图,但流程表现出来的原型对于UI、开发等人员的理解上会产生一定的误差。
3、交互能力差。PPT和Visio一样没有交互,表现的只是界面效果,无法实现高保真原型,交互能力对于MS-office家族的成员都是一个致命的“痛”。
4、页面承载能力差,需大量文字辅助。交互能力差,就倒导了需要用大量的文字来辅助。这个缺点在Visio中同样存在,但PPT比Visio差的是界面,PPT界面有限,造成了对于文字输及表现方式也有限,承载能力就相对较弱了。
5、弹性差。PPT的弹性差表现在与PRD的连接上,以及与UI、开发等配合上。弹性对于原型设计上占有很重要的一部分,因为产品经理涉及到的软件性越多,对于其它人员的成本将增大。
……

PPT做手机原型的很少,毕竟不是很多人愿意加大成本去做PPT原型,但PPT最大的好处是在出PRD前,MRD与低保真原型一起出时一起用PPT,其实PRD里的原型界面也可以用PPT做(但会占据你比较长的时间),其它的工作就交给交互设计师去做吧。

PPT定义为演示文稿程序,所以用它来做手机原型演示效果确实更好,但我并不建议做手机设计的设计师用PPT做原型设计,因为消耗的时间确实太高了。但有感兴趣的可以学学看,试玩一下。顺便推荐一下Office2010,确实好用,感谢微软给我寄的试用版本。

PPT做手机原型确实是个苦力活,有人问我为什么一直用些难操作的原型设计软件,其实多一种手机原型设计方式并不是坏事,多的是一种对产品的认识途径罢了。今天下午的时候我在一个群里看到有交互设计师说用PPT做原型,其实蛮佩服他们的,我是只个好玩的人,所以才会花些时间去做PPT原型,同时在外企学的一些PPT技巧和模板觉得还有用就做试着做了一些。送一个PPT做的iPhone原型(iPhone的Icon也可以做的哦,仔细看附件吧)。

PPT手机附件:[download id=”5″]

手机原型设计–Visio篇

从转入移动互联网后,一直想写关于手机原型设计的一些常用工具和设计方法,通过自己从互联网转到移动互联网的一些常用的工具使用,可以实现多种方式来做手机客户端的产品设计,以达到最好的效果。希望对于处于手机客户端设计的设计师有些帮助。原型设计的软件很多,Axure、Visio、FireWorks、PS、Balsamiq Mockups……(这里有一些设计的工具下载地址:http://c2.com/cgi/wiki?GuiPrototypingTools)一系列的软件都可以在手机原型设计中使用,甚至很多人直接用Word直接来做手机的原型设计。今天想说的是用Visio做的设计和设计方法。

很多人把Visio称为“万能战士”。微软的Visio不是简单的画流程图的工具,同样可以画出直观的手机原型设计,可以直接输出给UI和视觉设计师,配上文档后同样可以交给开发。

Visio画原型优点:
1、普及度高。Visio是不可或缺的一款软件产品,不论是开发人员还是产品经理都会在自己电脑上装个Visio,很多时间在电脑安装Office时都选择了安装Visio。Visio的重要性已经不需要再细说,相信Visio在这些设计软件中的也是认知最高的。
2、组件库极其丰富。你可以说Visio起动速度慢,那是因为它有太多的东西需要启动,Visio2010增加了更多,在不断的满足用户流程规范的同时,也为原型设计增加了应用的组件,让原型设计更加快速化。
3、弹性极好。对于Visio的弹性确实没啥可说的,在自己切身使用的几款原型设计软件中(Axure、Balsamiq Mockups、Word、PPT、GUI Design Studio、UI Design等)感觉弹性最好的就是Visio了,同时可以直接将流程图放在原型图旁边加以说明,标注文字,同时可以导到文档中,也可以导出为图片,可以直接交付给UI设计。
4、流程能力表现强大。Visio最早一定没人用来做原型设计使用,但它最突出的特点是用它来画流程图。Visio画流程功能同样配在产品中,交集着原型设计,对于开发、设计都会是一种全方位结合的方式。
5、完整的支撑整个产品生命周期。这是最重要的一点,同时也是很多设计者愿意用Visio来画原型的一方面。为什么说Visio可以完整的支撑整个产品生命周期,产品从无到有,一定是个迭代的过程,不断的产品版本的更新,文档的更新,流程的更新修改,用Visio画原型,旁边附上流程图加说明,会将很多流程简单化。
……

Visio对于画手机原型设计确实有自己的优势方面,但同样存在着不足,包括界面效果表现,以及交互方面的缺陷等。
Visio画原型缺点:
1、静态。这是个很头疼的问题,因为Visio没办法做到和Axure一样做到交互,只有将事件、提示语言写在Visio原型旁边。给出来的只是一个静态的页面,或者仅是一种图片而已。
2、过于强大而不够专业。都说事情有二面性,Visio也一样。因为它过于强大,而显得不够专业,Visio可以画流程图,而很多用户就直接将Visio定为只能画流程图的工具。但同样可以发现很多用户用Visio来画网站的原型图,Axure或许也是这样,但很多人更愿意用“Axure+Visio”来完成“原型+流程”的工作,各取所长,当仅用Visio画时就显得不够专业了。
3、使用成本相对较高。这里说的成本集中于人力成本和时间成本。用Visio做个原型确实不容易,我花了很久才做了一个手机原型,而且还没完全表达清楚意思,不像Axure可以直接通过事件来表达意思,同时对于配色也没Axure好用,其次是时间成本,做一个像样的Visio的原型得花费很多时间,同时与UI、视觉的沟通时间成本会增加。没有了交互,文字的理解会增加更多的时间成本。
4、交互能力差。这点我一直觉得是用Visio画原型最大的缺陷,Visio没办法像其它软件一样,从一个界面直接过度到另一个界面,对于交互的感觉确实不好。所以很多设计人员不愿意用Visio做原型也在这个方面。
5、缺少连贯性,大量的文字信息辅助。同样的一个功能在其它的原型设计软件中可以直接表现出来,例如跳出框之类,都可以直接表现。但Visio只有通过大量的文字信息来表达清楚,无形中增加了时间成本,同时文字理解差异也会导致成本增加。
……

Visio是“万能战士”,但优缺点同在。Visio给用户的不再是简单的画流程图工具,同时也可以是原型设计工具。“萝卜青菜各有所爱”,Visio同样可以做出漂亮的原型界面。合理有效的利用Visio自带的控件,同时加载一些手机设计常用的界面,可以很好的表达出产品原型。个人建议如果用Visio做手机原型设计最好是针对于大屏幕的手机,如Android和iPhone这类大屏幕的手机,同样可以做出很多原型软件做出的效果。

上面是二张用Axure和Visio画的原型,Visio花费的时间是比较多的,但当有模版时会让工作变的更加简单化。特别是对于做手机DEMO来说,用Visio即可以画流程图,同样也可以画原型图。个人爱好取舍吧,同样见过用PPT做手机原型的,下一篇可以分享一下用PPT做原型的一些优劣,做出的效果同样逼真。哪个更好看,则是仁者见仁,智者见智了,但有一点可以确定,Visio同样可以做出漂亮的原型。

附上用Visio画的Android原型和Axure画Andriod的原型,希望可以对手机原型爱好者有些帮助。

[download id=”3″]

[download id=”4″]

突然发现用Visio的Android原型好大,如有需要就发邮件给我吧(xzwcool@gmail.com)。

Enhanced by Zemanta

手机客户端界面设计要求

手机客户端设计风格

界面简单:

做减法不做加法,如果一个功能不是超过50%以上使用的用户都会使用,做减法。

别让用户不知道当前功能是干什么的。

慎用图标,图标占用界面的空间很大,如何更有效的利用图标表达意思显得格外重要。UI界面是吸引用户使用的第一感观。

手机界面的整体统一,菜单、下拉框、按钮等控件风格保持一致。

链接:用户在点击之间就知道里面是什么,可不可点,不要让用户惊讶。

按钮:让用户知道那就是个按钮,一眼直白的告诉用户按钮是干什么的。

文本框:预留合适的位置,不要多,也不要少。别让输入法抢了页面的主屏幕。

提示语:根据产品本身的特性,注意提示语的友好性,笑脸与苦脸图案有时比其它词语表达成功与失败更直观。

提示语一定要简短,切忌长篇大论,不要高估用户的耐性,言简意骇。手机屏幕“寸土寸金”。

报错:用户是否立刻可以注意到我们的错误提示,提示是否有引导性,必要时要加帮助。客户端不是网页,不会报404,过长时间的等待(loading…等)没有任何提示只会逼用户离开。

帮助:别让用户不知所措。适当的帮助可以让用户更快的上手。

不要试图改变用户的使用习惯,除非能让用户眼睛一亮。

下一页:提前预测用户希望看到什么,不要让用户失望。

如果希望用户下一步做什么,一定要很明显的表达出来。

退出:好的客户端不是右键“退出”,尽可能让用户自己去摸索产品更多的功能,右键或许更多的可以是快捷键。