又到了学习新知识的一天，做了个整理分享一块来学学，有些地方过于深奥，不懂的话我们可以选择性的去了解，不要因为难理解就排斥所有，分享的目的是开阔眼界，又不是强人所难

DAY.15

“用碎片时间学习”

Brad Frost（早期提出原子设计理论的作者）

Brad Frost是一名来自美丽的宾夕法尼亚州匹兹堡的网页设计师，演讲者，顾问和音乐家。他热衷于在层出不穷的在线设备中创建兼备精美的视觉与功能的网页体验，并且热心帮助其他人做到同样的事情。他为了帮助网页设计师创建了多种工具和资源，包括Pattern Lab （与Dave Olsen和Brian Muenzenmeyer共同开发）， Styleguides.io （与Anna Debenham共同开发）， This is Responsive ， WTF Mobile Web （与Jen Simmons共同开发）以及Mobile Web Best Practices

作者小故事

那是2013年，我们与Brad Frost和Jennifer Brook一起挤在布鲁克林阳光明媚的厨房里。我们四个人刚刚开始忙TechCrunch的一个新网站，我们在Jennifer的公寓里绘制线框图，探索响应式设计的新需求。Brad拉出笔记本电脑：“我一直以来有一个新的想法。“

Brad的屏幕看起来像一个爆炸了的网页。UI的碎片各自游荡，不受统一设计与层次结构的限制。看起来就像一个汽车修理站中的一堆备件。Brad疯狂地笑了起来，点了点头：“很赞，不是吗？” 我们三个人茫然地回头看。有人咳了一声。然后前端开发的Brad Frost开始开始变成了像化学家的Brad Frost那样说话。他谈到原子和分子和有机体——关于大型的设计可以分解成更小的部分，甚至重组成不同的大型组块。而不是将设计的成品视觉化，换句话说，他向我们展示了设计的组成要素。我们兴奋了：这是一个观念的转变，一种摆脱将网站页面作为静态页面模板的集合的方法，取而代之的是一个适应组件的动态系统。这是处理响应式网站以及所有同类项目的一个启发性的方法。

Brad的新想法就是原子设计，它改变了我们在这个有出奇多设备的世界中工作的方式。通过在大层面（页）和小层面（原子）同时思考界面，我们精简了流程：对每个元素的作用提出了更严格的思考；我们开始习惯改善我们UX的一致性;而且至关重要的是，我们开始让工作更高效、更易于协作。原子设计就是我们的力量源泉。

在TechCrunch重新设计的早期阶段，我们曾经讨论过我们想要的文章页面是什么样的。在短短的一个小时之内，Brad就有了一个能够完全响应的版本。那一刻我们意识到我们能够进展的有多快，这是一个用以证明这种聪明的模块化方法强有力的案例。

差不多四年过去了，我们没有固步自封。Brad在随后的项目中继续改进他们的技术和工具，包括娱乐周刊和时代周刊的风靡一时的网站。我们已经使用这些经验来帮助内部产品团队更快，更高品质地建立网站，构建大规模设计系统，服务需要跨国协作的组织将设计与开发工作连接到一起。

原子设计给了我们需要的速度，自由度和灵活度。它改变了一切。我们认为它也会为你带来同样的体验。这本精彩的书解释了原子设计系统的理论，实践和维护。并且它是以有趣、有助益的慷慨描述了这一切，而Brad也恰恰是一个这样的人。

Brad对网站及创建者的干劲和热情是无穷的。多年来，Brad一直在响应式设计与技术的工作前沿分享着他的一切。他的这个响应式网站是为任何UX问题找到响应式解决方案的定向资源。他的博客和Twitter状态分享了他的问题和解决方案。当设计师和开发者关注Brad Frost，他们将看到Brad用于构建美丽而有弹性的网站的实践和富有激情的的洞察力，即时而又频繁的更新。而所有这一切，在这本书中都会加倍地呈现。有机会的话，Brad会敲开每个设计师和开发者的门，亲自交付他的知识。我们愕然注视（轻微地嫉妒）这个忙碌的苦行僧在全球各地的宣传，与六大洲的数百个团队和组织分享他的建议。（ 原子设计，即将到达南极！）但即使是Brad Frost也不能立马到达每个地方，我们很高兴他在这本书中用深刻幽默的方式详细阐述了他的想法。

原子设计在世界各地流行起来；它改变了我们的设计实践；我们也很高兴能够为你的设计过程带来同样的创意火花。

