随着科技的迅速发展，电脑、平板、手机等电子产品越来越多，人们对设计服务的要求也越来越高。他们期望网站在不同的电子产品中，都能有流畅的体验。原来的产品设计方式，已经不能满足用户的需求。原子设计的出现，解决了这些问题。
1. 什么是原子设计
在化学中，原子结合在一起可以构成分子，进而形成有机体。2013 年前端工程师 Brad Forst 将这个概念应用到界面设计中。将界面拆解为一些基本的元素，比如文字、颜色和图标等，这就相当于一个个原子。通过把这些基本的元素进行组合，可以创造出统一且层次丰富的设计系统。由 Brad Frost创立的原子设计，将网站或 Web 应用程序分解为基本组件，以便可以在整个站点中重复使用。它是制作可扩展系统、可重用组件和设计系统的技术。
2. 为什么发明原子设计
当产品规模扩大时，可能需要多个设计师共同进行一个产品的设计，这时就需要制定一套完整的设计系统，用来保证产品的设计风格的统一性。
多个设计师共同设计一款产品，合适的合作平台当然必不可少。Pixso支持多人实时协同，一键交付。它通过跨平台的协同、文件实时云同步以及强大的绘图与标注功能，打通产品、设计到研发的工作链路，覆盖原型、设计、交付全流程，有效提升团队产研效率。
另外，由于每年都会有新屏幕尺寸的新设备发布，如果没有适当的系统，创建像素完美的设计将变得更加困难。而通过原子设计理念，网页界面会根据用户电子屏幕的大小去自适应屏幕尺寸，为用户提供更好的浏览体验。
3. 原子设计的组成部分有哪些
-
原子
原子是界面的基础组成部分，类似于 UI 元素中的最小单元，无法再分解，本身不具备独有功能。比如文字、颜色、字体、图标等。
-
分子
分子是相对简单的元素组，几个原子结合在一起形成一个分子，被赋予了独有的功能，作为一个单元起作用。比如表单标签或搜索框等。
-
有机体
当分子组结合在一起时，它们就形成了一个有机体。这些是相对复杂的 UI 元素，其中大部分功能不依赖于页面的其他元素。比如承载各类信息的卡片、列表等。
-
模板
通过元素、组件和功能模块的相互关联，从而得到产品的模板，也就是产品框架。
-
页面
在模板基础上，继续添加需要的细节，以真实的内容最终形成完整的页面，它展示了最终UI的外观。
4. 原子设计有什么好处
-
提高代码可读性
原子设计的网站提供了系统的代码排列。因此，代码可以很容易地被读取。可读性良好的代码能够大大提高设计效率。
-
更新迅速
由于所有原子集在制造过程之前都已准备就绪，因此可以灵活调整页面中的元素，轻松进行修改。
-
组件可复用
基于原子设计方法论，将原子、分子、有机体进行有序拼装，作为可复用的组件，大大提高设计效率。
-
设计风格一致
原子设计系统，相当于为设计师制定了一套标准化的规则。避免了多需求、多设计师协作，可能会产生的设计风格不一致的问题。
5. 什么是界面清单和设计系统
为了更好地使用原子设计进行工作，重要的是要有界面清单和设计系统，可以应用和集成原子设计的元素。
界面清单
Brad Frost将界面清单定义为：构成界面的点点滴滴的全面收集。设计中的主要问题之一是设计风格不一致。把界面清单纳入原子设计原则，有助于设计人员和开发人员之间的协调，以保持元素的一致性。
设计系统
设计系统是设计的规范和指导系统，通过为产品中的每种类型的内容创建组件和模式，获得一个灵活的系统。减少了开发和设计人员之间不必要的沟通成本。
随着数字产品的普及，创建产品设计系统成为很多公司绕不开的主题。Pixso的团队资源库，可以让你不受限制地访问组件和样式。任何有权访问项目的人，都可以在他们的设计中使用最新版本的组件。如果你有兴趣的话，不妨直接来官网试试。无需安装，点开就能设计，免费学习使用！
