模板站和定制章的区别(定模板的作用)

作者：Brad Frost 翻译：梅小菜 Ryan 逗砂 校对：蜜汁莉 Zxj 逗砂

其它章节

　　提示：本章节长达1.2w字，预计阅读时间30min，终于校对完了，开心 _(:3 」∠)_ 感谢一起辛苦翻译和校对的小伙伴们 ！

　　有了人员，流程，就产生了设计系统

　　多说无用。到目前为止，我们已经说了太多太多。这并不是说它不是富有成效的谈话！毕竟，我们已经讨论了模块化思维的重要性，我们学习了一种制作深思熟虑UI设计系统的方法， 并且展示了创建有效模式库的工具。

　　这是橡胶与路的融合地方（美国轮胎广告词,引申为“发挥实际作用、派上用场”）。这是我们撸起袖子就干，把理论付诸于实践的地方。这是我们解决问题的地方。本章将从营销性、创造性和保持高效的设计系统内容深入讲解。你准备好了吗？那就开始吧。

　　# 先从人开始讲

　　有关创建有效的设计系统（或做任何伟大的作品）的公开秘密是： 这一切都归功于人们真诚的协作和交流。

　　如果这是常识，为什么我们不经常听到世界各地成千上万的成功案例？我让马克·博尔顿来解释：

　　设计过程神秘而又复杂，因为人神秘而又复杂。--马克·博尔顿

　　你也许拥有所有合适的技术，使用最新和最棒的工具，甚至在身边有才华横溢的天才，但如果每个人都不真正参与合作并且相互之间没有交流，那么你无法创造伟大的作品。道理就这么简单。这并不是说你不能创造良好的作品，但通常情况下，你会创造出许多令人失望的劣作 。

　　建立和维护成功的界面设计系统需要整个组织的努力，本章将讨论如何通过克服人类的种种怪癖来让这一切发生。

　　# 什么时候需要建立一个设计系统

　　所以建立一个界面设计系统的最佳时机是什么时候呢？就是 现在。

　　设计系统及其附带模式库（pattern libraries）通常联合新的设计、重设计、平台革新或者其他自主设计的时候创造的。捎带其他项目是个让模式库（pattern libraries）潜入到您的组织的好方法。

　　这就是说，在创建一个设计系统和模式库时不一定需要与另一个项目相一致。如果你能说服你的客户和利益相关者从腰包里掏出现金和资源专用于设计系统的项目，那么这对你来说是非常有益的！

　　究竟怎么把你的设计系统卖给你的客户、上司、同事和利益相关者？带上你的商务帽，我们将在下一节讨论这个问题！

　　# 推销模式

　　介绍一种新的做事方式不是件容易的事，因为这需要改变人们固有的心理和行为模式。想通过建立设计系统吸引利益相关者和客户不仅仅包括持续的培训，更需要一点点营销技巧。

　　首先，向你的客户，同事和利益相关者介绍界面设计系统这个概念是必要的。向他们说明这个系统是什么，以及这个系统可以通过很多方式帮助他们更好的组织和实现设计。我们贯穿全书都是在讨论的这些好处，所以你可以解释设计系统如何提高一致性和凝聚力 ， 加快你团队的工作效率 ， 建立一个更协调的工作流程 ， 创建共享词库 ， 提供有用的文档 ， 使测试更加简单 ，并可以作为面向未来的友好设计的基础 。而谁能拒绝以上这一切？

　　唉，我发现我可以把设计系统夸的天花乱坠，直到我脸色发青，但商人并不总是和普通人用同样的眼光看待事物。稍微重新组织下这个问题就会有很大的帮助。简单地问他“ 你是否喜欢节省时间和金钱？会更加的有效。如果回答是否，恐怕你有比销售设计系统的更大的问题。如果回答是是，那么你可以节约大量时间和金钱。让我们来试试，如何？

设计系统创造富有凝聚力的，一致的体验 。这意味着用户能更快的掌握你的UI，从而有更大的用户转换率，获得基于你的利益相关者关心的指标和更多的钱。

设计系统加速你的团队的工作流程。不是每一个新的请求都需要重新发明轮子，团队可以重复使用已经建立的UI模板快速的推出新的页面和功能。

在模式库集中的UI组件为每一位团队成员建立了共享词库，并在所有学科中创建一个更具协作性的工作流程 。大家讲同一种语言，可以把时间专注于去完成工作而不是都花在处理反复无效的沟通和会议上。

设计系统使跨浏览器/设备，性能和可访问性测试更加简单 ，大大加快了生产时间，并让团队更快地推出更高质量的工作。此外，将可访问性等事物融入到一个进化的设计系统中可以扩展这些最佳实践，让你的界面来吸引更多的用户，同时降低你被起诉的风险！

一旦建立了一个设计系统（附带模式库），它将成为组织随着时间的推移修改，调整，扩展和改进的一个未来友好的基础 。做了一些A / B测试？将这些测试的经验教训放在进化的设计系统中。做了一些大的性能优化？把它们运用到进化的设计系统中！进化的设计系统的进化部分意味着他们可以随时适应组织的未来需求，节省时间和金钱。

　　根据时间和金钱来衡量一件事物，有助于人们保管好自己的钱包和理解为什么设计系统是值得追求的。运气好的话，这些对话将转化为组织的具体承诺（见：实时分配时间和金钱），使设计系统得以存在。

　　# 去展示，而不是去说：界面清单（interface inventories）的力量

　　真希望说服力就如同与合适的人进行一些适时的对话一样容易。也许你有足够的智慧来通过谈话达成协议，但对我们这些凡人而言光是去说是远远不够的。有时你需要更多，有时候你需要让他们感到痛苦 。

　　进入界面清单（interface inventory）

　　许多人都熟悉内容清单（content inventory）的概念。内容审核通常在网站重设计过程的早期阶段进行，以评估网站包含的所有内容。这是充斥着电子表格和咖啡因的繁琐的过程，但所有的辛勤工作都是值得的。在演习结束之后，该组织的内容将在桌上列出，给予团队在处理项目时如何处理内容方面的宝贵见解。

　　界面清单（interface inventory）和内容清单（content inventory）类似，只是把筛选和分类内容替换成了对组成用户界面的所有组件进行分类和归类。界面清单（interface inventory），是对构成你的用户界面的点点滴滴碎片的全面收集。

　　这是United.com主页上所有独特按钮样式的集合。一个界面清单（interface inventory）是对构成界面的所有独特模式进行分类。

　　# 进行界面审核（interface audit）

　　你如何进行一个界面审核（interface audit）？你如何综合构成UI的所有组件？简单的答案是截图 。很多的截图！创建界面清单（interface inventory）需要屏蔽和松散地对组成用户界面的所有独特组件分类。虽然这是一个相对简单的努力，但有一些重要的考虑因素要注意，以便清单尽可能有用。让我们通过这个过程创建一个成功的界面清单。

　　# 第1步：召集队伍

　　我遇到了许多雄心勃勃的设计师和开发人员，他们自己开始记录他们组织的UI模式。 虽然我当然赞赏个人的野心，但有必要让团队的所有成员体验到UI不一致所带来的痛苦，才能让他们开始系统思考。

