单打独斗的产品设计师工作流程总结

来人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。

我从入行开始就在一个做自己产品的小公司工作，到现在已经三年了。刚开始工作的时候什么也不懂，老板说让出效果图，就开始直接上手作图。后来看的内容多了，会的技能多了，慢慢开始改进自己的工作流程。现在已经可以快速并且一步步扎实的完成工作。工作内容包括：获取需求、收集资料、结构图、交互设计、视觉设计、切图标注。希望能和大家交流，进步。

一、获取需求

我所在公司的需求都是老板或者产品经理直接告知，根本没有用户测试部分。而且用户群根本不在同一地点，也不说中文。这种情况下我的处理通常是先看这个需求急不急。

如果这个需求很急，并且老板也明确跟我说要一个什么样的功能。我会直接开始着手，按照老板的要求直接完成设计，出视觉稿。

如果需求不急，而且涉及的内容比较多，我会多问老板以及和客户对接的同事一些客户的反馈，毕竟他们和客户有直接接触，比我自己纯想想更能接近用户。当然最好的还是要做用户测试，这也是我目前尝试的目标，希望能说服与客户对接的同事，进行用户测试。

这个用户测试是指观察用户使用产品的过程，毕竟公司现在已经有线上的产品了。下一步就可以考虑建立人物模型了。这样公司的整个设计流程就能完整了，对产品以后的发展也是有好处的。

工具：omnifocus 只要能记录下需求的载体都可以，最好能保证以后可以查看，留个凭证。

二、收集资料

了解需求后，要整理整合相关信息，尤其是要设计一个完整产品的时候。

这个过程中要明确以下内容：

1. 这个产品依赖的硬件。是客户端还是网页，网页要不要考虑pad端。这个产品是不是为某种硬件设计的，比如智能手表、智能眼镜等。这些硬件屏幕的分辨率，这个平台有没有设计规范，毕竟后面的设计工作也是自己做，就顺便先了解了。
2. 开发技术上的约束限制。
3. 如果是再设计，要熟悉产品的一些特殊限制。比如在日语输入情况下，不能用enter键代替搜索、确认等按钮，因为日语输入时需要enter键确认输入。中英文输入都没有这个问题。那么设计的时候就一定要有个按钮。

以上搜集的资料要列下来，可以放在结构图之前，一是提醒自己，二是做个记录。

三、结构图

结构图这个名字是我自己起的，这个步骤主要是理清思路，为画交互稿做准备。我说的结构图包含概念模型、层级图、流程图等。依据项目的复杂度、时间、团队习惯，自己把握这几种图的精细程度。

要做好结构图的版本管理工作，每次修改更新一个版本，并列出大致的修改内容、时间，如果涉及到多人协作，要把修改人写进去。

如果只是自己看，纸上草图或者用软件画，都可以。如果要和团队成员共享，使用软件是比较好的，画出来好看，而且易修改。

1. 概念模型就是把这个产品涉及的用户、环境、提供的服务大致画个关系图。具体可以参考《高效沟通设计之道》第4章中的方法，可以参考我的读书笔记http://www.jianshu.com/p/377f60e1e88f。
2. 层级图就是把产品具体的层级结构规划并画下来。基本遵循由大概到具体的顺序。先列出大致的几个部分，然后慢慢细化，并增加自己想到的需要注意的点。具体可以参考《高效沟通设计之道》第5章中的方法，可以参考我的读书笔记http://www.jianshu.com/p/174a87393d6b。
3. 流程图就是把用户想要完成一个任务的过程一步一步列出来，各种操作的可能性要尽可能多的考虑到。可以参考http://www.woshipm.com/rp/149653.html这位作者分享的流程图。

做完流程图后，可以在晨会或者专门开个会，把层级图、流程图拿出来跟大家讨论一下，看看自己规划设计的是不是合理，有哪些自己没想到的情况，补充完整。对于大家的意见要站在用户立场有选择的听，设计师是唯一代表用户的人了。

