从前，有种叫做书的东西，还记得吗？它们很笨重，由枯树做成的纸浆制成。书里有页面，你翻转页面，然后很容易就被割伤手指。这真让人感到蛋疼，我很高兴现在书本上再也没有锋利的页面了。

等等，好像扯得有点远，我们收一收……

页面的历史

页面已经存在了几千年。第一本书大约是4000年前制作的厚厚的粘土板，不久就被卷轴所取代，成为呈现文字的首选方式。从草莎纸到羊皮纸、平装书再到电子书，虽然阅读技术已经发展很长的一段时间，但页面的概念至今仍很流行。

从一开始，页面的隐喻就被编入网络词典中。蒂姆·伯纳斯·李（Tim Berners-Lee）发明了万维网，以便他与欧洲核子研究组织（CERN）的同事和其他学者可以轻松地共享和链接他们的文档世界。而正是由于Web的这种基于文档的学术起源，页面的概念才如此深深地扎根于网络中。

这产生了什么样的结果呢？

正如我们将在本书中讨论的那样，事物的命名方式极大地影响了它被感知和使用的方式。将网页视为页面，对人们与网页的交互体验产生影响，并间接影响了我们创建网页界面的方式。

页面隐喻在开始的时候为用户提供了一种熟悉的语言，来适应新颖的万维网。书签和分页等概念，帮助新的Web用户可以使用他们已经习惯的约定来探索，并最终掌握一种全新的媒体。

Chrome浏览器显示“此网页不可用“

对于Web用户而言，页面曾经是一个非常明显且有用的隐喻，以后也依然会如此。同时，它还对如何创建Web体验产生深远影响。

在网络初期，希望利用网络的公司只是将其书面宣传资料放到到网站上。但是，尽管这些宣传册似的网站只有单一的视角，来说明网站可以提供的服务，创建者仍然可以轻松地理解成，网站是印刷页面的数字表示形式。

现在，我们使用这种新媒体已有25年，这种曾经必要的表达方式已经过时。然而，页面隐喻在我们界定和创建Web项目上依然深入人心。下面是我经常听到的一些例子：

“我们是一家初创公司，希望在今年10月推出一个五页的网站……”

“布拉德，创建主页要花多长时间？”

“我们将如何重新设计这个包含30000页的大学网站？！”

以上所有陈述都犯了一个根本错误，即假设页面是统一的、孤立的、可量化的东西。而实际情况是，网络是一种流动、可交互的、相互依存的媒介。一旦我们认识到这点，页面“作为界定和创建Web体验的有用手段”这个概念便马上受到挑战。

创建首页需要多长时间？这取决于所展示的内容。主页可能仅由标语和背景图组成，这意味着午餐时间就能完成；也可能充满了轮播，动态表单和三方集成，这种情况下，可能需要几个月才能完成。

对于拥有30000页的大学网站，我们可能会想到“成千上万的页面”。但实际上这30000页可能仅包含了三种内容类型和两种布局而已。

所以，项目的工作量其实取决于这些页面中包含的功能和组件的数量，而不是页面本身的数量。

页面隐喻的目的是帮助新用户尽快熟悉网络，并为创建者提供必要的过渡语言来创建新的媒体形式。但是要为大量设备提供经过经得起检验的界面，我们就应该摆脱页面的束缚。

打破页面

值得庆幸的是，Web社区正在努力建立原则和实践，来帮助我们更有效地讨论和创建网页。而关于如何获得成功Web体验的每次交流中都不断出现一个概念：模块化。

模块化起源要远远早于网络。工业革命时代带来了通用零件，亨利·福特的装配线彻底改变了汽车制造工艺。最早的汽车和零件是单独制造的，这导致了许多安全和可维护性的问题。福特将汽车分解成各个组成部分，并使组装过程模块化。结果说明了一切：更统一、更可靠、更安全的汽车从工厂推出，并在更短时间内投入使用。

时光流转，机器时代渐渐走远，我们迎来了计算机时代。计算机科学家开始实践面向对象的程序设计并建立重要的模块化概念，例如关注分离和单一功能原则。网络本身诞生于这个世界，因此模块化设计也迅速成为Web结构的设计原则。