　　为了使界面清单（interface inventory）尽可能有效，负责该网站成功的所有领域的代表都应在一个房间里一起参与进来。召集一个这样的队伍：UX设计师，视觉设计师，前端开发，后端开发，文案，内容策划，项目经理，企业老板，QA和其他利益相关者。多多益善！毕竟，这项工作的最重要的成果之一是为组织中的所有人建立一个共享词库，这需要整个团队的投入。

　　# 第2步：准备截图

　　界面清单（interface inventory）练习产生大量的截图，所以自然就需要软件来捕捉和显示的屏幕截图。一些可能用到的工具包括：

PowerPoint或Keynote

Photoshop 或 Sketch

Evernote Web Clipper

Google Docs 或 Microsoft Word

Google Slides（如果你有兴趣，我创建了一个谷歌幻灯片界面清单模板 ）

　　让所有参与者使用相同的软件屏幕截图，以便他们能够在以后汇总，这是很重要的。我创建了一个 Google Slides 界面清单（interface inventory）模板为团队出发使用。

　　最终，你用什么工具并不重要，但每个人都应该使用同一个工具，以便在练习结束后汇总更容易。我发现像Google Slides这样的在线幻灯片制作软件非常有效，是因为它提供了自由形式图像定位画布，他们被分成幻灯片，以便于分类，而且它们是基于网络的，因此可以轻松共享。

　　# 第3步：截图练习

　　让你的手指准备好屏幕截图，这是它大展身手的时候了！界面审核练习涉及到截屏和对构成你的体验的所有独特UI模式进行分类。 牢记这项工作并不意味着收集特定的UI模式的每一个实例 ，而是收集每个独特的 UI样式的一个实例 。

　　分配每个参与者一个UI类别。你可能需要安排人员或参与者记录多个类别，具体多少取决于参加练习的人数。 再者，尽可能多的参与者是很有帮助的，因为更多的人参与截屏将形成更全面的文档。

　　# 应该收集什么样的样式？

　　什么样的界面元素类别应被收集？显然，每个界面的类别都不一样，但这里有几个类别入手：

全局元素 ：在整个体验中共享的组件，如页眉，页脚和其他全局元素。

导航：主导航，页脚导航，分页，导航痕迹，交互式组件控件，以及本质上是用于用户界面导航的任何东西。

图像类型：logo，首页大图（hero images），用户头像，缩略图，背景，以及在UI中显示的任何其他类型的图像模式。

图标：图标是属于自己类别的特殊类型的图像。拍摄放大镜（搜索图标），社交图标，箭头，汉堡，旋转器，边框和每个其他界面图标。

表单：输入，文本区域，选择菜单，复选框，开关，单选按钮，滑块和其他形式的用户输入。

按钮：按钮是典型的UI元素。在整个体验中收集的所有特有的按钮模板：主要按钮，次要按钮，大按钮，小按钮，禁用按钮，活动，加载，甚至看起来像文本链接的按钮。

标题：有 h1 ， h2 ， h3 ， h4 ， h5 ， h6和排版标题的变体。

Blocks：也称为touts，标注，摘要，广告或首页大图，Blocks 是印刷标题和／或图像和／或摘要文本的集合（请参阅Nicole Sullivan关于媒体对象作为块的示例） 。

列表：列表类型的格式是以无序的，有序的，定义，项目符号，编号，线框表，条纹表，或任何组元素呈现的。

交互式组件 ：折叠面板，Tab标签，轮播图，和其他具有移动部件的功能模块。

媒体：视频播放器，音频播放器和其他多媒体元素。

第三方组件 ：窗口小部件，内部框架，股票行情，社交按钮， 爬虫脚本 ，和其他任何未在你的域名上托管的组件。

广告：所有的广告格式和尺寸。

消息：警示，成功，错误，警告，验证，加载，弹出窗口，工具提示等。这可能是一个具有挑战性的类别，因为消息传递通常需要用户操作才能显示出来。

颜色 ：收集界面中呈现的所有种类的颜色。这个类别可以通过非常棒的风格指导引导工具来协助，如CSS Stats和Stylify me 。

动效 ：动效是用户界面的组成元素，应该被记录下来。这需要使用如QuickTime的屏幕录制软件来捕获屏幕上的动画效果，如移动，淡化，抖动，转换或闪烁的任何UI元素。

大型银行网站的界面清单中各种表单元素的示例。

大型银行网站的界面清单中各种按钮样式的示例。

　　同样，这些类别不是一成不变的，会根据你处理的用户界面的性质的不同而不同。当然，添加，减少或修改这些类别需要根据你的组织的需求来定。

　　# 时间就是一切。

　　在屏幕截图练习中设置时间限制很重要，以避免持续一整天都掉进的兔子坑中爬不出来。你分配多少时间将取决于有多少人参与，但我发现在30~90分钟足以让第一次界面清单通过。设置一个计时器，除去一些危害！音乐（好吧，也许不是危害！，有些音乐为练习提供了乐观的心情），并让参与者专注于对遇到的独特UI样式进行屏幕截图。

　　# 深入挖掘

　　网站的哪部分应该参与界面清单（interface inventory）的收集？简单来说就是：一切 。你应该记录下任何由你或者可能由你组织管理的UI。

　　但是这一点比较困难，因为组织者偏爱在某一块经验丰富的人。比如，在电商网站工作的人往往更侧重的核心是购物体验，尽管在客户支持、常见问题解答、尺寸图表、404页面和法律条款方面对于用户体验也极为重要。因为用户感知品牌的方式是将你的品牌视为一个整体体，他们并不关心你的组织结构、技术堆栈或其他任何可能导致UI界面不一致的内容。鼓励界面审核参与者尽可能在练习期间完全遵守上面的原则。

　　# 第4步：展示结果

　　屏幕截图练习过程可能有些让人难以招架，所以团队在练习完成后需要休息下，吃点零食，喝杯咖啡，放松一下你的腿。每个人都感觉清醒了的时候，现就可以开始讨论你所收集的东西了。

　　每个参与者用五到十分钟向团队呈现每个UI的类别，这就是乐趣所在了，团队可以讨论现有UI模式背后的基本原理，启动关于命名约定的讨论，让团队在兴奋之中建立一个更一致的界面。

　　命名一件非常困难的事情。 听到设计师、开发人员、产品所有者和其他利益相关者对相同的UI样式有着不一致的名字，真是太有趣了。 “嗯，我们把它叫做实用工具吧。”“嗯，我们把它叫做管理员导航。”“嗯，我们把它叫做浮动动作区域！”这个练习是个挖掘和排除样式标签之间差异的机会， 同时为以前未标记的样式的创建名称。 不要以为十分钟之内可以在样式命名上达成一致，这次练习只是为了开展更广泛的讨论。

　　一旦每个类别都已经提交和讨论过了，所有的参与者都应该把幻灯片发送给这次练习的领导者。 领导者将把所有内容都合并成一个大型über文档（über-document），这将很快成为一个真理和正义的残酷集合。

　　# 第5步：重整旗鼓进入下一步

　　有了über文档（über-document），是时候让整个组织参与设计一个界面设计系统了。

　　你想不想看CEO哭？暴露所有UI的不一致是一个很好的方法！界面清单（interface inventory）最强大的优点之一是你可以向任何人展示，包括非设计师和开发人员，他们将了解为什么不一致的UI有问题。 即使你不是一个设计师也能意识到包含37种不同的按钮样式的界面不是那么合理。这是你的机会，让利益相关者清晰地看到，以更系统的方式走向你的用户界面对用户和组织都很有意义。

