什么是网页原子设计模式(Atomic Design)
网页设计的理念和方法正在随着设备多样化以及网页设计方法的发展而发生显著的演进。
本文简要介绍网页设计领域最新的设计理念:原子设计(Atomic Design)模式。
我们不是设计页面,我们在设计可复用的系统组件库。回忆下桌面本地应用的发展历程,历史总是有某种程度的相似。- iefreer
We’re not designing pages, we’re designing systems of components -- Stephen Hay
随着网页设计技术水平的不断发展,我们认识到需要建立周到的设计系统,而不是简单的网页集合。
在创建设计系统上已经有很多的讨论,大多数关注于建立颜色,排版,网格,结构及类似元素。这些方面的思考当然是重要的,不过我对这些方面不是很感兴趣,因为最终这些都变得比较主观。最近我更感兴趣的是我们的界面是怎么构成的以及我们如何可以更有条理的构建设计系统。
在寻找灵感和概念类比中,我总是会回到化学领域。主要的思考是一切物质(不论是固体,液体,气体,简单的,复杂的)都是由原子所构成,这些原子结合在一起形成分子,然后组合为更复杂的组织,最终创造出我们所熟知的宇宙万物。
同样的,界面由更小的组件组成。这意味着我们可以把整个的界面分解为基本构建块并从那里开始构建系统。这就是原子设计(atomic design)的基本思想。
Josh Duck的HTML元素周期表(HTML Periodic Table)对网页设计原子元素做了一个很好的分解。(Noted: Not available on his blog now, but has been copied a lot)
什么是原子设计(What is Atomic Design)
原子设计是创建设计系统的系统方法。分为5个层次:
原子(Atoms)
分子(Molecules)
组织(Organisms)
模板(Templates)
页面(Pages)
让我们更详细的探讨下每个阶段。
原子(atoms)
原子是物质的基本构造块。具体对于网页界面而言,原子是我们的HTML标签,比如表单标签(label),输入框(input)或者一个按钮(button)。
原子可以包括更多抽象元素比如调色板,字体乃至界面中更无形的部分比如动画。如同自然界的原子都相当抽象,单独而言并不是那么有用。然而,它们很适合放在一个模式库的语境中进行引用,这样你可以容易的看到全局样式的展示。
分子(molecules)
当我们开始把原子组合在一起的时候,事情就会变得更有趣和真实。分子由一组原子结合而成,是复杂元素的最小基本单元。这些分子有自己的功能属性并形成我们设计系统的骨干。
比如,一个表单标签,输入框或者一个按钮单独的情况并不能完成一个用户功能,但是把它们组合在一起形成一个表单后,现在它们能共同完成一个任务比如搜索。
从原子构建一个分子可以促进“做一件事并做好”的精神。尽管有时候分子可能会比较复杂,从经验法则来说它们应该是可以被复用的相对简单的原子组合。
组织(organisms)
分子是我们需要处理的一些完成某个局部功能的界面区块,然后我们就可以把这些分子组合起来以构成组织。组织是由一组分子联合起来所形成的相对复杂,独立的界面功能块。
最新评论
- 相关文章
WebGL场景中多相机拍摄的原理和意义
一般而言,3D场景的渲染只需要一个相机,不过借助多相机可以获取一些单相机无法达到的特效。比如突显特定对象并模糊背景。
3D相机渲染的基本原理是依靠颜色...Monaco Editor 编辑器拷贝粘贴功能调用和获取选中文本
有时候需要在monaco editor外部调用编辑器的内置功能比如希望在页面主工具栏实现一些快捷操作。button
A-Frame WebVR(网页虚拟现实)快速开发入门教程
WebVR和WebGL应用程序接口使得我们已经可以在浏览器上创建虚拟现实(VR)体验,但从工程化的角度而言,开发社区还需要更多方便强大的开发库来简化编程,Mozilla的
CSS3属性选择器特性使用详解
CSS3除了引入动画、滤镜(用于特效)以及新的布局技术外,在选择器(selector)方面也有增强。属性选择器根据元素的属性(attributes)来匹配。这可以是一个单独...
CSS3人行走动作图解和动画实现
对于人类而言,行走是一种很自然的想要前进并防止跌倒的一组动作重复。大部分人1岁就学会了走路,但至此以后的几十年间,或许我们从来没留意过自己行走姿势。当...
函数式JavaScript编程基础概念:Curry和Partial Application
本文介绍JS函数式编程中的两个概念:柯里(Curry)和部分应用程序(Partial Application)。什么是应用程序(Application)将函数应用于其参数以产生返回值的过...
使用CSS3 box-decoration-break特性实现多行文本样式
当文章中的长文本被自动断行为多行文本时,其样式可能会出乎我们的设计。本文介绍如何使用CSS3中的box-decoration-break特性来处理多行元素样式。
按照规范...深入理解CSS3滤镜(filter)功能和实例详解
CSS3滤镜功能源自SVG滤镜规范,SVG滤镜最早用来给矢量图添加类似PS中像素图的一些特效。
把这个滤镜功能引入到普通HTML元素中可以带来很有趣的效果(模糊、...通过实例深入理解HTML5/CSS3/SVG/WebGL的技术本质
HTTP/2背景和新特性简介
WebGL入门教程6 - 光照效果和Phong光照模型
正是因为有了光,世界才能被我们看见,在3D的世界里,光照给物体带来真实的视觉感受。当光照射在某一表面上时,它可能被吸收、反射或投射。其中入射到表面上的一...
WebGL入门教程2 - GPU基本概念和工作流水线(渲染管道)
Canvas实例教程:图像移动、大小调整和裁剪
本文介绍如何使用JavaScript和HTML5 Canvas元素来移动、调整大小和...
使用requestAnimationFrame和Canvas给按钮添加绕边动画
要给按钮添加酷炫的绕边动画,可以使用Canvas来实现。基本的思路是创建一个和按钮大小相同的Canvas元素,内置在按钮元素中。然后在Canvas上实现边线环绕的动画。...
在PHP网页程序中执行Sass/Compass命令
我们需要在wow云开发平台支持sass/compass等预编译样式语言,为此我们首先尝试了scssphp扩展,但是在支持最新语法上,经常会出现异常。所以我们采用了代理的方式...
更多...