可以肯定的是，这些概念已经慢慢进入Web设计人员的工作流程。在2000年初期，我们看到了诸如YUI和jQuery UI之类的库的引入，这些库为开发人员提供了小插件和样式的工具包，以创建更一致的用户界面。

那么既然模块化已经存在这么长时间，我们为什么现在要谈论它呢？

简短的回答是，模块化当下比以往任何时候都重要。目前，我们整个行业都淹没在大量的设备，视窗大小和在线环境中，而且这种情况不会很快放缓。

破坏只会加速。连接设备的数量和多样性（包括我们尚未想象到的）将爆炸性增长，全世界使用它们的人们的数量和多样性也会爆炸性增长。我们现有的标准，工作流程和基础架构将无法维持。当前设备这种猛烈的增长攻击已经将它们推向了临界点，而且无法承受未来的挑战。——未来友好宣言

这些只是我们需要担心的一些连接设备

不管你喜欢与否，这个多设备的世界都是我们所要面对的现实。让网页只在少数台式机浏览器中显示是不现实的，我们现在的任务是确保在各种各样的智能手机、平板电脑、平板手机、上网本、笔记本电脑、台式机、电视、游戏机等屏幕上精美地展示我们的网站体验。

为了在保持布局合理的同时解决这一现实，我们绝对有必要退后一步，将这些巨大的责任分解为更小，更易于管理的模块。

而这正是人们正在做的事情。模块化的思想正渗透到Web创建过程的各个方面，并对组织的战略、过程、内容、设计和开发产生深远影响。

可管理的策略

每个组织最终都意识到，推出整个网站并每三到八年进行更新并不是也从来都不是最佳解决方案。

换掉旧的，适应新的网络环境！这无疑是一个诱人的前景。但是，甚至在启动会的庆祝还未结束之前，用户就会哭着打电话进来，“你动了我的奶酪！”花了多年时间学习的老界面和功能的全都变了。

当进行大规模的重设计并改变用户体验时，用户就会被以前的使用习惯打败。巨大的重设计对系统造成了颠覆性的影响，用户必须花费大量的时间和精力来重新获得经验，以便慢慢地适应新的操作方式。

除了使用户感到迷失方向之外，这些整体的重设计也无法解决问题的根源。没有流程的根本变化，历史必然会重演，今天的新技术明天将变成老技术。这一循环不断重复，最终使开发者自身陷入瘫痪，并在此过程中使用户感到绝望。

值得庆幸的是，即使是大型组织也正在从规模较小，精简的初创企业中汲取线索，并努力更快地将事情做好。通过创建MVP并快速交付以迭代地改善体验，组织可以更好地解决用户反馈并跟上瞬息万变的Web环境。

摆脱不断重复的重设计，需要对组织结构和工作流程进行更彻底的更改，这说起来容易做起来难。

迭代过程

我听到太多的利益相关者宣称“我们正在努力变得更敏捷”，听得我都耳朵生茧了。

希望更加敏捷是值得称赞的。但是敏捷是一个复杂的概念，在广义的敏捷（Agile）和狭义的敏捷(agile)之间存在巨大差异。

广义的敏捷是一种用于软件开发的特定方法，配有宣言和相应的框架，例如Scrum和Lean。

狭义的敏捷更多地是创建非正式高效流程的愿望。这种愿望当然可能涉及到广义敏捷的一般原则，但也可能并不涉及采用整个敏捷过程。项目经理Brett Harned解释说：

我们希望更加敏捷；我们正在拥抱变化，不断改进，尽可能灵活地适应我们认为合适的方式。问题是，正如宣言所言，我们永远不会真正敏捷。没关系，只要我们想要，就终将会实现。——Brett Harned

组织结构、客户关系、个体差异等等因素都在项目过程中都起着重要作用。诀窍是找到最适合你的流程。

即使可能无法采用真正的敏捷流程，但与跨学科团队合作、更快地进入最终环境、提早并经常交付以及将较大的任务分解为较小的组件，仍然是一个好方法。在第4章中，我们将详细介绍如何建立基于样式的有效工作流。

