网页设计新思路：从原子化角度构建设计系统，而非仅关注排版等元素
对于一位独具见解的网页设计者而言，一个网页并非仅仅只是一个页面，它能够如同人体那般被拆解为器官、组织、分子乃至原子！要记住，我们并非在设计页面，我们所设计的乃是构成组件的系统。
网页的原子化设计Brad Frost
网页设计技术持续发展着，在此情形下，我们开始察觉到，建立的应当是周全照顾各方面的设计系统，并非仅仅是简单的网页集合，是这样的情况。
现今，于创造设计系统这个范畴，已然存在诸多讨论，其中多数仅仅是停留在聚焦于构建颜色、排版、网格、结构以及类似元素这个层面上。这般思维方式诚然重要，然而我针对此的兴趣并非极大，毕竟最终这些都会演变得相对主观。近来，我更为感兴趣的是设计界面的构成单元以及怎样采取一种更具条理清晰度的思路去组建设计系统。
于探寻灵感以及概念类比之际，我常常会返回到化学范畴，主要的思索是，所有物质，不管是固体，还 是液体，或者是气体，亦或是简单的，又或是复杂的，皆是由原子所构成，这些原子相互联合在一起进而形成分子，接着组合成为更为复杂的组织，最终打造出我们所熟悉的宇宙万物。
一样的，界面同样是由更小的部件构成，这表明了，我们能够将界面拆解成基本的模块，并且从这里开始着手搭建界面，这便是原子化设计的关键所在。
Josh Duck所制作的HTML元素周期表，对于网页设计过程当中的原子元素，进行了一回相当不错的分解。
什么是原子化设计？
原子化设计是一套创建设计系统的方法。具体分为五个层面：
原子（Atoms）
分子（Molecules）
有机组织（Organisms）
模板（Templates）
页面（Pages）
下面让我们来更详细的探讨每个部分！
物质十分基本的构建模块是原子，就网页界面而言，原子部分是我们的HTML标签，像表单标签也就是label，还有输入框即input，或者是一个按钮也就是button。
原子，当然也涵盖了更多较为抽象的元素，像是调色板，字体，乃至界面里更偏向无形的部分，就比如动画。
好比原子于自然界这般，它们极具抽象性，单独的时候并非那般有用。可是，它们适宜置于模式库的情境里予以引用，如此便能容易地瞧见全局样式的呈现。
当我们将多个原子组合一块儿，情况就变得更具趣味且能感知了，一堆原子以化学键的形式捆绑在一起形成分子，分子是组成化合物的最小基本单元，这些分子展现出各自的特性并作为我们设计系统的核心骨干。
比如来说，存在一项这样的状况，也就是一个表单标签，还有呈现为独立之态的输入框，再或者是一个按钮，它们之中的单一个体是无法达成一项用户功能的，然而，当把这些个体予以组合，从而构成一个表单之后，此刻，它们能够共同达成一项任务，像是搜索这样的任务。
通过原子来构建一个分子能够推动“做一件事并将其做好”的精神呢。虽然有的时候分子或许会较为复杂，不过从经验法则来讲的话，它们应当是能够被复用的相对简单的原子组合呀。
若干分子给予了我们一些可供建造的块块，此刻我们能够将这些块块合并起来用以建造一个具备有机特性的组织了。组织乃是一组分子联合起来进而形成的一个在界面功能方面相对复杂且又具备独立性。 具有相对复杂，独立的界面功能的块。
大伙的工作变得越发具备形质且详尽具体起来，某个用户兴许对设计系统的分子层级毫无兴致，然而到了有机组织的层面，我们能够瞧见最终的界面即将崭露头角了。
有机组织能够涵盖不一样的分子形式，举例来说，一个标题部分能够含有好多“分子”，诸如logo设计，基础的页面导航，搜索栏，以及一系列社会媒体板块。可是对于一个以推出产品作为目的的系统而言或许意味着好多相同分子（也许涵盖产品图片，名称以及价格）的持续重复。
有助激发，创造出脱机的部件，从分子到有机组织的建造过程，还能创造出便携的部件，同时也有助于创造出可重复使用的部件。
在模板这个层面上，我们得打破跟化学比起来而产生的那种关系，并且要去到一种能让用户容易理解的语言环境之中，模板涵盖了大部分缝合在一起的、用以形成最终页面的有机组织，也正是在这个阶段，我们开始见到最终设计慢慢地成形了。
模板具备着相当具体且有形的特质，其存在为所有与之有关的抽象分子以及组织，提供了一个颇为优良的平台，它还能够让用户瞧见最终设计所处的位置，依据我对于这种原子化设计方法的经验，模板的生命起始于HTML线框图，然而随着时间的不断推进，它最终会演变成一个能够交付的事物，匹兹堡的Bearded工作室亦是如此，他们的设计发端于灰度，构图数量较少，不过会逐渐变得清晰，直至达成最终的设计。
页面事实上是模板的示例，于此，占位符的地方被切实具代表性的内容替换，这般具代表性的内容会给用户展现一个最终精确版本的界面。
页面层面，是那最为逼真准确之层面哟：一来嘛之所以其甚之逼真准确，是因就页面层面而言，它们乃是可感的；二来，通常情况下，人们于浏览进程里花有最多时间的，也正是页面层面。而对于设计者来讲，页面层面同样甚为关键！其关键之缘由在于，于这个页面层面之上，我们能够去检测整个设计系统所能发挥的效用。
转过来，再度审视并且调整先前的分子，有机组织以及模板部分同样能够让我们拥有一个更为优良的设计。
页面同样可以检测模板变动之处，比如说，你或许全力想呈现一个40字符标题的模样，却也想瞧瞧340字符是怎样的，你还想明晰当用户购物车里有一件商品或者十件商品时界面的样子，这些确切的例子对我们怎样重新思索先前构建的元素产生影响。
为什么是原子化设计
始终以来，我们存在诸多用于设计网页的办法，办法之多以至于我们从未思考过怎样凭借一种清晰且具体的办法来推进我们进行的设计。然而原子化设计恰恰为网页设计给予了一种清晰的方法论。设计者也能够经由像这般一步步推进的形式更优地理解设计系统的概念。
原子化设计赋予咱们將抽象转化为具象的能力，正因为这样，我们才能够去缔造那些具备连贯性与可量测性的系统，此外，借由建构而非解构的方式，我们一步一脚印从基础着手开展网页设计，而非事后如同摘草莓那般随意挑选。
翻译 | 王沁雪
请小编喝杯咖啡吧！