一、我的读后感

这是一本介绍交互设计模式框架的书，可指导我们把设计中那些重复出现的问题打包整理成统一的解决方案，避免重复设计。其中关于上下文语境、品鉴资源（竞品分析）、框架的构建和使用等理论都可圈可点，有一定的参考价值。

相对来说，书的头尾两部分更有价值。分别介绍了框架的由来及组成，和框架的构建及使用。其中对我印象最深的是最后几章通过“一个虚拟的案例”来说明项目的工作流程和方法。比如，拿到一个项目后，我们要做的是：对比。看当前项目和曾经做过的项目有几分相似。对比List有：

设计工作中，基本元素与激动人心部分占比如何？

是否了解上下游的同事，他们的能力如何？输出如何交付？

项目中最迷人的地方在哪里？如何获得用户的兴趣和关注？

团队组成如何？

项目时间安排如何？

但是，整体稍有些浅显，不够深入，可能年代比较久远的问题。

读完本书后可以问自己的几个问题：

什么是设计框架？和模式、组件有什么关系？

框架有什么用？

如何建立设计框架？

框架如何应用于工作中？

二、模式、组件和框架

要理解框架，首先要搞清楚“模块”和“组件”。

模式是某个常见设计问题的通用解决方案。模式可重用，可为大量典型的设计问题提供“罐装”的解决方案。

组件是将模式进行完整的代码化、模块化后得到的可执行版本，是对模式实现后的产物，是代码的完成版本。

模式一般能在各网站间通用；而组件则只对应特定的某一个网站，非常具体。

模式一般由设计人员制作，而组件一般由开发人员管理这个库。

模式可以解决小范围的具体问题，但是它没有上下文情境，我们无法知道这些问题是否有联系，模式如何影响整体。比如，分页模式可以解决页面跳转问题，但是它对整个搜索系统有什么影响呢？要回答这些问题，就需要引入凌驾于设计模式之上的更高层次：交互设计的框架体系。

框架体系是设计模式在逻辑上的进化结果，是为用户构建一套成熟、完美的解决方案的必经步骤。

框架由一系列设计模式加上其它元素和信息组成，用于指导完整的系统或站点上下文的设计。它关注用户体验。

因为模式、组件和框架都可以重用，所以统称为“可重用铁三角”。

三、框架的作用

1、提供方案：为设计师提供设计过程中的解决方案，快速明确方向。

2、逆向设计：框架体系能让我们逆向设计人类行为。框架为我们指出设计中哪些地方是最重要的，确保我们对设计进行正确的修改和调整。当设计师灵感枯竭的时候，看一下框架，也许会有新的思考角度和方向。

3、映射目标：框架体系能将人类行为映射成一系列具体的目标，每一个目标都能激发灵感，创造出新颖的解决方案。实际上，框架的要素之一“设计标准”会告诉我们该框架的实现目标，而实现方式可以由设计师自由选择。相当于给我们定了一个设计目标，设置了一个起点，其它的自由发挥。

4、节省时间：框架体系设定了基础的框架，设计师不需要再重复设计，只需要把重点放在需要创新的地方，避免了无谓的时间和资源浪费。

四、框架的构建

构建框架的步骤如下：

1、标识问题：平时碰到的问题、模糊不清的列表……如果碰到超过2次，就可以作为框架被存档和备案。

2、竞品分析：研究前辈、同行的作品，看竞争对手如何解决同样的问题，观察从未听说的网站，从而收集各种可能的解决方案。下次遇到问题时，可参考这份方案目录，甚至一段时间后可以回访之前看过的网站，看是非有改进（通过了解其他人针对同一个问题不同的解决方法，有助于提高自身对网站的领悟力和洞察力）。

3、建立文档：不仅仅只是一份文档，还需要沟通。包括交互原型稿。

4、分工合作：团队参与者进行工作分配。

五、框架的应用

1、在启动一个设计项目时，先确定这是一个什么类型的项目。是商务网站，还是新闻网站。比如是商务网站，即使不知道它卖什么产品，也可以利用“框架体系”，着手设计它的架构，以及大概通用的页面布局。当需求明确后，再对最初的粗略设计进行调整。

2、考虑上下文情境。比如，一个给出行者提供旅行指南的网站需要账户管理框架、搜索框架、注册框架等，在情境中搭框架，再填充细节，使其富有生命力。

3、选用模式。框架完成后，再具体考虑每一个框架的展现形式。

4、应用设计标准：验证设计框架。

书名：《Web Anatomy: Interaction Design Frameworks that Work》

中文：《网站设计解构：有效的交互设计框架和模式》

作者：【美】Robert Hoekman,Jr；【美】Jared Spool

译者： 向怡宁

出版：2010-9

豆瓣：https://book.douban.com/subject/4926708/

思维导图：见百度网盘

HE编码：Book_D1-3