模块化内容

让你的内容准备好随处可见，因为它将随处可见。——未来友好宣言

由于台式机之前是市面上唯一的设备，因此发布网络内容一直是一项相当简单的工作。但如今环境变了，我们的显示设备已被大量智能手机、老人机、上网本，笔记本、平板电脑、电子阅读器、智能手表、电视、游戏机、数码标牌、汽车仪表板等所占据。

为了更好地应对这种日益多样化和折中的数字环境，我们需要彻底改变对内容的理解及其管理工具。

相信将来，我们将拥有更好的内容管理和发布工具。我们将有办法获取结构良好的内容，精心设计的内容块，然后我们可以弄清楚我们如何以合适的平台、合适的方式进行信息重组、发布和显示。——Karen McGrane

值得庆幸的是，这个未来正在逐渐清晰起来。组织已经意识到，有必要创建模块化的内容，从而更好地覆盖他们使用各种设备的用户。内容管理系统已经超越了Web发布平台的根基，发展成为可以优雅创建和维护模块化内容的工具。

复杂的内容管理系统作为常用解决方案的形式存在了多年，比如NPR的COPE平台，而智能模块化的思想正在进入主流的内容管理系统。

经典代码

正如我们前面所讨论的，模块化一直是计算机科学领域的主要原则。尽管该原则早在Web发明之前就已经存在，但它花了很长时间才根植于Web开发人员的大脑和内心。

尽管JavaScript（网络编程语言）自1995年就存在，但它必须经受成长的阵痛，才能发展成为如今的功能强大、受人尊敬的语言。如今，JavaScript已经成长起来，开发人员可以将这些久经考验的计算机科学原理应用于Web开发工作流中。因此，我们看到人们正在开发复杂的JavaScript样式库和体系结构。

将模块化编程原理应用于JavaScript非常简单，因为JavaScript本身就是一种编程语言。同时，面向对象的思想也正在融入网络的其他方面，包括CSS（即网络样式语言）。诸如OOCSS，SMACSS和BEM之类的方法应运而生，以帮助Web设计人员创建和维护模块化CSS架构。

视觉重组

模块化不仅渗透到Web样式的代码方面，而且正在彻底改变视觉设计师处理现代Web设计的方法。

随着视窗和操作环境数量的激增，为Web体验的每个页面设计静态原型已变得不切实际。正如Stephen Hay打趣的那样，展示完整的Photoshop设计稿“是向客户展示他们的网站永远不会是什么样子的最有效方法。”

这并不是说Photoshop和Sketch这样的静态设计工具不重要。但是，我们使用这些工具的方式已经发生了显著改变。显然创建数百个完整的设计稿并不现实，但这些静态工具擅长于提供一个场地，以建立Andy Clarke所谓的“设计氛围”：

氛围描述了我们从颜色，纹理和版式中获得的感觉。你可能已经从不同的角度想到了气氛。你可能会称其为“感觉”，“情绪”甚至“视觉识别”。无论你选择什么字眼，设计的气氛都不取决于布局。它与布局和视觉位置无关，在每个屏幕尺寸和每个设备上都可以看到或感觉到它。——Andy Clarke

尽早建立设计氛围对于项目的成功至关重要，这也是为什么设计师在没有拿到完整原型之前就进行这方面探索的原因。设计师Samantha Warren发明了称为“样式瓷砖（style tiles）”的设计手法：在一个页面中完美的封装了颜色，类型和质感的探索。设计师Dan Mall以Samantha的想法为基础，创建了一个名为“元素拼贴画（element Collages）“的概念，在界面元素的分解、拼贴中展示设计氛围的探索。

样式瓦片是设计师Samantha Warren提出的概念，可以让设计师探索颜色，版式和质感，而无需设计完整的效果图

通过将视觉探索分解为较小的模块，设计师可以节省时间和精力，同时避免向客户展示不切实际、过早的布局。更重要的是，这种方法避免利益相关者仅从简单的漂亮设计稿中做出反应，转而促进了关于总体设计方向以及与项目目标相关的关键对话。我们将在第4章中更详细地讨论这些概念，这足以说明视觉设计工作流程正在发生巨大变化！

