×

Atomic Design-原子设计

96
王小其
2015.10.15 13:52* 字数 1966

“我们不设计页面,我们设计构成元素的系统。”——Stephen Hay

随着网页设计的持续发展,我们认识到开发设计系统(design system)的重要性,而不是创造网页的简单集合。

很多人都提过创造设计系统,他们大都注重建立颜色、排版、网格、结构和风格的偏向。这种思考当然重要,但我没有那么痴迷于此,因为最终这些东西会并始终会是主观的。后来我把兴趣放在界面的构成元素及创造设计系统的方法论上。

在寻找灵感和类比时,我想到了化学。所有事物(无论固体、液体、气体,简单的还是复杂的东西)都由原子构成。这些原子单元聚合在一起构成分子、形成更复杂的有机物,最终形成了宇宙万物。

与此类似,界面由更小的元素组成。这意味着我们可以把整个界面拆分成一些基础模块[原文:building block ,建筑砖]并从这些模块开始。这就是原子设计的基本主旨。

Josh Duck的HTML周期表对网页设计元素做了很好的分析。

什么是原子设计?

原子设计是创造设计系统的方法论。它有五个不同等级:

1.原子

2.分子

3.有机物

4.模板

5.页面


让我更详细介绍每一阶段。

1.原子

原子是事物的基本组成部分。应用到网页界面,原子就是我们的HTML标签(tag),诸如表格标签(form label)、输入框或按钮。

原子也能涵盖更抽象的元素,如调色板、字体,甚至是界面更隐形的部分——动画。

与自然中的原子一样,他们非常抽象,也很难单独使用。但当你第一眼看到整体风格时,它们形成pattern library内容的参照。

2.分子

当我们整合原子时,一切就变得有趣而显著。分子由原子聚合而成,是复合物的基本单元。这些分子有自己的特性,也是我们的设计系统的支柱。

比如说,一个表格标签、输入或按钮单独存在时并不好用,但如果将它们聚合成一个表格,它们就能切实运作。


将原子聚合为分子鼓励了“做且做好一件事”的态度。而分子可能会很复杂,作为经验法则(rule of thumb),它们是相对简单的原子聚合,可重复使用。

3.有机物

分子给予我们一些基础模块,现在我们可以把它们聚合在一起形成有机物。有机物是分子聚合在一起形成的一个界面中相对复杂的不同区块。

我们的设计越来越具象。客户可能对设计系统的分子结构没太大兴趣,但有机物能让我们看到最终设计的形态。Dan Mall(和我共事过几个项目)使用element collages来阐释一些重要有机物的灵感,以此和客户更好沟通,并能创造视觉知道(不需要构建整个comp)

有机物可由相似或不同的分子类型组合而成。例如,一个报头有机物(masthead organism)可能由logo、一级导航栏(primary navigation)、搜索框和一些社会媒体频道组成。但是一个“产品网格”可能由相同分子(可能包含产品图、产品标题和价格)一遍遍重复组成。

将分子聚合为有机物有助我们创造独立、可移植、可重复使用的内容。

4.模板

在模板阶段,我们将化学类比转化为语言,让客户更明确我们的最终成品。模板基本由有机物交织而成,最终形成网页。到这里我们开始看见设计整合在一起,布局大体出现。

模板非常具象,并将本文展示为所有相关的抽象分子和有机物。模板也是客户看到的最终设计。在我使用这种方法的设计经验中,模板的生命起始于HTML线框模型,随时间逐渐变得精确,最后成为一个可交互的产品。在匹兹堡的Bearded Studio也使用了相似流程,他们设计始于灰度级,布局较少,逐渐细化成最终的设计。

5.页面

页面是模板的特定情况。在这里,占位符被真实内容替代,生动精确地展现了用户会看到的内容。


页面是精确度的最高级别,因为它们最明确有形。这通常是人们花最多时间处理并来回检查的地方。

页面阶段非常必要,我们用它测试设计系统有效性。在环境中审查所有元素能让我们反复修改分子、有机物和模板来更好地针对设计的真实环境。

页面也用来测试母版的多样性。例如,你可能想明确表达包含40个字母的大标题是什么样子,还想演示340个字母的样子。用户在购物车里的一个条目VS带有折扣十个条目又是什么样的呢?同样,这些具体例子影响我们回顾和建设我们的系统。

为什么是原子设计?

原子设计是我们独自做事的方法,虽然我们并未有意使用这种特定办法。

原子设计给我们制定设计系统提供了清晰的方法论。当看到这些步骤呈现在面前,用户和团队成员就能看到设计系统这个概念的价值。

原子设计给我们从抽象走向具象的可能。因为它,我们能创造系统,在最终环境中既显示内容,又推进一致性、可测量性。而通过组装代替重建,我们能在一开始就构建系统,而非在做完后筛选样式。

样式实验室(Pattern Lab)

为了把这个方法引入工作,我(在Dave Olsen的帮助下)制作了一个工具Pattern Lab来创建这种原子设计系统。我会稍后详细cover pattern lab,but feel free to check it out on Github.

深入阅读

Andy Clarke已经在这方面研究很久。实际上,他为写了一章“走向变通:设计原子和元素”,我强烈建议查看这篇文章。我也非常推荐你看看他的工具Rock Hammer,这是一个构建基于以上原则的pattern library的好方法。

网页要素:网页开发的结构转变——网页要素与原子设计的概念非常吻合,这个视频会告诉你什么是网页要素。

模块化    Tim Berners-Lee讨论了模块化作为网页设计原则的重要性。

响应式可交付产品 作者Dave Rupert讨论了关于“为每个用户做精致bootstrap”的想法

而以下是我在Beyond Tellerrand讲座的视频和幻灯片。


原文地址:http://bradfrost.com/blog/post/atomic-web-design/

设计文章翻译
Web note ad 1