摒弃页面思维

网页、页面，这个词从互联网诞生的时候就开始存在了，但是‘页’这个词是我们对现实世界的概念过渡过来的，因为我们习惯叫一页纸，一页文档。

但是在现代的互联网中，页面这个概念整悄悄的消失了。
在互联网初期，一些公司只是把平面设计的的页面直接搬到网站上，时隔20几年，这个概念正在发生变化，大家不再把网页，当成一个单纯页面而已了，我们已经意识到页面已经消失了，取代它的是流动的数据，功能模块等等。而我们意识到，页面是一个时刻都在流动的媒介，它可以与人交互，可以快速的切换样式。一个新的概念也不断的出现在WEB社区中，它就是：模块化。

通过把元素分割组合而成的单独模块来组成一个页面。
页面的每个元素可以自由使用和可配置，并且随着终端设计的尺寸而改变展现效果。

在HTML的设计历程里，前端框架的使用，使得模块化变得非常简单和扎实

UI框架

twitter 开发的Bootstrap 目前是Git上最受欢迎的代码库。
优点是方便，简单，稳定。
框架的问题就是，仿佛大家都穿着同样的衣服。

设计系统

良好的设计系统的基石是风格指南（style guide）,它记录和整理了能够提供指引，使用和准则的设计资料。

品牌识别

在传统的品牌设计中，VI手册一般是最终出现的产出物。

品牌识别指南（VI手册）定义了使公司保持独特的资产和材料。LOGO，板式，配色，信息（如使命和标语），品牌延伸（如名片和PowerPoint模板），还有很多都在品牌标识指南中聚集和描述。

从历史上看，品牌标识指南都是写在精装书中的（还记得那些有页面的东西吗？），但与其他事物一样，品牌风格指南也开始有在线的版本了。

一个品牌必须以一种有凝聚力的方式在越来越多的媒体、渠道和接触点中展示自己。一个组织中的每个人是怎样才能用一种声音说话，感觉是整体的一部分呢？第三方如何知道要使用的Pantone颜色，以及如何正确使用品牌的标志？品牌识别指南可以作为提供这些基本问题的答案的中心。

设计语言

虽然品牌标识指南相当具象，但是设计语言指南相比之下就不那么具体了。设计语言风格指南针对特定的项目或产品阐明整体的设计方向，理念，方法。

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

苹果公司也有自己的设计指南（HIG）

设计语言指南并不是像品牌指南那样固定。

Voice和tone（表达和语气）

人们在大量的渠道和媒体品牌进行互动。
除了我们已经讨论了数字媒体以外，品牌也表现在印刷，零售，户外，广播，电视等地方。当一个品牌必须横跨这么多个接触点时，用一个统一的，一致的方式说话对于品牌的成功来说尤为重要。

一个品牌的表达方式（voice）每天都一样，但它的语气（tone）必须一直改变，它取决于情景和读者的感受。Kate Kiefer Lee

表达和语气指南通过描述公司的表达和语气是如何在多种情景下转移的，来引导方向。MailChimp的优秀的表达和语气指南定义了品牌在内容类型不同时的语气，这样，当用户的信用卡被拒绝，写作者需要知道这时应该放弃使用平时调侃的语气，而用更加严肃的语气来代替。

Writing（写作风格指南）

WEB2.0博客和自媒体的兴起，使得组织中的大多数人都可以很轻松的发布内容。这当然是一个双刃剑，因为对于拥有多种声音的组织来说，始终保持一致的写作风格是具有挑战性的。写作风格指南为每个作者提供了一些指南和准则来撰写内容。

Code style guides（代码风格指南）

编写清晰，可扩展，易维护的代码对于团队来说是必不可少的。但是，如果没有一种方法来规定和执行代码的一致性，事情容易土崩瓦解，留下每个开发者自生自灭。

GitHub的代码风格指南提供了团队协作中编写HTML，CSS，JavaScript和Ruby的最佳实践。

代码风格指南提供了约定，模式以及团队应该如何处理代码的方式。这些指南和准则能够帮助控制住杂乱无章的现象，使团队能够专注于共同进行伟大的工作，而不是重构一堆草率的，不一致的代码。

pattern library（模式库）

现在终于说到了正题。模式库（Pattern libraries），也被称为前端风格指南，UI库，或组件库，正在迅速成为现代界面设计的基石。

什么是原子设计，原子设计的概念是怎么样的

氢原子和氧原子结合形成水分子的化学方程式

原子设计是一种方法，由五个不同的阶段一起工作，以更慎重和更具层次的方式创建界面设计系统。 原子设计的五个阶段分别是：

• 原子
• 分子
• 有机体
• 模板
• 页面

原子设计由原子、分子、生物体、模板和页面共同协作以创造出更有效的用户界面系统的一种设计方法。

原子设计不是一个线性的过程， 它更像是一个心理模型，来帮助我们把用户界面看作是一个连贯的整体，同时也是一些元素的集合。这五个阶段的每一个阶段都会在我们的界面设计系统层级中扮演重要角色。

原子

