来源：我们的设计日记（公众号）
作者：skys
原子设计是一种设计方法，是Brad Frost创造的，基于的想法是在界面设计中，经常会用一些界面上最小的元素（原子）去搭建其他组件。感兴趣的同学可以去Youtube上去了解全套方法教程或文章底部书籍详细了解，本篇我将结合一些我理解的精髓分享给大家。
原子设计理论是2013年Brad Forst提出此设计概念，原子设计是一个设计方法论，由五种不同的阶段组合，创建一个有层次、更规范的设计规范系统。
背景和概念
原子理论设计灵感来自于Brad Forst，在上化学课的时候，我们用肉眼看到的物体都是由原子(Atoms)组成，原子结合在一起形成分子(Molecures)，分子组合成相对更复杂的组织(Organisms)。于是Brad借此概念运用到设计中去，形成了一套设计方法。
▲ 如果大家很久没有用化学可能需要回忆一下：氢和氧原子结合在一起形成水分子。
▲ 在自然界中，原子元素结合在一起形成分子，这些分子可以进一步结合形成相对复杂的生物。
Brad认为所有的设计无论UI或者网页都是由若干元素组成。这种方法的关键思想是，小的独立原子部分可以组合成更大的分子结构，分子结构可以组合成更大的生物体，然后可以作为模板和全页的基础。
如何进行原子设计？
原子设计核心理念，一切设计都是由最小的原子组成，然后原子可以演变成原子，分子，生物组织，模板，页面。
原子：为UI设计构成的基本元素,文字大小，颜色，标签、输入，分割线，头像或是一个按钮，也可以为抽象的概念，例如色调等。
分子：由分子构成的简单UI组件。
组织：相对分子而言，较为复杂的构成物，由原子及分子所组成。
模板：以页面为基础的架构，将以上元素进行排版。
页面：将实际内容（图片、文章等）套件在特定模板。
为了大家更好理解这个案例，接下来我会引用微信小程序设计规范为示例，和大家拆解（微信规范官网有下载）。
原子
正如前面所说，这个世界里所有元素生物都是由基础的原子组成，那么原子是最小的生物，原子是我们系统的绝对基础。原子包括调色板，分割线，字体，单个元素（即标题，段落，按钮等）这些元素有个特点就是最小元素不可再切割。
分子
分子是由原子组成的，在界面中，分子是作为一个单元可以组成UI元素的一个组件。例如，表单，卡片，商品单元，搜索框，按钮等，由几个原子连接在一起成为分子。比如按钮是由颜色，字体原子组合而成分子。
组织
组织是我们开始看到界面汇合在一起的地方。通过组合分子，我们可以构建更复杂但可重复的组织。
组织的的一个例子可能是标题导航，其包括标志，导航链接和搜索字段或注册按钮。
▲ 领券页面（组织）= （原子：字体大小，头像,icon）+ (分子：tab,导航，卡券列表)
▲ 设置页面（组织）= （原子：字体大小，头像,icon，开关按钮）+ (分子：tab,导航，列表)
模块
以页面为基础的架构，将以上元素进行排版，讲原子，分子，组织进行排版成一个页面，这个页面上结合了很多组织。
这些页面简称模板，在UI设计中也叫设计组件，不同于分子是，这个页面讲原子，分子进行了有规律组合，形成了一个模块。
▲ 比喻网站标题的组织包括较小的分子，如主导航，搜索表单，实用程序导航和徽标组成。
▲ 购物网站的产品单元也是由一个个分子组成一个模块。
页面
将实际内容（图片、文章等）套件在特定模板，你可以理解为这页面就是用户最终看到的页面，每个页面由将实际内容（图片、文章等）套件在特定模板。
▲ 产品网站的设计，同样也是由原子，分子，组织，模块组成一个页面。
原子设计的优点
以上那5个概念是原子设计的5个基础，在设计中，我们必须创建可重复使用的设计模式的系统规范，并能准确的将内容放在这些规范系统里面。
原子设计最大优点之一是能够在抽象和具体之间快速转换，可以看到这些元素如何结合在一起形成我们的最终页面体验。
原子设计构成了一个设计世界，这个世界里面所有设计都是由原子构建，当然不止有原子，原子只有第一步，第二步：分子，第三步：组织，第四步：模块，第五步：页面，运用原子设计方法能够保证我们的设计底层规范是科学的。
案例说明
▲ 我们来看看早期的Instagram界面，来解读下这个设计中的原子，分子
原子：Instagram的UI图标，一些文本级元素和两种图像类型：主图像和用户的头像图像。
分子：几个图标形成简单组件，如底部导航栏和用户可以对照片进行评论或照片的照片操作栏。此外，文本和图像的简单组合形成相对简单的组件。
组织：在这里可以看到照片的形状，包括用户的头像，时间，照片本身，照片周围的行动点，以及有关照片的信息，包括字数和标题。这个组织机体成为整个Instagram体验的基石，因为它在整个设计体现里面不断重复。
模板：组件在布局的上下文中融合在一起，我们看到Instagram的内容框架，突出显示动态内容，如用户的点赞，头像，照片。
页面：最终的页面，完整真实的内容展现，这有助于确保底层设计系统结合在一起形成一个完整功能的UI。
总结
我们在设计一套系统规范时候，不防尝试用这套设计理论，它能让我们系统更有生命力，同时比较完整。它也是构建UI规范的一种设计模型，希望后面大家能通过这篇分享更多了解这个理论，帮助大家在工作中去使用。去更好的完成一个系统的建立。
最后，今天这篇分享只是抛砖引玉，只是把我这本书上理解的一部分精髓分享出来，如果英文足够好的同学可以去买上面这本书，这本书里面讲的会更详细一些，我也是看了很多文章和书以及工作实践中觉得这套设计流程很有用，推荐给大家。
网友评论