译者声明：
原书《Atomic Design》由bradfrost.com出版，作者Brad Frost。译版《原子设计》是个人自发项目，发布于瓦力UX，仅用于知识交流，不涉及任何商业或盈利目的；译文禁止转载，禁止任何商业或盈利为目的的传播形式。
你可以在bradfrost.com购买到纸质或电子版英文原书。
查看关于译版《原子设计》的更多信息。
已发表：
第1章 设计体系[（上）]
第1章 设计体系（中）
第1章 设计体系（下）
第2章 原子设计理论( 上)
第2章 原子设计理论( 下)
第3章 原子设计工具（上）
第3章 原子设计工具（下）
第4章 原子设计工作流（上）
第4章 原子设计工作流（中）
约5600字，预计阅读时间14分钟
重新设定期望值
虽然你已很努力地推销设计体系的概念，但在正式投入工作之前，仍然需要设定利益相关者和团队的期望。
这里说的“设定期望”，实际上是“ 重新设定期望”。我们都习惯将自己的经验、观点和偏见带入到项目中。这个行业仍然非常年轻，许多从事Web工作的人来自其他行业，他们通常都有自己习惯的做事方式。即使是专门从事IT工作的人，也会受之前的行业经验所影响。而且，数字设计的指导原则、最佳实践和策略仍在不断总结和变化中。
在一个只有20多年历史的行业中，如果有人说“这是我们一直以来做的事情”，无疑很可笑。人类是习惯的创造者，走出熟悉的温暖怀抱会很不舒服，这种感觉我们都不喜欢。但如果我们要适应行业的瞬息万变并创建成功的数字作品，就必须克服现有的心理倾向。
重新定义设计
简单地将印刷设计移植到Web上，我们已经走了很长一段路，印刷设计的方式方法仍然影响着Web设计。
印刷设计主要集中在视觉美学上。毕竟，对于一张海报来说，除了看，你不能做其它事情。当然，我不是在暗示印刷设计是简单且只有一个维度的，它们也包含众多细节和工艺。我的意思是，Web的双向和交互性质，为构成好的设计增加了更多的维度。如果我们要创造出色的数字作品，则必须考虑加载速度，屏幕尺寸，环境，技术，外形尺寸，人体工程学，可用性，可访问性，上下文和用户偏好等因素。
这些附加事项对创建出色的数字作品至关重要，但我们的工作流中却经常缺少这些注意事项。设计师Dan Mall解释：
作为一个行业，我们出售网站像出售绘画一样。相反，我们应该出售美观且易访问的内容，与设备、屏幕尺寸或上下文相关的内容。——Dan Mall
我们是否已经到了把网站当作静态图片来销售和设计的地步?在网络刚形成的年代，我们创造了只满足台式机的用户体验，这也可以理解，毕竟当时只有台式机。桌面屏幕提供的空间使将PDF轻松转换为Web的想法变得简单易行，于是在一段时间内我们也一直这么做。
但是这产生了一定的后果。“Web设计类似于印刷设计”强化了这样一种观点，即Web设计就像其离线设计一样，应该在每种环境中看起来都一样。它仅仅关注Web设计看起来是什么样子，而不是它是如何工作，忽略了它作为新媒体的所有特点。此外，它还增强了人们的信念，即我们可以将创建印刷作品的线性过程应用于我们的数字作品。
随着时间流逝，移动互联网的爆发，技术得到改进，网络进化成现在巨大而多样化的格局。仅有台式机的日子已经一去不复返，取而代之的是智能手机，平板电脑，上网本，笔记本电脑，电子阅读器，可穿戴设备，电视，游戏机，汽车仪表板等设备。
当今网络格局的多样性已经打破了之前在桌面网络的形成的共识，即可以简单地照抄印刷设计的思想和流程。只需要将智能手机，平板电脑和台式机放在一起，Web设计在每种环境中看起来都应该相同的思想就会立马被打破。
我们仍然处在设备大爆炸的开始。毫无疑问，未来的设备和网络格局将比今天更大，更多样化。除了即将出现的设备和新生技术之外，未来的网络还将涉及尚未构思的技术和思想。
前面的三个图对于帮助客户、同事和利益相关者理解Web格局的现状非常有用。有了这种新认知，每个人都变得更加乐于接受和更新他们的工作流，以创造出色的作品。
我们的工作是为使用各种设备、屏幕尺寸、网速、设备功能、浏览器、输入形式、外形、上下文和网络配置的人创造出色的体验。这是一项艰巨的任务，所有这些变量凸显了在创建界面设计体系时，绝不仅仅只注重视觉美感。
除了提供视觉上的美观和一致的体验外，我们还应该：
- 通过创建可访问的、响应式的设计体系来适应网络的多样性。因为将有一大批拥有广泛能力的人员来访问我们的体验，因此应尽可能构建包含所有内容的设计体系。
- 创建灵活的布局和组件，使我们的界面无论使用任何特定的设备尺寸或屏幕大小，都可以完美地呈现。
- 将性能视为基本设计原则，并创建尊重用户及其时间的快速加载体验。
- 通过建立核心体验逐步增强我们的界面，然后分层增强以利用现代设备和浏览器的独特功能。
- 创建面向未来的设计体系，以经受时间的考验并预测设备和网络格局的必然变化。
当然，我们的界面设计体系中还应包含许多其他设计注意事项（人机工程学，输入类型，易读性等），这里的关键是扩展定义什么是好的数字设计，超越视觉美学。
我们需要对流程进行重大更改，才能够正确解决所有这些独特的数字设计注意事项。因此，设定客户、同事和利益相关者的期望是我们的责任，以便每个人都知道这次的创建过程将有所不同。
瀑布工作流之死
你是否曾经听过这个故事。说有一个团队要建立一个网站，当启动会议结束之后，UX设计师就会垂头丧气的消失几天，最后拿出一个巨大的PDF文档，详细介绍了整个体验。以后这个线框文档会传递给项目受众，他们在获得一些反馈和建议后将其签署确认。
UX设计师接着将线框图发给给视觉设计师，视觉设计师打开Photoshop或Sketch，给线框图加上颜色、版式和纹理。在设计评审会上，利益相关者焦急地坐在投影机前，项目经理跑去为所有人打印设计稿的复印件。艺术总监坐在房间的最前面，并揭开设计的神秘面纱。看看这个设计方案！演示结束后，会议室很快就会响起嗡嗡的反馈和对话。在最初的反应和称赞消退之后，一位主要利益相关者发言。
“这看起来棒极了，我认为确实为此项目中完成的工作开了一个好头。但是…… ”
他们表示希望看到一些其他布局的东西，某些能够捕捉到某种氛围的东西，或者某些使用不同图片的东西，或者只是弹出框等。
随着闸门的打开，其他利益相关者突然意识到他们也想分享自己的观点和建设性批评。当会议结束时，每个人都提出了问题。
视觉设计师稍微有点泄气，但还是下定决心，重新回到设计工具中，以根据利益相关者的建议进行工作。在下一次设计评审会议上，同一场景重演，利益相关者表达了同样的鼓励和渴望。“我觉得我们马上就要成功了……”
时间一天天流逝，截止日期迫在眉睫。迫切需要首页v9最终版预览最后一次_即将交付.psd得到利益相关者的认可。
最终，视觉设计师松了一口气，他们终于完成了工作。他们将经过批准的设计稿拿给前端开发，大喊：“你能在三周内完成吗？我们已经赶不上计划，而且超出预算！”
当前端开发人员拿起设计稿时，视觉设计师已经消失了。看了一眼设计稿之后，一种夹杂着迷惑、愤怒和恐惧感情油然而生。这设计的什么鬼？也许是整个页面中使用的七种字体和九种独特的按钮样式；也许这是以台式机为中心，不可能实际执行的布局；也许这是用户生成的完美内容，而现在还不太可能实现。
前端开发人员试图向更大范围的群体提出他们的担忧，但很快就被驳回，因为他们也无能为力，现在进行重大更改为时已晚，尤其是当它已经得到利益相关者的批准时。
因此，前端开发会尽力做到无中生有。他们要创建响应式布局，这些布局仍保留静态布局的完整性，统一那些明显的组件不一致，建立设计中未明确说明的样式状态（例如按钮悬、活动和禁用状态），并就体验的交互方面做出一些即时决策。与设计师的讨论很紧张，但是每个人都意识到他们需要解决这些问题才能完成项目。
在将前端代码插入CMS之后，疯狂完成网站内容，并进行了最后一刻的质量检查测试，团队最终发布了该网站。尽管没人大声说出来，但项目顺利完成的同时还是充满了失望的氛围。毕竟，该网站缺乏了之前想象中的光辉，岗位之间的摩擦也伤害了彼此的关系。
希望这个故事对你来说是虚构的，但是根据我的经验以及与无数其他人的交谈，我想你或多或少都经历过类似的悲惨故事。无论你是否亲身经历了这一过程，重要的是要认识到，亨利·福特式瀑布流已经不可能带来出色的数字化工作。
由于错误和更改的代价非常高昂，因此瀑布式流程可能对印刷，建筑，制造和其他物理媒介有意义。如果团队忽略了流程早期所犯的错误，他们将为此付出高昂的代价。但是，数字世界并没有受到与物理世界相同的限制。像素并不值钱，可以随时更改，快速检验假设，并且可以一次又一次地迭代设计和代码。
瀑布处理过程的前提是必须按顺序进行工作：UX设计的工作必须在视觉设计开始之前完成；视觉设计师必须先完成工作，然后才能开始前端开发。现实情况并不是这样，有很多工作可以并且应该同时进行。要创建完善的UI设计体系，我们必须重新设置受众的期望，并使他们适应界限模糊、互相协作的过程。
工作并行，并不意味着每个人在整个过程中都会大放异彩。当然，大量的研究，信息架构以及UX设计的其他基本方面将倾向于在流程早期进行，但是它们不应拖延其他岗位的工作。同时当他们完成大部分工作，也绝不应简单地从项目中淡出。对于每个岗位来说，继续与其他人协商以确保他们的愿景成为最终产品至关重要。因此，与僵化的顺序瀑布过程不同，随着时间的推移，更多的协作过程看起来像这样：
前端开发也是设计
当前任雇主发现我编写HTML、CSS和演示性JavaScript时，他们让我坐在工程师和后端开发人员的中间。不久之后，有人问我：“brad，该中间件需要花多长时间构建？”和“你能否快速真正地标准化该数据库？”
而现实情况是：我一生中从未参加过计算机科学课程，我的高中生涯是在艺术室里度过的。这些要求使我非常不舒服。
有一个基本的误解，即所有编码都是编程，事实并非如此。HTML不是一种编程语言，CSS不是编程语言。但是由于HTML和CSS仍然是代码，因此前端开发通常与Python，Java，PHP，Ruby，C ++和其他编程语言被归为同一类。这种误解使许多前端开发人员（包括我自己）遭受严重的身份危机。
在组织上，设计和开发人员之间（或市场营销与IT，或创意与工程师或某些其他区分性标签之间）经常存在巨大鸿沟。设计师和开发经常坐在不同的楼层，不同的建筑物，不同的城市，有时甚至是不同大陆的不同国家。虽然这种组织上的某些分离是合理的，但在设计和前端开发人员之间建立一个划分绝对是一个可怕的主意。
实际情况是HTML、CSS和演示性JavaScript构建用户界面，与那些设计师在Photoshop和Sketch等工具中精心制作的用户界面相同。对于团队一起构建成功的用户界面设计体系而言，将前端开发视为设计过程的核心部分至关重要。
当你仅向利益相关者显示网站的静态图片时，他们自然只能在网站图片上发表评论并签字。这设定了错误的期望。但是，通过将设计尽快放入浏览器中，你可以在流程中更快地与利益相关者面对最终媒介的真实情况。使用HTML、CSS和演示JavaScript进行工作，团队不仅可以创建美观的设计，而且可以展示一些独特的数字设计注意事项，例如：
- 自适应性
- 网络的影响
- 交互
- 动效
- 人机工程学
- 颜色和文字渲染
- 像素密度
- 滚动效果
- 设备和浏览器偏好
- 用户偏好
至关重要的是，更早地进入浏览器还可以启动样式的创建，这些样式将构成动态的设计体系。
这并不是说团队必须完全在浏览器中进行设计，这是关于在正确的时间使用正确的工具来做正确的事。除了在浏览器中展示设计之外，团队还可以展示自己正在制作的UI的更丰富、更真实的图片。团队可能会以静态图像展示注重美学的设计思想，同时在浏览器中展示有效原型。
不断迭代的过程
我相信成功的数字设计过程与减法石雕非常相似。在雕刻过程的开始，艺术家及其赞助人对正在创作的作品有一个大致的了解，但是直到雕塑完成后，这种愿景才能完全实现。
雕刻家从一块巨大的岩石开始，然后开始凿刻。第一次过后开始形成粗糙的形状，并且在以后的每次通过中形状都变得更加明显。经过几轮凿刻后，雕塑家的主题显然是人的形式。
随着雕塑的总体形状被粗略处理，艺术家随后开始对作品的特定部分进行归位。例如，它们可能从面部开始，向上移动以雕刻出眼睛，鼻子和嘴巴的形状。经过数次之后，他们接着移动到手臂上，然后开始详细绘制腿部。艺术家会定期退一步，看看他们的详细作品如何影响整体雕塑。这个过程一直持续到雕塑完成为止，每个人都对结果感到满意。
同样，我认为减法石雕是成功数字化过程的一个很好的类比，但是与雕塑不同，我们还具有撤销的能力！
让利益相关者对正在进行的工作进行审核，而不是等结束之后再评审设计和代码，这是至关重要的。正如我在第一章中提到的那样，如今每个组织都希望变得更加敏捷，而迭代是敏捷的关键部分。朝正确的方向迈出重要的一步，而不是花费大量的精力为最终作品画上不现实的图画。完善的设计体系不会直接脱离流水线，而会在迭代循环中一步步塑造，随着项目的进行而增强保真度。
如果这一切听起来有些混乱，那是因为令一些项目经理感到沮丧的是，这种设计过程并不能很好地适应Excel电子表格和甘特图的刚性边界！岗位之间的真正合作是模糊且混乱的，这不是一件坏事。持续的沟通，紧密的反馈循环以及真正的协作是将流程保持在一起的粘合剂。让你的整个团队致力于诚实的对话和真诚的协作，你的流程细节将全盘落地。
通过上边的内容，你知道如何为每个人设定正确的期望了吗？好！下来着手建立我们的设计体系。
NEXT：第4章 原子设计工作流(下)