UI产品设计流程中的14个要点
- - 人人都是产品经理自从我在Dribbble上贴了一幅我的产品设计成果，受到了大家伙热烈的反馈，对此我深受鼓励，我决定写下这篇文章，用来记录我这两年里作为产品设计师，所学到的东西. 说起来有点惭愧，这几年我一直都在使用同一套产品设计的流程，但是我觉得这套流程最适合我，对我来说是最理想的，所以就很少去更换. 我的这套工作流程我觉得有4个地方可以和大家分享一下——前期工作、具体设计、后期工作以及一些提高效率的小细节.
UI产品设计流程中的14个要点
标签：
产品设计
设计流程
| 发表时间：2014-05-04 10:31 | 作者：lizliu
出处：http://www.woshipm.com
自从我在Dribbble上贴了一幅我的产品设计成果，受到了大家伙热烈的反馈，对此我深受鼓励，我决定写下这篇文章，用来记录我这两年里作为产品设计师，所学到的东西。
说起来有点惭愧，这几年我一直都在使用同一套产品设计的流程，但是我觉得这套流程最适合我，对我来说是最理想的，所以就很少去更换。我的这套工作流程我觉得有4个地方可以和大家分享一下——前期工作、具体设计、后期工作以及一些提高效率的小细节
一，前期工作
1.画！
无论是一张纸、笔记本，还是一片什么能写的玩意儿，都可以。我需要用纸笔记录下脑中的创意，避免遗忘。有些时候，灵感经常不经意出现，而一时半会儿又找不到合适的纸，因此我会用银行收据、餐馆账单、书籍封面等做暂时记录。
草图记录理念
可以专门用一个笔记本来收集你的创意，不时的翻翻，可能会找到一些非常有趣的旧想法，你可以根据这些旧点子想一些新玩意儿。
2. 收集图片
“一位艺术家必定是一位收藏家。他懂得品味藏品，而不是单纯的‘贮藏’。他们懂得有选择得去收藏。他们会根据自己内心的喜好选择收藏的东西“
还有一项前期要做的工作就是收集图片，我每天都会收集一些图片。收集图片的方法可能有好几百种，但是我还是习惯最Old-School的方法——Dropbox文件夹分类（例如，我会分成后台界面设计、iOS设计、插画设计等等）每当我有新的项目的时候，我就会看看这些图片，用来寻找灵感。
3. 情绪板和准备工作
Dribbble，Behance，Pttrns，Pinterest——我们有很多可以需找灵感的地方。而且很容易就能找到和你项目相关的作品。多去逛逛，你可能会从别人的经验中学会解决问题。
当我开始新项目的时候，我总会准备4个文件夹——PSD，屏，资源，灵感。我会把和这个项目相关的东西全部按下面分类丢到文件夹里面。
可以是Behance上整套案例的研究，也可以是整个应用中的一张界面设计图。
二、开始着手设计
4. 不必在乎线框图的质量
我不喜欢精雕细琢线框图。毕竟，这玩意儿只是一个过渡，而且客户能够预先准备好线框图就更好了。真正的业界好客户（而且肯定对品质也有追求的）肯定预先会以草图或者线框图的形式来表述需求。
线框图的作用是就是让彼此更好的理解目的，而不是最终结果。线框图能够帮助架构层级，让你了解大概需要多少屏界面，让你了解客户的想法
设计师必须懂得去“敏捷”设计，如果真的太在意线框图的细节，那么整个设计流程会拉长，设计师应该学会去取舍。
5. PSD - 大尺寸画布
我记得7个月前开始Badoo项目的时候，我最开始观摩了一下同事的工作方法，我觉得他不是很得要领。最好用PS做一个大尺寸画布，用来承载流程中的一些细节。我一般会创建8000*5000的画布，不是用来画出整个应用的UI套件，而是用来记录元素在不同阶段的不同状态——也就是流程。设计复用很方便，开发看到这种东西也会工作的更快。
6. 所有屏都放入一个PSD中
如果是移动应用，我喜欢把所有屏的界面设计全部装入到一个PSD中。
在设计移动应用时，我喜欢把整个流程中所有屏的界面设计全部装入到一个PSD中，整体的对比效果会更好，也更容易让他人理解你的设计理念。
元素的复用也非常方便，只需要复制一下其他屏的图层/图层组，修改一下背景或者几个图标就成了。
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”）
相关 [ui 产品设计] 推荐：
产品设计流程
- - 互联网分析新的一年到了，分享个大的东西，这个是之前团队总结的一套「产品设计流程」，里面包含了3大模块，产品前期分析，设计环节，上线总结反馈，基本上涵盖了，从需求到上线的经过的流程，相较于大型UED团队会“轻”一些，适合中小型团队. 如果所在公司内部还未有设计流程，可以参考此流程，也可以拿去在这个基础上进行改进.
[转] jQuery ui框架
- - CSDN博客Web前端推荐文章 jQuery
ui框架很多，除了官方提供的 jquery UI（如果你还不知道什么是 jQuery
UI,请看 下载了jquery
ui后如何使用），还有很多第三方提供的ui框架，因官方提供的jquery ui框架体积较大，所以很多人都不喜欢用，但不论是官方提供还是第三方提供，他们都是基于 jquery核心类库实现的ui框架.
UI框架选型
- - ITeye博客 最近公司的一个新项目要进行UI框架的选型，我把选型的思路和过程跟大家分享一下. 在选型之前，我们先要定一下选型的标准，就像人生一样，想清楚“自己要的是什么”是最重要的. 选型的标准分为几部分：. 业务是根本，和大部分的技术一样，框架没有好坏之分，只有适合与不适合. 我们项目是一个通讯类的监控项目，用户群是移动、电信等运营商的运维人员，系统的特点是：.
移动产品设计之设计
- crystal - 互联网的那点事移动产品设计最大的差异点在于用户使用场景的变化，场景的变化引发了交互方式巨大的变化，从而也使得信息呈现方式有所不同，再加上硬件设备的差异，最终使得2者千差万别了. 所以，移动产品设计之设计应该首先从用户的使用场景出发，同时考虑用户的硬件设备差异，综合以上2点去帮助用户完成某个任务. 按照我的理解，场景、任务、用户可以称之为设计的三要素，每一个设计实际上都是试图去帮助用户在某个场景下完成某个任务的.
手机产品设计禁忌
- - 落花流水——elya妞╰_╯在做手机产品设计的过程中，遇到很多看似很小，且很容易被忽略的问题，正是这些小问题，一次次的撩拨用户的耐心，让用户对你的产品心生怨念. 刚出道的朋友没有经过实战，对细节注意不多，往往都会遇到类似的问题，强调多次后，觉得不如写下来，给新人共勉. 一般按钮会有四态，不可点击效果、可点击效果、聚焦状态、按下状态.
移动产品设计新思路
- - 互联网的那点事随着时代的变迁，移动产品的设计也有了更多的变化. 用户的需求越来越多、使用的场景也更加复杂. 也因此移动产品就有了更多设计的新思路. 当然，手机的玩法虽然不再被局限在有限的领域，但是对于那些更喜欢用手机拍核桃、钉钉子以及起瓶盖的各位童鞋，还是看看本次由朱坤 @kentzhu 分享的移动产品设计真正的新思路.
从Mailbox看产品设计火花
- - 优设(UISDC)Mailbox是个基于Gmail的任务管理类的应用，任务即邮件，可以让邮件完成，删除，设为稍后提醒，放入待办项目中，推行Inbox Zero理念，是个最近比较火的产品，不过坑爹的是Mailbox下载后不能马上用，需要排队开通，本人在上周终于排到了队，经过了几天的试用，把Mailbox和热门邮件客户端Gmail,Sprrow做对比，顺便记录一些感想.
PM札记：产品设计这两年
- - 所有文章 - UCD大社区做产品差不多也两年左右了，基本上这条路是磕磕绊绊，迷迷糊糊，但好歹大方向是正确的，有空回想总结起来，唏嘘不已，看看以前对产品的看法，再看看今天对产品的认识，不仅感叹自己当初的幼稚，如今，更多的是了解了自己的无知与渺小，怀着一颗谦卑的心，继续学习，在产品这条路上寻找自己的价值. 产品职责包含很多东西，产品设计只是其中的一种职责，只是简单的描述一下我在产品设计上的弯路，回想起我的产品设计生涯，目前走过了三个阶段：.
Siri引发的产品设计变革
- Jerry - 月光博客 Siri的发布，在iphone 5的失望之后，为苹果带来了言之不尽的话题，其热度甚至超过了ios 5这个重大操作系统更新. 但是，今天希望论述的却不是这些讨论，而是设计者有意或无意之间，为某一类工具的设计产生了重大性的基础定位变革. 笔者不知道大家称Siri为何，或许会被称为“语音交互工具”吧，因为它绝对已经突破了“语音识别工具”这种“声音到文字，文字到命令”的范畴，而直接使用语音实现人机交互.