UI产品设计流程中的14个要点

       自从我在 Dribbble 上贴了一幅我的产品设计成果，受到了大家伙热烈的反馈，对此我深受鼓舞，我决定写下这篇文章，用来记录我这两年里作为产品设计师，所学到的东西。说起来有点羞愧，这几年我一直都在使用同一套产品设计的流程，可是我认为这套流程最适合我，对我来说是最理想的，所以就非常少去更换。我的这套工作流程我认为有 4 个地方能够和大家分享一下——前期工作、详细设计、后期工作以及一些提高效率的小细节

　　一，前期工作

　　1. 画！

　　不管是一张纸、笔记本，还是一片什么能写的玩意儿，都能够。我须要用纸笔记录下脑中的创意，避免遗忘。有些时候，灵感常常不经意出现，而一时半会儿又找不到合适的纸，因此我会用银行收据、餐馆账单、书籍封面等做临时记录。

　　草图记录理念

　　能够专门用一个笔记本来收集你的创意，不时的翻翻，可能会找到一些很有趣的旧想法，你能够依据这些旧点子想一些新玩意儿。

　　2. 收集图片

　　

　　" 一位艺术家必然是一位收藏家。他懂得品味藏品，而不是单纯的‘贮藏’。他们懂得有选择得去收藏。他们会依据自己内心的喜好选择收藏的东西 "

　　另一项前期要做的工作就是收集图片，我每天都会收集一些图片。收集图片的方法可能有好几百种，可是我还是习惯最 Old-School 的方法—— Dropbox 目录分类（比如，我会分成后台界面设计、iOS 设计、插画设计等等）每当我有新的项目的时候，我就会看看这些图片，用来寻找灵感。

　　3. 情绪板和准备工作

　　Dribbble，Behance，Pttrns，Pinterest ——我们有非常多能够需找灵感的地方。并且非常easy就能找到和你项目相关的作品。多去逛逛，你可能会从别人的经验中学会解决这个问题。

　　当我開始新项目的时候，我总会准备 4 个目录—— PSD，屏，资源，灵感。我会把和这个项目相关的东西所有按以下分类丢到目录里面。

　　能够是 Behance 上整套案例的研究，也能够是整个应用中的一张界面设计图。

　　二、開始着手设计

　　4. 不必在乎线框图的质量

　　我不喜欢精雕细琢线框图。毕竟，这玩意儿仅仅是一个过渡，并且客户可以预先准备好线框图就更好了。真正的业界好客户（并且肯定对品质也有追求的）肯定预先会以草图或者线框图的形式来表述需求。

　　线框图的作用是就是让彼此更好的理解目的，而不是终于结果。线框图可以帮助架构层级，让你了解大概须要多少屏界面，让你了解客户的想法

　　设计师必须懂得去 " 敏捷 " 设计，假设真的太在意线框图的细节，那么整个设计流程会拉长，设计师应该学会去取舍。

　　5. PSD - 大尺寸画布

　　我记得 7 个月前開始 Badoo 项目的时候，我最開始观摩了一下同事的工作方法，我认为他不是非常得要领。最好用 PS 做一个大尺寸画布，用来承载流程中的一些细节。我通常会创建 8000*5000 的画布，不是用来画出整个应用的 UI 套件，而是用来记录元素在不同阶段的不同状态——也就是流程。设计复用非常方便，开发看到这样的东西也会工作的更快。

　　6. 全部屏都放入一个 PSD 中

　　假设是移动应用，我喜欢把所有屏的界面设计所有装入到一个 PSD 中。

　　在设计移动应用时，我喜欢把整个流程中所有屏的界面设计所有装入到一个 PSD 中，总体的对照效果会更好，也更easy让他人理解你的设计理念。

　　元素的复用也很方便，仅仅须要复制一下其它屏的图层 / 图层组，改动一下背景或者几个图标就成了。

　　7. 整理、规范图层和图层组

　　我是一个崇尚整齐的人，因此我的 PSD 结构很的有序。我个人的规则是，假设超过 8 个图层，那么就创建一个图层组。

　　这里推荐一下《PS 礼仪手冊》，有兴趣的能够去看看