系统的UI设计

我们不是在设计页面，而是在设计组件系统。——Stephen Hay

界面由什么构成？我们的乐高积木是什么？我们组合成数百万种美味的组合的赛百味三明治是什么？正是由于我们一直问自己这些问题，我们才能将界面应用到越来越多的设备中。

几年前，Ethan Marcotte向我们介绍了响应式Web设计的思想及其三个核心原则：流体网格，弹性媒体和CSS媒体查询。这三种原则为设计师创建适应任何屏幕尺寸的灵活布局提供了急需的基础。但更重要的是，响应式设计使设计师对创建周到，适应性强的多设备Web体验感到兴奋。

而设计师们很快发现，创建多设备的Web体验所涉及的内容比创建静态页面复杂得多。界面的每个部分都包含自己独特的挑战和机遇，以使其在众多屏幕尺寸和环境下都能美观地工作。

我们该以适合的方式在较小的屏幕上呈现主要导航（通常在大屏幕上显示为水平列表）？跑马灯、面包屑导航和轮播图如何转换为较小的视窗展现方式？正是这些问题促使我创建了“This Is Responsive”，这是一个响应样式库的案例，它演示了特定组件在响应环境中的各种展示方式。

尽管“This Is Responsive”成功地阐明了这些界面样式如何在屏幕尺寸和环境之间扩展，但仍然需要设计师和开发人员努力才能将这些样式付诸实践。事实证明，这需要大量工作。

UI框架

设计和开发人员已经被时间和资源所束缚，现在又要保证界面在任何环境下都能美观且正常工作，这对他们要求很高。

既要解决不断增长的设备多样性问题，又要按时交付项目，这就产生了诸如Foundation by Zurb和Bootstrap之类的前端框架。这些框架为设计人员提供了封装好的HTML/CSS样式和JavaScript的集合，从而可以将下拉菜单和轮播之类的交互组件添加进功能中。本质上，这些框架是快速搭建界面的快捷工具套件。

Bootstrap提供了一套UI组件以加快开发速度

这些框架很受欢迎。在撰写本书时，Bootstrap是GitHub上最受欢迎的知识库，拥有超过77,000个星标和30,000个fork。它们的流行证表明：设计和开发人员正在为日趋复杂的Web环境寻求更坚实的基础。

其中最吸引人的方面之一是速度。诸如Bootstrap之类的框架使设计人员能够迅速将创意付诸实践，快速创建原型并更快地发布网站。提供的样式已经过跨浏览器测试，所以开发人员可以将时间花在更重要的任务上，而不用费力去测试一些老版本的IE。如果确实遇到问题，这些框架的对应社区贴吧也可以提供有用的支持和建议。

对于自由职业者来说，这种速度的提高可能意味着他们可以多承担几个额外的项目，从而提高自己的收入。在创业公司中，Bootstrap更是无所不在，MVP可以更快推出，从而为产品的可行性提供了更快的答案。

因为可以提供经过良好测试的组件，从而实现一致的设计和更快的发布速度，Bootstrap之类的框架是非常流行的设计系统。然而，生活中没有绝对的完美。

框架遇到的问题

当我还是个孩子的时候，超级迷恋观看科幻电影和电视。但有一个问题一直在困扰我：为什么他们的着装都一样？

将来，每个人的着装都一样。梅利莎·弗罗斯特的插图

我只能猜测，只要有足够的时间，就能解决这种时尚问题。“看看，这些连体裤很时髦，也很舒服！从现在开始，让我们都穿这些衣服。”“听起来不错的样子！”

但这不是人类的工作方式。我们都有不同的品味、目标和愿望。正如人们所说，多样性是生活的调味品，而时尚、音乐和设计则反映了我们的多样性。然而在网络上，我们倾向于陷入一个陷阱，就是希望每个人都以相同的方式做事。

“为什么不是所有的浏览器都使用标准的WebKit？”

“为什么设备制造商不能只使用相同的屏幕尺寸？”

“只能使用jQuery！”

“不要使用jQuery！”

“只能使用框架！”

“不要使用框架！”

