网页中的原子设计

原子设计是一种网站迭代开发普遍，有效的方法。这个由Brad Frost在2013年引进的设计方法跟网页的敏捷开发类似。原子设计是模块化，动态的设计系统，由五个层面组成——“原子”，“分子”，“组织”，“模板”和“页面”。

“原子”，包括表单标签，输入框或者一个按钮，都是设计师在架构网站时所需要的基本模块。所有与项目有关的人员都需要在逻辑上遵循这种流程。这种技术性的，代码集中的开发方法把用户体验放在了很突出的位置。

“原子”包括更多的抽象元素比如调色板，字体，甚至更多的界面的无形部分比如动画。作为物质的原子是抽象的，单独而言是无意义的。但是它们非常适合在模式库的上下文中引用，因此可以很容易地看到全局样式的展示。

“分子” - 当我们开始把原子结合在一起的时候，事情就会变得更加有趣真实。分子由一组原子组成，是复杂元素的最小基本单元。这些分子都有自己的功能特性，并形成我们设计系统的骨干。

举个例子，表单标签，输入框或按钮本身是不能实现用户功能的，但是当它们被分组在一起形成表单的时候，他们就可以完成诸如搜索的任务。

组织 - 分子是我们需要处理以实现局部功能的一些界面板块，接下来我们就可以把分子组合起来形成组织。组织是由一组分子组合形成的相对复杂，独立的界面功能模块。

在网页原子设计中有以下几点需要避免的误区：

1. 静态工作流

通常情况下代理机构都会把基于印刷的工作流转移到网站的开发上。比如书籍或海报这样的静态媒介需要静态的网格和图案——但是媒体和用户在数字，交互格式中的永久交互需要复杂的动作反应循环。

2. 屈服于客户的压力

在原子设计中，数字设计师会从小到大整体地进行工作。因此，最终的布局相对较晚。一些缺乏抽象能力的客户不应该强迫他展示完整的设计。 

3. 千篇一律

成功的前端框架如Bootstrap或Foundation是现在网站大同小异的潜在原因。因此，网站中即使是最小的元（正如众所周知的Microinteraction微交互）都应该根据品牌风格精心设计，否则会非常千篇一律。

此外，还有以下几点是需要遵循的：

1. 对复杂项目使用原子设计

网站工程越庞大，遵循原子设计的作用和意义就越大，因为这样的工程需要大量的准备时间。单个的网页是不值得的。

2. 直接进入编码

概念和设计的修正应该直接在代码中完成，而不是建立固定的线框和PS布局模型。这需要允许模块在任何时候被重复使用。这种线框应该可以跟客户更客观地讨论，因为可以具体的显示用户如何感知信息的架构并与其交互。

3.  不带视觉元素测试

在测试的时候使用灰度原型能够减少视觉元素带来的影响，只有在释放编码线框后才能使用前端指南中定义的原子，分子和组织来开发布局。此外灰度原型可以由一些简便快捷的原型软件工具来制作。

4.  早期测试

建议在代码中尽早检查UX的概念。这样可以更好的理解编程上面限制和挑战。

转载于:https://my.oschina.net/u/3215793/blog/869463