　　8. 和朋友沟通

　　我很重视那些可以给出专业性反馈意见的人。留意他们的反应和初次看到你设计时的想法，这未尝不是一种用户測试。并且多聆听别人的意见，可以让你从不同的角度看待问题。在整个设计流程中，我尽可能的多和别人沟通，避免出现主观差错。每一个人都可以给出一些不错的意见。还记得那句话吗？" 仅仅要你进了这个屋子，你就是用户体验设计师。"

　　9. 图示

　　当全部屏的设计都装入到一个 PSD 中后。应该做一点图示，用来暗示交互流程，我认为这算是一种早期原型设计吧，与此同一时候，还能充分感受到视觉设计的细节。集中到一个 PSD 中的优点是，假设你画多个交互流程，画多个以上的时候，指示线的视觉风格可能会混乱，而一个 PSD 可以让你总体视觉高度一致。

　　三 种不同的指示线——第一种指示线用来指示界面流程（并带有序号），另外一种用来指示屏幕内的链接或元素，第三种用来指示外部链接或应用

　　

　　指示线搭配内容的效果

　　

　　总体预览

　　非常多人喜欢把连线搞得满屏都是，可是我採用了一种更灵活的方法，我的线能够画得非常短，仅仅须要连接到一个圆圈数字，就能够代表连接到第几屏。降低连线的繁杂感。

　　为了让你们更好理解我上述的心得，这里我给出一份 PSD，各位请參考：

　　https://www.dropbox.com/s/lnxg174ib9iqpa8/Diagram-Template.zip

　　  三、后期工作——视觉规范

　　完毕了设计工作后，要做的事情就是出一份视觉规范，然后检查一下总体的视觉层级。我个人觉得，不管是小型项目还是大型项目，视觉规范都有其存在的必要性。不管是对你自己，还是对于同事，都能起到非常好的规范作用，避免不一致的设计。

　　10. 配色表

　　扁平化的要领之中的一个是配色精简。也方便了我们展现配色表。

　　11. 字体表

　　要完好的记录 Logo 使用的字体，文本使用的字体，标题使用的字体等等，这对于开发会大有裨益。个人复查作品时也会非常有帮助。

　　12. UI 套件

　　UI 套件很重要，尤其对于工作对接来说，可以保持视觉高度的一致性。前端也很须要这东西。做好了之后丢给前端，他要问你，你就说这东西在 UI 套件中，他立刻就能明确了。这一条很重要，关系到总体的视觉一致性。

　　四、提高效率的一些建议

　　13. 待办事项

　　前面已经提过，我是一个崇尚有序的人。因此我高度依赖待办事项清单。我推荐 Cultured Code 的 Things，或者直接用一张纸来做真正的待办事项清单也能够。这样当你完毕总体清单时，感受会很的棒。曾经可能我会 5 项工作同一时候展开，可是近期我发现，假设只做 1-2 项工作，我会更集中，效果也自然会更好。

　　14. 目标

　　必需要清除的了解，你想要达成什么目标，可是也不要过于受目标限制。我通常会指定 14 天的目标（类似冲刺计划 ) 和妒忌目标。我会设定一些对我来说是新里程碑的目标（比方用 AE 完毕我个人的第一个动效设计）以及日常目标（完毕 2 个 Behance 案例研究）

　　其它

　　个人不用鼠标，用的是画图板，PS 没有打开工具面板，由于全部工具的快捷键我都记住了。然后 PS 作品 iPhone 预览我用的是 Skala Preview。个人想学习 Sketch 和 AE。原型设计，网页设计我用 InVision 应用，iOS 设计我用 Marvel 应用。有时候还会用 POP 进行一些早期原型设计。

　　结语

　　这就是我的工作流程，希望你能从中得到帮助。

　　本文转载自设计之家

　　（关注很多其它人人都是产品经理观点，參与微信互动（微信搜索 " 人人都是产品经理 " 或 "woshipm"）

原文地址: http://iphone.myzaker.com/l.php?l=5365abbd1bc8e04b738b4582

来自ZAKER: http://www.myzaker.com