像现实世界一样，Web项目的各种需求、目标和愿望导致了各种各样的解决方案。当然，所有事情都有相应的时间和场合，设计和开发人员需要敏锐的知识才能知道何时使用哪些工具。

前端框架是提供特定解决方案和特定外观的工具，有助于加快开发速度，但最终获得的体验却类似于那些科幻连体裤。当每个人都使用相同的按钮，网格，下拉菜单和组件时，自然会开始看起来相似。如果耐克，阿迪达斯，彪马和锐步使用Bootstrap重新设计各自的网站，它们将看起来大体相似。这当然不是这些品牌想要的。当然，每个品牌都可以修改和扩展默认外观，但是进行定制就意味着要与框架的给定结构、样式和功能作斗争。

除了外观相似的问题外，这些框架还会给体验带来不必要的冗余。框架提供了许多封装好的组件和功能，但是大部分的设计和开发人员不会采用框架的每个功能。然而，用户仍然要下载框架中未使用的CSS和JavaScript，从而导致页面加载速度变慢。

另一方面，框架可能不够全面，导致开发人员需要创建大量的自定义代码来实现其项目目标。当这种修改超过某个阈值时，使用框架的最初收益（即开发速度）就会被修改、扩展框架所花费的时间所抵消。

然后是命名问题。**使用框架意味着沿用其他人的结构、命名和模式约定。当然，建立有用的前端词典非常重要，但是对于组织而言，这种意义可能并不是框架本身带来的。举个栗子，Bootstrap的默认组件有个叫“大屏幕”的默认组件，用于创建特色内容区域，而我就不赞成这种命名。在使用框架之前，应该适当地讨论如何将框架的命名约定与现有的代码库和工作流结合起来。

现在我们已经弄清框架的缺点，但这不是重点，重点是认识到这些框架在概念上非常重要。使用框架可以提高一致性并加快开发时间，这是一个绝妙的主意。开发人员Dave Rupert在讨论对Microsoft主页的重新设计时，强调了创建设计体系并将其交付给客户的重要性。Dave明确指出，不一定要为每个客户使用Bootstrap，而是要为“每个客户创建小型的Bootstraps”。

响应式交付应该看起来很像功能完整的Twitter Bootstrap风格的系统，该系统是根据客户需求量身定制的。这些活动的代码示例是自记录的样式指南，可进行扩展以满足客户需求以及不断发展的多设备Web的需求。——戴夫·鲁珀特

这不仅仅是关于使用设计体系，而是关于创建你的设计体系。

设计体系拯救世界

那么健康的设计体系是什么样的呢？他们采取什么形式？又如何创建，维护和实施它们？

优秀设计体系的基础是风格指南（style guides），它记录并组织设计材料，同时提供了指南，用法和引导。

风格指南有很多种具体的分类，包括品牌识别，写作风格，语态和语气，代码，设计语言和用户界面样式等。本书不会详细介绍风格指南的所有类别，但重要的是了解每种风格指南，以更好地理解每种风格指南如何相互影响，以及针对web的风格指南如何适应更大的生态系统。

品牌识别

品牌识别指南定义了公司独一无二的资产和材料。Logo，版式，色板，信息（任务说明和标语），附属品（名片和PPT模板）等在品牌识别指南中进行了汇总和描述。

西弗吉尼亚大学的品牌风格指南

在越来越多的媒体，渠道和触点上以统一的方式展现自己的品牌至关重要。组织中的每个人如何才能让他人感到他们属于实体的一部分？第三方如何知道要使用哪种颜色以及如何正确使用品牌logo？品牌识别指南集中地提供了这些基本问题的答案。

设计语言

品牌识别指南还是看得着摸得到的，而设计语言指南则很难摸到。设计语言风格指南阐明了针对特定项目或产品的一般设计方向，理念和方法。

为了在越来越多的产品和媒体中以统一的方式展示自己，Google开发了一种称为“ 材料设计（material design）”的设计语言。材料设计风格指南定义了其总体的设计理念，目标和一般原则，同时还提供了材料设计语言的具体应用方法。

Google的材料设计语言

设计语言风格指南通常可以并入其他样式指南类别的各个方面，以使高级概念更加具体。

