本书内容主要是交互框架体系简介、案例分析、搭建自己的框架体系的方法。文中举的例子放在现在不太适用，内容翻译可能是非专业人员翻译的也不太好理解，需要反复多读几遍。我梳理了本书的重点内容，重新配了图加深理解。

一、框架体系简介

可用性评估（启发式评估）和情景式调查帮助我们理解人们在网络中的交互行为，发现设计中存在的问题，但无法告诉设计师怎么才能做出好的设计。项目启动设计前先思考这几个问题：
1、如何把产品目标落实到设计层面，实现业务目标并满足用户需求？

2、设计方案中80%是标准化的设计，20%是创新的部分。标准化的设计没什么挑战性，有点枯燥，不容易引起设计或者开发人员的重视，结果却可能让用户带觉得不好用。创新的设计如果没有考虑到易用性，脱离了用户习惯，就只有“酷”的感觉。

3、项目越来越多，团队成员人力不足，相同的功能却还要进行重复的开发工作，导致开发效率低下。

针对以上问题，开发团队需要实施可重用策略。

可重用策略

为了减少重复性的开发工作耗费精力，让成员有更多的时间思考创新性的内容，团队需要可复用的设计，既能保证快捷的迭代开发又能保证设计的统一性。

可重用策略可划分为三种资源库：设计模式资源库、组件资源库、交互框架体系文档。

框架体系用以指导完整的系统或者web界面设计，它不涉及到具体的品牌化或视觉设计需求，是和设计模式、组件相配合的结构化系统（界面模块）。

可重用铁三角

实际工作中，我们优先考虑框架体系，其次是设计模式，最后才是组件。设计模式隶属于框架体系，组件是设计模式实现后的产物，组件将设计模式具象化为界面中的一个元件，并让设计模式产生交互行为。

设计模式

设计模式是针对某一个问题的常见解决方案（通用设计方案），如分页模式就是一种标准的翻页交互形式，无论在网页还是系统设计中都是很常见的通用模式。设计模式能让用户将自己的体验转化为通用操作经验，再次看到类似设计的界面时，他们就知道该怎么做。

设计模式六要素：

1、模式名称：元素的统一命名，模式名称需要根据当前用词保持对应和更新；

2、描述：描述模式的功能，解决了什么问题，一个模式在同一网站上有多种表现形式最好能附带截图说明；

3、上下文情景：模式库使用场景，什么情况适用这种模式，什么情况下不适用，不适用时有什么解决方案；

4、曾于何处使用：列出使用过这一模式的实例（需要保持更新）；

5、工作方式：模式触发操作后呈现什么内容，页面如何跳转，有什么样交互；

6、其他必备模式：一个主要模式和其他模式相互配合，形成完整的任务流程（主流程、分支流程、特异流程）。如登录注册，除了登录注册元素之外，还需要忘记密码、输入错误提示、多久需要重新登录等内容。

标准的设计模式文档除了包含以上六要素之外，还可以包括竞品解决方案、模式历史、可用性测试结果、用户反馈等。

模式文档整理汇总后构建成模式资源库。

企业内部使用的内部模式资源库对业务具有更强的针对性，更贴合自身的设计风格，其他团队可以直接复用。相关网站公开的公用模式库一般是通用模式，缺乏项目特定的规范和需求，使用时需要根据自己的业务需求对这些模式进行定制或者改进。构建一个模式库需要个人或者团队整理出已经使用的模式，建立维护和共享机制，并在内部宣传和推广。

组件

组件由通用的基础元素（如按钮、文本、选择框、导航等）组合而成，组件也叫模块、元件、控件。一个模式可以派生出多个组件。本质上，组件是可复用的代码，是将设计模式进行代码化、模块化后的可执行版本（如字体、颜色、布局、交互行为等用代码实现后的产物）。

组件的六要素：

1、组件名称；

2、组件版本号：与软件更新的版本号、版本说明一样，确保开发一致性；

3、定义：描述组件的目的和用途；

4、使用方法：组件使用场景；

5、示例：组件实例，方便团队成员直观地了解该组件的工作方式；

6、代码：链接到实现该组件的代码。

组件也可以建立组件资源库。

交互框架体系