　　除了向主要利益相关者贯彻这一想法外， 参与初步界面清单（interface inventory）练习所做的努力和讨论都应该转化为未来设计系统和模式库的种子。 。

　　最初的练习很可能没有收集到每一个独特的UI模式，所以你可能需要进行另一个界面审核练习来收集更完整的UI模式。这可能会再次涉及一个大型组织，但实际上一个小型跨学科团队将会通过über文档（über-document）为设计系统建立后续的步骤。

　　一旦填补了界面清单（interface inventory）的空白，工作组就可以对设计系统项目的后续步骤展开重要讨论。讨论的关键问题包括：

哪些样式应该保留，哪些应该去除，哪些可以合并在一起？

我们应该定什么样的样式名称？

将界面清单（interface inventory）转换为可以使用的模式库的后续步骤是什么？

　　# 界面清单（interface inventory）的好处

　　创建界面清单（interface inventory）可能是一个艰巨的任务，但是这样做有很多好处：

搜集所有样式以及其不一致的地方：界面清单（interface inventory）将对构成你UI的所有不同样式进行整理。 看起来所有都很类似但又彼此不同，样式彼此相邻，暴露了冗余，并强调了创建具有一致性且富有凝聚力的体验的必要性。

获得组织认同 ：拥有大量，多样化的学科群体参与此练习，有助于每个人了解创建和维护用户界面一致性的的价值。 此外，界面库über文档（über-document）是一个用于说服利益相关者、老板和客户投资界面设计系统非常强大的工具。

建立工作范围 ：界面清单（interface inventory）帮助设计团队确定设计和构建每个UI模式所需的精力，作为设计或重设计项目的一部分。哪些组件相对容易或难以转换成响应式环境？设计和开发对于每个组件的内容需要考虑什么？界面清单（interface inventory）使团队能够进行重要对话，帮助建立项目的实际范围和时间期限表。

为完善的界面设计系统奠定了基础 ：界面清单（interface inventory）建立综合型部件库是重要的第一步。收集所有现有的UI样式以确定最终哪些样式将在活动设计系统中削减是至关重要的。界面审核工作还有助于团队建立共享词库，这对于最终设计系统的成功至关重要。

　　# 请求原谅，而不是许可

　　所以你已经和利益相关者讨论了建立设计系统的好处，甚至创建了一个界面清单（interface inventory），向他们展示当前UI不一致的残骸。 然而即使你付出了所有的努力，他们还是打破了建立界面清单（interface inventory）设计系统和模式库的理念。负责任的web团队应该怎么做？

　　这么做：

　　默认情况下，我们如何将性能，可访问性和响应性构建到我们的产品和过程中，我们也应该默认创建设计系统。你不需要得到客户的许可才能开始这么做。不要给利益相关者说不的机会，他们会这么说的，所以压根不要给他们这个机会！我们的工作是为我们的客户和组织创造伟大的作品，界面设计系统是实现这一目的的手段。

　　事实上，要创造整体，首先你需要创建整体的一部分。不管你是否在意，我们的界面都是由更小的部分组成的。

　　你必须做出决定：是只关注创造整体忽视部分，还是花一些时间组织部分来帮助你更有效地创造整体。在Wolfram Nagel的书《Multiscreen UX Design》中，他使用乐高积木作为类比，巧妙的阐述了这些方法。

　　融入乐高项目的一种方法是将零件从箱子中放出到桌子上，卷起袖子，然后开始构建你的创作。

　　接近LEGO项目的一种方法是简单地将碎片倾倒在桌子上，并通过翻找这堆零碎的东西来获取所需的部件。图片改编自《Multiscreen UX Design》- Wolfram Nagel.

　　乐高项目的这种方法无疑是一个可行的策略，即使它看起来有点随意。你唯一需要注意一堆积木的时候是当你通过这堆积木筛选找到你所需要的具体部件。

　　这与数字项目没有什么不同，客户需要一个网站，所以我们全身心投入设计和构建。客户需要一个手机app，我们应立即开始构建应用程序的界面。 我们的目光经常停留在最终的产品上，我们很少注意到构成最终用户界面的底层模式。

　　当然，还有另一种方法来完成你的乐高和数字项目，你可以花时间评估可用的部分，并组织它们，使其变得更有用， 而不是一股脑地构建最后的工作。

　　花时间去整理构成你作品的碎片，可以让你以一种更加审慎和有效的方式来完成你的工作。图片改编自《Multiscreen UX Design》- Wolfram Nagel.

　　毫无疑问，整理需要一定的时间、规划和努力，不是不劳而获的。 这种配置的作用在最终产品中没有明显的显现出来，可能会诱使我们觉得，它会让我们在实际需要完成的工作中分心， 何必呢？

　　通过花时间整理零件，你现在可以以更切实际的，深思熟虑的，高效的方式创造整体。 以你可用的的材料创建库，会让你以更有条理的方式处理项目，节省大量宝贵的时间， 而不是通过随意堆砌和浪费时间的方式重新塑造样式，你可以创建一个有组织的组件系统，这将有助于在更短的时间内产生更好的工作。

　　花时间整理这些碎片，能让你以切实际的，深思熟虑的，高效的方式完成你最后的作品。与其通过杂乱无章的砖块堆砌，一个对零件经过整理的清单可以产生更好更快的工作。图片改编自《Multiscreen UX Design》- Wolfram Nagel。

　　至于你的客户和利益相关者而言，最终产品仍在生产。只要展示最终作品中取得的进展，你可以决定公开多少内部流程。实际上你在创建一个设计系统来生产最终产品的时候并不关心这些; 这只是为你的团队为创造更好的工作而做出的决定。

　　如果你正在和讨厌变革的利益相关者打交道，你就做你需要做的并告诉他们不要关注幕后发生的事情。 一旦你成功启动了这个项目并且已经倒好了庆祝成功的香槟，你可以拉开窗帘，并说：“嗨，顺便说一下，为了团队可以相互合作并且更有效地工作，我们建立了一个设计系统和模式库。” 这时很难和你争论，特别是如果这个项目按时和按预算来进行的话。 如果你足够幸运，你可以将该初步项目成功纳入组织内的一个更为官方的计划，以推动你的设计系统。

　　当然，最好让您的客户，同事和利益相关者对创建界面设计系统感到兴奋，或者至少获得以模块化方式追求项目的祝福。但是，我认为，即使遇到极端的组织阻力，找到遵循自己的最佳实践的方法也是很重要的。

　　#（重新）设定期望值

　　你已经投入了大量的努力去推销设计系统的概念，但是在你卷起袖子开始工作之前，你仍然需要设定利益相关者和团队的期望。

　　当我说“设置期望”的时候，我真正想说的是：“ 重新设定期望。” 你看，我们在一个项目中都带着自己的经验，观点和偏见。 我们的行业还非常年轻，很多从事网络工程的人都来自其他行业，他们已经建立了自己做事情的方法。即使是那些专门从事数字领域的人也感受到了过去的包袱。此外，数字设计的指导原则，最佳实践和策略仍在被编纂中。

　　任何人在一个只有25岁的行业里说：“ 这就是我们一直以来做事的方法” 是非常可笑的。 不幸的是，我们人类是习惯的生物，走出习惯的温暖怀抱是不舒服的。我们不喜欢这种不舒服的感觉。我们必须克服现有的倾向，才能拥抱我们不断变化的行业的最佳实践和创造成功的数字工作。