设计语言指南不像品牌指南那样一成不变。例如，有一天Google可能会开发一种新的设计语言来代替材料设计，因此虽然Google的整体品牌将保持不变，但围绕其产品的设计将发生变化。

语态和语气

人们通过众多渠道和媒体与品牌互动。除了目前为止我们讨论的数字媒体，品牌还通过印刷品，零售渠道，户外广告，广播，电视和其他渠道运营。当一个品牌必须跨越多个不同的触点进行交流时，以统一，一致的方式说话对于品牌成功至关重要。

品牌的语态每天都保持不变，但其语气必须一直变化，这取决于情况和读者的感受。——凯特·基弗·李

语态是品牌标识的基本方面，因此通常，品牌标识指南会包含一些有关品牌语态的指南。但是，这些准则通常并不太具体，这就是为什么语态和语气指南如此重要的原因。

语态和语气指南通过阐明如何在各种情况下转换公司的语态和语气，从而使品牌深入人心。MailChimp出色的语态和语气指南定义了品牌的语气在内容类型之间的变化方式，当用户的信用卡被拒收时，写作者会知道不能使用通常那种厚脸皮和俏皮的语调，而是采用更为严肃的语气。

MailChimp的语音和音调准则

写作指南

Web和内容管理网站的兴起使许多人比以往更容易发布内容。当然，这是一把双刃剑，因为要为拥有众多声音的组织保持一致的写作风格可能会带来挑战。写作风格指南为每位作者提供了一些内容贡献的准则和指导。

经济学人的写作风格指南

写作风格指南可以非常细致，定义标点符号和语法方面的细节，也可以不那么详细。达尔豪西大学的写作风格指南为内容贡献者提供了简要原则和最佳实践列表。

代码样式指南

对于团队来说，编写清晰、可扩展、可维护的代码至关重要。但是，如果没有找到促进和执行代码一致性的方法，事情就很容易崩溃，并使每个开发人员都晕头转向。

GitHub的代码样式指南提供了在其组织内编写HTML，CSS，JavaScript和Ruby的最佳实践

代码风格指南提供了有关团队应如何使用其代码的约定、模式和示例。这些准则和指导有助于遏制疯狂的行为，使团队可以集中精力共同完成出色的工作，而不是重构一堆草率，不一致的代码。

样式库

现在我们终于讲到了重点。样式库，也称为前端样式指南，UI库或组件库，正迅速成为现代界面设计的基石。

美国样式库代码

本书的其余部分将集中于如何以系统的方式进行界面设计，并详细介绍如何建立和维护样式库。

风格指南的好处

要确保界面在各种屏幕尺寸、设备、浏览器和环境中都能正常显示已经很南，这时候，如果再考虑到团队成员、客户、利益相关者和组织等因素，就会变得南上加南。

而不管从设计、开发还是组织的角度来看，风格指南都是防止混乱的重要工具。因此，风格指南成为现代Web设计和
开发的重要工具。

保持一致性

风格指南可使整个界面保持良好的一致性和凝聚力，而一致性最终会使设计人员和用户受益。

我最近在访问保险提供商的网站来支付账单时，一共五次单击的过程中，遇到了四种截然不同的界面风格，其中一些看起来像是上个世纪的界面。这种不一致的体验给用户带来了负担，他们不清楚自己在哪，要去哪儿，以及如何解释不同的界面元素。当进入到付款表单时，我感到无法相信该公司会成功且安全地处理我的付款。

风格指南通过鼓励复用界面元素来帮助消除这些不一致。设计和开发人员可以参考现有的样式，以确保他们正在制作的与已有元素保持一致。

甚至第三方公司也可以充分利用风格指南，将其负责的界面风格和企业保持一致。通过使用指南中定义好的风格，那些外部托管功能，如支付模块或国外站点等部分的体验也可以更好地匹配主视觉风格。

将风格指南作为流程的核心，可使界面更加统一和可信，从而帮助用户更快地完成任务并掌握界面。

共享词汇表

“实用工具栏”是什么意思？每个人都知道什么是“触摸滑块区域”吗？