这部分用到的软件和交互设计部分用到的软件放在一起讨论。

四、交互设计

有了结构图后，我会根据层级图先在纸上快速画一画，然后结合流程图，多想几个能让流程更顺畅的方案，而不是拘泥于层级关系。没思路的时候要多找些参考启发下，也可以先把问题放放，过段时间再来想会有新的更好的想法。时间允许的话，可以一直想到自己满意这个方案，不觉得好像差在哪里为止。但是这样效率不高，而且后面还是自己进行设计，到时候有想法再改也可以。

交互设计过程中，有两点要尽量遵循，一是要平台的设计规范，二是通用的交互设计原则。在没有更好的解决方案之前，遵循以上两点不会出错。当然也不能为了不出错而不追求出彩。我的经验是，通常一个产品里出彩的地方有1、2个就可以了，处处出彩会让用户无法专注自己的任务。

我感觉其实APP的设计会比网页设计要简单。无论是iOS还是Android都有设计模板，拿过来用就能设计个及格的方案。网页面积更大，可以承载的内容功能更多，设计方案的可能性也越多。

如果平台规范和通用原则都无法让我想出设计方案，那就是时候拿出大招--找参考资料了。找的资料不必局限于想设计的部分，比如我想设计登陆，不一定只找登陆，也可以找一些表单的页面，“跨界”擦出的火花也不错啊。找参考要明确自己的目的，我是为寻找什么来翻看这些参考资料的，不能迷失在参考资料里，那样会降低效率、浪费时间。找参考不要抄袭，别人的产品这样做放在自己产品身上未必合适，就像一件衣服穿在名模身上是爱马仕，穿在黄渤身上就是水管工一样（不是黑黄渤，其实我是青岛贵妇的粉）。

我常用的找参考资料的地方：dribble、enhance、Pinterest、calltoidea等等。有条件还是翻墙吧。

交互原型完成后，要听听大家的意见，对于大家的意见要有选择的听，有的程序员会为降低自己的工作量说这个方案不好之类的，或者有的程序员会过度考虑边缘情况，这时候要站在用户立场坚持自己的设计。如果程序员说这个方案开发起来要很久，发版本之前根本来不及，这时候还是要妥协的，商量出一个用户体验不会太差又能来得及的方案。做设计一定要以open mind的心态来听意见，大姨妈大姨夫期间讨论之前先念三遍open mind，再进行讨论。如果团队改需求之风盛行，拿出交互稿让老板拍板也是不错的选择。

接下来结合上一部分说说软件。我用过mindmanager、omnigraffle、Axure。mindmanager画层级图比较有优势，但是不能无缝对接交互设计。omnigraffle、Axure都可以在一个文件里完成结构图和交互原型。omnigraffle画结构图有优势，自带交互设计中用到的各种模板（APP和网页），但是导出的文件不能像axure导出的文件那样有个左边栏的页面导航，动效也很有限。axure能画结构图，但不能自动排版，另一个缺点用浏览器打开高版本的Axure导出的html文件需要安装插件，除非使用Axure share，优点是有导航、动效丰富。 这两个软件各有利弊，看自己习惯吧。

对于APP的草稿交互，我用过pop这个APP，先打印纸质模板，把纸上的图拍照，使用pop简单制作个可点击的原型。有了这个原型，讨论起来会更加方便，而且说不定能再点击过程中发现问题或者想出新方案。

具体指导交互设计的内容我推荐《about face 4》的二、三部分，看完绝对能让自己的知识形成体系，摆脱知其然而不知其所以然的窘境。

五、视觉设计、动效

有了交互原型，完成视觉设计还是比较省心的。千万不要同时设计交互和视觉，哪怕只是简单地在纸上画画交互，不然效率低、易出错，自己也特别累。

视觉设计开始之前要了解企业的品牌、主色，用户的喜好。无法直接获得用户喜好，那就结合产品提供的服务特色定义主色调，风格。比如餐饮常用红色、黄色。也可以考虑老板的喜好（通稿率会比较高，这个不是正途啊，有的老板以自己的喜好判断用户的喜好）。

