我怎么做产品设计？

本文包含了我个人进行独立产品设计时的流程和工作心得，非科班、非大公司流程、非一定正确，欢迎大家批评指正，如果有帮助，也希望得到你的鼓励。

产品经理或产品设计是一个在不同环境中差别很大的岗位，大公司和创业公司、大团队和小团队、人员配备情况等都会影响我们工作的内容和合作方式，而每个人相信在一定的工作磨练之后，都建立并积累了属于自己的工作方法。

作为一个混迹于小团队甚至个人独立设计开发应用的学生，我是这么工作的：

idea的产生

我主要的设计工作都来源于自己的意愿，一般是我加入的某些小团队，或者是我想要满足的某种需求，甚至也可能是我个人的产品设计练习。之前有很多朋友问我为什么去创业，或者参加这么多的项目，我回答的是『只是对于不好用或者不方便的东西，想要去改进它罢了』。

我是一个比较敏感和细致的人，有比较强的共情能力，因此总会在自己或身边的人身上发现一些需求，那么需求很多，idea 也会有很多，我们怎么选择呢？

脑补

一般一个想法出现，我会从两个方面去论证它。

第一，这个需求是否在用户中普遍存在。普遍的意义不是说要所有人都需要，但是至少某个需求应该有一定数量的用户群，这样才有解决的价值。结合自己的日常观察以及生活经验，首先虑掉那些明显不典型的需求，而对于难以确认的，则在下一个『用户调研』的环节搜集信息。

举个例子，之前和朋友讨论一个功能，是开发一个 App，一键将整个手机系统和所安装的所有（或常用的）其他 App 都变为夜间模式，并且可以和正常模式进行切换。这个需求乍一听很新奇，因为阅读类产品都会设计夜间模式方便在黑暗环境下的阅读，所以是否需要一个手机整体大切换的产品呢？我个人认为这个需求并不真实存在的，首先我询问了身边喜欢看小说的朋友，他们大部分甚至不使用夜间模式来读信息，而是选择在有光的条件下阅读；其次，整体替换手机阅读模式会带来不确定性、权限问题、夜间模式匹配设计问题等一系列状况，因此这并不是一个好的选择。

（如果有朋友觉得这个想法不错，欢迎讨论）

第二，这个需求的技术难度和实现可能性。当一个需求有比较明显的用户群时，就可以从技术以及设计角度来进行分析，看是否能够实现。

举个例子，我早上上班经常要乘坐地铁，在早高峰是总是苦于如何快速找到座位。我相信这个需求很多人都有，选择站位和观察乘客都是一种技巧（写过一个知乎答案：地铁如何判断哪个位置的人会早下车？）。但是仔细考虑一下这个需求的解决方案：首先，乘客需要贡献自己的上下车地点（隐私问题，激励问题）；其次，需要精确到某一个车厢甚至具体的某一个座位（定位精度问题、网络通畅问题）；很快会发现，在一个信号时有时无、乘客摩肩接踵、隐私敏感的环境下，这个需求实现难度非常高。

用户调研

用户调研环节，我个人比较喜欢采取访谈的形式——事先准备好一些问题和我关心的要素，在网上聊天、面对面沟通、实际情景模拟等场景下，进行调研。调研的主要目的，一方面是确认需求的普遍程度，另一方面则是调查需求解决方案中的一些用户细节。比如 O2O 产品中的单价、社交产品中的兴趣点等等。

关于调查问卷，我之前针对不同的项目做过很多次调研，多的时候可以回收上千份有效答卷。设计调查问卷时应该注意，这种形式更适合整理数据性质的信息（价格、使用时间、用户分类占比等），而对于一些比较感性的问题不太容易得到准确的答案；另一方面，投放人群也需要提前针对你所要调研的信息做好设计。

核心页面绘制

前面几个环节，着重从用户需求分析等产品角度讨论。而从这一阶段开始，更多的涉及设计方面的工作。有的人在设计产品时会先绘制流程图和结构图，或者先画线框图来说明产品逻辑，最后再绘制界面。这个地方我的习惯和大家有些不一样，也不一定是正确的做法。

当开始进行设计时，我会首先根据之前脑补+调研的内容，绘制3-5页高视觉保真的界面图。这么做的第一个原因，是我想先确立产品的基调（颜色、布局等），更重要的是，我打算把最核心的功能先确定下来。

