5.1 设计信息架构：设计让产品立得住的骨架
5.1.1 解析信息架构：收纳信息
信息架构：为了让人们更方便地获取信息，满足人们的需求
信息架构的三要素：情景、内容、用户
信息架构的5个组件：组织系统、标签系统、导航系统、搜索系统、隐形组件（叙词表、受控词、元数据）
设计信息架构的思路：
第一步：利用信息架构三要素来确定范围
情景：在日常的办公环境中
内容：工作中处理的邮件、文件等办公信息
用户：希望能够高效有条理工作的人们
第二步：通过收归整理的方法解释5个技巧
组织信息
最基础的处理信息的思路就是根据时间、字母、数字等内容，对信息进行组织分类。
B端产品经理关注现实业务中已经存在的信息组织结构，比如现有组织架构，单据分类等，这些都需要再系统中映射出来，满足用户的预期和操作系统。
给信息加便签
用一个名称对大量的信息进行概括，就是给信息加入了标签，便于快速查询。
举个例子：我们把月份相同的文件放在了一个文件夹中，但是找到某一份文件还是不够方便。我们便使用便签纸，写上这类文件的概括信息以便查找。
设置找到信息的路径
沿着预设好的路径找到我们想要的信息，这就是导航，是我们非常熟悉的组织信息方式。
B端产品大多是工具型产品，三级结构的菜单基本可以涵盖大量信息。
搜索信息
通过搜索关键词、问题、对话的方式，来找到我们想要的信息。
B端产品更多关注的是数据的结构。
描述信息的特征
寻找信息的方式：用更多的信息描述一个事物，凭借这些模糊的信息找到它。
B端产品经理在设计产品方案时，要关注数据对象的属性。在信息架构中，称之为元数据。（比如，学生的元数据包括姓名、生日、成绩、学好等信息）
5.1.2 输出站点地图：原型设计的起点
1. 什么是站点地图
站点地图是带有层级结构的所有网页汇总。
(Axure 中的站点地图)
https://www.jianshu.com/writer#/notebooks/33029372/notes/51008129
（网页链接中的站点地图，/代表一个层级）
2. 设计站点地图
站点地图可以采用树状结构展示，站点地图的最基本元素就是网页。网页使用方框表示；使用连线的方式展示网页之间的关系。（高层级页面查看产品全貌，低层级页面关注细节）
（带标签的站点地图）
【补充知识】
B端产品基本具备的四种页面类型：表单页、详情页、列表页、Dashboard页。（是基于用户行为而设计的通用化解决方案。）
表单页
是用户向系统进行增加、删除、提交信息的操作页面。
（图片来源：纷享销客）
详情页
详情页向用户展示详细的信息。这个页面一般汇聚各类信息
（图片来源：纷享销客）
列表页
列表页向用户展示结构化的信息数据。长的像excel的工作浦，列表页的设计大部分来自用户对实际数据的操作和展示。
（图片来源：纷享销客）
Dashboard页
综合页面，类似汽车的仪表盘监控，监控着整个系统的状态和运营数据。
（图片来源：纷享销客）
总结：设计信息架构
产品经理做什么？
产品经理基于规划阶段输出的需求文档，来设计页面之间的层级结构，并确定后续原型设计的范围。
有什么可以提供帮助的工具？
UML在输出站点地图，可以借助UML的相关知识输出。
信息架构作为一门独立学科存在。系统学习信息架构知识，可以有效提升在此阶段的输出物质量和效率。
做完得到什么？
站点地图。站点地图确定了后续原型设计、交互设计、UI设计的范围，也能指导界面上的导航设计。
5.2 设计产品原型：高效输出原型的方法
5.2.1 模式思维：你的原型是否可重用
1.什么是模式思维
模式：是指可以复用的方式和方法（永规范化的设计思路，把功能模块化，便于维护和复用）
案例：厨房空间的设计不能太大——做饭的工具和食材会分布得广而散，增加移动的距离；当然也不能太小——做饭是一个步骤复杂、用具繁多的工作，挤在狭小的空间中，效率低下。所以规范了一些常用厨房设计模式，根据这个模式，就可以设计出一个可以高效做饭的厨房空间。
厨房空间由四个部分组成：炉灶、水槽、食物储存区、操作台，以上四个部分的间距在3m以内
操作台的范围大致在1.2~3.6m。
2.模式思维和页面
产品经理设计的每一个页面，也像设计厨房空间一样，要在一个页面上满足用户多种活动的需求，比如信息的查看、搜索、下载等。
比如Google云端硬盘，它满足用户搜索存储文档需求，其解决方案是设计一个模式。这种模式由输入框、按钮、信息面板等组件组成。它提供的解决方案是：
用户输入关键词，展示与关键词相关的文档信息。
提供文档类型的快捷入口。
提供更精准搜索的功能入口“更多搜索工具”。
人们使用互联网的行为有很多方式，对应的设计模式也有很多。在《界面设计模式》和《网站设计模式：有效的交互设计框架和模式》中，总结了很多成熟的设计模式来满足用户的操作行为。
3.原型设计与模式思维
产品经理表现页面和模式的产品原型也有很多现成模板，比如阿里提供的ant.design设计资源。从网上查找已有的原型资源，有助于我们快速搭建出美观易懂的B端产品原型。
设计自己的产品原型模式：
模式名称（名称）：给自己总结的模式起一个名称，便于管理和交流。比如：搜索单据。
概念和价值（用途）：描述清楚这个模式是什么，即给模式下一个定义。同时，写清楚模式给用户带来什么样的价值。
使用范围（条件）：该模式相关的边界条件。比如，在用户登录的状态下，项用户推荐常用的历史信息。
模式描述（场景）：使用文字、图形等方式，描述清楚模式是由哪些组件构成以及该模式如何运行。比如可以描述为：用户在输入框录入关键词时，会实时展示提示信息，便于用户选择。
相关模式（拓展）：与这个模式相关的模式还有哪些。就像《建筑建模语言》中的模式184——厨房布置和模式199——有阳光的工作台相关联，来综合设计一个厨房空间。
5.2.2 三种精度的产品原型展示
低精度产品原型
即页面流程图，展示页面中的关键组件及页面之间的跳转流程。
（图片来源：守约大大的作业截图，仅做展示）
补充：如果网页有多个角色操作时，触发动作也可以直接描述为用户行为，即“用户+动作+组件”，比如“顾客点击”确认按钮等。在画流程图时，流程图中的元素5到9个是比较合适阅读的，如果超过了这个范围，那就太细了。
中精度产品原型
像照片一样，展示包含所有组件的页面，主要展现页面布局。
一个中精度原型至少要包含以下信息。
导航信息：告诉大家这个页面在哪里，从哪里来，到哪里去，同时也讲清楚产品的页面结构。
组件元素：组件是页面的基础元素。通过原型告诉交互设计师、UI设计师、研发工程师，有哪些类似输入框、按钮类的组件。
页面布局：哪些组件布局在一起组成功能，或者布局在一起组成页面重要的展示局域。页面布局可以参考专业的页面栅格系统。
文案信息：提供明确文案的信息。比如：这个功能的名称或者提示信息是什么？
重要信息：注明页面中与功能或者逻辑相关的信息。
（图片来源：守约大大原型模板）
高精度产品原型
详细展示原型中各个组件在不同操作下所展示的信息
高精度产品原型需要产品经理像编写产品说明书一样，详细介绍每个组件或者模块的产品要求。这里介绍比较能够结构化输出的说明文档。
（图片来源：书中模板）
【X号】：指原型图中添加说明的标号，便于定位说明的原型区域。
【功能描述】：说明组件是用来做什么的，给用户解决什么问题。
【权限展示】：在不同用户的权限下，向用户展示的信息和可执行的操作。
【交互说明】：在特定的条件下，根据用户的操作得到的反馈。
【备注】：填写跟执行相关的信息，比如优先级，给研发工程师和交互设计师的留言，需要强调的地方
5.2.3 登机模式与产品需求文档（概念，了解即可）
1.登机模式
面对各个部门提出的大量需求，有时在需求收集阶段，不能简单快速地评估出全部细节。这个时候需要增加一个需求设计阶段，对已经定好排期的需求，进行check-in，转化为产品文档（把需求产品化）
【补充知识】
需求文档：主要是想要什么。实现什么样的效果
产品需求文档：把需求转化为可以投入资源的，能够让设计师和研发工程师可执行的方案
2.产品需求文档的格式
需求文档包含：需求名称，背景，目标与收益，需求范围，功能需求，业务概念，流程展示，需求描述，非功能需求。
产品需求文档包含：需求名称，背景，目标与收益，需求范围，功能需求，业务概念，流程展示，需求描述，产品需求说明，网站地图，产品原型，非功能需求。
总结：设计产品原型
产品经理做什么？
产品经理设计并输出产品原型的方案并整理成文档1.产品经理以此方式，将需求变成产品化的解决方案，便于后续设计和研发。
有什么可以提供帮助的工具？
1.交互设计知识（依据用户行为设计产品原型，涉及界面的交互设计）
2.排版知识（一张清晰易懂的产品原型，既能体现产品经理的专业度，也能提升与设计师、研发工程师的沟通效率）
3.原型软件技能。（学会用Axure、Sketch、Visio、Omnigraffle等工具）
做完得到什么？
产品原型
产品需求文档
5.3 设计交互：让B端产品简单易用
B端产品更加偏重工具属性，注重帮助用户完成工作效率和效果。所以，设计B端产品更像是一本产品说明书，需要追求使用的高效和易学性和易用性。（毕竟你要知道B端产品很多用户都是互联网小白用户）
交互设计理论——《尼尔森十大可用性原则》（实用）
系统状态可见。（用户能够随时获得产品反馈的信息，充分控制和掌握产品，产生对产品的信任和安全感）
系统与真实世界匹配。（设计B端产品，要参考用户真实环境使用的单据和报表，将其映射在产品中，减少用户学习成本）
用户掌控和自由操作。（用户在使用B端产品时，可以自由退出或者结束当前任务）
一致性和标准化。（界面元素和操作形成一套让用户可识别、可学习的标准，并且在产品的任何地方都可以应用）
避免错误。（设计B端产品时，需要检查界面的按钮是否可能产生误触）
直接识别比记忆好。（产品经理在设计针对一些单据的操作流程时，要关注用户想要知道哪些单据的基础信息，以免用户跳出当前界面进行查询）
灵活高效地使用。（提高界面使用效率）
美观和简约的设计。（界面信息要简明突出）
帮助用户识别、诊断和解决错误。（反馈操作信息时，提示要可读并且提供解决方案，而不是报错）
帮助和文档。（需要在界面上提供必要的使用帮助，并整理出专门的产品使用文档帮助用户学习）
【补充知识】
产品经理可以通过《交互设计精髓》《简约至上》《点石成金》《网站设计模式：有效的交互设计框架和模式》《界面设计模式》《信息架构——超越Web设计》等书去学习产品的模式和交互设计知识。
总结：设计交互
产品经理做什么？
交互设计师主导、产品经理协助，在产品原型的基础上设计出交互设计方案。
有什么可以提供帮助的工具？
交互设计知识。产品经理需要了解和学习交互知识，这样才能够与交互设计师更好的沟通。
做完得到什么？
产品交互设计方案。
5.4 设计UI：如何与设计师高效沟通
平等对待。（设计师的工作量也很多）
主动学习设计知识。（比如逛逛Dribble、优设、站酷之类的设计网站，了解公司或者团队的设计规范）
明确指出设计重点。（产品应该告诉UI设计师，需要设计的页面中重点功能是什么，使用者在什么场景下使用，以及希望用户重点使用的界面组件和信息有哪些）
给出设计案例。（提自己的设计要求时，最好找一些认为比较好的设计案例提供给设计师参考，并且说出案例中哪些元素可以参考，更好的表达自己的想法）
总结：设计UI
产品经理做什么？
由UI设计师主导，产品经理协助，在产品原型和交互设计方案的基础上，设计出直接呈现给用户的产品界面图。
有什么可以提供的帮助的工具?
UI设计知识。（便于高效沟通，要去理解设计师的认知和理念）
做完得到什么？
产品UI方案。