手机产品细节设计

当产品经理定义出用户模型与需求后,就可以开始UI框架图的绘制了。首先是交互的流程设计,可以手绘草图,也可以使用Visio或者Axure等工具,最重要的是记录下完整的设计思维。要事先知道自己的首页要给用户一个什么样的直观感觉,是多数功能都显示在一个主页上的复杂信息型还是少量按钮的流程型。这是交互设计师的技能也是UI设计师对于产品的理解,特别是对于小屏幕的手机来说,如何尽量少的形式表达出用户真正的需求。
给出三点建议:
1.手机界面交互框架流程
首先按照用户的需求排列出信息的需求等级,也就意味着用户最需要的信息,要在视觉最主要的位置进行显示。 手机屏幕小,对于用户的需求把握显得特别的重要,可以一目了然的知道产品的具体的框架,给产品需求一个优先级。
然后设计相应菜单中的隐藏功能,但是不要把用户最应该直观操作的功能放置在菜单项目中(比如:添加账户、打开己保存的文件等),一般都会放置“帮助”、“关于”、“退出”和一些不重要的小功能。 当左菜单中的功能键过多时,建议将“帮助”、“关于”、“退出”等一些不重要的小功能放入二级菜单。
接下来设计首页的各个相关界面。切记保持统一的操作逻辑,如果在首页中出现菜单项中的功能,不要在后面变成了页面上的Button,而前面首页上的Button也不要挤到后面页面的菜单项中。 设计时尽可能的保持一致性,小屏幕别给用户太多的跳跃,用户需要的是直观的,方便的找到自己的想要的内容。
有一个阶段性交互成果之后,与相应的开发工程师沟通或者使用软件的思维来进行细化,考虑实现办法,如果有一定的实现难度,可以适当地修改UI设计的元素,但前提是保持同样的信息架构,不影响满足用户需求,也不影响用户流畅地使用。
一个完善的软件要有一个详细的开发时间表,在某个时间点出现什么样的版本,开发工程师要与UI设计师提前沟通好,否则好不容易开发出一个版本,需要的是沟通,同时对于开发工程师出的版本对于产品视觉效果可能会产生很大的影响,需要UI设计师对手机文字的颜色、界面效果提出自己的修改意见(手机UI测试)。特别是对于小公司来说,要充分的发挥小团队的特色(小公司、轻流程),在开发的过程中一定要及时沟通各个方面产生的问题,随时不断地修改技术上的问题,以制作出完美的产品。
2.关于界面设计
交互设计完成之后还有一个步骤才能让交互呈现在手机显示屏上,也就是图形设计。本质上说,这两种设计不能分开,应该同时考虑,否则,前期好的交互设计将无法转化为优秀的图形效果,整个UI还是不会达到很强的冲击力与易用性。所以,界面设计也必须受到重视。
需要设计人员有相对专业的美术功底及熟练的设计软件驾驭能力。也就是说,很多漂亮的效果很难由开发工程师完成。而很多工程师习惯到一些免费的网站下载图形,或直接拿以前用过的背景或图片,有时也能达到完成界面的目的,但是难以满足既定目标用户的终极需求,同时对于产品的美感效果也不佳。从用户的角度来考虑给出二点建议:
首先,产品源于生活。在您进行用户定义的时候就己经分析过目标用户身边的常用产品,这可以为手机界面打好基础。所以,一定要仔细搜寻最能代表目标用户喜好的产品。图形界面在一定程度上要和她们喜欢的常见的产品相匹配,毕竟目标用户的审美取向也会影响到产品的销售与市场反响。假定定位的女性用户基本都是年轻又充满朝气,但事务繁忙的类型,身边的产品多以数字化产品和简洁大方且细节优秀的产品为主,图形界面既要满足她们对信息量和信息优先级的需求,又要满足她们对色彩、质感等的特殊要求。
而免费网站提供下载的图形本身就没有针对目标用户做特殊设计,只能做到与目标用户相对贴切而己,尤其不适用于很有创新且用户群相对新潮的软件。
其次,UI适合多种场景。手机收集的是用户的零散时间,对于使作手机产品的场景也带有一定特殊性,特别是对于躺床上和坐车打发时间,这二个占据手机使用较多时间的时间段,UI对于场景的选择显得格外重要。
3.对手机产品设计方法的建议
关于手机产品设计的方法,谈二点想法。
1)培养自己的UI设计团队,减少沟通成本,当你的公司足够优秀可以留住人才时,培养自己的UI设计团队,从刚毕业的学生培养开始,慢慢承担起更多的交互设计任务,并且成为将来的交互设计的主要责任人。这是最有利于您掌握自己的产品,并开发出满足用户需求的产品的最佳途径。
2)如果没有合适的UI设计师加入您的团队,而产品又对自定义的图片需求量很大、质量高,那么推荐您采用设计外包。现在有很多公司从事外包设计工作,较为专业,但是时间相对紧张,周期超长的项目或者总是变化的需求对他们来说是很难完美地完成的,此外图形设计公司也不能像团队内部的设计师一样随时能沟通,随时都可以与团队一起创意,基本上只负责实现您的创意。国内著名的eico design等都是为众多的国内的网站、手机等提供一流的设计服务。如果您需要有人帮助您产生更好的创意,图形外包公司并不一定能满足您的需求。
我是一个对UI设计要求很高的产品经理,当出来的产品无法让我感觉满意时,我更愿意花更多的时间去美化,而很多时候UI素材愿意由我自己去找提供给UI设计师或给出产品设计的方案和产品设计灵感,自己想要的产品的想法,要达到的效果。用产品的第一眼赢得用户,这是我对产品UI设计的要求,也是对产品的要求。