下面开始找参考资料，看看这个色调的大牛设计的好看的界面是怎么配色的，尤其是各种灰度的高级灰用起来，真比普通灰效果好很多。看的过程中，找个合适的辅色，色相上不要超过2种，比较难驾驭，目前我的水平是最多两种颜色。当然也可以出现多个色彩，但是除了主色、辅色外的这些色彩占得面积一定要小小小。把这些颜色加到色板中，方便设计过程中取用。

基本确定好颜色和风格，就可以画起来了。根据交互原型想表达的意思，了解信息从高到低的重要程度。重要的内容要突出出来，通过面积、颜色等，不重要的内容弱化，该小的小，该灰的灰。画完一张图，试着眯眼看这张图，能一眼看到想突出的内容，基本就算成功了。画的过程中，颜色不够用，可以继续加。

目前我在尝试建立产品的UI kit，将设计拆解为一块块可重复使用的模块。这样开发后期想加功能，可以先从模块下手，提高效率，不用等着出设计稿了。初步的经验是，一块模板可以是2、3条内容组成的表单，确定取消按钮组合、弹框等等。做这些UI kit时候，里面的文字内容最好用不明确含义的字，比如lorem。要跟开发们特意说这件事，不然他们会忘，因为公司以前没有这样的习惯。

关于动效，我的体会一定要结合产品功能，不能为了加动效而去硬加，要关注产品整体。特别炫的效果的不要太多，1、2个够了，多了眼花。润物细无声动效要有，比如页面跳转、折叠收起等等，可以极大的提升产品逼格。常规的动效一定要找参考，不能整太多的幺蛾子，设计的太跳会让用户“出戏”。但是条件允许条件下，那一两个特别炫丽的，可以设计得特别一些，目的就是让用户“出戏”，形成记忆点。

现在说说软件，我要安利sketch了。以前我用ps设计，后来试用了Sketch，立马抛弃了ps。sketch可以直接创建各种手机屏幕尺寸和网页的画板，symbol 和shared style 更是好用的不要不要的，特别适合搭配UI kit。再有各种好用到哭的插件，一键生成各种头像、人名、文字等等。重点来了，sketch连接后续动效principle和切图zeplin会极大提高效率。

principle据说可以直接接受sketch拖动来的图层，但是我还没成功过，所以我使用复制黏贴也基本能满足需要。principle可以自动生成过渡效果，对生成的动效不满意，还可以自由调整。

六、切图标注

准备切图的时候，我会把需要切图的图标们，单独放在一个画板中，避免重复切图。

对于APP的切图，我会对复制过来的按钮、背景尺寸比较大的图进行压缩。比如100px宽的按钮，除了圆角部分，中间的区域可以调整为10px宽，方便Android开发们绘制.9格式。sketch可以一次导出所有需要的尺寸，并命好名。

标注我使用zeplin，在sketch安装插件后，可以直接在sketch里选择想要导入到zeplin的画板，并导出，方便查看绝对尺寸、相对尺寸、字体、颜色等等，还可以自动为色板中的颜色命名（Android开发很喜欢）、生成代码，复制文字内容，对开发们很友好。Zeplin每个账户可免费创建一个项目。可以把sketch的画板命好名，几个产品都导入到一个项目里，但是我不推荐这样做，会很容易混乱。还有一个方法是多注册几个账号，需要邮箱的话，可以去outlook多注册几个，不需要手机号。

总结

说了这么多从知识、工具到职场体会的零碎内容，一是希望能帮到需要的人，二是想请大家批评指正。单打独斗最大的坏处是同行交流少，我写文章也是为了能弥补这些不足。以上说的这些都是建立在对产品有了解的基础上。如果是新接触项目的产品设计师，我建议先从了解产品开始。

本文由 @darcy 原创发布于人人都是产品经理 ，未经许可，禁止转载。