随着从事项目人员数量的增加，沟通问题时常发生。经常会遇到不同岗位的同学对同一模块使用不同的名称，甚至每个人还有自己独特命名习惯。为了实现真正的协作，团队必须使用同一种通用语言。而风格指南可帮助你建立共享词汇表。

星巴克风格指南中的“ Blocks Three-Up”等命名可以帮助团队成员使用相同的词语

风格指南在项目每个人之间建立了一致、共享的词汇表，从而鼓励各岗位之间进行协作，并减少沟通问题。

扩大影响力

Anna Debenham 在她的《前端样式指南》一书中巧妙地解释了创建风格指南的许多优点，其中包括最关键的好处之一：扩大影响力。

扩大影响非常重要重要，风格指南可以向客户显示网站是一个系统而不是页面的集合。——Anna Debenham

风格指南向客户、利益相关者和其他岗位证明，除了说“让我们创建一个新网站”之外，网站设计和开发工作还涉及很多需要深度思考的工作。样式库以一种非常直观的方式传达设计语言，这有助于利益相关者了解，最终界面是由底层系统决定的。

风格指南可以帮助缓解我所说的“特殊综合症”，即组织中的某些部门认为它们存在独特的问题，因此需要独特的解决方案。通过以风格指南的形式公开设计体系，这些“特殊的人”可以更好地理解一致性，并理解为什么他们的定制设计请求会被推迟。

同理心工作流

风格指南不仅对客户和利益相关者产生重要影响。良好的风格指南还可以帮助设计和开发人员了解他们工具箱拥有的工具，并提供如何正确使用的规则和最佳实践。

通过将风格指南作为工作流程的基础（我们将在第4章中详细介绍），设计和开发人员被迫考虑其决策将如何影响更广泛的设计体系。从而减少各自为政，更多的考虑整体的利益，这正是你希望团队所要做到的。

风格指南为每个岗位提供了一个途径，来贡献他们各自对风格的思考和关注。通过将所有这些考虑因素汇总在一起，风格指南将成为每个参与项目者的中心，这有助于每个岗位从多个角度更好地理解设计体系。

更容易测试

如果主页出问题了，那问题到底出在哪？

将界面拆成组件使测试变得更加容易。风格指南可让你单独地查看界面样式，从而使开发人员将精力集中在错误，浏览器不一致或性能问题上。

加快速度

在本章的前面，我们讨论了加快设计和开发速度是Bootstrap这样的UI框架如此受欢迎的主要原因之一。我们面临着尽快完成项目的压力，通过开发自己的设计体系，你可以获得与现成的UI框架相同的速度回报。

确实，设计界面设计体系和创建自定义样式库需要在初期花费大量时间、思想和精力。但是，一旦建立了样式库，后续的设计和开发就会变得更快，这会使每个人都很高兴。

MailChimp的首席用户体验开发人员Federico Holgado， 解释了MailChimp的样式库是如何由从最初应用程序的四个主屏幕创建的样式组成的。同时，当他们转移到网站的其他区域，他们意识到可以使用现有样式，而不必每次都从头开始生成全新的样式。

…一旦我们这样做时，正如我们在其他页面中实现的那样，我们开始意识到：该系统实际上将在这里运行，同时也会在其他地方运行。——Federico Holgado

长期价值

毫无疑问，风格指南可以帮助团队在此时此刻有效地完成工作。同时，就像优质葡萄酒一样，风格指南的价值也会随着时间而增加。界面设计体系的美妙之处在于，它可以在以后几年中进行修改、扩展和完善，事实上也确实如此。

如上所述，创建自定义样式库需要大量的前期工作，但该工作为将来的迭代和完善提供了结构基础。从数据分析、用户测试、A / B测试和经验中汲取的经验教训应纳入风格指南，使其成为真理、知识和最佳实践的强大枢纽。

更进一步，即使你要进行重大的重设计，也会发现许多界面结构模块可以保持不变。你仍然会用到表单、按钮、标题和其他常见的界面样式，因此无需分辨白猫黑猫。风格指南为将来的所有工作奠定了坚实的基础，即使将来的工作看起来可能完全不同。

风格指南的挑战