交互框架体系是凌驾于设计模式、组件之上的更高层次的体系。设计模式只能提供局部问题的解决方案，组件本质上是定义模式的，想要知道模式之间如何影响整个应用程序，各个页面之间如何相互联系，需要从全局考虑整个系统，就要涉及到交互框架体系。

交互设计框架体系的六要素：

1、描述：介绍框架的功能以及应满足的需求；

2、上下文情景：使用场景、可能遇到的问题或者能满足用户什么需求；

3、任务流程：描述用户的操作路径，或者实现某一功能的交互操作流程；

4、其他必备框架：用于与当前描述的框架配合使用的其他必备框架；

5、相关框架：与当前描述的框架有着相似目的或者用途的框架；

6、构成元素：列出了所有从属于该框架的设计模式，并链接到各自的文档（框架体系由模式构成，两者相辅相成）；

7、设计标准：列出了框架中一系列设计的指导性方针，要实现的业务目标（即实现业务目标、产品目标的设计原理）。要想定制准确的设计标准，要多思考这个框架能为你或者用户带来什么，想让它实现什么目标，哪些因素有助于实现这个目标。

交互框架体系无处不在，将一系列框架组合起来可以构成整个网站，设计师可以对框架体系进行创新设计，融入自己的设计风格。

行业内我暂时没发现公开的框架体系资源库，我的理解框架体系文档和设计规范类似。

二、框架使用实例

目录框架

初次去一家超市购物，一般会四处看看想买的东西大概在哪个区域，在寻找自己喜欢的商品途中会被其他商品吸引，逛一圈下来购物车满满当当。用户在浏览网站的行为和进入超市买东西的行为本质上是一致的，最重要的就是通过获取导向找到目标内容，因此网站中的目录设计是影响用户体验的关键因素。

⒈描述

从目录中选择内容的步骤：从目录中选中目标选项，点击该选项看跳转的页面是否是自己需要的内容。目录框架的点击次数会比较多，只要让用户感觉每一次点击操作都是带领他们走向目标内容，他们对多点几次就不会介意。

⒉上下文情景

电商网站商品导航、视频网站资源分类导航、新闻网站内容分类导航等几乎用相同的组织架构支持用户定位和选择目标内容。目录框架多数情况下是网站的核心内容，自身就是一个完整的情景，不会嵌套在其他情景中去。

⒊任务流程

以电商网站为例，目录框架的任务流程是：用户从一级分类目录中选择目标分类项下的子分类，点击子分类跳转到该分类下的内容陈列区，在陈列区选择想买的商品，点击该商品进入商品详情页。

⒋其它必备框架

搜索框可以让用户快速搜索到想要的内容，因此搜索框架也是目录框架中必备的部分。

⒌相关框架

登录/注册账号

⒍构成元素

     ⑴ 分类页：把商品按大类进行分类，再对大类进行细分，帮助用户快速定位目标。

     ⑵ 陈列页：点击分类跳转的页面内容，陈列页要展示用户关心的商品信息（如商品价格、商品图片、商品名称、品牌信息、折扣等），且前几条内容要能引起用户兴趣，否则他们会觉得后面展示的内容也不符合需求。

     ⑶ 内容页：商品详情页，用户浏览商品详情页的内容决定是否需要购买。电商商品详情页内容通常包括：

            ①商品图片或者商品视频；

            ②商品名称描述；

            ③商品价格、折扣、是否包邮等价格相关的信息；

            ④可获得性：规格、库存、是否在售；

            ⑤信任感：品牌、品质保证、无理由退换、赔付说明等；

            ⑥搭配套餐选择；

            ⑦商品详细描述；

            ⑧社交属性：评论、评分、博主推荐、分享；

            ⑨目标内容引导：新品推荐、打折区、类似商品的相关推荐等；

⒎设计标准

研究发现用户浏览的页面越多，购买的商品就越少（用户明确知道自己要买什么商品），真正降低用户购买欲望的不是大量的点击而是大量点击后找不到想要的商品。

暂时没什么想买的用户，喜欢随便看看，发现感兴趣的内容就点击查看详情；知道想买什么但是不知道它叫什么的用户，会通过搜索关键词去寻找商品；明确知道要买什么的用户，搜索目标商品后，也会看看其他商品或者内容。

