进阶篇17. 原子设计

原子设计(Atomic Design)理论进一步系统化的描述了页面元素之间的相互关系。Brad Frost在他的书《原子设计》中,引用了原子图、化学式甚至元素周期表来阐述他的原子设计理论。

以下是一个简短的介绍:

原子是构成所有事物最基本的单位(这是一篇关于前端设计的文章,所以请不要过于纠结这个论断的科学性)。不同的原子可以组成分子,而分子可以进而构成更复杂的有机体。以此类推。

在界面设计中我们也可以看到类似的规律。Brad Frost将它们总结为5个不同的级别,它们分别是:原子、分子、有机体、模板和页面。

Atomic design is atoms, molecules, organisms, templates, and pages concurrently working together to create effective interface design systems.

 

这里的原子,就是界面设计中那些最基本的东西,比如标签、输入框、按钮,和其他一些不能进一步拆解的元素。

Atoms include basic HTML tags like inputs, labels, and buttons.

 

分子是由多个原子组成的。比如:一个输入框加一个按钮就可以构成一个搜索框,这个搜索框就是分子。

A search form molecule is composed of a label atom, input atom, and button atom.

 

有机体是由多个分子组成的。比如:logo 、导航条和搜索框可以组成我们通常所说的“页眉”——header。

This header organism is composed of a search form molecule, logo atom, and primary navigation molecule.

 

多个有机体组成一个模板。模板类似于我们以往画的线框图,包含了页面上所有必要的有机体,用以展示这些有机体的布局、轮廓尺寸和功能,各个有机体共同组成了一个功能良好的整体。模板注重的是布局和结构,而不是最终的内容。

The homepage template consists of organisms and molecules applied to a layout.

 

页面是模板的实例化。他会包含具体的文字内容和图片内容——而这正是CMS所擅长的领域。

The page stage replaces placeholder content with real representative content to bring the design system to life.

 

这五个级别中的前四个:原子、分子、有机体、模板都是可以重复利用的模块,而最后一个页面则是这些设计样本的最终真实形态。

将原子设计应用于APP “Instagram”的示意图:从这张图中我们可以看到INS的界面是如何从一个一个小的原子,互相组合,并最终形成页面的。

Atomic design applied to the native mobile app Instagram.

 

在上面的图文中,我们可以非常清楚的看到,组件之间的关系。

本书共83小节:

评论 (写第一个评论)