到现在为止，创建设计系统的好处应该已经非常清楚，你的头脑中甚至已经浮现出精美的风格指南。但是要真正完成风格指南，你必须首先克服随之而来的许多变幻莫测的挑战。

艰难的说服工作

为了从风格指南中受益，组织必须首先适当地花费必要的时间和预算。这就要求组织克服短期的思想，而这种思想经常渗透到公司文化中。

风格指南所提供的长期利益对于那些已经在考虑长期的人来说显而易见。因此，面临的首要挑战是，如何使那些陷入短期思想的人相信，建立完善的设计系统是未来的明智投资。

有限的时间

困难的部分是建造用于生产产品的机器。——Dennis Crowley

创建风格指南遇到的最大、最不可避免的挑战是需要花费大量时间。我不知道你怎么看，我不是那种每天上班都闲的无聊，不知道如何处理时间的人。我从未见过一个没有压力的人，通常压力会导致他专注于主要的Web项目。不幸的是，即使团队有心去创建风格指南，激进的截止时间和有限的预算也会分散精力。

辅助项目

样式库通常被视为辅助项目，而不是最终产品的组成部分。一旦将样式库独立于核心项目，它们往往会被归类于锦上添花，因此在遇到困难的时候被首先砍掉。

这种情况类似于经常听到的关于在项目中考虑无障碍设计的观点。有些人会说：“我们希望有时间和预算来进行无障碍设计，但是balabala……”无障碍设计原则（以及性能和响应式等其他原则）是一项昂贵的额外项目，这种说法是谬论。与无障碍设计一样，无论项目是否明确要求，样式库都对你的工作流程有很大帮助。

维护与管理

即使投入了时间和金钱来建立风格指南，这些有价值的工具如果不能得到足够的关注以充分发挥其真正潜力，也往往半途而废。

维护和管理策略对于风格指南的成功至关重要。如果没有适当的策略来管理、维护和执行，风格指南将会和PSD文件和线框图一样，被扔进垃圾箱并丢弃。

风格指南的维护是一个非常重要的主题，值得详细介绍，因此我们将在第5章中深入探讨。

受众困惑

风格指南可能被误解为仅对设计或开发人员有用的工具，导致缺乏可见性并影响最终效果。风格指南需要组织中每个岗位都遵守，而不是让某个人单独使用。说我幼稚也罢，但我认为这不会有助于培养合作文化。

如果不考虑更广泛的受众，风格指南可能会太含糊或太技术性，可能会吓到其他岗位的人，并使他们认为这些资源不适合他们。

风格指南结构

为了使风格指南对组织中的每个人都是有用的资源，应该清楚地传达自己的含义和重要性。风格指南应有吸引力、引人注目、可见、清晰且易用。应该意识到，将有大量的观众观看，因此，其目标是对尽可能多的人开放和有用。

Yelp的风格指南首页采用漂亮的设计和重要的介绍性文字，解释了指南的目的和受众

缺乏上下文

上下文是理解设计系统的关键。不幸的是，大多数样式库都没有提供有关何时，何地及如何使用的任何提示。如果不提供上下文，设计和开发人员将不知道如何在全局使用某个特定样式，最终会导致样式发生改变时，他们不知道应用程序的哪些页面需要重新访问，进行质量检查以及测试。

“高亮显示块”看起来很有用，但是在哪里使用此样式

缺乏明确的方法

尽管我非常喜欢一些样式库，但我不禁注意到其中很多都缺乏结构。别误会我的意思，我认为团队进行系统的思考并记录其UI样式非常好。但我觉得许多样式库只不过是模块的散乱排列而已，还有改进的空间。

寻找界面设计方法

为了使我们能够为这种百花齐放的网络环境创造优秀体验，我们必须超越自网络诞生以来一直伴随着我们的页面隐喻。幸运的是，组织在Web创建过程的各个方面都开始拥抱模块化，从而带来了更智能的工作流和可持续的系统。

随着设备，浏览器和环境的数量以惊人的速度持续增长，创建全面、精心设计的界面设计系统的需求比以往任何时候都更加强烈。

接下来我们进入原子设计的世界。