那么用户在浏览商品时，怎么能保证用户有良好的购物体验？

     ⑴ 支持用户探索，同时给用户自由探索的入口，能增加页面的访问量。可以用两种设计模式来验证这个观点：

          ①设计模式：针对某个问题正确的解决方案，即提供分类导航、搜索功能；

          ②反设计模式：针对某个问题无效的解决方案（常用于验证方案无效性），即只提供搜索功能。

     ⑵ 分众分类方法：用户通过任意关键字为内容进行分类，公开共享扁平非层级结构式的分类法。由用户创建分类，增强了分类的可扩展性，用户可以根据自己的偏好寻找内容，其他用户也能通过这个分类找到相关内容。鼓励用户对不同的内容创建标签，提高它们的可查找性。

二、搜索框架

提到搜索工具，大家立马能想到Google和百度搜索。设计搜索功能，要了解用户搜索的动机，搜索结果内容应该如何显示，这些搜索内容中包含哪些信息，用户看到这些搜索内容会怎么做，搜索框架体系要包含哪些元素必须结合具体的上下文情景中去思考。

⒈描述

用户能快速定位到具体的内容

⒉上下文情景

影响用户选择搜索功能还是分类导航的原因是网站分类设计的准确性。

⒊任务流程

理论上的任务流程：用户在搜索框中输入关键词，点击搜索，搜到内容，点击查看搜索结果知道找到目标内容。

实际上用户点击最多的是排在前面的那几条搜索结果，如果前面几条搜索结果不是用户需要的，大部分用户会修改搜索词重新搜索，很少会进行翻页查看第二页的内容。

⒋构成元素

搜索框架包含的设计模式：快速搜索、高级搜索、搜索结果、过滤器、分页等。

      ⑴ 快速搜索：通常只有一个简单的搜索框。适用场景：内容标识唯一，用户熟悉那些标识符，这些标识符可以快速定位内容。

 

    ⑵ 高级搜索更为复杂，除了关键词之外还有其他搜索限定词，满足用户特殊需求，针对专家级用户或者特殊场景（如图书管理员），普通用户基本用不上。要根据网站受众类型考虑是否需要添加高级搜索。

     ⑶ 搜索结果：直接显示搜索结果或者显示搜索结果+分类，后者选择分类后缩小查询范围再点击具体的内容。

也可以把分类放在搜索前面，用户先选分类再进行搜索操作。

    

搜索结果四种状态：

            ①搜索结果与用户查询的内容精准匹配

            ②搜索结果与用户查询的内容相关

            ③搜索结果与用户查询的内容不相关

            ④没有搜索到任何结果（没有搜到结果可以给出建议或者引导 ）  

 

    ⑷ 过滤器：通常出现在用户初步搜索后，帮助用户缩小选择范围，增加结果匹配度。如在淘宝网搜索了裙子，搜索结果页包含了陈列页和分类筛选

⒌设计标准

     ⑴ 提供多种操作路径：用户可以通过导航、搜索框定位内容。对用户搜索数据进行分析可以完善网站导航分类，使导航更贴合用户查询习惯。

     ⑵ 内容与用户的关键词相关联：用户在导航分类中找不到自己想要的内容，就会通过搜索查询内容。鼓励用户对内容添加关键词（标签），用户添加的关键词能让网站内容和多个不同词汇相关联，从而极大的提高了搜索结果的匹配度。

     ⑶内容便于识别：便于记忆的内容就是便于寻找的内容。当内容以简单的词汇命名时，它更容易被人记住，也更容易搜索。

三、注册框架

大多数应用程序都会有注册/登录操作，如何正确的引导用户注册实现客户转化的目标呢？

⒈描述

注册框架的目的是让访问者注册成为活跃、留存甚至是乐于付费的那一批用户。除此之外还要消除用户在注册时可能产生的排斥心理，引起他们对网站的兴趣。本质上，注册框架是为了唤起用户冲动从而引导用户注册。

⒉上下文情景

注册框架适用于那些需要用户注册的应用程序，方便他们管理自己创建的内容。

⒊任务流程

用户访问首页后或者是想访问更多的内容时点击注册，填写注册表单信息，注册成功后使用更多功能。

