五层要素模型

Ch.1 战略层

明确战略目标，“我们想要什么”和“我们的用户想要什么”  

产出物：战略文档

1.1 产品目标

——如何衡量是否达到占率目标？

成功标准：访问量PV、UV、页面停留时间、回访数据

1.2 用户需求

——如何确定目标用户和用户需求？（用户研究）

细分用户群，分析群体用户需求

——创建人物角色

从用户研究中提取出的样例

战略文档：可以在战略目标范围内制定一个清晰的优先级顺序

Ch.2 范围层

“我们要开发的是什么”。定义项目范围，包括功能需求及排列优先级

产出物：产品需求文档/功能规格说明

撰写产品需求文档/功能规格说明的好处

定义项目共同语言——减少团队成员间的沟通和理解成本

明确项目要完成的全部工作，明确定义需求要求——团队成员知道项目目标和范围、时间计划（工作流程/日程安排/里程碑），了解看似独立需求之间的内在联系。使得责任分配更清晰，大大地提高协作效率

通过考虑粗略的产品需求点，确定优先级，考虑潜在冲突，从而了解哪些是需要做、哪些不需要做、哪些不需要马上做的需求，形成需求池，做长期规划，良性循环。——用更慎重的方法管理整个设计过程，避免“范围蠕变"，像滚雪球

2.1 定义需求

业务需求和用户需求，取平衡

如何获取需求？

用户提出的需求

用户提出需求中的本质需求（分析用户说出这个需求是想解决什么问题，再推出能真正解决这个问题的需求是什么，可能与用户提出的完全不同）

头脑风暴。脱离现有产品的限制，打开新思路

如何设计需求？

搭建人物角色的使用场景：简单描述一个用户角色如何完成这些用户需求。通过想象用户将经历什么样的过程，我们可以找到他能顺利完成这个过程的潜在需求。

竞品分析（直接竞品、间接竞品）：分析竞争对手如何满足的用户需求、完成相似的产品目标、权衡和调整我们也在面对的某些问题

2.2 功能规格说明

需要的内容    VS.    不需要的内容

包含在设计/开发中可能出现混淆的功能定义    VS.    不需要包含产品的每一个细节

包含已确定的决议    VS.    不需要包含展望产品未来的理想状态

撰写原则

乐观——去掉不应该，引导应该

具体——“最受欢迎”改为“上一周播放次数最多”

避免主观语气——避免歧义，保持准确。可以量化定义。

2.3 内容需求

P72

2.4 确定需求优先级

——评估功能需求是否满足战略目标

任何不符合当前项目的战略目标的特性建议，都要通过范围定义排除出去。

（除非你要重新审视某些战略目标）

——确定实现功能需求的可能性有多大：

（1）技术局限

（2）资源局限

（3）时间局限——可以考虑把这个功能放在下一版/项目里程中

Ch.3 结构层

涵盖功能需求的充满概念的结构层

产出物：架构图

模式和顺序

交互设计：关注在用户执行和完成任务的元素。哪些功能要在哪个界面完成。

信息架构：关注在如何将信息表达给用户的元素

3.1 交互设计

概念模型

错误处理

预防——在设计上尽量不让用户犯错

改正——错误发生时，系统应帮助用户找出错误并改正

恢复——错误发生后系统无法实时纠错时，提供给用户从错误中恢复的方式

对于不可能恢复的错误，唯一的预防方法是，提供大量的警告

3.2 信息架构

在以内容为主的网站上，信息架构主要的工作是以设计组织分类和导航的结构，让用户可以高效率、有效地浏览网站的内容。

高效结构的优点：容纳成长和适应变动

信息架构的基本单位——节点

可以是页面，也可以是页面中的元素

如果把页面定义为最基础的节点，那么项目不能再处理任何比它更小的东西。

如果把页面中的每一个元素定义为节点，那么页面就变成这些个节点的组合。

组织原则

用来决定哪些节点要编成一组，哪些节点要保持独立的标准。

一般的组织原则：

结构中的最高层级——与“产品目标”、“用户需求”紧密相关

结构中的较低层级——结合内容和功能需求

比如，

体育新闻网站：

最高层级——实时性最重要，所以以时间顺序为第一组织原则

结构下一层级——与内容相关，可以是以棒球、网球、曲棍球等的内容分类

截面

描述结构的语言

命名原则：使用用户语言并保持一致性

受控词典——网站使用的一套标准语言

类词词典——拓展出的词汇语言

元数据——基于受控词典/类词词典，用固定的词描述一个概念

架构图

