[感悟]悖论？为什么不建议从“原子化”开始设计UI界面？

静Design · 公众号 · 设计 · 2021-04-19 11:49

正文

静电说：原子化设计已经流行起来一段时间，但是，通过最近的教学和设计思考，我发现它并不适合用在设计初期，而不少观点则表示，设计初期就应该规范化使用这些“原子（分子）”，以便在后期让自己的设计稿更规范。 为什么我会觉得它并不适合在设计初期用呢？且听下文分解。

001.什么是原子化设计？

组件化设计，是设计师现在比较流行的一种UI设计方法，也叫做原子化设计（atomic design）。这种设计方法其实在里五六年前就出现了，它是一种更易于前端工程师进行开发的方法。大意就是将界面中的所有内容归类为基础元素，如输入框，列表，表单，图片容器等等，将他们进行总结，并形成文档，而这些基础元素就是“原子”。

我们可以将这些内容通过适当组合，进而搭起一个完整的界面。原子化设计是一种非常“工程化”的设计方法，对于后台页面，表单类多的页面效果显著。

source：https://atomicdesign.bradfrost.com/

原子化设计的层级理论，如上图所示，从左到右，你就会发现这种逻辑的条理性。从左到右分别为“原子（Atoms）”，“分子（Molecules）”，“组织（Organisms）”，“模板（Templates）”，“页面（Pages）”。原子，一般指UI页面中的颜色，文字，图标，分隔线等等。如下图，左侧为UI界面，右侧则为页面中的原子内容。

分子，则是比原子高一级的结构，如UI中的导航栏，标签栏，搜索框，按钮，弹窗等等内容，都属于分子结构。如下图所示。

组织，指由分子构成的列表，内容卡片，入口模块，瀑布流图等等。如下图所示。

模板，原子+分子+组织组成了模板，也可以理解为原型图。页面，顾名思义则指填充真实内容后的页面，也就是高保真的效果图页面。如下图所示的页面。

002.原子设计理论的特点

· 便于协作，便于维持设计稿的一致性

· 扩展或者维护方便

· 典型的工程师思维在设计上的应用

· 刻板，设计师创意性受限

003.原子设计理论不是万灵药

我们通过原子化设计理论的表述，不难发现，这种积木式的设计方法规整，复用性强，是工程师思维在设计上的典型表现。要说工程师思维好不好，好！真的好！ 但是它并不适合于设计初期。

对于大多数设计师来说，一个产品，在设计初期的主要任务有以下几点：

a.确定设计方向，面向人群

b.确定情绪版，推导颜色等设计风格

c.根据b所述的设计风格确定主视觉及界面

d.品牌延展

不少设计师在听了原子化设计理论后，前期基于将自己所设计的一切进行“组件”的整理，反而丧失了更感性的思考，对于设计师来说，在一个较短的时间内，频繁进行感性和理性的转化其实是对设计不利的。

要知道，你体现在纸面上的东西是图形和文稿，不是一个个的组件。观看者首先观看的便是你的设计是否符合他们的心意，是否“好看”。 如果这个在前期无法达到，那不管你的设计稿再规整，再“原子化”，都逃脱不了不被受众欢迎，视觉不出彩的命运。

所以，我更建议设计师在设计稿定稿之后，再对设计稿中的细节分门别类的进行整理，确定可以复用的组件，去做设计规范总结。这也是一个从“感性设计”到“理性设计”的一个过程，完成这个思维转换，才会成为一个更“成熟”的设计师。

004.我的设计“习惯”

在设计前期，其实我是更偏向于乱写乱画的，所有目标都集中在“图像”本身， 此时我设计稿的图层必然及其混乱，充满了乱七八遭的“未命名”和图层结构。 当然，在这个阶段我也不会做什么“组件（元件）”。

但，这并不意味着我在设计过程中不规范，因为规范在于心中，比如可以复用的列表，字体字号是多少，颜色是多少，间距是多少，通过一两个页面的实践，是完全可以在心中记住的。随后的过程，则更多的是复制黏贴而已。这样做的好处就是，我可以让自己的大脑更多的投入“感性”的区域中，避免过于“理性”打搅自己。

当做完五六页七八页设计稿后，Overview一下设计，找出不太统一的地方，将细节更好的规范起来。

在过稿之前，我是不会去做什么“元件”的，因为你自以为调整一个元件，就可以将所有的地方改掉，但是残酷的修改过程或让自己的“如意算盘”完全落空，很多时候这个列表可能要大改，改的面目全非和之前完全不同，此时组件就完全派不上用场啦。因此， 这个阶段，为了保证感性思维占主导，我大部分时候都在用“复制”和“粘贴”操作。

以过稿为时间节点，过稿后，我会开始规整我的设计稿，将之前乱七八遭的图层进行分组和命名处理，必要的时候会用组件来进行规范。 （Sketch中编辑组件的过程其实并不友好，我要跳转到专有的组件页面对组件进行调整，但是，尴尬的一点在于，此时我无法纵观我的设计稿的整体了。所以，这很不方便。而Figma和XD在这一点上更友好。）

以这个过稿节点作为分隔线，完成自己大脑从“感性”到“理性”的转变，个人认为是最有利的。（ 注意，我的设计习惯可能并不适合你，但是可以当做一个参考）

005.“原子化”对UI设计师的意义

那么，有人就问“原子化”设计还要不要学了呢？当然要！它对于UI初学者的意义，就在于我们把模块完全拆解，让初学者一个模块一个模块来学习这些模块的设计样式。

而对于开发工程师的意义，则在于所有的模块都进行了"积木”化处理，直接一个个的搭起来就可以了，这就是我们所说的UIkit。其实UIkit就是设计师思维到开发思维的一个转变过程。

可是，谁又关心过，这些UIkit的风格是如何确定的呢？另一方面，如果所有内容都可以搭积木，那么UI设计师存在的意义也弱的不能再弱了。

而现在，用户越来越对千篇一律的设计感到厌倦，他们渴望看到一些与众不同的设计创意。而在此基础上， 设计品牌化思维，则更应该成为不少设计师从中阶往高阶进化的一个必要步骤。毕竟，所有的内容都模块化了，那那么多设计师，又有谁比谁更好？

关于设计品牌化思维的建立，可以看我之前发表的一篇文章：

[静电干货时间]UI作品没吸引力?用品牌思维来包装你的APP吧!

静电的UI设计教室春期课程已经开放招生，5月初开课。跟着静电一起提升核心竞争力，快速进阶吧。