UI设计的工作流程会根据公司性质、规模、项目性质、项目规模、UI职能要求等的不同有所区别。
UI设计参与完成的流程大致为:
1. 参与需求评审,理解PRD
2. 用户调研、情绪板梳理(主要针对一些对体验、视觉要求很高的产品,需要更加多关注人的设计,不是必要流程)
3. 交互设计
4. 视觉设计
5. 视觉评审(视觉稿确定过后)
6. UI走查、验收(开发提测后,发布前)
在工作过程中,可能会组织团队成员对设计方案、项目进行复盘,这样细致的分工会把每个环节都打磨得非常到位。我们再来细分工作中的每一步,具体的工作内容是什么?
1.参与需求评审,理解PRD
一个项目全员开始动工,应该就是从需求评审开始。在产品理清楚需求后,会输出PRD或者原型草图,依据PRD或者原型草图来和项目组的全体成员澄清需求。在需求澄清会中,项目组成员会对需求、操作流程、业务逻辑等提出不同的问题,产品完善问题。需求澄清不会一次就让项目组全体成员清晰的明确所有需求,产品会根据大家的疑惑去不断完善需求内容,在多次的需求澄清后,大家达成一致的共识,正式开始动工。
在这个过程中UI设计需要:
(1)反复和产品沟通,确认,协助产品给出原型草图。
(2)协助产品明确产品的市场定位、产品定义、客户群体、运行方式等。
2. 用户调研、情绪板梳理
产品、UI、UE等相关人员会依据产品的定位、竞品分析、目标用户的使用场景、需求、心理等提出用户的研究报告。
在这个过程中UI设计需要:
(1)参与讨论,输出纸稿线框稿、用工具制作线框图。
(2)协助产品初拟产品设计方向和思路,提出可用性设计建议。
3. 交互设计
交互设计阶段一般由交互设计师(UE)和产品一起制定,根据可用性分析结果制定交互方式、操作流程、跳转流程等。在线框图阶段去设计交互流程,可以减少由于交互流程改变而带来的视觉设计的改变。这个阶段会输出原型图,以支持后面做详细的视觉设计。很多公司没有专职的交互设计师,交互设计由产品或者UI完成。
在这个过程中UI设计需要:
(1)这个过程,UI可以依据上一个流程中的输出,初步设计产品的风格,然后和产品不断推敲。
(2)原型设计的不断完善,纸质草图-线框图-低保真-高保真(高保真原型成本较高,很多小规模的公司都不做高保真原型设计)。
4.视觉设计
视觉设计阶段,UI根据界面原型,对界面原型进行视觉效果的处理。该项目组的UI在明确界面风格、要求后,开始制作所有界面的视觉设计
在这个过程中UI设计需要:
(1)确定整个界面的风格、界面、窗口、图标、色调、按钮的表现。
(2)完成所有界面的视觉设计,交出最终的视觉稿。
5. 视觉评审
在视觉稿确定之后,UI设计组针对界面做一致性测试、简洁性测试、美观度测试、用户体验测试、行业标准测试等。然后召集项目组所有人员召开原型的可用性测试评审会,发现可用性问题并提出修改意见。当视觉评审过了之后,配合技术部门实现界面设计的实际效果。
在这个过程中UI设计需要:
(1)针对提出的问题,对界面进行不断的完善。
(2)参与视觉评审全过程。
(3)配合技术部门实现界面设计的实际效果,给出最后的界面效果图,标注好距离、 尺寸、颜色、文字大小等。
(4)输出前端开发工程师需要的切图。
6. UI走查、验收
在发布前,测试会针对可用性、用户体验、测试界面等对设计问题进行一下回馈,在依据这些问题把设计工作进行细节调整。再正式发布之后,收集市场上真实的用户体验并记录,为下个版本提供强有力的市场需求。
在这个过程中UI设计需要:
(1)不断完善界面设计。
(2)UI人员把可行性建议进行完善,不断总结以备以后产品设计升级。
当然,以上谈到的UI设计工作只是一个大致的流程,一个项目UI参与的流程肯定是会依据公司性质、规模、项目性质、人员配比等不同,所做的工作有所缩减或精分。
主要负责人:产品经理或交互设计师
最早大家开始讨论用户体验流程,在白板上边画流程边添加粗略的UI元素。会后交互设计师会在在纸上做手绘版线框图。这阶段产品经理、交互设计师、UI设计师、包括技术工程师会一同作大量的讨论,而且主要讨论的是流程和主要功能,因此手画故事版最快最方便并易于修改的。
此环节要敲定userflow,用户流程及其中的关键步骤,每一步骤都是一个主要界面。
白板上一般都是这样,交互设计同学会在纸上重绘。
移动产品设计这样做也行,不买专用的模板本和工具尺,自己打印也行。
主要负责人:交互设计师
在确定的用户流程中,选出几个关键的,有代表性的步骤,做细化的wireframe线框图。线框图里要确保每一个UI元素的设计,包括其大小和位置。我们做 的线框图是1:1的,也就是线框图与实际界面尺寸一致。1:1的线框图能在前期避免考虑不周和执行困难等很多问题的出现。
此环节要确定关键界面里的UI元素和布局,以及全局的布局排版风格。
线框图做成1:1最好。输出到文档里要添加说明。在后面的工作里,这份文档可以让UI设计同学和工程师同学共用。
主要负责人:UI设计师
此环节交互设计师会按确定的用户流程及确定的布局风格来继续做其它界面的线框图。UI设计师则同时开始做关键界面的视觉设计,进行配色、样式不同风格的尝试。
此环节要确定产品界面的视觉设计风格。
主要负责人:交互设计师
此环节交互设计师要完成全部界面的线框图(1:1的)设计并且团队确认。
做完全部的线框图,一般会出一个总结构图。如果有足够大的场地,也可以逐页打印出来贴到一面墙上。方便团队随时参考。
主要负责人:交互设计师
此环节依产品需求而定。如果静态的线框图还不能完整的体现出产品特点,那就需要做成可操作甚至有关键界面动画示意的可动原型。通常是HTML的可动原型,特 殊项目也曾经做过Flash的。我还有一个奇葩朋友用PPT做过(PPT的开发工具+VB Script)几乎接近成品界面的可动原型。
此环节的确认同上一步,团队的理解会更精准。
忍不住帖一个PPT的开发工具面板,提供VS风格的控件,并且直接用VB script写控件逻辑!还可以带dummy数据!客户都以为你开发完毕了有木有。
主要负责人:UI设计师
完成全部界面的UI视觉设计。
此环节确认全部UI设计,同时把确认的UI更新到文档里。
以上步骤里省略了了给boss汇报或者给客户汇报的描述。有条件的话,最好是每一步都要让有关的决策人员参与确认。
如果要做用户调研的产品,那一定要做出可动原型再让用户使用测试,不然很难得到有价值的反馈。有条件的公司直接出带设计的可动原型再测试当然最好。
以上是庞姿姿的回答,希望对你有用。
本回答被提问者采纳