NO  :不要详细到写明每一页的每一个链接

YES：真正需要的信息——展示概念关系

哪些类别放在一起？

哪些需要保持独立？

交互过程中那些步骤要怎么配合？

**绘制模板：视觉词典

Ch.4 框架层

提炼结构，确定详细的界面设计、导航和信息设计

产出物：框架图

框架层的定义

界面设计：提供给用户做某些事的能力

导航设计：提供给用户去某个地方的能力

信息设计：传达想法给用户

设计时考虑点：习惯和比喻

习惯

（1）遵循用户早已养成的一些习惯，使界面与之保持一致。

（2）更重要的是，界面自身要保持一致。（工具：概念模型）

使用同样的概念模型、操作习惯，可以使用户熟悉了一个特性后很快的适应另一个界面/系统。

（3）但并不是说，每一个界面问题的解决办法都要死守这些习惯。可以谨慎地违背一些习惯来优化。

比喻

有效地使用比喻，减少用户“理解和使用你的产品功能”时的猜测成本

4.1 界面设计

选择正确的界面元素来完成用户的任务，通过适当的方式使得界面更被理解和使用。

这些功能在界面上如何被用户认知到

注意点

——让用户一眼就看到“最重要的东西”

——弄清用户不需要知道的东西，并减少它们的可发现性。（或完全排除）——弱化边缘情况

——一个设计良好的界面是要组织好用户最常采用的行为，同时让这些界面元素用最容易的方式获取和使用。

        比如，界面首次呈现用户时，仔细考虑每一个选项的默认值。

        自动记住用户最后一次的选择状态。（某些环境下技术可能无法实现）

标准的界面元素

复选框：能一眼看到所有可选项。但占据更多界面空间。

单选框

文本框

下拉菜单：紧凑空间有效显示选项。但不能一眼看到所有可选项。

多选菜单：紧凑空间显示大量的选项

按钮

手势

4.2导航设计

导航设计必须完成的三个目标

（1）必须提供给用户一种在网站间跳转的方法

（2）必须传达出这些元素和它们所包含内容之间的关系

——对于用户理解“哪些选择对他们是有效的”非常必要

（3）必须传达出它的内容和用户当前浏览页面之间的关系

——帮助用户理解“哪个有效的选择会最好地支持他们的任务或目标”

清楚地告诉用户“他们在哪儿”以及“他们能去哪儿”

假设用户不会将上一页信息带到下一页中。

常见的导航系统

全局导航

局部导航

辅助导航

上下文导航

友好导航：通常为联系信息、反馈表单和法律声明链接

网站地图：提供一级导航及缩进显示的、主要的二级导航

索引表

4.3 信息设计

微观信息架构（元素间）：分类和排列这些元素信息，以达到“反映用户的思路”和“支持他们的任务和目标”的作用

另外，

考虑错误提示，给用户提供能正确使用系统的信息。

利用指示标识，帮助用户理解“他们在哪儿”以及“他们能去哪儿”

4.4线框图

线框图是整合在框架层的全部三种要素的方法：

（1）通过安排和选择界面元素来整合界面设计

（2）通过识别和定义核心导航系统来整合导航设计

（3）通过放置和排列信息组成部分的优先级来整合信息设计

Ch.5 表现层

完成以上四层面的所有目标，并满足用户的感官感受

产出物：视觉设计方案

5.1如何评估一个产品的视觉设计方案

对于那些在之前的层面就确定的目标，视觉设计给予它们的支持效果如何？

例如，产品的外观结构有没有破坏结构，有没有使结构中的各个模块之间的区别变得不清晰、模棱两可？或者，外观有没有强化结构，使用户可用的选项清楚明了？

忠于眼睛

找出主要设计元素的方法：

对用户眼球追踪

眯着眼睛或斜着去看这个页面

设计成功的特点：

遵循一条流畅的路径

为用户提供有效选择的、某种可能的“引导”

5.2设计方法

对比和一致性

基于栅格线

配色方案和排版

5.3视觉设计方案和风格指南

视觉设计方案

不一定要精确地按照线框图来做——只要它考虑到了相关的重要级别以及线框图中各元素的组合关系。

线框图的核心概念，尤其是信息设计方面，应该显著地呈现在视觉设计方案中。

（线框图中可以通过灰度的深浅来表达元素的侧重点）

风格指南

设计统一的品牌形象

记录设计系统

记录决策文档——区分“在某种特殊环境下用来解决某个具体问题的临时决策”和“为了形成将来的设计工作的基础而有意识地做出的决策”