产品设计阶段要全面确定整个产品策略、架构、功能、外观，从而确定整个产品系统的布局。

5.1 什么是产品设计

产品设计共有3个阶段：架构设计、原型设计、体验设计。

架构设计阶段：建立产品的骨架，并确定产品的内在因素；

原型设计阶段：确定产品表现层的基本轮廓，并确定产品功能逻辑；

体验设计阶段：确定产品风格形象，并确认用户体验流程。

01.产品设计的工作

输出物：产品需求文档，产品设计是产品在开发之前的最后一项重要的工作内容。

02.产品设计的逻辑

先从宏观的角度解读全貌，在不断的细化到细节，是一种由粗到细的思维方法。

5.2 架构设计

不懂技术的产品经理不是一个好架构师。

5.2.1 什么是架构设计

产品的成败最主要是由市场方向和产品架构决定的。细节设计决定不来产品的成败，只是锦上添花的行为。

总结为5个层面：系统层、数据层、业务层、框架层、表现层

架构设计过程中，数据结构的知识至关重要，最起码要能看懂数据字典。

5.2.2 产品公式

算法＋数据结构＝程序

01.数据结构

数据结构由元素和关系两个因素组成。

采用思维导图的方式用信息结构图罗列信息内容。

02.算法

算法是解决问题的方法。

03.程序

互联网产品的本质就是程序。

5.2.3 产品形态模式

01.形态模式的工作原理

（1）C／S结构

Client/Server，客户端／服务器

（2）B／S结构

Browser/Server,浏览器／服务器

实际应用中，也会将两种结构融合使用。

02.形态模式的产品类型

（1）功能型产品（玩数据）

实际的需求文档就是对这些数据处理逻辑的表述，让程序员明白怎么处理每次的服务请求。

（2）智能型产品（玩技术）

比如人脸识别］语音识别、图像处理、视频处理等。

5.2.4 产品架构vs技术架构

产品架构的目的是梳理产品的功能逻辑和交互体验，背后隐含的是一套基于运营角度的规则机制。

系统层：明确产品的模式和形态；

数据层：产品的数据结构，通常产品经理只要使用思维导图软件梳理出信息结构即可；

业务层：产品的业务模型和算法公式，目的是描述功能逻辑；

框架层：产品的导航、频道、页面和模块元素，是产品的骨架和肉身；

表现层：产品的交互体验和界面风格，是产品的皮肤和相貌。

MVC模式技术开发框架：

5.2.5 产品架构的5个层面

产品架构实际上是以结构化思路把产品从抽象的概念中抽离出来，用具有层级分明的思维方式将其形象化。

01.系统层

不是指OS操作系统，而是指产品的系统层次结构，属于一种名词定义。

02.数据层

指的是数据结构，需要产品经理对动态的数据形态和流转过程非常了解。非技术出身的产品经理可以使用信息结构图的方式代替，用思维导图的方式罗列信息元素和标注彼此关系，由技术人员来构建数据层。

产品经理可以采用信息结构图的方式和技术人员沟通相关的数据需求，让技术人员整理出一份数据字典，数据字典要保持实时更新。

03.业务层

产品的业务模型、算法公式、功能流程的层级，主要描述产品的逻辑特征。

04.框架层

产品的导航、频道、页面、和模块元素，也可以理解为产品结构图或者界面线框图。

05.表现层

产品的交互体验和视觉界面。用户体验的知识在这一步广泛应用。

5.2.6 架构设计的技术误区

产品是没有前台和后台之分的，在构架视角中，前台和后台都是对数据进行操作，前台面向的是用户群里，后台面向的是运营群体。

前台和后台的使用者都是用户，只是操作功能不一样而已，从数据层面考虑，彼此没有区别。

5.2.7 架构设计的思维方式

现在的科技实际上都是基于20世纪的大师们留下来的宝贵理论。

作者一贯主张万物都有演进逻辑，没有凭空而出的创新，只有不断迭代的进步，没有积累就没有爆发。

多多关注技术领域的动态，折腾和体验一下各类开源程序，学习一些技术知识和原理，感受一下技术的魅力。

中国互联网缺少产品层面的创新，其实也跟不少人没有早期网络传承有关。

5.2.8 架构设计的心得总结

产品架构是一种结构化思维，将产品的各个层面结构化梳理。

5.2.9 产品线构架设计示例

5.3 原型设计

5.3.1 设计前的准备

把产品的信息内容和功能结构进行一次梳理，产生一个轮廓概念后才能更好的入手设计工作。

01.罗列信息（信息结构图）

辅助设计人员创建数据库的图表，辅助产品人员进行产品功能规划的参考。

02.梳理需求（产品结构图）

避免在设计产品原型时缺失页面或模块。

5.3.2 原型设计的3种表现手法

需要更加深入了解每个页面上的元素和这些元素的属性。

原型设计的表现手法主要有3种：手绘原型、灰模原型、交互原型。

01.手绘原型

在初期验证想法时非常高效，也方便讨论和重构，适合敏捷开发时快速出原型。

从工作效率的角度考虑，建议先通过手绘的形式快速在草纸上绘制出产品的原型，推演和讨论方案的可行性。当方案的可行性被验证后，我们再根据个人习惯或团队要求，通过软件工具进行更深入的设计。

02.灰模原型

也称为平面原型，缺少交互效果，仅仅是将产品需求以线框结构的方式展示出来，让产品需求更加规整的直观展现。

03.交互原型

