如何提高网页设计功力这个问题？

• 什么是原子化设计？
  

• 原子化设计有哪些构成层面？

01 原子

原子部分就是我们的HTML标签，比如表单标签（label），输入框（input）或者一个按钮（button）。

02 分子

分子是一堆原子以化学键的形式捆绑在一起，并且它还是组成化合物的最小基本单位。这些分子体现出各自的属性并作为我们设计系统的骨干。

举个例子，一个表单标签，输入框或者一个按钮单独的情况并不能完成一个用户功能，但是把它们组合在一起形成一个表单后，现在它们能共同完成一个任务比如搜索。

03 有机组织

组织是由一组分子联合起来所形成的相对复杂，独立的界面功能块。

一个标题部分就可以包含很多“分子”，像是logo设计，基本的页面导航，搜索栏，和一系列社会媒体板块。但对于一个以推出产品为目的的系统来说可能意味着很多相同分子（可能包括产品图片，名称和价格）的不断重复。

04 模板

模板是非常具体而有形的，它的存在给所有相关的抽象的分子和组织提供了一个很好的平台。它同样能让用户看到最终设计所在的位置。根据我对这个原子化设计方法的经验，模板的生命是从HTML 线框图开始的，但同时随着时间的推进它最终要变成一个可交付的东西。匹兹堡的Bearded工作室也是这样。他们的设计始于灰度，构图很少，但逐渐变得清晰直到最终的设计。

05 页面

页面实际上是模板的例证。在这里，占位符的位置被真正有代表性的内容取代，这些有代表性的内容将给用户呈现一个最终版精确的界面。

页面层面是最逼真准确的层面，因为它们是可感的，而且通常是人们在浏览过程中花时间最多的。对设计者来说页面层面也是非常重要的因为我们在这个层面上可以检测整个设计系统的效用。

反过来，重新审视并调整之前的分子，有机组织和模板部分也能使我们有一个更好的设计。

• 为什么是原子化设计？
  

原子化设计为网页设计提供了一个清晰的方法论。设计者也能够通过像这样一步步推进的方式更好的理解设计系统的概念。

原子化设计给抽象转换成具象的能力。正因如此，我们才能去创造那些具有连贯性和可量测性的系统。另外，通过建构而不是解构的方式，我们一步步脚踏实地从基础做起进行网页设计，而不是事后像摘草莓一样随意挑选。