产品过程

产品从无到有,从一个想法到雏形到上线的产品,都有个过程。不论是产品、运营、开发、测试等都有自己的职责和工作。很多公司都希望将自己的产品流程化,正规化,希望按照一定的流程走下去,想的是哪天哪个职位出现空缺了,直接找个合适的人可以顶替。同时也为以后的产品工作或项目进程都提供一个模版。特别是对于中小型公司来说,当没有UED,当没有产品相关流程时,产品是否能够按时完成,能否高质量的完成,成为很多产品经理和BOSS担忧的事情。

结合自己的产品经验,同时在不同的公司的经历,将产品流程规划分为8个阶段:立项阶段、设计阶段、开发阶段、测试阶段、上线阶段、磨合阶段、运营阶段、总结阶段。

1、立项阶段
体现产品经理核心功能的阶段,对于产品需求确定,核心功能提炼。产品提出讨论,输出MRD,与技术、业务、资源的可用性,同时确定产品参与人员,沟通是产品经理的一项职能,如何将所有的参与人员集合一起共事,如何更有效的沟通,明确各自的职责。更希望将产品聚焦于可以满足80%用户需求的解决方案,而非20%的用户需求。
2、设计阶段
设计阶段的首要任务就是将产品周期确认,周期是产品经理需与各部门人员配合确定的。产品、交互、UI、视觉、开发、测试等人员在设计阶段更多的是个溶合过程,信息的溶合,目的的明确,同时对于各自工作的明确。产品经理在做出PRD后更多的是与其他人员中的交流与沟通,同时文档的迭代,这个阶段是让所有的人员知道这个产品的核心及功能,交互根据文档出高保真原型,UI根据文档找到产品的表现形式,开发知道产品的核心力体现在哪,技术难题以及实现方式等,测试除了了解产品外对于产品的测试重点及难点掌握。运营则知道这个产品亮点及产品特征等,“好产品是运营出来的”,越早让运营介入产品只有好处。
3、开发阶段
“工欲善其事,必先利其器”。从服务器的部署开始,到最后的代码存档迭代,都将是开发人员做为主导的阶段,同时对于产品开发周期的确定。产品经理更多的协助开发了解产品功能,测试需配合开发做单元测试、压力测试等。运营则是更多的是配合内容数据的提供。
4、测试阶段
当产品经历过初审,接下来的工作就交给了测试,黑盒、白盒测试,以及三轮产品测试。第一轮测试发现产品bug,第二轮测试围绕着bug、以及优化展开,经过第三轮测试过后产品已经归类为较稳定版本。在三轮测试中测试人员需时刻保持着沟通协作,与技术、产品、UI等,这是个磨合的过程,同时也是质量把关过程。
5、上线阶段
这也是beta阶段,这也是开启产品市场的阶段。但在上线前需对产品的代码、系统接口监控、系统维护方案、数据清理等,上线评估阶段需经过市场、产品、运营、开发、测试等对于上线做出整体评估后才能正式上线运营。同时对于上线后的跟踪,日志分析、服务器监控等,同时从日志分析出做出产品调整同时产品运营计划表制定。
6、磨合阶段
经过上线阶段的数据分析,以及数据日志的分析,程序等调整,对于产品做出优化,对于用户常见的问题及反馈做出调整,这阶段更多的是产品与用户的磨合,做到更好的用户体验。
7、运营阶段
软文?广告?产品上线后的工作都将是围绕着用户展开的,如何让用户第一时间用上产品,如何让用户知道产品,如何抓住用户……提供优秀的用户体验,让用户喜欢上产品,爱上产品,离不开产品,这是运营的能力,同时也是运营人员对产品的信任,同时应证一句话“好产品是运营出来的”。为用户提供产品帮助,软件产品更多的是产品使用说明书,而web更多的是FAQ,减少用户“为什么”。
8、总结阶段
学会总结,学会分析,学会批评,产品上线后需要对产品做出个阶段的总结,不论是产品上的,还是人员相互配合上的,有摩擦,有不同的见解在产品过程中是常见的,但出发点一定是围绕着产品,提出意见,产品二期改进及规划,这都可以做为总结阶段讨论的重点,以及如何加强沟通协作,如何做好产品运营。