　　# 重新定义设计

　　我们从简单地将打印PDF移植到万维网已经走了很长的路，但是印刷设计仍然留下了长长的阴影，并继续影响着互联网设计。

　　印刷界的设计主要集中在视觉美学上。毕竟，除了看之外，你不能用海报做更多的事情。明确地说，我肯定不是暗示印刷设计很简单或一维的; 印刷世界沉浸在细微差别和工艺上。我要说的是，网络的双向和互动性质增加了更多的维度来构成好的设计。 如果我们要为这个勇敢的新数字世界创造伟大的工作，就必须考虑速度，屏幕尺寸，环境，技术能力，外形，人体工程学，可用性，可访问性，上下文和用户偏好。

　　这些额外的设计考虑对于创造伟大的数字作品是至关重要的，但他们往往不在我们的开发过程和工作流中。设计师Dan Mall解释说：

　　我们这个行业像销售绘画一样销售网站。 恰恰相反，我们应该出售漂亮的和易获得的内容，跨平台的策略，屏幕尺寸，或者上下文。——Dan Mall

　　我们为什么会把网站当成静态图片去销售？在互联网形成的期间，我们创造了纯粹由台式电脑消费的体验，这是可以理解的，因为桌面是城市里唯一的游戏。桌面屏幕提供了空间，让把PDF简单地转换到网上的想法变得可行和诱人。所以这就是我们所做的，并且它确实在一段时间是有效的！

　　曾经很长一段时间，网页主要是在桌面屏幕上，由这款带壳的旧机器展示。

　　然而，这并不是毫无意义。这种以网络打印为视角的网页加强了网页设计的概念，就像他们的离线对手一样，在每一个环境中都能看到并且看起来一样。 它还将重点放在网页设计的样式上 ，而不是它是如何工作 ，忽略了这种丰富的新媒体的所有独特特征。 此外，它加强了我们可以将用于创建印刷作品的线性过程运用到我们的数字作品上的信念。

　　随着时间的推移，手机爆炸式的发展，技术进步，网络成为了我们今天所认识的令人难以置信的多样化景观。 只有桌面式的日子已经过去了，取代它们的是智能手机，功能机，平板电脑，大屏手机，上网本，笔记本电脑，电子阅读器，可穿戴设备，电视机，游戏机，汽车仪表板等等。

　　这才是是互联网：多种设备，屏幕尺寸，功能，外形，网络速度，输入方式等等。

　　今天的网络环境的多样性打破了桌面网络的共同幻觉——我们可以简单地将印刷的心态和流程推向这种新媒体。 简单地看待智能手机，平板电脑和台式机，彼此之间很快就会打破网页设计在每个环境中都应该看起来一样的假设。

　　我们仍然处在在线设备大爆炸的开始阶段，明天的设备和网络环境无疑将比今天更庞大更多样化。 除了目前的设备和新兴的技术已经出现在眼前，未来的网络还将涉及到尚未被设想的技术和想法。

　　除了所有我们关注到的当今网络功能的设备，我们必须明白，设备和网络环境已经变得越来越庞大且更多样化。

　　我发现以上三个图片是个帮助客户，同事和利益相关者了解网络环境的现实非常有用的速记方式。 有了这个新的理解， 每个人都更容易接受更新他们的流程和工作流程，为这种独特的媒介创造出伟大的作品。

　　我们的工作是为使用多种设备，屏幕尺寸，网络速度，设备功能，浏览器功能，输入类型，外形，上下文和偏好设置的人员创造出丰富的体验。 这无疑是一项艰巨的任务，但是所有这些变量都显示出，在创建界面设计系统时，远远超出视觉美学的需要。

　　在设计网页时，除了视觉美观和一致的体验，我们应该：

通过创建可访问的弹性设计系统来拥抱网络的普及 。认识到将会有各种各样可能性的人将会访问我们的产品，所以构建的设计系统应尽可能包容。

创建灵活的布局和组件，使我们的界面无论在任何特定的设备尺寸或屏幕尺寸都看起来精美。

将性能视为基本设计原则 ，创建快速加载的体验，尊重用户及其时间。

通过建立核心体验，逐步增强我们的界面，然后分层增强功能，充分利用现代设备和浏览器的独特功能 。

创建未来友好的设计系统，旨在忍受时间的考验，并预期设备和网络环境将不可避免地发生变化。

　　我们的界面设计系统（人体工程学，输入类型，是否符合Section 508（1973年颁布的美国劳工复健法的改进，强调所有技术（电子信息技术）要考虑到残障人士的应用），易读性等）中还有许多其他设计考虑，但这里的关键在于扩展什么是构成超越视觉美学的良好数字设计的定义。

　　正如你所期望的，我们的流程需要进行重大改变，这样我们就可以正确地解决所有数字设计特有的问题。 因此，我们有责任设定客户，同事和利益相关者的期望，使每个人都知道创造过程将在这个时候有所不同。

　　# 瀑布式过程（waterfall process ）之死

　　告诉我你之前有没有听过这样的事情。 一个团队的任务是制作一个网站，一旦启动会议尘埃落定，一个UX设计师走了，开始埋头工作，最终交出了一个详细描述整个用户体验的巨型PDF文档。 这个整体线框文件被传递给项目的利益相关方，他们在给出一些反馈和建议之后签署了它们。

　　然后，UX设计人员将线框图传给视觉设计师，视觉设计师用Photoshop或Sketch，将颜色，排版和纹理应用在结构化但无任何样式的线框图上。 在设计评审会上，利益相关者急切地坐在那里，与此同时投影机启动并且项目经理为每个参加会议的成员打印了设计稿副本。 艺术总监站在会议室的前面，开始演示设计。哇， 一个网站的设计！ 一旦演示完成后，会议室会迅速响起反馈和讨论的嗡嗡声，初步的反馈和赞美之后，利益相关的关键人物就会发表意见。

　　“这看起来太棒了，我觉得这个项目就是我们想要完成的。但是......

　　他们表达了他们希望看到一些可能具有替代布局的东西，这些东西可以捕捉到一定的氛围，也许是使用不同照片的东西，这些东西只是...babala...... 。

　　随着意见闸门的打开，其他利益相关者突然意识到，他们也有意见和建设性的评价想分享。 在会议结束之际，每个人都为自己想要的设计列出了他们愿望清单。

　　视觉设计师有点泄气，但决心坚持，他们带着利益相关者的建议再次回到他们的设计工具里开始修改。 在接下来的设计评审会上，同样的场景再次重演，利益相关者表达的鼓励和渴望比之前更多。“我觉得快实现我们的期望了，我们能这样么......"

　　白驹过隙，日渐消瘦，截止日期压在每个人的头上，带着这种紧迫感，首页_第9版_定稿_评审稿_最终稿_最后一次修改_再也不改了.psd 终于得到了利益相关方的认可。

　　视觉设计师如释重负，终于完成了他们的工作，踮起脚尖悄悄地哼了一声跑到开发人员那里。 他们把审核通过的设计稿放在门口，边走边叫：“你能在三个星期内完成开发吗？ 我们的计划已经延后了，而且我们的预算也不足！”