如果原子是物质的基础组成部分，那么我们用户界面的“原子”就是那些构成我们用户界面的基本构件了 。这些原子包括了基本的HTML元素，例如表单标签，输入，按钮，和其他除非损坏其功能否则不能进一步拆解的元素。

分子

在界面中， 分子就像是一个由UI元素组成的相对简单的组织。例如，一个表单标签，搜索框和按钮共同打造一了个搜索表单分子。

一个搜索表单分子是由标签原子，输入原子和按钮原子组成。

在合并后，这些抽象的原子突然就有了共同的目的。标签原子现在定义了输入原子。点击按钮原子现在可以提交表单。得到的结果是一个可以应用在任何搜索功能区的简单、便携、可重复使用的组件。

将元素组装为简单的功能组是我们一直以来构建用户界面的方式。但是，原子设计方法论，这些相对简单的组件为我们提供了一些引人深思的见解。

有机体

有机体是由分子或原子或其它有机体组成的相对复杂的UI组分 。这些有机体组成了界面的不同部分。

让我们重温一下我们的搜索表单分子。一个搜索表单可以经常在许多Web页面的顶端标题部分找到，所以让我们看看把那个搜索表单分子导入header有机体中是什么样子的。

这个header有机体是由搜索表单分子、LOGO原子、主导航分子构成的。

模板

模板是页面级别的对象，它将组件放置在布局中，并显示设计的底层内容结构。 在我们前面的例子中，我们可以使用标题有机体并将其应用到首页模板。

主页模板由应用于布局的有机体和分子组成。

页面

页面是模板的具体实例，可以显示UI具有代表性的真实内容 。基于我们前面的例子，我们可以使用主页模板并将代表性的文本，图像和媒体填充到模板中，以显示实际的内容。

页面阶段将占位符内容替换为有代表性的真实内容，使设计系统有了生命。

**页面还提供了一个表达模板变量的地方，**这对建立强大而可靠的设计系统至关重要。以下是模板变量的几个例子：

• 用户在其购物车中有一个商品，另一个用户在其购物车中有十个商品。
• 网页APP的仪表板通常显示最近的活动，但是该部分对于首次使用的用户是禁用的。
• 一篇文章标题可能是40个字符长，而另一篇文章标题可能是340个字符长。
• 具有管理特权的用户与没有这些特权的用户相比可能会在信息中心上看到其他按钮和选项。

在所有这些例子中，底层的模板是相同的，但用户界面将会随着内容的动态性质而改变。这些变化直接影响了底层分子，有机体和模板的构建方式。因此，创建解释这些变量的页面有助于我们建立更具弹性的设计系统。

这就是原子设计！这五个不同的阶段同时协同工作，以产生有效的用户界面设计系统。我们总结一下原子设计：

• 原子是不能进一步分解的UI元素，并且是可以用作界面的元素构建块。
• 分子是用于形成相对简单的UI组件的原子集合。
• 有机体是形成界面各个部分的相对复杂的部件。
• 模板将组件放置在布局中，并演示设计的底层内容结构。
• 页面将真实内容应用于模板，演示最终界面中的各种变量，并测试设计系统的弹性。

原子设计的优点

那么为什么要经历这一切呢？原子设计好在哪？这些都是合理的问题，我们建立用户界面这么长时间，却没有一个明确的五阶段的方法论。但是原子设计为我们提供了一些关键的见解，帮助我们创建更有效、更深思熟虑的UI设计系统。

局部与整体

原子设计提供的最大优点之一是能够在抽象和具体之间快速转换。 我们可以同时看到我们的界面分解成原子元素，也可以看到这些元素如何结合在一起形成我们的最后的体验。

原子设计允许设计者在抽象和具体之间进行转换。

理清结构和内容之间的区别

讨论设计和内容有点像讨论鸡和蛋 。Mark Boulton解释道：

内容需要结构化，而结构化会改变你的内容，同样设计也会改变内容。这不是“内容然后设计”，也不是“内容或设计”。这是“内容和设计”。——Mark Boulton
精心设计的设计系统满足了居住在其中的内容，精心制作的内容知道它是如何在界面的环境中呈现的。我们建立的界面模式必须准确地反映出文本，图像和其它在其中的内容。同样，我们的内容应该意识到它将以什么方式呈现。内容与设计之间的密切关系需要我们在构建界面时考虑清楚。

原子设计为我们提供了一种讨论我们的UI模式的结构以及这些模式内容的语言。虽然内容结构框架（模板）和最终内容（页面）之间看起来差别很大，但原子设计让我们认识到它们之间的联系是非常大的。如下图所示：

在左边，我们看到界面的内容框架，它由同一个“头像模块分子”多次重复构成。在右边，我们可以很明显地看到当我们用具有代表性的内容填充每个“头像模块分子”时会发生什么。通过可视化内容框架和具有代表性的最终内容，我们可以创建一个能够准确反映内容的模式。如果一个人的名字在模板中超过了五行，我们将需要在原子的级别上来解决这种破坏的行为。

我们在页面阶段输入我们的UI的内容将影响底层设计模式的特征和参数。

#让我们开始吧

##从哪里入手？