附上原文链接：

 https://atomicdesign.bradfrost.com/table-of-contents/

下面进入今天正题

（大神对于原子设计的解读）

原子设计理论不是什么高大上的规则，它最早就是为了让网页设计师更容易理解网页的构成，后来慢慢延伸到UI设计当中，它的基础原理套用了宇宙中所蕴涵的元素的概念，即宇宙中已知的物体分解后都可以分解为一组有限的原子

这里的宇宙中的“物质的最小单位是原子”，这一理论是由英国化学家/物理学家约翰·道尔顿提出的，继承古希腊原子论和牛顿微粒说，提出的原子论。化学元素由不可分的微粒（原子）构成的，它在一切化学变化中是不可再分的最小单位。这应该也是我们教科书中写到的

最小的单位用物理术语是“基本粒子”，指人们认知的构成物质的最小/最基本的单位，是组成各种各样物体的基础。而最新研究表明，比原子还小的还有夸克和希格斯玻色子（上帝粒子），自从夸克理论被提出后，人们意识到基本粒子也有比较复杂的结构，而不是以前认知中的只有原子。从此大家开始对基本粒子避而不谈了

什么是原子设计理论

大神的理解：试图寻找一种使用户界面系统化的方法，并在各行各业和其他领域中寻找灵感。相对于我们所处的这个复杂的世界，如自然构成的复杂、人体结构的复杂、社会结构的复杂等等，某个领域制定系统化的方法就显得容易了很多，因此我们可以从这些世界构成中学习、剖析、研究并把这些知识转化并加以利用

许多领域，如工业设计和建筑设计，已经开发出智能系统，用于制造极其复杂的物体，如汽车、飞机、轮船和大厦。这些智能系统的形成也参考了自然结构等类似的结构。因此我们可以在自然结构等类似结构中探寻，或许就能找到我们想要的答案

从化学中寻找线索

化学反应由化学方程式表示，化学方程式通常显示原子元素如何结合在一起形成分子。在下面的示例中，我们看到氢和氧如何结合在一起形成水分子

自然界中，原子元素结合在一起形成分子。这些分子可以进一步结合并形成相对复杂的生物。进一步说明：原子 是所有物质的基本组成部分。每个化学元素都有其独特的特性，在不失去其含义的情况下无法对其进行进一步分解。（原子由更小的位组成，例如质子，电子和中子，但原子是最小的功能单元）

分子是两个或两个以上通过化学键结合在一起的原子的组。分子的这些组合具有其自身的独特的属性，并且比原子更有可操作。生物体是由分子共同协作组成的一个整体，这些相对复杂的结构可以从单细胞生物一直到像人类这样极其复杂的生物的这样的一个范围。

这样理解会简化宇宙中令人难以置信的组成部分，但基本原理仍然存在：原子结合在一起形成分子，然后进一步结合形成生物体。这种原子理论意味着，已知宇宙中的所有物质都可以分解为有限的原子元素集：

原子设计的方法

前面讲了如何将宇宙中的所有物质分解为一组有限的原子元素。这样的规则与我们的代码结构不谋而合，我们的代码可以分解为一组相似的有限元素。Josh Duck的HTML元素周期表很好地阐明了我们所有的网站页面，HTML5页面，以及其他所有内容都是如何由相同的HTML元素组成的

Josh Duck是个程序员，他利用HTML代码与元素周期表的共性，做出了一个以元素周期表为形式的HTML标识。网站是：joshduck.com 大家有兴趣可以看一下。因为我们是从一组相似并有限的模块和元素进行构建的，所以我们可以应用自然界中发生的相同过程来设计和开发我们的用户界面

原子设计理论有五个层面，把原子设计理论带入到用户界面中，原子设计就会产生五个不同层面的组成方法，这些层面相互影响，以叠加组成的方式来创建界面的系统。原子设计理论会把这五个层面进行划分，分别是：原子（元素、要素）、分子（组件）、组织（模块）、模板（原型）、页面（填充内容）

原子

原子是物质的基本组成部分。应用于用户界面的原子是我们的HTML标签，例如表单标签，输入框、按钮、图标等。原子还可以包括更多的抽象元素，例如色板，字体，以及界面中不可见的部分。这些用户界面中的“原子”就像自然界中的原子一样，它们都是相对抽象的，通常它们本身的意义并不大，例如在用户界面中改变一个按钮的尺寸，或改变一小块的颜色，对整体而言影响并不大。但是，它们非常适合作为“样式”的形式被存放在库中，也就是我们常说的“组件化”，这样就可以一目了然地看到和改变所有全局的样式了

