在本章中,我们将深入探究可重用策略中的三个组成部分,以便在后续的内容中你能更好地理解设计模式、组件和交互设计框架体系三者之间是如何相互关联、相互协作的。
可重用铁三角的诞生并非轻而易举,产生的顺序也绝非符合逻辑。模式的概念最初始于Christopher Alexander 于1977 年写的书, 其后又被LukeWroblewski、Bill Scott、Martijn van Welie、Theresa Neil、ChristianCrumlish 、Jenifer Tidwell等模式倡导者和众多业界专家所普及和发扬光大。正是在他们的努力下,模式这一概念目前已被推广到了Web 设计实践的前沿。而组件——表示模式自然演变的完整的、生产就绪的页面元素——则出现得颇晚,至少在软件设计领域是如此(与开发相比)。
事实上,尽管有关组件的想法雏形已经酝酿了数年的时间,但它才刚开始作为一种概念被标准化。这要特别感谢来自EightShapes的两位设计师NathanCurtis(著有《模块化网页设计:为用户体验设计和存档而创建可重用的组件》一书,New Riders 出版社)和Dan Brown(著有《设计沟通十器》一书,NewRiders 出版社)所付出的努力。而框架体系则是拼图的最后一块,在你手中这本书里首次以正规文档的形式记录下来。然而,在实际工作中,我们应该首先考虑框架体系,模式其次,最后是组件。如图2-1 所示,这也是它们在网页设计过程中最为有效的使用和思考顺序。
设计模式实际上就是隶属于大型框架体系的生产模式。而组件则是针对具体某个系统对模式进行实现后的产物。它将模式具象化为网站或应用界面中的一个部件,使之能够通过网络被直接交互。
接下来我们会按照构思这些元素的顺序逐一进行深入讨论。无论你对模式和组件是否熟悉,预先了解这些框架体系的基本组成部分,都将有助于我们建立起正确的大局观。
![]() |
| (点击查看大图)图2-1可重用铁三角 |
2.1 设计模式
设计模式其实是一种针对某个常见问题的常用解决方案。比如,分页模式就为我们呈现了一种标准的交互接口,它将搜索结果以多个页面显示,同时在每个结果页的底部加上指向不同页面的链接。这种设计通常会包含Previous(上一页)和Next(下一页)按钮、通往其他各个结果页的数字序号链接以及一个指示当前页面的视觉标志,如图2-2 所示。
![]() |
| 图2-2 来自雅虎设计模式库的分页界面示例 |
似乎很眼熟?本应如此。在每一个雅虎搜索结果页面的底部,你都能见到它。
也许雅虎并不是第一个使用这种设计的网站,但是雅虎的版本被使用的频率如此之高,其他几乎所有的搜索系统都或多或少沿用了它。这使它变成了一种模式——取得了巨大成功的模式。实际上,它已经被不计其数的模式资源库(无论是公共库还是私有库)所收录和引用。
设计模式所带来的首要好处就是,用户能够将自己在某一个网站上的体验转化为通用的操作经验,运用到其他所有使用相同模式的网站中去。在雅虎上进行了数次搜索之后,用户就能很轻松地理解其他任何使用了相似设计的分页界面,不管是在哪个网站。
而另一方面,设计师们从中也获益匪浅。因为模式能够为大量典型的设计问题提供“罐装”的解决方案。不必为每一个新网站都思考和创造新的搜索导航系统,我们只需要拿出分页模式,做一些小小的调整就可以了。
数年来,许多成熟的设计模式已经成为互联网中的模块,这无疑是明智之举。而框架体系的构建前提就是成功的模式。





