从需求到产品,如何做一份无懈可击的产品设计

从需求到产品，如何做一份无懈
可击的产品设计
本篇文章会给大家介绍完整的产品设计过程。

重点阐述产品设计思路及期间会用到的方法论，并结合例子让大家深刻地理解逻辑严密的产品设计。

导语：很多同学看过很多文章读过很多书，知道很多
产品设计的知识，但一到自己上手设计产品，总是思
绪万千，却不知道从何下手。

有一种知道很多道理，
却依然过不好这一生的赶脚。

这是因为知识还没串联
成体系，OK，闲言少叙，现在就把产品设计体系告诉
大家。

目录
•一、综述
•二、结构设计
•三、界面草图
•四、让界面草图进化为页面原型
•五、再加点调料
•六、总结
一、综述
开篇前先给大家介绍下《用户体验要素》中的5层模型：
战略层、范围层、结构层、框架层、表现层
这是纲领性的模型，是产品0-1设计的5个阶段。

战略层：产品目标及其目标用户（做什么、为谁而
做？）范围层：功能及其内容需求整合（需要做哪
些？）结构层：交互设计及其信息架构（怎样做？）
框架层：界面设计、导航设计和信息设计（怎样
做？）表现层：视觉设计（要做成什么样子？）
战略层和范围层涉及产品目标、目标用户及产品定位，这些公司一般都已经定义好了。

当我们接到任务的时候，往往就直接到达结构层和框架层的设计了。

所以本篇文章实际上是在结构层和框架层上展开阐述如何进行产品设计。

结构层和框架层特别像盖房子。

结构层是设计房子的立体结构，框架层是设计各层如何布局。

OK，
接下来先整体介绍下产品设计的过程，让大家在宏观上有个把握。

如下是产品设计过程，本篇文章也是按照这个思路进行阐述：
1.将需求归纳整理成用户任务
2.多个用户任务交织成信息架构
3.将信息架构具象化为页面流程图，并通过界面草图的形
式表达出来
4.接着根据设计原理，让界面草图进化为页面原型
5.最后加点调料，通过情感化设计和游戏化设计，赋予产
品魔力
无论是全新的产品设计，还是小小的功能点设计，都需要经过以上五个步骤。

不同的是小功能点可能没有信息架构。

如下是设计流程示意图：
产品设计过程
二、结构设计
很多同学在经过了需求分析和需求评审后，正式接到了需求任务，犹如接到了圣旨一样，迅速打开设计软件，摩拳擦掌就准备开干了。

先别急，没经过系统分析过的设计方案，很容易因为某些因素没考虑周全，而漏洞百出。

最后到了需求评审阶段还是要被打回来。

需求到界面设计还有一扇窗，这扇窗就是用户任务/信息架构。

信息架构犹如骨架一般，支撑着整个产品。

我们需要将需求归纳成用户任务，多个用户任务交织成信息架构，最终通过页面原型表达出来。

重点是如何设计用户任务。

比如你现在是产品经理，需求是怎么提升报名live的用户数。

你会怎么做？建议先思考一下，再继续往下看。

首先，需求是提升报名live的用户数。

那么用户任务就是报名参加live。

接下来就是将用户任务进行拆解，拆解为N个步骤，然后提升每个步骤的转化率，从而提升报名用户数。

怎么拆解用户任务呢？
其实就是根据用户决策路径进行拆解。

决策路径有好几条，所以，一个用户任务，可以拆解为多条分支。

这里选取一条可能最多数用户的决策路径作为举例：
看到live->了解了live->产生兴趣->报名
产品设计的依据就是这条决策路径，知道了这条决策路径，我们就可以在每个步骤上面做文章：
大体功能结构出来了，但太干了对不对？有没有办法提高
live的置信度，并降低用户心理门槛，让产品更性感一点呢？
如上图加黑部分就是可拓展的点。

当然，方法是非常非常多了，也没有标准答案。

这里重点在讲思路，不代表对错。

这里值得一提的是，在“看到”这个环节，还采用了一种很轻巧的方式。

上线了一个live主讲者可以给他人免费赠票的功能。

当对方报名参加后，live活动信息就会出现在其feed流里。

这样不仅可以让更多人看到，也可以借助主讲者的力量来推动live的热度，也有利于提升大咖的活跃度。

让更多大咖能参加到live的分享中来，产生更多优质内容。

上面用live的例子做了简要介绍。

下面以点外卖为例，详细介绍产品设计流程。

同样重点在阐述思路，设计千万条，思路第一条。

1、理清用户决策路径
点外卖的主流决策路径大致是这样：
挑选商家->浏览并挑选商品->下单->填写收货地址->查看订单详情->结算->等待发货
这里插播介绍下“用户决策路径”我们知道，设计产
品前需要知道目标用户是哪些，并给这群用户做画
像，研究他们的心智模型。

心智模型研究的是“用户
如何通过过往的知识沉淀来理解新事物的”。

那么决
策路径就是其心智模型的外化表现。