常用软件Axure RP，通常情况下，交互原型的设计要早于产品需求文档，是产品经理想法推演的重要一步。

原型设计是为了帮助我们细致的考虑方案，并论证方案的可行性，同时也是为了产品宣讲时让听众能够清晰直观的了解产品，避免抽象的语言描述导致听众理解困难和理解偏差。

原型设计也是为了保证产品在执行过程中是按产品经理最初设想的需求和期望完成的。

最好的方案是采用最便捷、最高效率的方法。

5.3.3 设计后的完善

在产品功能的逻辑细节方面，原型无法直观展示，还需要完善产品的业务逻辑，同时可能还会涉及一些原型的细微调整。

完善产品业务逻辑的时候，相关的体验设计工作就可以开展起来了。设计师协同产品经理完成产品的视觉和交互设计工作。所有工作全部完成后，整合成产品需求文档，就可以进入开发阶段。

01.用例模型（产品用例图）

用例是一种描述产品需求的方法。

用例模型是由用例图和每一个用例的详细描述文档所组成的。

产品人员的用例主要是为了方便技术研发和功能测试时，让参与者更好的理解功能的逻辑。

产品用例是一种通过用户的使用场景来获取需求的方式，每个用例提供了一个或多个场景。

用例图

用例图包涵一组用例，每一个用例用椭圆表示，放置在矩形框中，矩形表示真个系统。矩形框外面的小人，表示参与者，参与者不一定是人，可以是其他产品、软件或硬件等。某一参与者和某一用例连起来，表示该参与者和该用例有交互。

UML是用例图形符号最流行的标准。

用例描述文档

还需要描述每一个用例的详细信息。

互联网产品中，用例的使用越来越少，通常有了产品原型加上功能流程图和功能说明文档，就能够将产品需求详细的表述清楚。

02.逻辑流程（功能流程图）

一些大公司由测试人员撰写用例。

现在业界比较普遍采用“UML活动图”或者“功能流程图”表述产品的业务和功能逻辑。

活动图是UML用于对系统的动态行为建模的另一种常用工具，它描述活动的顺序，展现了从一个活动到另一个活动的控制流。本质上是一种流程图。

千言万语不如一张图。

使用图形的方式表述产品的算法逻辑，可以让阅读者非常形象直观、一目了然的理解产品需求，同时也不会产生“歧义性”。

当逻辑出现错误时，通过流程图也能非常容易的发现，并且可能直接转化为程序需要描述文档。

5.4 体验设计

5.4.1  什么是体验设计

秉承以用户为中心的设计理念

体验设计主要分为3个阶段，分别是线框原型阶段、交互体验阶段、视觉界面阶段。

第一阶段产品经理通过线框原型进行产品方案的推演，论证方案的可行性；

第二阶段则考虑产品的交互形式；

第三阶段则由UI设计师接收，对界面布局进行视觉上的设计，确定产品的色调风格、字体字号等各类视觉元素。

5.4.2  4个设计理念

分为4个优先等级，形成一个金字塔设计理念。

01.有用：识别需求的有效性，抓住核心需求

在定义及开发之前需要明确的一个产品方向，确保产品有着明确的功能定义和用户定义。

02.可用：重塑并保障需求，满足不同使用场景

保障一个产品的审核标准，确保产品不会有功能性BUG的出现，确保产品的安全、速度、兼容、流程等方面的性能。

03.易用：梳理结构流程，便于用户使用

“易用”的设计理念就是用户体验，需要我们在产品设计时，充分考虑用户行为习惯和使用场景，降低用户的学习成本、使用成本。

04.好用：优化设计界面，符合用户群体喜好

注重视觉的表现，从视觉图像上激发和提升用户的潜意识操作行为，减少用户的思考时间。

UI设计的最高境界就是提升用户操作效率，通过色调影响用户的操作习惯，用颜色或图形明确产品功能／内容的主次和展示，让用户不用想就知道如何操作，这也是一种界面语言。

产品发展过程中，首要的问题是先保证完成产品的核心功能，确保产品对于用户“有用”和“可用”，然后快速迭代来完善并改进，优化产品的“易用”和“好用”。

5.4.3   10个设计理论

（1）系统标准－依照用户具体的使用情境和需求来决定是沿用标准还是创新。

产品设计应该遵循平台系统的设计规范。根据具体的需求和目标用户的情境决定是否套用标准，或者创新标准。

（2）目标导向－以用户为中心，关注用户目标而不是关注用户要完成的任务。

（3）直觉体验－设计方案必须能够引导用户做出最符合直觉的反应行为。

（4）成本控制－从细节开始减少用户的操作及学习成本，使用户快速上手和识别产品特征。

（5）需求设计－以用户的需求为中心，避免掺杂个人的主观喜好。

尽量傻瓜化

（6）减少界面－尽量减少界面间的交互，避免新页面切断用户使用的流畅感。

（7）概念内化－避免概念输出，要尽量以用户听得懂的语言来表达设计。

无法避免的使用概念，应当在周边有协助解释。如加问号，点击显示描述层。

（8）信息交互－基于信息层面的交互，应该简单、自然、易懂。

交互要符合用户期望模型及下意识行为。

（9）简洁元素－减少视觉元素的堆叠，提高交互元素的辨别，合理隐喻交互元素。

在采用图形隐喻功能的时候，应当考虑用户的认知，降低用户学习和识别的成本。

（10）明确结构－合理划分界面的逻辑结构，按照不同的内容和功能进行划分，突出结构主次。

坚持每天玩一款产品。