从原子到个体——层层递进的系统网页设计
时间：2023-10-05 20:12:01 | 来源：网站运营
时间：2023-10-05 20:12:01 来源：网站运营
从原子到个体——层层递进的系统网页设计：对一个独到的网页设计者来说，一个网页可不单单只是一个页面，它可以像人体一样被拆分成器官、组织、分子甚至原子！记住，我们不设计页面，我们设计的是构成组件的系统。
在创造设计系统这方面目前已经有很多讨论，大多都只是停留在关注建立颜色，排版，网格，结构及类似元素这部分。这种思维方式固然重要，但我对此兴趣不是很大，毕竟到最后这些都会变得较为主观。最近，我更为感兴趣的是设计界面的组成元素以及如何以一个更条理清晰的思路组建设计系统。
在寻找灵感和概念类比中，我总是会回到化学领域。主要的思考是一切物质（不论是固体，液体，气体，简单的，复杂的）都是由原子所构成，这些原子结合在一起形成分子，然后组合为更复杂的组织，最终创造出我们所熟知的宇宙万物。
同样的，界面也是由更小的部件组成。这意味着，我们可以把界面打散成基本的模块，并以此入手搭建界面。这就是原子化设计的要点。
Josh Duck的HTML元素周期表（HTML Periodic Table）对网页设计原子元素做了一个很好的分解什么是原子化设计？原子化设计是一套创建设计系统的方法。具体分为五个层面：
- 原子（Atoms）
- 分子（Molecules）
- 有机组织（Organisms）
- 模板（Templates）
- 页面（Pages）
下面让我们来更详细的探讨每个部分！原子是物质最基本的构建模块。对于网页界面来说，原子部分就是我们的HTML标签，比如表单标签（label），输入框（input）或者一个按钮（button）。
原子当然也包括更多抽象的元素比如调色板，字体乃至界面中更无形的部分比如动画。
就如同原子在自然界中也是如此，它们是相当的抽象，单独而言并不是那么有用。然而，它们很适合放在一个模式库的语境中进行引用，这样你可以容易的看到全局样式的展示。
当我们把多个原子组合在一起，事情就变得更有意思和可感了。分子是一堆原子以化学键的形式捆绑在一起，并且它还是组成化合物的最小基本单位。这些分子体现出各自的属性并作为我们设计系统的骨干。
举个例子，一个表单标签，输入框或者一个按钮单独的情况并不能完成一个用户功能，但是把它们组合在一起形成一个表单后，现在它们能共同完成一个任务比如搜索。
从原子构建一个分子可以促进“做一件事并做好”的精神。尽管有时候分子可能会比较复杂，从经验法则来说它们应该是可以被复用的相对简单的原子组合。
分子给了我们一些能建造的块块，现在我们能把这些合在一起去建造一个有机的组织了。组织是由一组分子联合起来所形成的相对复杂，独立的界面功能块。
我们的工作变得越来越有形和具体了。一个用户可能不会对设计系统的分子层面感兴趣，但到了有机组织的层面，我们可以看到最终的界面就要呼之欲出了。
有机组织可以包括不同的分子形式。比如，一个标题部分就可以包含很多“分子”，像是logo设计，基本的页面导航，搜索栏，和一系列社会媒体板块。但对于一个以推出产品为目的的系统来说可能意味着很多相同分子（可能包括产品图片，名称和价格）的不断重复。
从分子到有机组织的建造过程有助于激发创造脱机的，便携的和可重复使用的部件。
在模板层面，我们需要打破和化学的类比关系，并进入一种便于用户理解的语言。模板包含大部分缝合在一起的为形成最终页面的有机组织。也就是在这个阶段我们开始看到最终设计的慢慢形成。
模板是非常具体而有形的，它的存在给所有相关的抽象的分子和组织提供了一个很好的平台。它同样能让用户看到最终设计所在的位置。根据我对这个原子化设计方法的经验，模板的生命是从HTML 线框图开始的，但同时随着时间的推进它最终要变成一个可交付的东西。匹兹堡的Bearded工作室也是这样。他们的设计始于灰度，构图很少，但逐渐变得清晰直到最终的设计。
页面实际上是模板的例证。在这里，占位符的位置被真正有代表性的内容取代，这些有代表性的内容将给用户呈现一个最终版精确的界面。
页面层面是最逼真准确的层面，因为它们是可感的，而且通常是人们在浏览过程中花时间最多的。对设计者来说页面层面也是非常重要的因为我们在这个层面上可以检测整个设计系统的效用。
反过来，重新审视并调整之前的分子，有机组织和模板部分也能使我们有一个更好的设计。
页面同样是能检测模板有哪些变动的地方。比如，你可能竭力想表达一个40字符标题的样子，但也想看看340字符是什么样。你也想看看当用户购物车里有一件商品或是十件商品时的界面是什么样子。这些具体的例子影响到我们如何重新思考之前构建的元素。
原文| Brad Frost
翻译 | 王沁雪
--------------------------------------------------------------------------------
转载请与我联系，并注明文章来源：
原文链接：从原子到个体——层层递进的系统网页设计
特赞（www.tezign.com ）| 产品策划 |贵妃奶黄包
本站专栏：读点儿设计 - 本站专栏
在线咨询
