设计师工作流程，手把手系统带你学产品学运营

来人人都是产品经理【起点学院】，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等等。有条件还是翻墙吧。

交互原型完成后，要听听大家的意见，对于大家的意见要有选择的听，有的程序员会为降低自己的工作量说这个方案不好之类的，或者有的程序员会过度考虑边缘情况，这时候要站在用户立场坚持自己的设计。如果程序员说这个方案开发起来要很久，发版本之前根本来不及，这时候还是要妥协的，商量出一个