产品流程并不是一尘不变的,同时对于不同的产品,会有不同的要求。这样的流程同样适用于做项目,对于很多公司没有UED等组织时,如何高效、快捷的做出产品或完成项目,减少不必要的工作,成为流程简化与规范的基础。8个阶段的相关人员都有相关的侧重点,或许期间还有不同的人员介入,比如市场,比如BOSS,任何一个过程都有可能受到影响 ,这时候需要的是配合、需要的是协作。成功的产品会遇到很多的困难与阻碍,但相信自己的产品只是满足80%用户需求的解决方案,别想100%的压力,没有人会为这100%买单的。

附上整理的产品流程表:[download id=”9″]

手机原型设计工具–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

打造成功的产品团队

来到这家创业型的公司8个月了,产品部从无到有,从辅助的部门到成为公司的主导力量,经历过很多曲路,从最初的产品团队二个人,到现在的一个成熟的产品团队,虽然没有纯粹的交互设计师,但我们很好的利用自身的优势互补,解决了在缺少交互设计师下的一些难题。一个产品的优秀与否与公司的产品团队有着密切的关系,成功打造一个产品团队对于一个以产品估算 为主导的公司显得格外的重要,一个强悍的产品团队需要面对的不仅仅是老板、市场、技术,而是面对着成千上万的产品直接使用用户。产品部现在越来越成为一个公司的主导部门,越来越多的公司凭借着优秀的产品团队成功的打造成为一流的公司。

结合在这家公司的产品团队的工作,介绍一下产品人员在产品从无到有过程中的一些工作。

1、需求输入

执行者:市场部门

辅助:产品经理

工作内容:根据客户和市场需要,整理出客户的原始需求,包括产品定位,客户信息,项目信息,需求矩阵,规模和预期成本,预期工期,演示原型(可选),以及市场部门建议等。

输出文档:原始需求文档,MRD对应部分(可选)。

原始需求文档:需求矩阵。

2、需求收集

执行者:市场部门、产品经理。

工作内容:以客户为最终导向(偏项目)进行需求的细化收集,形成需求矩阵表。

输出文档:需求矩阵细化。

注:该步骤和需求整理可以合并。

3、需求整理

执行者:产品经理

辅助:市场部门

工作内容:将收集的需求进行整理,完成需求文档并进行需求冻结,根据需求矩阵进行功能设计,出具低保真原型,功能列表,MRD或产品需求规格说明书。该阶段提交需求确认单给市场部门和客户进行签字确认。

输出文档:需求矩阵,低保真原型,功能列表,MRD,需求确认单。

4、需求讲解

执行者:产品经理

辅助:UED团队

工作内容:通过需求整理阶段的输出物向开发、测试、UI等进行讲解,使产品相关人员对产 品的需求有一个清晰的理解。在需求材料明确、完善的情况下需要如此,毕竟从文字到思想要丢失太多,在需求材料不明确、不完善的情况下更要进行讲解和沟通。

输出文档:线框图

注:需求讲解可以分为两步执行,产品和研发,产品的需求讲解主要针对UI和交互,研发的需求讲解主要面向研发人员,步骤在视觉设计之后。

5、细化设计

执行者:产品经理,交互设计师

工作内容:将线框原型进行细化,设计交互框架,并生成高保真原型。

输出文档:高保原型(AXURE),交互文档(可选),PRD。

6、视觉设计

执行者:UI设计师

辅助:产品经理,交互设计师,市场部门

工作内容:基于高保真原型进行产品UI设计,提交UI确认单(只包含最多三个主界面的风格演示效果图:启动页面、登录页面、九宫格或十六宫格)供市场部门和客户确认。切片输出,对高保真原型进行UI匹配。

输出文档:UI确认单,UI文件输出,UI切片文件输出,高保真原型(图片)。

7、产品开发

执行者:开发工程师

辅助:产品经理,交互设计师

工作内容:基于高保真原型进行产品开发,最基本的流程走通,先期可能只是一个DEMO,很多时候客户想先看到的是DEMO下的界面效果。对于一个产品,开发工程师需要完成整个的业务流。包括代码优化,界面效果优化等。

输出文档:一个正常可run的安装包

8、产品测试

执行者:测试工程师

工作内容:视觉问题当成Bug来管理(UI视觉得),并参考UI输出和PRD对整个软件进行性质的测试。整个产品测试,包括压力测试,功能测试,业务集成测试……多次回归测试。

输出文档:测试文档,Bugfree(辅助工具)

9、产品上线

10、产品完善