文章|一篇文章搞懂原子设计( 二 ) 模板|分子|原子|输入框|有机体

文章插图
5）界面
界面即我们最终需要产出的高保真视觉稿，它是对模板具象化的结果，对应着体验五要素中的表现层。
一方面设计师使用真实图片、文案代替了模板中的占位符，另一方面通过各类合理的视觉表达来高效得为用户传达信息或者调性。这一步在抛开视觉还原度的条件下基本就算是产品的最终形态了。

文章插图
而下面我讲的原子设计系统便是基于这个方法论而构建，它贯穿了我们所有的设计过程以及后续的产品迭代。
02 软件危机【 文章|一篇文章搞懂原子设计】在讲解原子设计系统之前，我先为各位讲一个互联网历史中真实存在的一个事件——软件危机（Software crisis）。
20世纪60年代，计算机的发展速度远远超过了软件研发的速度。可是当时的汇编语言是面向机器的，开发们只能针对特定的计算机编写，导致代码没办法复用，也极难维护。
这就好比我希望你能够为我的军队量产罐头，但是你却只能精雕细琢一款米其林三星的法式鹅肝。这跟当时规模化生产的市场需求完全是背道而驰的。
这一连串的问题在1968年的NATO软件工程会议上被首次定义为软件危机。在会议中，Douglas McIlroy提出了组件式开发的概念及解决思路，旨在解决代码低效无法扩展复用的弊病。这个超前的思路可谓是天降甘霖一般，在当时促成一大批优秀语言的诞生（我们当年的C语言就是在这个背景下横空出世的），帮助开发将代码复用到各个场景，极大幅得提升了开发的效率！
而在半个世纪后的今天，我们的设计领域出现了同样的问题——
1. 设计不统一很多页面曾使用了相似的颜色、组件，而不是固定的一个，如今而它们散落在各个项目的设计稿中，变得难以管理和维护。
2. 设计低效由于没有一套提前搭建好的系统，导致每次进行新的需求时都难以复用之前的东西。而且在进行不同尺寸的响应式适配时需要耗费大量的精力进行组件的更改。有时候甚至为减少工作量直接让开发按原型图进行布局，最后再进行把关。
3. 多设计师问题公司存在多位设计师时，通常是每个设计师单独负责一部分业务，但是由于没有一套约定俗成的规则进行约束，导致每个设计师的产出物不像来自一个产品。
4. 开发低效开发的低效来源于设计的随意。每次一有新的样式或组件都得重写一套，无法直接复用之前已有的东西，导致了大量无意义的重复劳动。
我们的设计方式仅仅局限在解决单一问题的场景中，而忽略了更多未来将会出现的更多业务。导致我们的设计不成体系，无法模块化和规模化。这些设计产物即我开头所讲的“一次性设计”。
而且，有时候设计师花费大量时间产出设计稿的功夫，开发可能早就使用第三方组件搭建出一个模板了。
我们一直在说设计师和开发之间仿佛有一道看不见的墙，那道墙一半是语言，一半则是组件化思维。
而将组件化思维践行到我们设计领域中的便是原子设计系统，它基于原子设计方法论，将原子、分子、有机体作为一个个可复用的组件进行有序得拼装，来帮助设计师快速得搭建产品，大幅提升生产效率。
03 原子设计系统的优势1. 一致性首先，原子设计系统相当于为设计师制定了一套标准化的规则。所有的设计工作全部基于这个规则展开，这也就基本完全避免了多需求、多设计师协作时产生的不一致的问题。最后的产品也可以带来更加一致的体验。
2. 效率不像一次性设计那样，原子设计系统中的样式及组件本身可以无限复用，在设计师接收新的需求、项目时只需要直接调用即可迅速得搭建好模板，再进行视觉的填充即可，节省了大量重复的设计工作。并且这个良好的习惯也可以避免过多无法复用的设计影响到下游开发的效率，避免重复造轮子。也降低了不必要的沟通成本。