网页中的原子设计

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

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

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

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

举个例子，表单标签，输入框或按钮自己是不能实现用户功能的，可是当它们被分组在一块儿造成表单的时候，他们就能够完成诸如搜索的任务。

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

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

1. 静态工做流

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

2. 屈服于客户的压力

在原子设计中，数字设计师会从小到大总体地进行工做。所以，最终的布局相对较晚。一些缺少抽象能力的客户不该该强迫他展现完整的设计。 

3. 千篇一概

成功的前端框架如Bootstrap或Foundation是如今网站大同小异的潜在缘由。所以，网站中即便是最小的元（正如众所周知的Microinteraction微交互）都应该根据品牌风格精心设计，不然会很是千篇一概。

此外，还有如下几点是须要遵循的：

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

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

2. 直接进入编码

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

3.  不带视觉元素测试

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

4.  早期测试

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