我们翻译的这本书，可能是下一个设计趋势

两个月前，我看到了下面这张图，第一次知道 Atomic Design。Atomic Design 还处在成长期，国内也没找到多少相关的资料。于是我找到了原子设计这个概念的提出者bradfrost的个人网站，然后发现了这本在线电子书《Atomic Design》。

作者如下图。他觉得按照传统方式花几个月的时间去写一本书然后出版实在太老土，他要写一本会成长会呼吸的不完整的书，于是他直接在他自己的网站上连载，并且不断的修订，他将写书的过程直接开放了，并且无偿的分享给大家。

下面简单的介绍一下原子设计的概念：

原子设计是一种网页设计方法，出自于Brad Frost在2013年时发表的文章

Atomic Design Introduction 原子设计理论简介

1 Introduction 背景介绍

于2013年Brad Forst提出此设计概念：

灵感来自于他高中时期的化学实验室，可以用肉眼看到的物体都是由原子(Atoms)组成，原子结合在一起形成分子(Molecures)，分子组合成相对更复杂的组织(Organisms)。于是Brad借此概念应用在介面设计。

Interfaces are made up of smaller components 介面是由许多元素所组成的。

还记得高中化学元素周期表吗？Brad Forst认为网页也是由小元素所组成

2 定义Definition

原子设计是一个设计方法论，由五种不同的阶段组合，创建一个有层次、计画性的介面系统。

此五种阶段为：

• Atoms原子：为网页构成的基本元素，HTML的tags，例如标签、输入，或是一个按钮，也可以为抽象的概念，例如字体、色调等。
• Molecules分子：由元素构成的简单UI物件
• Organisms组织：相对分子而言，较为复杂的构成物，由原子及分子所组成。
• Templates模板：以页面为基础的架构，将以上元素进行排版
• Pages页面：将实际内容（图片、文章等）套件在特定模板

3 优点 Benefits

• Consistency一致性：由于分解网站成单一元素，不论在哪一个页面，UI元素的互动性是相同的，例如颜色变化、字体的排序、以及回馈。不但让使用者经验相同，在视觉上更为和谐。

• Efficiency效率：由于建立了Pattern Library元件库，一旦要更改某一个元素，可以马上施行、应用。

• Collaboration跨部门的共通语言：不仅方便设计师思考页面的和谐性，也可以让工程师、品质检验清楚页面的逻辑架构及变化，减少不必要的来回沟通

最后，感谢下翻译的小伙伴们

译文多亏了大家的辛苦翻译。译者如下：

第一章：Lisa、krtek、邵瑞琪

第二章：bluesbone

第三章：主物质界面 reg

第四章：梅小菜

第五章：megan、maker

本书一共五章，从明天开始每周连载一章。

想先睹为快？这里是作者网站：Atomic Design | Atomic Design by Brad Frost