以服务于中国广大创业者为己任,立志于做最好的创业网站。

标签云创业博客联系我们

导航菜单

完整的产品设计流程 产品设计流程具体步骤

把UI规划当成一个整体的团队过程。这与用户界面规划者的工作流程无关。特此声明。

我倾向于说“互动策划的全过程”。在我这里,UI指的是“界面”。在视觉规划开始之前,交互规划和界面规划是一个非常重要的前期过程,对最终的用户体验有很大的影响。

我们的团队通常有商品经理、交互计划员和用户界面计划员作为交互计划的主要参与者。据我所知,很多公司没有专门的互动策划人员,而是由商品经理完成相关操作。以下是我在这里的工作流程(图片来源于网络,就不贴了)。这个过程期望所有商品团队都参与其中,共同增进对商品的了解。或许带着时尚的理念,希望团队能有更多的设计思维和“规划思维”,加强和提升解决问题的能力,激发更多的创新。

首先,我们必须确定场景和角色用户角色。你的产品在什么情况下使用,你的用户有什么特点?策划是否正确,要看用户的性格,而不是策划人或商品经理自己。把场景和人物描述清楚,让整个团队彻底了解,这样可以保证团队少犯错误。

*用户Persona,在实际工作中写文字和描述都不错,但是下图通常是巨大的。如果你想给客户或老板一个建议,你可以做一个改进。

1. Storyboard 故事版:

首要负责人:商品司理或交互规划师

最早我们开始对用户体验流程进行评论,在白板上画流程的同时加入了粗糙的UI元素。会后,互动策划会在纸上做一个手绘线框。在此期间,商品经理、互动策划人、UI策划人、有技能的工程师会一起做很多评论,第一个评论是关于流程和第一个功能的,所以速写故事版是最快、最方便、最容易修改的。

在这个阶段,有必要最终确定用户流、用户流程以及它们之间的关键流程,每个流程都是一个主界面。

*白板上通常会出现这种情况。互动规划学生将在纸上重画。

*移动商品规划也可以这样做,不用买专门的模板书和东西向尺,也可以自己打印。

2. Key wireframe 要害界面线框图

首要负责人:交互规划师

在确定的用户过程中,选择几个关键和代表性的过程,并制作一个详细的线框线框图表。线框图表应确保每个用户界面元素的规划,包括其大小和方向。我们做的线框是1:1,也就是线框和实用界面比例通用。1:1的线框可以防止前期出现很多考虑不周、表演难等问题。

这个环节要决定关键界面中的UI元素和规划,以及全局的布局个性。

* 1:1是最好的线框。输出到文档以添加说明。在以下作业中,用户界面规划人员和工程师可以共享该文档。

3. Key visual design 要害界面视觉规划

首要负责人:UI规划师

在此会话中,交互式计划员将按

断定的用户流程及断定的规划个性来持续做其它界面的线框图。UI规划师则一起开端做要害界面的视觉规划,进行配色、款式不一样个性的测验。


此环节要断定商品界面的视觉规划个性。


4. All wireframe 悉数界面线框图


首要负责人:交互规划师


此环节交互规划师要完结悉数界面的线框图(1:1的)规划而且团队承认。


*做完悉数的线框图,通常会出一个总结构图。假如有足够大的场所,也能够逐页打印出来贴到一面墙上。便利团队随时参考。



5. Prototype 可动原型


首要负责人:交互规划师


此环节依商品需求而定。假如静态的线框图还不能完整的体现出商品特色,那就需求做成可操作甚至有要害界面动画示意的可动原型。通常是HTML的可动原型,特别项目也曾经做过Flash的。我还有一个奇葩兄弟用PPT做过(PPT的开发东西+VB Script)简直挨近制品界面的可动原型。


此环节的承认同上一步,团队的了解会更精准。


*不由得帖一个PPT的开发东西面板,提供VS个性的控件,而且直接用VB script写控件逻辑!还能够带dummy数据!客户都认为你开发结束了有木有。



6. UI design 悉数界面视觉规划


首要负责人:UI规划师


完结悉数界面的UI视觉规划。


此环节承认悉数UI规划。一起把承认的UI更新到文档里。


以上过程里省掉了了给boss报告或许给客户报告的描绘。有条件的话,最佳是每一步都要让有关的决议计划人员参加承认。


假如要做用户调研的商品,那必定要做出可动原型再让用户运用测验,不然很难得到有价值的反应。有条件的公司直接出带规划的可动原型再测验当然最佳。