　　当前端开发人员从地板上捡起来设计稿时，视觉设计师已经消失在夜色中。 瞥了一眼文件，一种奇怪的感觉——困惑，愤怒和恐惧交织在一起冲击着他们。 设计有什么问题？ 也许是因为七种字体和九种不同的按钮样式出现在整个文件中； 也许这是以PC端为中心的，不可能实现的布局； 也许是完美的，但不太可能是用户想要生成的内容。

　　前端开发者徒劳的试图将他们的担心让大家知道，但很快以无能或不和善为由解雇了。唉， 游戏中对设计做出重大改变已经为时已晚，特别是已经被利益相关者审核通过了的。

　　所以开发人员尽他们所能的试图从静态文件这颗柠檬中榨出最后一滴柠檬汁。他们使出浑身解数，以创建响应布局仍保留静态文件的完整性，规范一些更为明显的组件不一致性，在设计中建立模式状态（如按钮悬停、活动状态和禁用状态），并在交互体验方面做出一些决定。与设计师的讨论很紧张，但每个人都意识到他们需要解决这些问题才能完成项目。

　　将前端代码插入CMS后，迅速完成网站的内容，并进行最后一分钟的质量检查测试，团队终于上线了这个网站。虽然没有人大声说出来，但空气中伴随着把项目推出门的喜悦和轻松之外还有一丝失望。毕竟，现场网站缺乏合作伙伴向利益相关者承诺的光泽抛光，而学科之间的摩擦已经损伤了一些关系。

　　我希望这个故事对你来说只是一个虚构的作品，但是根据我自己和与其他无数人的谈话的经验，我猜你十有八九曾经有过这种痛苦的经历。它甚至可能会像在肠道内的一记重拳一样击中要害。无论你是否经受过这种过程，重要的是要认识到，亨利福特式瀑布过程（waterfall process）越来越不可能实现优秀的数字作品。

　　瀑布过程（waterfall process）的原理是按照一定顺序来交接工作，这种方式不太可能得到优秀的数字作品。

　　瀑布过程（waterfall process）对印刷，建筑，制造和其他物理介质来说可能是有意义的，因为对它们来说错误和变化非常昂贵。如果一个团队忽视了早期的错误，那么他们将在晚些时候付出代价。然而，数字世界并不受和物理世界一样的限制。像素是廉价的。 更改可能会在瞬间发生，假设可以被快速测试，并且设计和代码可以一遍又一遍地迭代。

　　瀑布过程（waterfall process）取决于工作必须按顺序排列：UX设计者必须在视觉设计开始之前完成工作; 视觉设计师必须在前端开发开始之前完成工作。这根本不是真的。有很多工作可以并且应该并行发生。要创造良好的UI设计系统，我们必须重新设置我们的利益相关者的期望，让他们熟悉一个更模糊，更具协作性的过程。

　　这项工作将并行发生并不意味着每个人都将工作贯穿整个过程。当然，UX设计的大部分研究，信息架构和其他元素方面往往会在此过程的早期发生，但这项工作不耽误其他学科从开始他们的工作。即使一个人的大部分工作都完成了，他们也不能简单地淡出这个项目。每个学科都必须继续与其他学科进行磋商，以确保他们的愿景成为最终产品。所以，而不是一个刚性的顺序瀑布过程，随着时间的推移，一个更具有协作性的过程看起来像这样：

　　更多的协作工作流程涉及跨学科团队在整个过程中共同合作。虽然主动的工作不会贯穿始终，但每个学科继续与其他团队成员协商，以确保他们的见解出现在最后的作品中。

　　# 开发是设计

　　当前雇主发现我写了HTML，CSS和演示Java时，他们让我和工程师和后端开发人员坐在一起。很久以前，我曾被这样问到，“嘿，Brad。这个中间件建立要多长时间？” 和 “你能快速规范这个数据库吗？

　　事情是这样的：我从来没有上过计算机课，我整个高中时光都是在美术教室度过的。可以说这些请求让我感到非常不习惯。

　　这里有一个根本的误解那就是所有代码都是超古怪的编程，但事实上根本不是这样的。HTML不是一种编程语言，CSS是也不一种编程语言。但由于HTML和CSS仍然是代码，前端开发通常将它们与Python，Java，PHP，Ruby，C ++和其他编程语言放在一起。 这种误解往往给许多前端开发人员，包括我自己在内，带来了一种严重的身份认同危机。

　　在团队中，设计师和开发人员（或营销和信息技术，创意和工程，或其他分歧标签）之间往往存在着巨大的鸿沟。设计师和开发人员经常坐在不同的楼层，不同的建筑物，不同的城市，有时甚至在不同大陆的不同的国家。虽然这种组织分离有一些可能是有一定理由的，但把设计师和前端开发人员分开来绝不是一个好主意。

　　事实上，HTML，CSS和表现型的Java都在构建用户界面——是的，和设计师在Photoshop和Sketch等工具中精心制作的是相同用户界面。对于团队一起构建成功的用户界面设计系统， 将前端开发视为设计过程的核心部分至关重要 。

　　当你只向利益相关者显示网站的静态图片时，他们仅仅只能自然地对网页的图片进行评论和赞同。这设定了错误的期望 。然而，通过尽可能快地将设计实现到浏览器中 ，你可以在最短的时间内让利益相关者看到最终的现实媒体。使用HTML，CSS和表现型Java，团队不仅可以创建美观的设计，还可以演示独特的数字化设计决策，如：

适应性

网络的影响

交互

动效

人体工程学

颜色和文本呈现

像素密度

滚动性能

设备和浏览器适应

用户首选项

　　详细一点来说，更至关重要的一点在于，跳转进入浏览器来展示可以更好的开始进入一种创建进化设计系统的模式。

　　这并不是说团队必须在浏览器中完全进行设计。与任何事情一样，它是在正确的时间使用正确的工具来表达正确的事情。除了其他设计工件之外 ，在浏览器中的设计使团队能够给他们正在制作的UI绘制更丰富，更逼真的画面。团队可以将美学上集中的设计理念演示为静态图像，同时在浏览器中演示同一个想法的工作原型。

　　# 一个反复迭代的过程

　　我相信一个成功的数字设计流程与雕刻非常相似。在雕塑刚开始的时候，艺术家和他们的赞助人会对将要创造的东西有一个大体的想法，但是在雕塑完成之前，这个愿景都不会被完全实现。

　　雕塑家从一块巨大的岩石开始着手。第一遍雕刻后会形成一个粗糙的形状，形状在每次雕刻后会变得越来越明显。通过和岩石的反复重击后，雕刻的人形主题变得清晰起来。

　　当雕像的大体的形状被雕刻出来之后，艺术家便开始刻画局部的细节。例如，他们可能会从脸部开始，逐步雕刻眼睛，鼻子和嘴的形状。过了一会，他们又转移到了手臂，之后又开始详细雕刻腿。每隔一段时间，艺术家都会退后一步，看看他们的作品细节是如何影响整体雕塑的。这个过程一直持续到雕塑完成后，每个人都得到满意的结果。

　　数字产品的迭代过程跟雕刻类似，保真度建立在多次迭代之上。图片来源： 迈克·博勒加德的Flickr

　　再次声明，我认为雕刻石雕是一个成功数字产品流程的重要比喻，不过跟雕刻不同的是，我们可以有反悔撤销的机会！