直接绘制流程图会有一个小问题，就是不容易抓住重点，有的时候会陷在某一个细节里。《体验·度》中提到一个例子：

我们用百度新闻客户端来举例。在做新闻客户端的时候都会思考哪个信息是用户每天都想看到的，调研结果是『天气』，既然是天气我们是否要将天气做得更炫酷呢，甚至点击后显示一周的天气呢，如果你问用户，答案是肯定的；既然是如此绚丽的 UI，我们是不是要进行微博分享呢？用户依然认为是的；那么既然分享我们是否要增加查看评论功能呢？这时候你会发现我们讨论的点已经和新闻客户端完全无关了。

所以，先画几页核心页面，把最重要的功能确定下来，并且在后面的流程中时刻提醒自己，不要跑偏了。

流程图与结构图

一般不会在操作流程上百分百绘制流程图，而是针对需要着重设计的功能来绘制。下面的例子是一个O2O 外卖配送产品的泳道图（部分）

而结构图就需要把产品可能涉及到的每一个页面表达出来，这无论是在产品讨论还是开发沟通，甚至是用户调研阶段都是很有用的。注意，结构图主要表达的是层级关系，直接相关的就是产品的导航结构以及页面层次，可以使用颜色、树状图等进行区分和强调，而至于页面之间的跳转关系，则可以在交互设计中再着重表达。如下图，是某习惯养成产品的信息结构图：

视觉设计

视觉设计阶段，根据前面定下来的基调确定 VI （视觉系统），根据信息结构图来明确导航结构（虽然大部分时间这属于交互设计的工作），最后把每一个页面的真实视觉设计稿绘制出来。

如果可以的话，最好使用可以投影到手机上的软件实时查看设计效果。比如 Sketch 的 mirror 功能，还有 Skala Preview 都是比较常用的软件。

视觉设计的另一个工作，就是切图和标注。把所使用的控件按照最小单元导出，并且单独复制一份视觉稿，在上面对形状大小、尺寸距离、字体和颜色等信息都进行标注，方便开发工程师的工作。注意，对于某些通用的控件，可以单独标注，就不需要重复标注了。

交互设计与文档补完

然后呢，我需要设计每一个页面的每一个状态所呈现的视觉。比如打卡类应用根据当天的打卡次数，打卡按钮会有不同的文案；比如输入框输入了不合理的信息，应当反馈给用户；比如信息呈现页面如果内容为空，需要增加文字或图片说明；再比如网络不通畅或者刷新、发送失败，又需要通知提醒。总之，在这个阶段，需要考虑很多用户使用上的细节，多用极限思考的方法模拟用户的极限操作，往往会有新的发现。

一般，我会使用视觉图+文字注释+引导线的方法来做交互设计。

完成了这些内容之后，如果有需要，还可以进行动效设计，使用一些原型设计软件可以呈现出比较好的真实模拟效果，用以用户实际测试或者项目演示。原型设计软件主要考量的是这样几个因素，不分先后，分别是上手难度、效果复杂度、可否进行代发复用等，这里我推荐几个软件：

Axure，是人都知道，就不细说了，操作简单，效果一流，比较适合制作相对完整的产品原型。但是，不能制作比较复杂的动态效果，另外原型设计工作导出文件为 html 格式，对于原生应用开发难以复用。

Quartz Composer，俗称 QC，结合 origami 插件能够降低使用难度，但是依然有陡峭的学习曲线。效果出众，几乎可以实现你想到的任何动态效果，并且使用 pop 引擎能够实现代码复用（仅iOS），值得注意的是，QC 比较适合去制作某一个特定的效果，而不适合描绘整体。还有一个类似的软件叫做 Form，被 google 收购后免费了，在手机上浏览效果不错，和 QC 非常类似。

Xcode storyboard，故事版，其实就是直接开发只有页面结构的 App 了，使用 Swift 语言大大降低了难度，不过因为需要开发和编程，总体还是有一定上手难度的。优点不用多说，效果好，代码无缝复用。

当然，真正的工作中也绝不仅仅只包含这些内容，还有很多细节、工具和文档都是根据实际情况来选择的。不知道大家一般怎么工作和练习呢，如果不介意的话，可以留言或者联系我一起交流，互相学习，一起进步。