一、设计体系
1.1 设计体系产生
页面的历史
- 正如我们将在本书中讨论的那样，事物的命名方式极大地影响了它被感知和使用的方式。
- ⻚面隐喻在我们界定和创建Web项目上依然深入人心。
- 项目的工作量其实取决于这些⻚面中包含的功能和组件的数量，而不是⻚面本身的数量。
打破页面
计算机科学家开始实践面向对象的程序设计并建立重要的模块化概念，例如关注分离和单一功能原则。网络本身诞生于这个世界，因此模块化设计也迅速成为Web结构的设计原则。
模块化当下比以往任何时候都重要。目前，我们整个行业都淹没在大量的设备，视窗大小和在线环境中，而且这种情况不会很快放缓。
我们现在的任务是确保在各种各样的智能手机、平板电脑、平板手机、上网本、笔记本电脑、台式机、电视、游戏机等屏幕上精美地展示我们的网站体验。为了在保持布局合理的同时解决这一现实，我们绝对有必要退后一步，将这些巨大的责任分解为更小，更易于管理的模块。而这正是人们正在做的事情。模块化的思想正渗透到Web创建过程的各个方面，并对组织的战略、过程、内容、设计和开发产生深远影响。
可管理的策略
当进行大规模的重设计并改变用户体验时，用户就会被以前的使用习惯打败。巨大的重设计对系统造成了颠覆性的影响，用户必须花费大量的时间和精力来重新获得经验，以便慢慢地适应新的操作方式。
通过创建MVP并快速交付以迭代地改善体验，组织可以更好地解决用户反馈并跟上瞬息万变的Web环境。摆脱不断重复的重设计，需要对组织结构和工作流程进行更彻底的更改，这说起来容易做起来难。
迭代过程
即使可能无法采用真正的敏捷流程，但与跨学科团队合作、更快地进入最终环境、提早并经常交付以及将较大的任务分解为较小的组件，仍然是一个好方法。
模块化内容
为了更好地应对这种日益多样化和折中的数字环境，我们需要彻底改变对内容的理解及其管理工具。有必要创建模块化的内容，从而更好地覆盖他们使用各种设备的用户。内容管理系统已经超越了Web发布平台的根基，发展成为可以优雅创建和维护模块化内容的工具。
经典代码
将模块化编程原理应用于JavaScript非常简单，因为JavaScript本身就是一种编程语言。同时，面向对象的思想也正在融入网络的其他方面，包括CSS（即网络样式语言）。诸如OOCSS，SMACSS和BEM之类的方法应运而生，以帮助Web设计人员创建和维护模块化CSS架构。
视觉重组
模块化不仅渗透到Web样式的代码方面，而且正在彻底改变视觉设计师处理现代Web设计的方法。
通过将视觉探索分解为较小的模块，设计师可以节省时间和精力，同时避免向客户展示不切实际、过早的布局。更重要的是，这种方法避免利益相关者仅从简单的漂亮设计稿中做出反应，转而促进了关于总体设计方向以及与项目目标相关的关键对话。
系统的UI设计
创建多设备的Web体验所涉及的内容比创建静态⻚面复杂得多。界面的每个部分都包含自己独特的挑战和机遇，以使其在众多屏幕尺寸和环境下都能美观地工作。
UI框架
既要解决不断增⻓的设备多样性问题，又要按时交付项目，这就产生了诸如Foundation by Zurb和Bootstrap之类的前端框架。这些框架为设计人员提供了封装好的HTML/CSS样式和JavaScript的集合，从而可以将下拉菜单和轮播之类的交互组件添加进功能中。本质上，这些框架是快速搭建界面的快捷工具套件。
前端框架是提供特定解决方案和特定外观的工具，有助于加快开发速度，但最终获得的体验却类似于那些科幻连体裤。
- 除了外观相似的问题外，这些框架还会给体验带来不必要的冗余。
- 另一方面，框架可能不够全面，导致开发人员需要创建大量的自定义代码来实现其项目目标。
- 然后是命名问题。
1.2 设计体系构成
优秀设计体系的基础是⻛格指南（style guides），它记录并组织设计材料，同时提供了指南，用法和引导。⻛格指南有很多种具体的分类，包括品牌识别，写作⻛格，语态和语气，代码，设计语言和用户界面样式等。
品牌识别
品牌识别指南定义了公司独一无二的资产和材料。Logo，版式，色板，信息（任务说明和标语），附属品（名片和PPT模板）等在品牌识别指南中进行了汇总和描述。
在越来越多的媒体，渠道和触点上以统一的方式展现自己的品牌至关重要。组织中的每个人如何才能让他人感到他们属于实体的一部分？第三方如何知道要使用哪种颜色以及如何正确使用品牌logo？品牌识别指南集中地提供了这些基本问题的答案。
设计语言
品牌识别指南还是看得着摸得到的，而设计语言指南则很难摸到。设计语言⻛格指南阐明了针对特定项目或产品的一般设计方向，理念和方法。
设计语言指南不像品牌指南那样一成不变。例如，有一天Google可能会开发一种新的设计语言来代替材料设计，因此虽然Google的整体品牌将保持不变，但围绕其产品的设计将发生变化。
语态和语气
语态是品牌标识的基本方面，因此通常，品牌标识指南会包含一些有关品牌语态的指南。但是，这些准则通常并不太具体，这就是为什么语态和语气指南如此重要的原因。语态和语气指南通过阐明如何在各种情况下转换公司的语态和语气，从而使品牌深入人心。MailChimp出色的语态和语气指南定义了品牌的语气在内容类型之间的变化方式，当用户的信用卡被拒收时，写作者会知道不能使用通常那种厚脸皮和俏皮的语调，而是采用更为严肃的语气
写作指南
Web和内容管理网站的兴起使许多人比以往更容易发布内容。当然，这是一把双刃剑，因为要为拥有众多声音的组织保持一致的写作⻛格可能会带来挑战。写作⻛格指南为每位作者提供了一些内容贡献的准则和指导。
代码样式指南
对于团队来说，编写清晰、可扩展、可维护的代码至关重要。但是，如果没有找到促进和执行代码一致性的方法，事情就很容易崩溃，并使每个开发人员都晕头转向。
代码⻛格指南提供了有关团队应如何使用其代码的约定、模式和示例。这些准则和指导有助于遏制疯狂的行为，使团队可以集中精力共同完成出色的工作，而不是重构一堆草率，不一致的代码。
样式库
现在我们终于讲到了重点。样式库，也称为前端样式指南，UI库或组件库，正迅速成为现代界面设计的基石。
1.3 风格指南的好处
而不管从设计、开发还是组织的⻆度来看，⻛格指南都是防止混乱的重要工具。因此，⻛格指南成为现代Web设计和开发的重要工具。
保持一致性
⻛格指南通过鼓励复用界面元素来帮助消除这些不一致。设计和开发人员可以参考现有的样式，以确保他们正在制作的与已有元素保持一致。
共享词汇表
⻛格指南在项目每个人之间建立了一致、共享的词汇表，从而鼓励各岗位之间进行协作，并减少沟通问题。
扩大影响力
⻛格指南向客户、利益相关者和其他岗位证明，除了说“让我们创建一个新网站”之外，网站设计和开发工作还涉及很多需要深度思考的工作。样式库以一种非常直观的方式传达设计语言，这有助于利益相关者了解，最终界面是由底层系统决定的。
同理心工作流
通过将⻛格指南作为工作流程的基础，设计和开发人员被迫考虑其决策将如何影响更广泛的设计体系。从而减少各自为政，更多的考虑整体的利益，这正是你希望团队所要做到的。⻛格指南为每个岗位提供了一个途径，来贡献他们各自对⻛格的思考和关注。通过将所有这些考虑因素汇总在一起，⻛格指南将成为每个参与项目者的中心，这有助于每个岗位从多个⻆度更好地理解设计体系。
更容易测试
将界面拆成组件使测试变得更加容易。⻛格指南可让你单独地查看界面样式，从而使开发人员将精力集中在错误，浏览器不一致或性能问题上。
加快速度
设计界面设计体系和创建自定义样式库需要在初期花费大量时间、思想和精力。但是，一旦建立了样式库，后续的设计和开发就会变得更快，这会使每个人都很高兴。
长期价值
就像优质葡萄酒一样，⻛格指南的价值也会随着时间而增加。界面设计体系的美妙之处在于，它可以在以后几年中进行修改、扩展和完善，事实上也确实如此。
二、原子设计理论
为了使我们能够为这种百花⻬放的网络环境创造优秀体验，我们必须超越自网络诞生以来一直伴随着我们的⻚面隐喻。幸运的是，组织在Web创建过程的各个方面都开始拥抱模块化，从而带来了更智能的工作流和可持续的系统。随着设备，浏览器和环境的数量以惊人的速度持续增⻓，创建全面、精心设计的界面设计系统的需求比以往任何时候都更加强烈。
2.1 原子设计方法
界面也可以分解为一组相似的有限元素。Josh Duck的HTML元素周期表完美展示了所有的网站、应用程序、内网以及其他内容都是如何由相同的HTML元素组成的。因为都是从一组有限构建元素开始，所以可以将自然界的反应过程应用到设计和开发用户界面中。
原子设计是一种方法，它由五个不同的阶段组成，这些阶段一起工作，以更科学和层次分明的方式创建界面设计体系。原子设计的五个阶段是：
自然世界中的每个原子都有其独特的性质。氢原子包含一个电子，而氦原子包含两个。这些内在的化学性质对其用途有深远的影响。同样，每个界面原子都有自己的独特属性，例如主图的尺寸或主标题的字体大小。这些先天属性影响每个原子应如何应用于更广泛的用户界面体系。在样式库的上下文中，原子一目了然地展示了所有基本样式，这对于在开发和维护设计体系时有很大的参考价值。但是，就像自然界中的原子一样，界面原子并不存在于真空中，只会在实际应用中出现。
分子
在化学中，分子是一组原子结合在一起，具有独特的新特性。例如，即使水分子和过氧化氢分子由相同的原子元素（氢和氧）组成，它们也具有独特的属性和表现。在界面中，分子是相对简单的UI元素组，它们一起作为一个单元起作用。例如，标签文字，搜索输入框和按钮可以组合在一起以形成搜索分子。
当结合在一起时，这些抽象原子就立即具有目的性。可以看到，标签原子定义了输入框原子，而单击按钮原子即可提交表单。结果是一个简单，可移植，可重用的组件，可以将其放置在任何需要搜索功能的地方。现在，将元素组装成简单的功能组是我们构造用户界面时经常做的事情。在原子设计方法中对这些相对简单的组件专⻔提供一个舞台，这可以为我们提供一些关键⻅解。创建简单的组件有助于UI设计和开发人员遵守“单一职责原则”，这是一个古老的计算机科学准则，它鼓励“只做一件事情并做好”的心态。给单个样式添加过多的复杂性会使软件笨拙。因此，创建简单的UI分子可以使测试变得更加容易、鼓励可重用性并提高一致性。
有机体
有机体是由分子、原子或其他有机体组成的相对复杂的UI组件。这些有机体形成界面的不同部分。让我们重新回顾一下搜索分子。搜索通常可以在许多网站的头部中找到，因此让我们将该搜索分子放入头部有机体的上下文中。
有机体可以由相似或不同的分子类型组成。头部有机体可能由不同的元素组成，例如logo图像，主导航列表和搜索表单。我们几乎在每个网站上都能看到这些类型的有机体。
某些有机体可能由不同类型的分子组成，而有些有机体可能由一次又一次重复的同一分子组成。例如，几乎所有电商网站的类别⻚面，你都会看到以某种网格形式显示的产品列表。
从分子演变为更精细的有机体，为设计和开发人员提供了重要的上下文知识。有机体的交互动作由那些较小，较简单的组成部分决定，并作为独特样式反复使用。产品网格有机体在任何需要显示一组产品的地方都可以使用，包括品类列表、搜索结果和相关产品。现在，我们已经在设计体系中定义了有机体，接下来就可打破化学上的类比，将所有这些组件应用于类似于网⻚的内容！
模版
现在可以和化学比喻说再⻅了。原子、分子和有机体的语言本身具有鲜明的层次结构，从而帮助我们特意构建出设计体系的组件。但最终，我们必须采用更适合最终产出的语言，同时对客户、老板和同事更有意义。试图将化学类比一用到底可能会使你的受众感到困惑，并导致他们认为你走火入魔了。模板是⻚面级对象，可将组件放置在布局中并阐明设计的底层内容结构。在之前的案例基础上，我们可以将头部有机体拿出来应用到主⻚模板。
模板的另一个重要特征是它们专注于⻚面的底层内容结构，而不是⻚面的最终内容。设计体系必须考虑内容的动态性质，因此很有必要阐明组件的一些重要属性，例如图像尺寸，标题和文本段落的字符⻓度等。
通过定义⻚面的框架，我们可以创建一个包含各种动态内容的系统，同时为填充某些设计样式的内容类型提供所需的保护。
页面
⻚面是模板的特定实例，显示了带有实际代表性内容UI的外观。
⻚面阶段是原子设计的最具体阶段，由于某些显而易⻅的原因，它显得很重要。毕竟，这就是用户访问你的网站时将看到并与之交互的内容。这就是你的利益相关者将签署的内容。在这里，你可以看到所有这些组件组合在一起，形成美观而实用的用户界面。这是多么令人兴奋！除了向用户展示最终界面时，⻚面对于测试基础设计体系的有效性至关重要。在⻚面阶段，我们可以查看将真实内容应用于设计体系时所有样式如何保持。一切看起来都不错，并且功能正常吗？如果答案是否定的，那么我们可以返回并修改分子、有机体和模板，以更好地满足内容的要求。
⻚面还提供了表达模板变化的地方，这对于建立强大和可信赖的设计体系至关重要。
创建解释这些变化的⻚面有助于我们创建更具弹性的设计体系。这就是原子设计！这五个不同的阶段同时工作，以产生有效的用户界面设计系统。
概括地说明原子设计：
- 原子：是无法进一步细分的UI元素，它们是界面的基本构建元素。
- 分子：是形成相对简单UI组件的原子的集合。
- 有机体：是形成界面各个部分的相对复杂的组件。
- 模板：将组件放置在布局中，并演示设计的基础内容结构。
- ⻚面：将真实的内容应用于模板，阐明变化形式以演示最终的UI，测试设计体系的弹性。
2.2 原子设计的优势
- 原子设计的最大优势之一，是能够在概括和具体之间快速切换。
- 原子设计为我们提供了一种用于讨论界面样式结构及其包含内容的语言。
- 原子设计为我们提供了各部分和整个界面之间结构的导航。
但是，原子设计并不是严格的教条。最终，无论选择使用哪种分类命名，都应能帮助你和你的组织更有效地沟通，从而打造出令人惊叹的界面设计体系。
原子设计是一种有用的设计和开发方法，但从本质上讲，它只是用于构造界面的思维模型。
三、原子设计工作流
3.1 关键在人
创建高效的设计体系并没有什么高深的秘密，与完成其他出色工作一样：取决于人与人之间真正的协作和交流。
设计体系可以提高一致性和凝聚力，加快团队的生产力，建立更具协作性的工作流，建立共享词汇表，提供帮助文档，更容易测试并对未来打下良好的基础。
3.2 界面清单
为了使界面清单尽可能有效，涉及到的所有⻆色代表都应该坐在同一间会议室一起进行练习。召集人员：UX设计师，视觉设计师，前端开发，后端开发，文案编辑，内容策划，项目经理，业务负责人，质量监督以及任何其他利益相关者。多多益善！毕竟，此练习最关键的结果之一就是为组织中的每个人建立一个共享词汇表，这需要整个团队的投入。
界面审核练习包括对构成你的用户体验的所有独特UI样式进行截图和分类。请记住，此练习并不意味着捕获每一个UI样式的截图，而是捕获每个唯一UI样式的一个截图。
全局元素
导航
主导航，⻚脚导航，分⻚，面包屑导航，交互式控件，以及其他用于界面导航的任何内容。
图片类型
logo，焦点图像，头像，缩略图，背景以及在UI中显示的任何其他类型的图片样式。
图标
图标是一种有价值的特殊图像。如放大镜，社交图标，箭头，汉堡菜单，微调器，网站图标和所有其他界面图标
表单组件
输入框，文本区域，下拉菜单，复选框，开关，单选按钮，滑块和其他形式的用户输入。
按钮
按钮是典型的UI元素。捕获整个体验中发现的所有独特按钮样式：主按钮，辅助按钮，大按钮，小按钮，禁用按钮，活动按钮，加载按钮，甚至是看起来像文本链接的按钮。
标题
区块
列表
无序，有序，定义，项目符号，编号，行，带状或以列表类型格式显示的任何元素组。
交互式组件
多媒体
第三方组件
窗口小部件，iframe，股票行情自动收录器，社交分享按钮，不可⻅的跟踪脚本以及你域中未托管的任何其他内容。
反馈
所有广告格式和尺寸。消息提醒：警报，成功，错误，警告，验证，加载程序，弹出窗口，工具提示等。这可能是一个具有挑战性的类别，因为消息传递通常需要用户采取行动才能暴露出来。
颜色
捕获界面中显示的所有唯一颜色。此类别可以通过出色的样式指南工具（例如CSS Stats和Stylify Me）来辅助
动效
动效是用户界面的一个基本元素，因此应该被记录。这就需要使用诸如QuickTime之类的录屏软件来捕获在屏幕上移动，淡入淡出，抖动，过渡的任何UI元素。
3.3 界面清单整理
这些类别并不是一成不变的，并会根据你要处理的用户界面的性质而有所不同。当然，最重要还是增删或修改这些类别从而让其适合你的组织需求。
向小组展示可以使团队讨论现有UI样式背后的原理，启动有关命名的讨论，并使团队兴奋地建立更一致的界面。将所有内容整合到一个巨大的在线文档中，该文档很快将成为划破迷雾的利剑。
- 应该保留哪些样式，应该删除那些样式，以及可以将哪些样式合并在一起？
- 我们应该如何对每个样式命名？
- 将界面清单转换为动态样式库的下一步是什么？
通过花时间组织各部分，你可以用更现实、更仔细和有效的方式创建整体。创建可用素材库可以使你用更具条理的方式处理项目，并节省大量时间。你可以创建一个有组织的组件体系，从而用更短的时间完成更好的工作，而不是随意翻阅一堆碎片并浪费时间。
3.4 重新定义设计
多维度
印刷设计主要集中在视觉美学上。毕竟，对于一张海报来说，除了看，你不能做其它事情。当然，我不是在暗示印刷设计是简单且只有一个维度的，它们也包含众多细节和工艺。我的意思是，Web的双向和交互性质，为构成好的设计增加了更多的维度。如果我们要创造出色的数字作品，则必须考虑加载速度，屏幕尺寸，环境，技术，外形尺寸，人体工程学，可用性，可访问性，上下文和用户偏好等因素。
当今网络格局的多样性已经打破了之前在桌面网络的形成的共识，即可以简单地照抄印刷设计的思想和流程。只需要将智能手机，平板电脑和台式机放在一起，Web设计在每种环境中看起来都应该相同的思想就会立⻢被打破。我们仍然处在设备大爆炸的开始。毫无疑问，未来的设备和网络格局将比今天更大，更多样化。除了即将出现的设备和新生技术之外，未来的网络还将涉及尚未构思的技术和思想。
我们的工作是为使用各种设备、屏幕尺寸、网速、设备功能、浏览器、输入形式、外形、上下文和网络配置的人创造出色的体验。这是一项艰巨的任务，所有这些变量凸显了在创建界面设计体系时，绝不仅仅只注重视觉美感。
不断迭代
让利益相关者对正在进行的工作进行审核，而不是等结束之后再评审设计和代码，这是至关重要的。朝正确的方向迈出重要的一步，而不是花费大量的精力为最终作品画上不现实的图画。完善的设计体系不会直接脱离流水线，而会在迭代循环中一步步塑造，随着项目的进行而增强保真度。
3.5 工作流
确定方向
在进入高保真设计和开发之前，必须就总体设计方向达成共识。这需要保持克制并进行期望管理，从而带来更加集中的决策和更现实的工作。
确定内容和显示样式
项目初始阶段会有大量前期战略和研究工作。UX设计师负责综合所有重要信息，并将其转换为可满足项目业务和用户目标的界面。
与其直接进入此类高保真文档，不如从低保真草图开始，该草图确定了特定屏幕上显示的内容以及顺序。体验的基本信息架构则可以通过简单的项目列表来完成创建。
建立视觉方向
视觉设计师的工作是创建一种视觉语言，并将其应用到用户界面中，从而与项目目标保持一致。为此，视觉设计师必须挖掘出利益相关者的审美。
20秒的直觉测试
快速找到视觉方向的神奇方法是20秒的直觉测试，通常在项目启动会议上完成。向利益相关者展示几个相关的网站（约二十到三十个），每个网站二十秒钟。选择的网站应该是特定行业网站和其他行业中有趣的视觉网站的集合。为了增强可信度，你可以用客户的logo中代替网站的实际logo。对于每个展示的网站，每个人的投票比例为1到10，1分表示非常糟糕，而10分则表示完美，并引导参与者发现有趣的视觉特性，例如版式，颜色，密度，布局，插画和总体⻛格等。
若有收获，就点个赞吧
0 人点赞