　　让利益相关人员在工作的过程中而不是完成之后不断的审查作品是必不可少的。正如我在第1章中提到的，现在每一个组织都想变得更加敏捷，迭代是敏捷的关键部分。正确的方向比自以为是的努力要重要的多。一个完善的设计系统并不是从装配线上滚下来的，而是在不断的迭代中塑造出来的，是随着项目的进展而建立起来的。

　　如果这一切听起来有些混乱，那是因为它就是这样的！一些项目经理沮丧的是，这种设计过程并不太适合用Excel电子表格和甘特图来表现。学科之间真实的协作是模糊和混乱的，但这并不是一件坏事。因此不断的沟通，紧密的反馈，以及真实的合作将共同成为设计过程中的粘合剂 。让你的整个团队致力于诚实的交谈和真诚的合作，这样流程的细节将会水到渠成。

　　大家的期望合理吗？好的！现在让我们卷起袖子开始工作，建立我们的设计系统。

　　# 明确方向

　　团队往往热衷于直接进入高保真的设计和开发工作，并且客户也都渴望看到具体的作品。然而，这将导致分心，臆断，最终形成不切实际的期望。在进入高保真设计和开发之前，首先要达成一个整体的设计方向，并画出整体的基调。这就要求约束力和预期管理，但结果会更好地专注于决策的制定和更现实的工作。

　　这种低保真的作品看起来是什么样子？让我们来看看UX设计师，视觉设计师和前端开发人员用来给一个UI设计系统制作整体方向的一些技巧。

　　# 建立内容和展示模式

　　再开始一个项目之前 应该进行大量的前期战略研究工作和调研工作。UX设计师 （其他叫法，如信息的设计师 ， 信息架构师 ， 交互设计师等）负责整合所有的重要信息，并将其转换为符合该项目的业务和用户目标的用户界面。

　　在传统的瀑布式流程中，许多设计师通过制作高保真线框图，来记录每一个屏幕的整个用户体验来完成这个任务。这些呈现出来的线框文件，塞满了黑色矩形和注释，规范界面实现的细节，用以得到利益相关者的认可与买单。尽管这些文档非常详尽，但是他们并不会画出完整的图像，而且经常对视觉效果最终的呈现和技术功能作出一些危险的假设。

　　与其直接进入这样的高保真文档，不如先从低保真草图开始，这样以便于更好地安排屏幕上具体有什么，以及该是什么样的顺序安排。确立体验的基本信息结构可以用简单的项目符号列表和会话来完成。就这个我为大匹兹堡社区食物银行做的项目来说，我就是从删空网站上的基本信息架构开始。

为大匹兹堡社区食物银行主页设计的基本HTML线框图。

　　没有一个正常人会认为这个灰色的页面是完整的产出品，但来讨论页面结构和层次结构它提供的信息足够了。

　　低保真线框图的移动先行意味着小屏幕的限制使的团队更是要专注于核心内容和层次的手段而实现最终的产出。现在你可以问，“在这个屏幕上我们做的对么？”“他们的秩序是正确的吗？”

　　这些块状灰度图是帮助产出屏幕内容的一种必要的内容模式，但同时UX设计师也可以用一些它们预期中实现最终产出的站点范围内的UI模式来清晰的表达想法。对于TechCrunch的重新设计，设计师的珍妮弗·布鲁克定义的几个站点范围的界面模式，可以在任何地方使用：

　　对于TechCrunch网站的重设计，珍妮弗·布鲁克定义网站宽度，手势的显示模式，这样不涉及到美观和功能性的假设。

　　从上面的图片来看，你可以推测其“featured island”部分将显示一些时尚的内容。值得注意的是草图都是表示性的及它对布局或功能没有任何具体的假设。这模式的外观和功能的细节或许稍后才会出现，但是在项目的最开始它的确可以简单的定义和清晰的表达它潜在地用途。

　　正如我在后续项目中发现的那样，内容和显示模式可以以一个更简单的形式进行有效地沟通：不起眼的电子表格。

　　一个简单的电子表格就可以清楚地说出在特定网页上内容和显示模式，同时描述出它们的顺序和目的。

　　通过几个简单的电子表格，我们可以清楚地显示在给定的模板中应该包含哪些显示模式，以及它们包含的内容模式。更重要的是，我们能够表达每个模式的相对应的层级和它在屏幕上扮演的角色。如果垂直看最左边的列，你可以有效地看出在移动有限的情况下界面的样子。

　　“页面上的内容和显示模式是怎样的？它们的顺序是什么？这些都是至关重要的问题，我们刚才所描述的技术可以帮助设计者在不作任何布局或技术假设的情况下有效地讨论它们。

　　# 建立视觉设计的方向

　　视觉设计师的工作是创建一种美学语言，并根据项目的目标，将其应用到用户界面。视觉设计师要做到这一点，发掘利益相关者的审美取向是必不可少的。

　　一直以来，视觉设计师需要通过创建大量的文件，才能感知出一家组织的审美观。这种做法就好比把一堆稿件丢在墙上，看看哪些运气好能粘住一样。正如你想象的那样，从无到有产生一系列文件需要耗费大量的精力，不幸的是这种类型的工作就像切割地板一样徒劳。必须有一个更有效的方法了。

　　事实证明，有一个更好的办法能获取客户的审美取向，而不必做大量地狱一样的前期准备工作。让我们来谈谈实现这一切的一些策略。

　　# 20秒直觉测试

　　快速建立审美价值的一个奇妙的练习是20秒直觉测试 。通常情况下，作为项目启动会议的一部分，演示涉及显示利益相关者的一些相关的网站（约20到30种）每个展示20秒，你选择的站点应该是一个特定行业网站或者其他行业在视觉上有特色的网站。为了增加可信度，你可以把你的客户的标志P在网站上。

　　对于每一个网站，让大家从1到10打分，其中给1分意味着 “如果这是我们的网站，我宁愿辞职，哭泣着睡去”，而10分的意思是“如果这是我们的网站，我是绝对欣喜若狂！“指导参与者给出他们觉得有趣的视觉特征，比如排版，颜色，密度，布局，插画风格，和整体氛围。

　　对于匹兹堡食物银行网站的重设计的启动会，我们给利益相关者浏览了各种网站。参与者评选出他们喜欢的那个。然后，我们通过讨论得出结论。

　　当测试结束后，快速统计出分数，交回给团队讨论出结果。重点讨论下得分最高的五个网站和得分最低的五个网站，也需要讨论下那些得分存在争议的网站（就是一些人对此评价很高，另一些人却评价很低）。参与者应该解释他们为什么会喜欢或者讨厌一个网站，并且整合出团队中不同的意见。

　　这个测试可以在项目的早期就让利益相关者展露出他们的审美倾向，允许他们解决品味上的差异，（运气好的话）可以得出一些共同的审美价值。然后，可视化设计能抓住这些见解，并且将这些审美取向转化为项目中的视觉方向。

　　# 风格瓷砖（Style tiles）

　　再次强调下，视觉设计师的第一反应往往是直接进入创建一套完整的项目视觉方向。这种高保真作品当然一目了然，但是如果它不能和利益相关者产生共鸣，这将会浪费大量的时间。此外，在创建高保真文件的时候常常是假定相关技术是可行的，这可能会导致不切实际的期望和与前端开发人员形成敌对的关系。

　　为项目建立一个可靠的视觉方向是非常必要的，所以一个视觉设计师如何创建高保真文件而不浪费大量的时间？这就是设计师萨曼莎·沃伦 在创造风格瓷砖（Style tiles）时回答的问题 ，它可交付使用这点比一个情绪板要实实在在的多，但并不像高保真作为一个完全成熟文件。