⒋构成元素

    ⑴ 价值声明：告诉用户网站提供了什么功能，以简短、易记的文字将网站用途描述清楚（放在显眼的位置）；

    ⑵ 投入成本明细：告诉用户注册需要花多长时间，需要填写哪些内容，能获得什么；

    ⑶ 推荐语：人们倾向于相信权威人士或者与自己相似的人，利用这个心理，使用权威人士的推荐语或者相似的人的评论表现产品积极的一面能够增强用户的信任感。

    ⑷ 行动号召：需要注册才能使用的网站，可以使用具有命令式语气的短句督促用户采取行动，如立即注册。无需注册就可以访问部分内容的网站，让用户不断深入探索产品后，用某个行动号召激励用户做一些具体的事情，如现在就写下你的第一篇文章吧。

鼓励用户使用产品创建一些内容，逐步深入产品体验，只在必要时再要求他们注册，这种就是懒惰式注册（此时的用户也更乐意去注册）。

    ⑸ 白板：有些产品有白板页面，需要用户生成内容进行填充，此时一定要有操作指引告诉用户如何操作，可以是视频教学也可以是实例说明，避免白板是空白页面；

     ⑹ 即时参与：只填写必需的信息，相比注册填写完整的信息，降低了参与门槛，让他们即时参与深入体验，满足用户的需求之后再选择注册（这个时候选择注册多半因为他们的确需要使用这个程序），如adobe提供即时参与的方式就是允许下载试用版本，试用的过程中再选择是否注册。

     ⑺ 注册表单 ：用户在填写表单时容易出错，会打击他们的积极性。因此注册表单只要求填写必填信息，并且要实时验证、给出错误提示、告知用户正确填写方式。

  

⒌设计标准

    ⑴ 传达明确的价值声明：陈述网站价值，可以采用文本描述的方式也可以是视频说明；

    ⑵ 建立起用户的预期：通过投入成本明细告诉用户需要执行哪些操作，将会获得什么成果，让用户相信注册后物有所值；

    ⑶ 建立用户信任感：使用推荐语让用户觉得应用程序可以信赖，获得用户的认可；

    ⑷ 鼓励用户操作：使用行动号召鼓励用户操作，操作后获得即时反馈；

    ⑸ 让注册和用户操作相关联：对于不是必须注册就能使用的应用程序，系统可以自动创建和用户操作相关联的信息方便日后再次登录，等用户在应用程序上的操作逐渐增多时再要求用户填写更多的资料进行注册，这样他们对产品的忠诚度会更高。对于必须注册才能使用的应用程序，注册页面至少要包含价值声明、 行动号召、注册表单，不过现在使用二维码或者手机号验证登录的形式比较普遍，可以不用注册表单这个元素也能实现用户转化的目的。

搭建框架体系的工具

框架体系之所以能成为设计工作中的标准工具，是因为它能够解决一些常规性、重复性又耗时的设计工作问题，让设计师有更多的时间去尝试创造出更新颖的方案。因此我们可以尝试建立一套自己的框架体系。

可以从以下几个方面入手：

 1 标识出问题

找出在多个项目中共有的需要解决的问题，这些问题设计师用了相同的设计方案重复设计，那么这个问题的设计方案就可以当做框架记录下来。用这个方法确定可以搭建哪些框架，如账号管理框架、用户资料框架、菜单导航、购物车框架等。

2 分析资源

通过分析优秀的网站框架的设计细节、交互方式、表现方式，来判断自己搭建的框架的可行性。 

         ①竞品分析：看看竞品是如何解决同样的问题，优秀的网站和体验很差的网站都可以分析，除了分析同行业的产品，其他行业的产品也可以分析。

         ②借鉴设计方案：分析别人设计方案背后的逻辑和原理，这个方案解决了什么问题，为什么要使用这种设计方案，除了这个方案外是否还有其他的设计方案（其实就是分析功能实现的方法，借鉴优秀的解决方案，不好的解决方案就避坑）。

现在同行业产品基本雷同，其实就是借鉴别人总结出来的经验（美其名曰保持相同的用户习惯）。当然行业已经有成熟的解决方案的时候，借鉴也不失为一种好方法，创新也未必会有好的效果。借鉴别人的设计方案，不要只会照抄，也需要思考实现方法背后的逻辑，多想想为什么要这么实现，再分析有没有可以创新的点。

3  输出文档

搭建了一套框架体系后，输出一份详细的说明文档，交付给开发人员之间，避免开发人员无法理解设计师的想法而错失细节。

