厦门网站制作

全国免费热线: 400-0011-1161
导航菜单

新闻动态

网页设计中的原子设计论

序:最近读到一些有关网页及审美提升的一些书籍,在这里希望通过分享总结的形式形成更深刻的记忆。最近好像有点范懒癌,所幸的是自己终于在台风那天把上次的那本书看完了,真是感到无比的惬意,哈哈,在自己出来之后的这三年里,感觉自己真的成长了好多,对各种事情有着不同的看法,期待未来更好的自己!

原子设计理念,基于在界面中使用最小的元素(原子)去搭建其他组件,本篇文章将讲解有关原子设计理念的一些概念。

原子设计理论是Brad Forst在2013年提出的设计概念,由原子,分子,有机体(组织),模板,页面五种不同的元素组合,创建一个有层次,规范的设计规范系统。原子设计由原子、分子、生物体、模板和页面共同协作以创造出更有效的用户界面系统的一种设计方法。

原子,即是事物的基本组成部分。它是最小的单元,不能再往下细分,也就是基本的 HTML 标签,例如表单标签,输入,按钮。(真实的原子的确是由更小的一些单位元素组成的,如质子、电子和中子,但原子是最小的功能单位。)

对于一个网页来说,需要的东西有:标题、引用、段落、列表、表格、代码、链接。而这已经基本上包含了一个基础的 CSS 框架,所需要的几个重要的基本要素。在那之上,我们可能还需要诸如网格、按钮、表单等元素。

上面的这些元素,都对应了 HTML 标题:h1~h6、blockquote、p、list、table、pre、code、a,以及 button, form,还有一个额外的 grid。

原子:为网页构成的基本元素

例如标签、输入,或是一个按钮,也可以为抽象的概念,例如字体、色调等。

分子:可复用组件。分子,即由原子聚合而成的粒子。

在 WEB 设计中,分子是由几个基本的 HTML 标签组成的简单组织。例如,在一个搜索元素中,它是由标签原子、输入原子和搜索原子组成。

有机体(组织):组件;有机体是由分子或原子或其它有机体组成的相对复杂的 WEB 组分 。

它用于创建一些独立、可复用的内容,诸如 header(头部),又比如 footer(底部),这是界面

中,相对复杂的不同区块。

模板:整体布局

模板,顾名思义就是整合前面的元素,构建整体的布局。

页面

将实际内容(图片、文章等)套件在特定模板,页面是模板的具体实例。

原子设计是源自于网页的一个概念,毕竟,这本书就是基于网页设计WEB界面原因。但是,原子设计是一个适用于所有的用户界面,包括后台数据,APP等界面而不仅仅是基于WEB的。

大家在看过上面所讲述的内容之后,都会有一定的懵懂,有的人就会问了干嘛不把这些内容定义成元素,模块和组件?像组建和模块这样的术语,我们不能从中推导出层次感,而像原子,分子和有机体意味着任何具备化学基础知识的人都会感觉到这种层次感。

话虽如此,但是给事物命名是困难而且很难完美的。书中原子设计阶段的名称对于我来说已经是很好的了,但并不是都适用于所有人,GE团队提出了一个观点:

“当我们向我们的同事展示了我们最初的设计系统概念,并将原子设计分享给我们的同事时,我们遇到了一些困惑的表情。 很明显,我们必须使用更加通俗易懂的分类名称才能使团队合作更加成功。——Jeff Crossman, GE设计”

其实对于我来说,用什么词并不重要,重要的是如何将这种层次表达出来,最终让人得以理解,才能在工作之中成为一种捷径,如果不易懂,在团队之中也会形成障碍。