　　对于娱乐周刊网站重设计的项目，视觉设计师使用风格瓷砖探索颜色，类型，纹理等等。

　　风格瓷砖（还有一个在线的类似产品风格原型https://sparkbox.github.io/style-prototype/ ）允许设计师探索色彩，排版，纹理，图标，和其他方面的设计风格，而不用考虑布局或者担心是否精细。他们可以设计得更快，因为不会被高保真文件的预期拖累，这意味着反馈和讨论可以更快地发生。

　　风格瓷砖（Style tiles）促进交流，可以发现利益相关者喜欢什么或者不喜欢什么。“这个风格瓷砖（Style tiles）比那种更能引起你的共鸣么？为什么？“为什么这个调色板不适合你？”“这是你喜欢的那种字体么？”你可以进行关于设计美学的重要对话，而无需创建完整文件。

　　至关重要的是，风格瓷砖（Style tiles）也加强了基于模式的思考，通过让利益相关者了解设计系统 ，而不是页面。呈现的颜色搭配，字体的例子，和纹理，揭示了利益相关者的审美倾向，这将有助于设计系统的实施。

　　# 元素拼贴（Element collages）

　　虽然风格瓷砖（Style tiles）在探索设计风格上很厉害，但它们还是有点抽象。为了了解这些设计要素将如何应用到界面，重要的是迅速进入一个比风格瓷砖（Style tiles）更具象的东西。这是否意味着视觉设计师需要从风格瓷砖（Style tiles）直接跳到完整的文件？这可不一定。

　　介于风格瓷砖和完整文件之间的是元素拼贴（Element collages） ，这是UI组件的设计探索的集合。元素拼贴（Element collages）为设计师提供了适用的设计氛围实际界面元素的场所，但仍可免于布局和完善的细节。

　　娱乐周刊重新设计的元素拼贴将颜色，排版和纹理应用于实际的界面元素。这些拼贴可以促使进行项目审美方向的重要对话。

　　跟风格瓷砖（Style tiles）一样，元素拼贴（Element collages）是为了促进对项目的美学方向的探讨。很明显这些拼贴不是一个实际的网站，但利益相关者仍然可以得到网站可能是什么样子的感觉。这些元素拼贴（Element collages）的谈话可以给视觉设计师关于如何设计下一步更多的思路和方向，因为它们的低保真的性质，设计人员可以快速迭代和发展思路。

　　毫无疑问，存在其它策略来为你的项目建立视觉方向，你决定采用哪种技术会因项目而异。但关键在于你需要在投入大量尽力做细节之前先有更宏观概念。在这个探索阶段与利益相关者交谈创造一个更加包容的过程，这比利益相关者只是嘟囔着表示批准或不赞成的设计成果要好得多。

　　# 前端师傅的准备

　　正如我们前面所讨论的，前端开发人员往往沦为所有项目设计决策完成之后的生产机器。这个过时的流程使学科之间彼此不同步，并阻止团队以有意义的方式合作。这是一个巨大的错误。前端开发作为设计过程的一个关键部分，大家都需要更改项目结构和团队成员的心态。

　　在餐饮业中，一个重要而默默无闻的角色是备菜厨师。备菜厨师剁菜，腌肉类，拌沙拉为第二天的工作做准备。通过有提前准备食材，厨房工作人员可以专注于协作和做饭，而不是琐碎的任务。如果没有备菜厨师的前期工作，主厨的工作将被中断，厨房的快节奏将陷于停顿。

　　备菜厨师剁菜，腌肉，拌沙拉，并准备其他配料，使主厨可以集中精力做饭和协作。

　　前端开发人员正如网页设计过程的备菜厨师一样。如果开发人员没有从该项目的第一天开始编码，那么整个流程就可能会出错。 “但是Brad，” 我仿佛能听见你说，“我都不知道我应该做什么的前提下，我怎么可能开始编码？”

　　相信我，在视觉设计方向确定之前还有很多前期准备工作要做。除了设置开发环境（例如准备Git存储库，开发服务器，CMS和开发工具）之外，开发人员可以深入代码并开始标记模式。但是如果你对设计一无所知的话，你应该怎么做呢？ 这取决于你正在进行的项目类型。

　　在做一个电子商务的网站？你可以设置网站搜索，购物车表，一个占位符产品详细信息页面，主页和结帐页面。在做一个在线服务？开始标记注册和登录表单，忘记密码和仪表板。并且，大多数网站都有页眉、页脚和主要内容区域。设置shell模板，并为预期使用的模式编写基本标记。这个标记最初可能是粗糙的，但它提供了协作和迭代的关键出发点。

　　相对于在设计完成之后才开始 ，前端工程师的准备工作释放了开发人员与设计师合作的时间。有了基本的标记，开发人员可以与设计师合作，帮助通过交谈和工作原型来验证UX的设计决策。他们可以帮助视觉设计师更好地了解源代码顺序和网页布局，并可以快速生成一个最新的代码库，最终将演变成最终产品。

　　# 停下来，合作，聆听

　　让我们快速回顾一下跨学科的设计方向：

UX设计师可以建立低保真草图，建立基础信息架构和一些预期的界面模式。

视觉设计师可以为团队的审美倾向进行一个20秒的直觉测试练习，然后创建风格瓷砖，拼贴元素，探索最初的设计方向。

前端开发人员可以建立项目依赖关系，做出基本的模板，并为团队期望在项目中使用的模式编写结构标记。

　　这些工作可以同时发生，但不应该孤立发生。当然，每一门学科都需要有一些最初的学习时间，但是所有的团队成员应该充分意识到每一门学科在工作中的探索，共同去完成这些想法。

　　想法，意味着丑陋。——Jason Santa Maria

　　在这个早期阶段，重要的是强调探索，发挥和创造思想。我们刚才讨论的低保真原型的技巧就是为了鼓励这种探索，允许团队成员追求能够激发他们的想法。有时，这些想法可能会出现在餐巾纸上的草图，在CodePen上的原型 ，在Sketch上的视觉尝试，在Balsamiq上的快速线框图，在After Effects上的动效，或者是其它媒体和工具的组合。问题的关键在于为团队产生想法和解决问题，而非死板的按流程执行操作。 通过跨学科的方式处理这个设计探索，团队可以在美学，技术可行性，可用性和功能之间的找到平衡。

　　# 撸起袖子

　　随着总体设计方向的确立，团队可以动手构建界面和底层的设计系统了。但是，团队如何将一个模糊的方向变成一个集美观，功能，可用，为一体的完整设计系统？

　　# 从概念到完成

　　从探索到成品是一个模糊的，不完美的过程。在本书中这部分绝对没有惊喜给你。

　　对于TechCrunch的项目，Dan Mall决定从网站的标题部分开始进行视觉探索。从界面的这部分开始是合乎逻辑的，因为标题是页面上最突出和品牌元素之一。一些微小的工作之后，我们通过电话与客户讨论网站的相关探索。

Dan Mall创建了一个元素拼贴，以探索全局标题的审美方向。

　　虽然这样的设计制品是一个简单的探索，我们仍然可以通过它对header的美观，层次进行重要的对话，并提供功能建议。因为标题在网页中相对独立，所以我们能够在不涉及其它页面元素的前提下，讨论与标题相关的问题。