交付过程中容易被忽视的细节：

    ① 元素之间的优先级：如果设计师只交付一个界面截图或者没有说明的设计稿，开发人员可能会丢失一些交互细节。比如切换页面是信息流的呈现形式，是同时出现还是依次出现；两个按钮之间的主次关系。

    ② 细微的交互：静态图片难以展示部分中间态的动态交互行为，如鼠标悬停时按钮颜色变化。

    ③ 设计逻辑：页面之间的跳转逻辑，功能点击后会跳转到什么页面，或者会触发什么交互。

    ④ 异常流程处理：任务流程中可能出现的分支流程、用户出错后的交互形式、极端条件的下的处理方案。

    为了高效的把设计中的交互模式传达给开发人员，可以输出一份交互文档明操作中如何交互，可以是简单的手绘原型图，也可以使用原型设计工具。

4 团队分工合作

虽然搭建框架体系有很多好处，但是分析需要搭建哪些框架体系、输出框架体系文档需要一定的时间和精力，更新资源库更是一项需要长期投入精力，因此团队之间的分工合作才能保持资源库的维护和更新。

组件是将设计模式以代码的形式实现，通常让开发人员来管理组件库，交互设计框架体系更关注用户体验，让设计人员管理更合适。

一般大公司才会花费精力创建并持续更新资源库，如ant.design（蚂蚁）、Zan Design （有赞）等，小公司多数是直接使用行业内开源的组件资源库。

框架体系运用

实际项目中经常遇到一些需求不明确、时间紧张、预算有限、团队人力不足的情况，运用框架体系可以解决其中的问题。那么什么情况下引入框架体系，如何选择框架，如何规范框架所包含的模式，如何在项目的创新方面利用框架体系？

引入框架体系

      ⑴项目中大约20%的内容是需要重点设计的，其他80%都是由基本元素构成；

      ⑵ 团队人力有限甚至不足；

      ⑶时间极其有限；

这种情况下，你不需要设计每个页面，而是直接创建整个网站的信息架构原型图，把重心放在核心交互上，至于基础页面，可以制订一套设计指导，留给团队成员根据设计指导来处理，避免因为计基础设页面浪费太多时间。

选择框架

当我们只知道项目目标却没有明确的需求时，要靠自己判断需要哪些元素、布局方式、任务流程、交互方式，可以试着利用框架来启动一个设计项目。

以电商网站举例，几乎每一个电商网站都由一些已知的子系统构成。

• 分类导航

• 搜索系统

• 购物车

• 支付流程

• 订单管理

• 用户中心

通过分析这些框架我们自己也可以设计电商网站的信息架构、大致确定通用页面的布局。细化页面可以采用模拟用户画像、模拟用户体验路径、分析用户动机的形式确定产品使用场景、任务流程和页面交互形式，完成整个页面设计。

根据以上分析，产品框架基本有了雏形，这时候可以进行真正的用户访谈或者用户调研，并和需求方进一步确认需求，再选择合适的框架、确定设计标准。

设计师只有真正理解用户的使用场景、用户需求，才能选择正确的框架和设计模式。

运用框架体系

通过以上步骤已经明确知道了要选择哪些框架和设计模式后，只需要从设计模式资源库、组件库中选择合适的元素组合成框架，再把框架拼合起来创建一个完整的页面。

也可以下载现成的设计模板资源，如ant.design组件库可以下载sketch设计资源和axure原型资源库。

结语

框架体系包含了完整的用户场景和任务流程，为设计提供了指导方针，能够帮助团队降低开发成本和设计成本。框架体系不仅能产生易用的设计、加速迭代，还能帮助我们加深对现有标准背后的逻辑依据的理解。设计师通过分析这些逻辑依据，再将自己的理解转化为设计标准，应用到更新颖的设计模式上。

但是当有其他优先级更高的业务时，搭建框架体系的需求就不会被重视，如何能让公司或者团队认可框架体系的价值？可以通过衡量挫折成本——不好的设计会影响用户体验，用户无法完成任务会有挫折感或者心情奔溃，甚至弃用该产品。如果产生了挫折感，就可以让团队评估不良设计带来的额外成本，如用户投诉增加、用户流失，开发的功能无人使用等。