设计流程，用好了是锦上添花，用不好是画蛇添足。
现下的UI设计圈瞬息万变，大多数人的现状是，刚在作品中融入了最近的一个潮流理念，转眼就被甲方爸爸一改回到解放前......
于是一千个项目，就有了一千个UI。千锤百炼之后，UI设计师逐渐摸索出一套专属于自己的设计流程~
而如今大多数的企业的设计流程是集标准性和完整性于一体的，基本流程认知的框架也离不开产品需求、交互设计、视觉设计、前端开发这几大步骤。并且在实际运用中，会随着项目的规模大小使得UI的设计流程有所扩充或简化，今天小编也来分享自己的一套设计流程，也许能对你有所帮助~
1.确定需求
好的开始，是成功的一半。
1.1明确指标
首先便要确立衡量指标，在这种过程中也急需一种品质：韧性，忍一时风平浪静！经常会有跟PM从产品需求diss到“人参公鸡”的情况发生，但最后你会发现，还是得按照甲方爸爸的策略走.....
指标就像是明码标价的规则，需求易变，但规则不行，指标可以是很多内容，如产品背景、目标、用户体验以及数据指标，在数据指标里，尤其需要明确数据。这些都能从PRD里获取，及时与PM沟通，确保已有的和新的idea能够及时验证。
1.2竞品分析
强大的竞争对手必能成就强大的UI, 当竞品分析在一个团队的存在感很弱的时候，后期的成果极有可能是ctrl+v之前的某一个case,一不小心就被对手拍在沙滩上，所以这一步绝壁是团队成员积累方法论和输出观点设计的有效途径之一，知己知彼，百战百胜。
尺有所短寸有所长，可从品牌类型，产品风格，传播途径，视觉语言一致性和设计亮点以及设计趋势去分析，还能从中发现自己的短板~
2.DEMO初成
此过程就是将抽象的想法呈现到具体的线框图上~
2.1素材收集
作品会回馈那些厚积薄发的设计者，对于UI来讲，最后所设计出来的成果，效果层次会在一定范围内取决于开端所收集素材的level, 不论是每日必修课还是临时抱佛脚，有意识锻炼自己的设计灵感绝对会让你的成果被甲方爸爸少说一次NO,这里小编也不吝分享一些网站，养兵千日，就靠它们啦~
2.2草图描绘
一个有效的布局，必然是离不开主次分明，因此若能先将大致的框架、关键的版块以及重要的元素安置妥当，将会省去很多时间，并且，在草图完成时，请确定一定以及肯定再次与PM以及开发人员进行沟通达成共识，方向定好了，那一切就风清月明了。
这里的主要的工具是sketch完成UI界面设计，但其实不论是哪种工具，能最终达到你的目的就行。
3.视觉设计
其实，这一步是整个过程里最轻松的环节~~
在设计规范以及控件规范相对完整的前提下，视觉包括：
o风格探索；
o关键页面的视觉设计；
o关键的交互动画表现（如果无法口头向技术表达动画效果时，给出一个“活的”效果，是非常直观的）；
然后便是进行视觉素材输出以及设计文件标注......
o素材用Dropbox或酷盘存储、管理；
oMarkman是不错的标注工具；
接下来就是属于自己的freestyle时间了。
3.1颜色搭配
当你第一眼浏览一个网站或是APP时，颜色无疑成为第一印象，主次色调的搭配，能让我们快速get到这个产品的风格，热情或是低调，欢乐或是平静。譬如用饱和度不高的深蓝色为背景色，搭配一种饱和度不高的亮蓝色和桃色作为产品的主色和辅色，目的是为了让用户感知到有蓝色的运动、科技感，深色的低调收敛感，还有桃色的跳跃，惊喜感。当然这需要运用到色彩搭配的规则，否则会让作品变LOW~
3.2主次体现；
站在用户角度思考场景会发现，用户在导航和添加路线时候的场景和操作习惯是不一样的，所以一般信息布局首先会将相关联的内容靠近摆放，或者沿着视觉流顺序摆放，层次展现一般是控制元素的大小，颜色深浅，粗细，远近等几个因素来区分，将重点操作功能置于下部分，信息展现置于上部分、返回在右上角、左滑删除，长按删除等等。
3.3交互连贯性和合理性
通常页面的返回是在左上角用箭头的形式展现，如果变成右上角，就不连贯了，也违背了用户的操作习惯的设计。
再如一个箭头给用户的感觉是下拉，但是如果操作结果是跳转页面，那就违背了用户的预期，十分不合理。
3.4各种状态和极值
常规的设置在office工具里最为常见，同理，用在设计里也是如此，最常见的字体，字色、线条以及栅格的排列等提前做好规范会让你事半功倍。
4.团队评审
完成原型后可交给至少两三个设计师或者对交互比较了解的成员，使用并评测原型。可将原型所关注的几个任务列出来，常用的评测方法是启发式评估法（Heuristic Evaluation），而这种方法比较常见的标准是尼尔森交互设计法则（Nielsen Heuristic）。十条尼尔森交互设计法则（Nielsen Heuristic）可有效帮助你顺利进行：
1、系统状态是否可见（Visibility of system status）
2、系统是否符合现实世界的习惯（Match between system and the real world）
3、用户是否能自由地控制系统（User control and freedom）
4、统一与标准（Consistency and standards）
5、错误防范（Error prevention）
6、减轻低用户的记忆负担（Recognition rather than recall）
7、灵活性和效率（Flexibility and efficiency of use）
8、美观简洁（Aesthetic and minimalist design）
9、帮助用户认知、了解错误，并从错误中恢复（Help users recognize, diagnose, and recover from errors）
10、帮助文档（Help and documentation）
如何做启发式评估法（Heuristic Evaluation）？很简单，成员们们各自将自己发现问题列出来，并将之与对应的法则相关联，或者根据法则来查找问题，然后成员们分别给自己的问题打分。专家们完成自己的问题列表后，一起讨论，将问题整合起来。
5.切图标注，开发跟进
UI世界里最让人抓狂的，恐怕非切图标注莫属了，也许你的内心拒绝了一万次，但不会切图标注的UI不是一个好交互设计师......
然后就是开发跟进细节了，千万别小瞧这些细节，实现视觉和交互的高度还原就指望这些细节了，哪怕这个过程是纠结痛苦以及枯燥的，但确认如边距、字体以及界面动画的数值微调等都是能让专业素质在细节中大展身手的关键所在~
其实好的作品，所经受的考验大抵是类似的，当初所有的心塞，都会成为日后回味无穷的宝贵经验，从挫折中学习，是一个UI成长最快的方式，但其实你也不必如此辛苦，因为一旦和宝原科技合作，那些辛苦会转移呀，我们还甘之如饴呢，就是这么自信，来呀，合作一次你就造了~
本文转载自宝原科技。