　　虽然客户并不知道，我已经为标题建立了一个工作在Pattern Lab场景下的HTML版本。

　　以丹的探索作为参考，我在Pattern Lab创建的全局头的HTML版本。这个灰度原型帮助我们展示了交互性以及header如何适应各种分辨率。

　　这个灰度原型使我们能够展示交互性和响应性，甚至还会带来更多的讨论。总的来说，我们建议改变header的布局和功能，并且我能够在调用期间使用浏览器的开发工具进行更改。忽然间，整个团队和利益相关者都积极参与设计过程！

　　通过利益相关者和团队的努力，我们调整header的布局，IA，审美细节和功能直到我们推出最终的解决方案。

　　我们最终完成的header是由大量关于模式、内容、和功能的讨论和决策得来的。

　　显然，标题的样式不会凭空而来。在Pattern Lab，标题包含于每一个使用了Mustache’s include pattern的模板中，这些我们在第三章讨论过。

　　{{> organisms-header }}

　　这允许我们在其余页面的上下文中查看标题，即便它们最初是粗略的。所以当我们专注于设计一种特定的模式时，我们同时考虑到了哪种模式被使用的背景。

　　在迭代的过程中，会有一些样式比其它的先进一些。部分完成页面看起来可能会有些断章取义，但能减少团队和利益相关者之间的混乱的沟通。

　　最初，浏览器的内部设计倾向于往好了说也就算得上粗糙吧，这种设计是极好的。这个用意就是要去掉浏览器模板的基本信息框架，定义多重模式，把这些模式使用“include”语句连接这些模式，并开始对这些模式实施通用标记。当这项工作到位之后，团队就可以合力开始设计具体模式并精炼整体架构了。

　　这部分设计的原型可能看起来与那些传统的，像素完美的设计成果不同。但沟通的进步比虚假的完美更重要，这就是为什么循序渐进的更新材料要好于突然的展示。

　　# 文件在后PSD时代中的角色

　　直到此时，我们一直在谈论建立一个普遍的审美方向，然后设计一些样式与审美方向的应用实验。这些相对低保真的手段可以让团队自由探索，快速迭代，并更快的获得反馈。

　　但我永远不会忘记我们第一次用模式驱动的项目收到的客户反馈：“这些元素拼贴是不错，但它好比你只展示鼻子给我然后问我这张脸有多好看“。

　　如果你已经在你的过程中发现了这点，恭喜你！像这样的反馈意味着他们想要更多，所以现在你已经抓住大致的审美方向，你可以放心地把这些探索纳入整个大背景中。这可能包括创建完整的静态文件。

　　在围绕“在浏览器中设计”的讨论中，你肯定会听到的Photoshop文件是魔鬼的化身 。这当然是不正确的。在这本书中，我们已经讨论在建立一个整体时，把事物分解成一个一个原子一样的元素的重要性。静态文件在绘制UI是什么样的全景图时很有效。 诀窍是知道什么时候画那些全景图，并知道在静态文件中要呆多长时间。

　　Dan Mall创造了一个完整文件去展示TechCrunch的特色的文章模板可能是什么样子。该组件曾被用于显示连贯起来的设计系统，并获得对总体设计的批准。后续的设计修改将在浏览器中处理。

　　对于TechCrunch的项目，只有客户对我们的元素拼贴探索感觉良好后，我们才会为文章模板创建一个文件。创建完整的文件需要付出很大的努力，这也是我们为什么要先建立设计方向，因为如果我们完全错误的话，这样可以降低所有努力都报废的风险。

　　文件，像任何其他设计组件一样，用于促进与项目利益相关者的对话。如果他们的反馈是，“这种感觉不对”，就需要回到了绘图板来创建一个新的文件。但是，如果他们的反馈，“我们可以从这里移动到这里？我们可以在文章文本周围添加一个灰色边框吗？我们可以增加这个图像的大小吗？“这标志着总的方向是对的只有些相对较小的问题，而这些问题可以在浏览器中解决。

　　# 在浏览器中迭代

　　静态文件对于判断整体审美的方向非常有效，但是用户最终会在浏览器中查看和体验。这就是为什么设计应迅速转化到最终环境，并在那里迭代。

　　在浏览器中工作允许团队在各种分辨率中解决布局问题，动态数据的设计（如可变字符长度，图像大小和其他动态内容），演示交互和动画，性能评估，考虑人类工程学，并面对技术方面的考量（如像素密度，文本渲染，滚动性能，浏览器怪癖）... 静态设计稿不能处理上面这些因素，所以他们应该被视为仅仅是假设而非一成不变的规格。只有当转移到浏览器时，才可以真正确认或拒绝这些设计假设。

　　让我们把“浏览器设计”改为“在浏览器中决定”。——Dan Mall

　　一旦设计在浏览器中时，他们应该停留在浏览器中。 在这个阶段的过程中，产品的重点应该切换到擅长制作的HTML，CSS和Java的成员上。模式应该被建立，被风格化，并插入在正需要的地方。设计师可以对这些浏览器实施做出反应，并可以在静态工具中创建斑点组合，以帮助消除有机体的反应性皱纹。静态工具和浏览器工具在设计和开发之间建立了一个健康的循环，其中前端代码在每个迭代循环中变得更加稳固和稳定。

　　Trent Walton的这张插图完美阐明了一个更加迭代的设计和开发过程。通过更快地将设计引入浏览器，团队可以迭代设计并解决许多问题，这些问题只有在浏览器设计完成后才能处理。

　　基于模式的工作流的美丽之处在于，当每个模式变得更加完整时，任何包含模式的模板也将变得更加完整。 这意味着创建新模板的努力水平在项目过程中急剧下降，直到最终创建一个新模板时，大部分都是将现有模式拼接在一起。

　　# 把它放在主页上

　　设计系统正在形成，团队正在加足马力让项目落地。在这个阶段，UI模式已经确立，团队正在采取一些最后的步骤来收紧一切，并准备发布。

　　UX设计师努力打造原型确保流程和交互都符合逻辑和直觉。视觉设计师正在梳理页面并提出设计调整和完善UI设计。前端开发人员正在测试一系列的浏览器和设备的经验，同时也解决设计反馈。后端开发人员努力将前端UI集成到CMS中（我们将在第5章中更多地讨论前端和后端之间的关系）。当然，客户和利益相关者直到最后一分钟提关于设计和内容的要求。整个团队贡献文档风格指南，在模式库清理模式，努力让网站上路。

　　然后一眨眼的功夫，网站和附带的设计系统启动了。香槟倒满了，大家互相击掌，当然，发布后的bug都被处理了。用户访问新的网站，体验到一个美丽的，功能的，一致的，紧密结合的网站，这无疑让他们流下了喜悦的眼泪。任务完成。

　　从一块巨大的岩石到现在只需要细节的抛光，这需要经过巨大的努力，真诚合作，不断的沟通，和大量的迭代。此外，除了给这个品牌快速的建立新网站，该团队留下了一个灵活的，深思熟虑的UI系统并且附加一个美丽的风格指南。

　　这一章探讨了制作有效的UI设计系统的一切。在下一章中，我们将讨论如何确保设计系统在长期过程里保持成功。

这么长你居然看完了！(●'?'●)??

　　原文链接：https://atomicdesign.bradfrost.com/chapter-4/

　　如有翻译错误欢迎留言指出。

·End·