要想解决我们之前所述的所有问题,核心理念其实非常简单:Web 开发团队需要日积月累、稳步实施可重用策略。
可重用策略可以划分为三种资源库:模式、组件,以及交互设计的框架体系。这些资源库能让开发团队充分利用丰富的成品资源,从而提高工作的速度和效率。
我们发现,那些成功实施可重用策略的团队已经尝到了实实在在的甜头。首先,他们可以调用已经(按最基本水平)实现的成品集,快速地拼凑起有效的设计雏形,从而达到让设计尽快启航的目的。这些团队完成整个设计的时间似乎也更短,而且可以周全地涵盖一切有利于提升用户体验的细节和精妙之处。其次,尽管他们在无趣的支撑功能上并未花费太多时间,其设计成果却似乎具备更高的可用性,而且在所有功能中的表现都始终如一。最后,团队进行迭代设计①更为快捷,这让他们有机会在设计尚具可塑性的时候对它进行精细的调整。
在团队的可重用策略中,模式、组件和交互设计的框架体系三者扮演着不同的角色,但都举足轻重。在下一章,我们会更为详细地讨论每一种资源,不过首先请允许我在这里进行一个简要的介绍。
1.1.1 模式:预期行为的锦囊
设 计 模 式 是 重 用 拼 图 中 的 第 一 块 零 件, 它 的 灵 感 来自 于 Christopher Alexander②提出的建筑模式这一概念[见其 1977 年所著的 A Pattern Language: Towns, Building, Construction(《建筑模式语言:城镇、建筑、构造》)一书,牛津大学出版社]。Alexander 观察人们生活和工作的具体行为,然后创建出一系列关于楼房建筑如何支持这些行为的可重用描述。模式并不会使建筑师们落入一成不变的窠臼,相反地,它为他们提供资源以确保所有细节的正确性。
如今的设计模式也与之类似。比如,让我们假设一位正在订票的用户需要输入日期。有哪些支持输入日期的设计呢?一个带自动分析功能的文本框?分别表示年、月、日的三个数字下拉列表?可以直接点选日期的弹出式日历?
针对同一种行为,不同的选择体现出了不同的设计。当开发团队指定一种最适合他们(及其用户)的设计时,就能将其定义为一个模式。日后,当团队需要响应类似的行为时,就能以相似的方式进行响应,利用之前的工作成果来满足用户已经确立的需求。图 1-1 为一个模式文档。
图1-1 雅虎设计模式库③定义的一个模式
图1-1 雅虎设计模式库③定义的一个模式
1.1.2 组件:高效利用可重用的代码
除了模式之外,开发者们还需要一种简便的方式来重用具体的代码。
我们选定了可用的设计模式以后,就需要考虑具体的实现问题了。要想让弹出式日历能顺利工作,屏幕上必须得显示日期。日历必须得响应鼠标的击。它的外观还得与其他的界面元素保持一致。这些都是组件大显身手的地方。
组件会从像素级别来详细指定设计响应。它们通常以代码的形式来体现,因此组件实际上也体现了具体的交互行为。它们是具备了诸如字体、颜色和布局等样式元素的功能性设计方案,如图 1-2 所示。
图1-2 Sun.com④上某个组件的存档记录
图1-2 Sun.com④上某个组件的存档记录
开发人员用组件来拼凑出设计的所有细节。组件构建完成以后,就变成了随时待命的现成元素,能轻易地嵌入到任何新界面中去。这使得每一个环节的开发速度都得到了提高,从早期的原型阶段到最后的部署阶段莫不如此。简而言之,组件就是将设计模式进行完整代码化、模块化后得到的可执行版本。
1.1.3 框架体系:最后的拼图定乾坤
交互设计的框架体系(也就是本书主题)是这个三位一体中的最新成员。如果说设计模式是某个常见问题的通用解决方案,那么交互设计的框架体系则是一系列设计模式再加上其他元素和信息,用以指导完整的系统或站点上下文的设计。
和人体一样,每一个 Web 应用都由一系列相互合作的子系统所组成。每一个子系统都包含许多独立的单元,每个单元都具有各自的功能和用途。如果对这些成功的(和不成功的)网站及应用进行详细的解剖和分析,我们不仅能够标识出那些在不同环境下满足用户需求的常用元素,而且能够更加深刻地理解人类行为,从而改善这些标准,同时在不牺牲可用性的前提下将我们的设计提升到新的高度。
图 1-3 为一个框架体系。
图1-3 一个框架体系的存档文件
图1-3 一个框架体系的存档文件
换句话说,如果仔细观察那些已然运作良好的案例,并且分析其背后的原因,我们就能同时解决两个问题:其一是明确设计的切入点;其二是了解如何才能创建出更好、更强、更快而且和那些老牌经典一样易于使用的交互设计。
比如,在第 4 章中我们将描述一个注册框架,包含了数个常用于鼓励用户注册的设计元素。其中每一个元素都可以被看作是一个独立的设计模式。例如“电梯陈述”(关于应用程序本身价值的一段简要声明),⑤它可以让人们快速、高效地了解这个网站或应用能提供什么。然而,尽管“电梯陈述”消除了用户脑海中的疑点,解决了问题,但它本身其实并没有多大意义。事实上它隶属于另一个更大的问题——如何劝服人们在崭新的 Web 应用中注册。
框架体系不去为“狭隘的”问题提供“狭隘的”解决方案,它处理的是较为复杂的问题。它从产品的整体背景出发,为设计确定指导方针。
当一位用户到达某个新网站,犹豫是否注册的时候,注册框架为他做出清楚的介绍、解答疑问、指明起点,并提供注册的方法。没有哪一个单独的设计模式能处理所有这一切。实际上,真正解决问题的是这些元素的组合。进一步说,任何独立的设计模式都不能告诉我们如何满足用户的所有需求,也不能告诉我们为什么需要首先处理这些需求。
为了弥补这一点,框架体系为包含该模式的整个子系统进行了描述。一个注册子系统需要有输入用户 ID 和密码的模式。但它也需要有重新获得密码的模式、建立用户档案的模式、创建新 ID 的模式,以及修改密码的模式。
开发团队通过观察其他设计并提取共性的方式来标识、记录自己的框架体系。这些元素变成了一个清单,列出了一个完整的系统所需要的一切,从而帮助团队确保拥有所有正确的模式,以便开展设计工作。
框架体系是一种高度的抽象。它不涉及具体的品牌化或视觉设计需求——那是组件来完成的事情。相应地,组件又以独立的设计模式为基础。确切地说,框架体系是某种范围更广的结构化系统,从一开始就能帮助设计师对模式进行选择。我们相信,这种和模式、组件相配合的结构化系统,就是 Rolf 所说的“界面模块”。
————————————
①迭代设计是一种具有更高成功率和生产率的软件开发方式。在迭代式设计中,整个开发过程被分解为一系列周期短小、固定的小项目,被称为一系列的“迭代”。每一次迭代都包括需求分析、设计、实践与测试。通过这种方法,开发工作可以在需求全部确定之前启动,并在一次迭代中完成系统的一部分功能或开发,然后通过客户的反馈来细化需求,并开始新一轮的迭代。
②Christopher Alexander 于 1936 年出生于奥地利维也纳。他是当代建筑大师,以其设计理论和丰富的建筑设计作品而闻名于世。Alexander 认为,建筑的使用者比建筑师更清楚他们需要什么,因此创造并以实践验证了模式语言(与 Sarah Ishikawa 和 Murray Silverstein 合作)。建筑模式语言赋予所有人设计和建造的能力。1958 年 Alexander 移居美国,目前是加州大学伯克利分校的终身荣誉教授。
③雅虎设计模式库(Yahoo Design Pattern Library)目前已发布了 50 个雅虎认为最优的设计模式,包括分页系统、导航和页面布局等。网址为 http://developer.yahoo.com/ypatterns/。
④Sun.com 是 Sun 公司的网站。Sun 这个名字其实来自于 Stanford University Network(斯坦福大学网络)的首字母缩写。该公司推出的著名产品包括 Solaris 操作系统、Java 平台技术及 MySQL 数据库系统等。Sun 在行业中被认为是最具创造性的企业之一,不断尝试新的软件方式和定价模式,但在 2009 年,该公司以 74 亿美金的价格被 Oracle(甲骨文)公司收购。
⑤“电梯陈述”(elevator pitch)是一个风险投资行业的术语,指的是关于产品、服务或项目的摘要性概述。原意是指在和投资家同乘电梯的时间内,创业者用极为简要的方式介绍自己的项目并争取投资。在本书第 5 章和第 7 章都有关于“电梯陈述”的进一步讨论。
可重用策略可以划分为三种资源库:模式、组件,以及交互设计的框架体系。这些资源库能让开发团队充分利用丰富的成品资源,从而提高工作的速度和效率。
我们发现,那些成功实施可重用策略的团队已经尝到了实实在在的甜头。首先,他们可以调用已经(按最基本水平)实现的成品集,快速地拼凑起有效的设计雏形,从而达到让设计尽快启航的目的。这些团队完成整个设计的时间似乎也更短,而且可以周全地涵盖一切有利于提升用户体验的细节和精妙之处。其次,尽管他们在无趣的支撑功能上并未花费太多时间,其设计成果却似乎具备更高的可用性,而且在所有功能中的表现都始终如一。最后,团队进行迭代设计①更为快捷,这让他们有机会在设计尚具可塑性的时候对它进行精细的调整。
在团队的可重用策略中,模式、组件和交互设计的框架体系三者扮演着不同的角色,但都举足轻重。在下一章,我们会更为详细地讨论每一种资源,不过首先请允许我在这里进行一个简要的介绍。
1.1.1 模式:预期行为的锦囊
设 计 模 式 是 重 用 拼 图 中 的 第 一 块 零 件, 它 的 灵 感 来自 于 Christopher Alexander②提出的建筑模式这一概念[见其 1977 年所著的 A Pattern Language: Towns, Building, Construction(《建筑模式语言:城镇、建筑、构造》)一书,牛津大学出版社]。Alexander 观察人们生活和工作的具体行为,然后创建出一系列关于楼房建筑如何支持这些行为的可重用描述。模式并不会使建筑师们落入一成不变的窠臼,相反地,它为他们提供资源以确保所有细节的正确性。
如今的设计模式也与之类似。比如,让我们假设一位正在订票的用户需要输入日期。有哪些支持输入日期的设计呢?一个带自动分析功能的文本框?分别表示年、月、日的三个数字下拉列表?可以直接点选日期的弹出式日历?
针对同一种行为,不同的选择体现出了不同的设计。当开发团队指定一种最适合他们(及其用户)的设计时,就能将其定义为一个模式。日后,当团队需要响应类似的行为时,就能以相似的方式进行响应,利用之前的工作成果来满足用户已经确立的需求。图 1-1 为一个模式文档。
图1-1 雅虎设计模式库③定义的一个模式
图1-1 雅虎设计模式库③定义的一个模式
1.1.2 组件:高效利用可重用的代码
除了模式之外,开发者们还需要一种简便的方式来重用具体的代码。
我们选定了可用的设计模式以后,就需要考虑具体的实现问题了。要想让弹出式日历能顺利工作,屏幕上必须得显示日期。日历必须得响应鼠标的击。它的外观还得与其他的界面元素保持一致。这些都是组件大显身手的地方。
组件会从像素级别来详细指定设计响应。它们通常以代码的形式来体现,因此组件实际上也体现了具体的交互行为。它们是具备了诸如字体、颜色和布局等样式元素的功能性设计方案,如图 1-2 所示。
图1-2 Sun.com④上某个组件的存档记录
图1-2 Sun.com④上某个组件的存档记录
开发人员用组件来拼凑出设计的所有细节。组件构建完成以后,就变成了随时待命的现成元素,能轻易地嵌入到任何新界面中去。这使得每一个环节的开发速度都得到了提高,从早期的原型阶段到最后的部署阶段莫不如此。简而言之,组件就是将设计模式进行完整代码化、模块化后得到的可执行版本。
1.1.3 框架体系:最后的拼图定乾坤
交互设计的框架体系(也就是本书主题)是这个三位一体中的最新成员。如果说设计模式是某个常见问题的通用解决方案,那么交互设计的框架体系则是一系列设计模式再加上其他元素和信息,用以指导完整的系统或站点上下文的设计。
和人体一样,每一个 Web 应用都由一系列相互合作的子系统所组成。每一个子系统都包含许多独立的单元,每个单元都具有各自的功能和用途。如果对这些成功的(和不成功的)网站及应用进行详细的解剖和分析,我们不仅能够标识出那些在不同环境下满足用户需求的常用元素,而且能够更加深刻地理解人类行为,从而改善这些标准,同时在不牺牲可用性的前提下将我们的设计提升到新的高度。
图 1-3 为一个框架体系。
图1-3 一个框架体系的存档文件
图1-3 一个框架体系的存档文件
换句话说,如果仔细观察那些已然运作良好的案例,并且分析其背后的原因,我们就能同时解决两个问题:其一是明确设计的切入点;其二是了解如何才能创建出更好、更强、更快而且和那些老牌经典一样易于使用的交互设计。
比如,在第 4 章中我们将描述一个注册框架,包含了数个常用于鼓励用户注册的设计元素。其中每一个元素都可以被看作是一个独立的设计模式。例如“电梯陈述”(关于应用程序本身价值的一段简要声明),⑤它可以让人们快速、高效地了解这个网站或应用能提供什么。然而,尽管“电梯陈述”消除了用户脑海中的疑点,解决了问题,但它本身其实并没有多大意义。事实上它隶属于另一个更大的问题——如何劝服人们在崭新的 Web 应用中注册。
框架体系不去为“狭隘的”问题提供“狭隘的”解决方案,它处理的是较为复杂的问题。它从产品的整体背景出发,为设计确定指导方针。
当一位用户到达某个新网站,犹豫是否注册的时候,注册框架为他做出清楚的介绍、解答疑问、指明起点,并提供注册的方法。没有哪一个单独的设计模式能处理所有这一切。实际上,真正解决问题的是这些元素的组合。进一步说,任何独立的设计模式都不能告诉我们如何满足用户的所有需求,也不能告诉我们为什么需要首先处理这些需求。
为了弥补这一点,框架体系为包含该模式的整个子系统进行了描述。一个注册子系统需要有输入用户 ID 和密码的模式。但它也需要有重新获得密码的模式、建立用户档案的模式、创建新 ID 的模式,以及修改密码的模式。
开发团队通过观察其他设计并提取共性的方式来标识、记录自己的框架体系。这些元素变成了一个清单,列出了一个完整的系统所需要的一切,从而帮助团队确保拥有所有正确的模式,以便开展设计工作。
框架体系是一种高度的抽象。它不涉及具体的品牌化或视觉设计需求——那是组件来完成的事情。相应地,组件又以独立的设计模式为基础。确切地说,框架体系是某种范围更广的结构化系统,从一开始就能帮助设计师对模式进行选择。我们相信,这种和模式、组件相配合的结构化系统,就是 Rolf 所说的“界面模块”。
————————————
①迭代设计是一种具有更高成功率和生产率的软件开发方式。在迭代式设计中,整个开发过程被分解为一系列周期短小、固定的小项目,被称为一系列的“迭代”。每一次迭代都包括需求分析、设计、实践与测试。通过这种方法,开发工作可以在需求全部确定之前启动,并在一次迭代中完成系统的一部分功能或开发,然后通过客户的反馈来细化需求,并开始新一轮的迭代。
②Christopher Alexander 于 1936 年出生于奥地利维也纳。他是当代建筑大师,以其设计理论和丰富的建筑设计作品而闻名于世。Alexander 认为,建筑的使用者比建筑师更清楚他们需要什么,因此创造并以实践验证了模式语言(与 Sarah Ishikawa 和 Murray Silverstein 合作)。建筑模式语言赋予所有人设计和建造的能力。1958 年 Alexander 移居美国,目前是加州大学伯克利分校的终身荣誉教授。
③雅虎设计模式库(Yahoo Design Pattern Library)目前已发布了 50 个雅虎认为最优的设计模式,包括分页系统、导航和页面布局等。网址为 http://developer.yahoo.com/ypatterns/。
④Sun.com 是 Sun 公司的网站。Sun 这个名字其实来自于 Stanford University Network(斯坦福大学网络)的首字母缩写。该公司推出的著名产品包括 Solaris 操作系统、Java 平台技术及 MySQL 数据库系统等。Sun 在行业中被认为是最具创造性的企业之一,不断尝试新的软件方式和定价模式,但在 2009 年,该公司以 74 亿美金的价格被 Oracle(甲骨文)公司收购。
⑤“电梯陈述”(elevator pitch)是一个风险投资行业的术语,指的是关于产品、服务或项目的摘要性概述。原意是指在和投资家同乘电梯的时间内,创业者用极为简要的方式介绍自己的项目并争取投资。在本书第 5 章和第 7 章都有关于“电梯陈述”的进一步讨论。