原子设计是一种网站迭代开发普遍,有效的方法。这个由Brad Frost在2013年引进的设计方法跟网页的敏捷开发类似。原子设计是模块化,动态的设计系统,由五个层面组成——“原子”,“分子”,“组织”,“模板”和“页面”。
“原子”,包括表单标签,输入框或者一个按钮,都是设计师在架构网站时所需要的基本模块。所有与项目有关的人员都需要在逻辑上遵循这种流程。这种技术性的,代码集中的开发方法把用户体验放在了很突出的位置。
“原子”包括更多的抽象元素比如调色板,字体,甚至更多的界面的无形部分比如动画。作为物质的原子是抽象的,单独而言是无意义的。但是它们非常适合在模式库的上下文中引用,因此可以很容易地看到全局样式的展示。
“分子” - 当我们开始把原子结合在一起的时候,事情就会变得更加有趣真实。分子由一组原子组成,是复杂元素的最小基本单元。这些分子都有自己的功能特性,并形成我们设计系统的骨干。
举个例子,表单标签,输入框或按钮本身是不能实现用户功能的,但是当它们被分组在一起形成表单的时候,他们就可以完成诸如搜索的任务。
组织 - 分子是我们需要处理以实现局部功能的一些界面板块,接下来我们就可以把分子组合起来形成组织。组织是由一组分子组合形成的相对复杂,独立的界面功能模块。
在网页原子设计中有以下几点需要避免的误区:
1. 静态工作流
通常情况下代理机构都会把基于印刷的工作流转移到网站的开发上。比如书籍或海报这样的静态媒介需要静态的网格和图案——但是媒体和用户在数字,交互格式中的永久交互需要复杂的动作反应循环。
2. 屈服于客户的压力
在原子设计中,数字设计师会从小到大整体地进行工作。因此,最终的布局相对较晚。一些缺乏抽象能力的客户不应该强迫他展示完整的设计。
3. 千篇一律
成功的前端框架如Bootstrap或Foundation是现在网站大同小异的潜在原因。因此,网站中即使是最小的元(正如众所周知的Microinteraction微交互)都应该根据品牌风格精心设计,否则会非常千篇一律。
此外,还有以下几点是需要遵循的:
1. 对复杂项目使用原子设计
网站工程越庞大,遵循原子设计的作用和意义就越大,因为这样的工程需要大量的准备时间。单个的网页是不值得的。
2. 直接进入编码
概念和设计的修正应该直接在代码中完成,而不是建立固定的线框和PS布局模型。这需要允许模块在任何时候被重复使用。这种线框应该可以跟客户更客观地讨论,因为可以具体的显示用户如何感知信息的架构并与其交互。
3. 不带视觉元素测试
在测试的时候使用灰度原型能够减少视觉元素带来的影响,只有在释放编码线框后才能使用前端指南中定义的原子,分子和组织来开发布局。此外灰度原型可以由一些简便快捷的原型软件工具来制作。
4. 早期测试
建议在代码中尽早检查UX的概念。这样可以更好的理解编程上面限制和挑战。