那很明显，不同
的目标用户群体，其心智模型是不一样的，比如老人
和年轻人，对新事物的理解肯定就存在很大的差异。

心智模型不一样，决策路径就不一样。

所以，针对不
同的目标用户群体，即使是同一个需求，做出来的产
品设计方案也是不一样的。

当我们提供的操作步骤跟
用户的决策路径相符时，就会比较符合用户预期，学
习成本大大降低。

2、分解用户任务
明确了用户的决策路径后，我们就可以继续把大任务分解成很多子任务。

点外卖任务分解
可以看出，每个子任务实际上都是一个功能块。

接下来组织合并相关任务得到页面流程图，为设计界面草图做准备。

3、组织合并相关任务
设计的最终目的是用可视化的界面将功能点展现在用户面前。

经过简单的划分，点外卖的任务已经分解为26个功能点。

如果将这些功能点直接展示给用户，无疑很难操作和理解。

所以需要组织合并相关任务。

经过整理后的信息更易于用户理解。

我们可以把连续操作、操作相似、信息相似的任务归类到同一个模块中，然后把几个模块归类到一个页面中。

组织合并相关任务
可以看出，26项子任务被整理到了9个功能模块（子任务不同底色代表不同模块），9个功能模块又分别被归类到了5个页面中来。

实际上一张信息结构图就自然而然的呈现出来了。

我们可以将这个信息结构图，再具象化为页面流程图：
页面流程图
4、排列子任务优先级
排列子任务优先级的目的是分清主要任务和次要任务。

主要任务重点突出，次要任务删除、组织、隐藏或转移。

就可以在界面设计的时候做到结构严谨、条理清晰。

我们可以根据需求的广度、频率和强度来确定任务的优先级。

即根据用户数量、使用频率和需求是否强烈(重要)，共同判断优先级。

子任务优先级
用不同底色做了区分，分别对应5个页面。

通过综合评分可以很直观的看出同个页面中不同子任务的主次之分。

具体页面设计的时候，可以把主要任务放到页面的重点区域、也可以在视觉上做突出、也可以加大展示面积等等，次要任务可以弱化为一个功能按钮或者弱化视觉表现等等。

通过灵活的交互方式，让重点任务重点突出，方便用户决策。

三、界面草图
界面草图跟结构设计是紧密联系在一起的，前文得出了页面流程图和任务优先级，现在就可以针对每个页面进行设计。

现在原型设计软件总算可以派上用场了吧？
还没呢，别着急。

因为在界面设计的过程中，要考虑的点会越来越多，自己的想法也会不断调整，有时也会不断被generate激发灵感，产生创意。

以草图的形式，效率可以大大提高。

设计草图的时候，还是要经过几个阶段。

思路还是先大局后细节。

首先确定功能块的页面结构、导航、位置和顺序，然后详细探讨每个功能块的显示内容和结构。

每1000个产品经理，就有1000个界面设计。

要看自己的积累，思考，领悟。

当然，第一个版本的产品设计并不完美，需要持续的用户研究和数据驱动的方式来迭代优化。

以后我会写文章介绍如何通过数据驱动和黑客增加的方法来优化产品功能。

可以先关注我的专栏
下面是我随便画的草图。

大致表达一下这个想法就好了。

哈哈哈，请不要介意。

界面草图
在设计功能块时，对子任务进行分解和细化。

反复重复这一步来完成细节。

四、让界面草图进化为页面原型
现在我们终于可以把界面草图放到原型设计软件上了。

进化为页面原型的过程中，并不是简单的搬运，而往往会有思想上的再一次升华。

因为之前没考虑到的事情，现在会被考虑到了。

比如文案显示的字符数，显示两行还是一行，显示多少个字后就要用省略号表示，还是需要提供一个“展开”按钮。

无论图标显示4还是5，在小屏幕上5的显示都有点小，不太友好。

你要判断分辨率吗？
具体交互细节是否有简化的空间。

交互细节上就需要具体问题具体分析了。

五、再加点调料
通过理性分析得出信息架构，进而得出界面设计。

但人毕竟是情感动物，情感会很大程度上影响人的判断，所以产品设计不得不考虑情感设计。

我们可以通过情感化设计和游戏化设计让产品更有魔力，从而赢得用户的芳心。

情感设计和游戏设计包含了大量的设计技巧，这也是一个很大的篇幅，所以我会放在下一篇文章里来讲。

六、总结
逻辑严密的产品设计有点像推理过程，层层递进。

总的来说，无论是全新产品的设计，还是功能点的设计，都要先把握全局，再逐步深化细节。

总的设计步骤如下：
1.理清用户决策路径
2.分解用户任务
3.组织合并相关任务
4.排列子任务优先级
5.设计界面草图
6.让界面草图进化为页面原型
7.再加点调料
这，就是产品设计的秘密。

参考资料：
《用户体验要素》、《破茧成蝶》、《简约至上：交互设计四策略》
产品系列文章：
非常感谢大家关注我的专栏《产品说》，一起学习完整的产品理论和实操方法。

(#^.^#)。