分子

分子是独立存在而保持物质化学性质的最小粒子，由组成的原子按照一定的键合顺序和空间排列而结合在一起的整体。用户界面中的“分子”是由线段、按钮、图标和输入框等等这些原子元素构成的

一个按钮和输入框本身起不到任何作用，但它们组合在一起就会变成“搜索框”，就会被赋予新的功能和含义。分子在界面中以组件化的形式而存在的，像下拉菜单、导航栏、表单、手风琴等

组织

在《Atomic Design》的书中把这部分的知识定义为“生物体”，由于生物体的概念相对比较难理解，这里只简要概述一下它。分子为我们提供了一些基础的物质构成，如蛋白质、核酸 (DNA、RNA等)、糖类，这些常见的生物大分子构成了生物体

生物体的概念影射到用户界面的构成中，元素和要素（原子）结合起来构成组件（分子），组件组合起来构成组织（生物体）。组织在用户界面中以模块的形式存在，例如网页的导航栏、产品信息、焦点图、关于我们模块；App的卡片、列表、瀑布流等

模版

到了模板的层面，我们就应该和化学说再见了。原子、分子和组织这样一种有层次的结构，可以帮助我们去构件设计系统中的组件，并实现组件化。但最终我们还要根据用户需求、客户需求和场景的变化，来帮助它们解决设计上的问题，并使原子设计更具有意义

模板可以使“组织”组合在一起形成产品页面的原型，产品原型可以概括的说是整个产品面市之前的一个框架设计。在这里我们可以看到设计整合在一起，并呈现出实际页面架构和布局。模板的特征就是专注于页面的基础内容结构，而不是页面的最终内容

页面

页面层面是原子设计最具体的一个层面。所有模板整合在一起并形成页面，为用户提供具有代表性的内容，并准确描述用户最终看到的内容。页面也是高保真图，它能达到和实际页面类似的效果，正因为它更接近于实际页面，团队中大部分的人所耗的时间和精力，就是不断地去修正它并完善它

当模板填充上了实际用户需要的内容，如图片、图标、文字后，就会逐渐形成页面，当内容全部填充完后就会形成高保真图。这里的高保真图可不是视觉稿，视觉稿只是基于UI设计层面，而高保真图是在产品和业务层面综合考虑的，包含完整的产品交互逻辑、页面流转、实际内容和界面设计等。比视觉稿更有逻辑，更准确，更接近于实际业务层面

为什么要进行原子设计

原子设计为制作设计系统提供了清晰的方法。客户和团队成员通过实际的设计流程与步骤，能更好的去理解设计系统的概念。原子设计使我们能够从抽象的设计中过渡到具体的设计中来，因此我们可以对一个设计系统进行一致性和可伸缩性等类似特性的控制

通过模块化的设计系统调动组件，可以使我们开发新的产品时，从开始就可以对产品进行严格的把控与一定程度上的控制，进而规避了事后风险。开发之前什么都不确定好，毫无逻辑的去开发，开发到一半发现功能与需求对不上等问题逐渐产生，会导致产品的延期、人员成本的浪费、人员能动性降低、资金成本的增加，产品的迭代率的下降、进而影响市场先机与市场占有率

在开发新的产品或项目之前就应该确定好目标和方向，这很像德国人的思维，在软件开发之前把一切都策划好，之后根据之前策划的步骤一步步去实施，如果中途发现哪里有弊端不会进行修改，要严格按照之前定制好的标准一步步执行，前期的项目规划尤为的重要。用中国人的设计思维去理解德国人这样的设计思维会觉得非常的愚蠢，但实际这样做效率更高，沟通成本低、产出率高，质量控制更好，品质也更高

总结

下面显示了逐步完成设计原子设计的过程，对于每一个层面都有相应的介绍。这五个不同的层面同时工作，以产生有效的用户界面设计系统。概括总结原子设计理论：

原子：无法进一步细分的UI元素，是界面的基本构成要素；

分子：形成相对简单的UI组件的原子的集合；

组织：形成界面离散部分的相对复杂的组件；

模板：组件放置在布局中，并演示设计的基础内容结构；

页面：将真实的内容应用于模板，并阐明变化形式以演示最终的UI并测试设计系统的弹性

欢迎加好友交流，增加社交圈，改变社恐