电商常用同义词库_UI组件库 I 利用好原子设计原理就能搭建好

Hot words     

设计 · 组件 · 规范 · 基础 

今日上新 ·   基础规范 

今日音乐 ·  S.O.S d'un terrien en detresse

今天这篇只是书上部分精髓，抛砖引玉，分享出来。

下文还会有实际按钮讲解哦~

原子设计理论是2013年Brad Forst提出此设计概念，原子设计是一个设计方法论，由五种不同的阶段组合，创建一个有层次、更规范的设计规范系统。

※  背景和概念  

原子理论设计灵感来自Brad Forst上的化学课，我们用肉眼看到的物体都是由原子(Atoms)组成，原子结合在一起形成分子(Molecures)，分子组合成相对更复杂的组织(Organisms)。设计来源于生活，于是Brad借此概念运用到设计中去，形成了一套设计方法。

如果大家很久没有用化学可能需要回忆一下：氢和氧原子结合在一起形成水分子。

在自然界中，原子元素结合在一起形成分子，这些分子可以进一步结合形成相对复杂的生物。

Brad认为所有的设计无论UI或者网页都是由若干元素组成。这种方法的关键思想是，小的独立原子部分可以组合成更大的分子结构，分子结构可以组合成更大的生物体，然后可以作为模板和全页的基础。

※  如何进行原子设计？   

原子设计核心理念，一切设计都是由最小的原子组成，然后原子可以演变成原子，分子，生物组织，模板，页面。

• 原子   为UI设计构成的基本元素,文字大小，颜色，标签、输入，分割线，头像或是一个按钮，也可以为抽象的概念，例如色调等。

• 分子   由分子构成的简单UI组件。

• 组织   相对分子而言，较为复杂的构成物，由原子及分子所组成。

• 模板   以页面为基础的架构，将以上元素进行排版。

• 页面   将实际内容(图片、文章等)套件在特定模板。

为了大家更好理解这个案例，接下来我会引用微信小程序设计规范为示例，和大家拆解(微信规范官网有下载)。

※   原子  

正如前面所说，这个世界里所有元素生物都是由基础的原子组成，那么原子是最小的生物，原子是我们系统的绝对基础。原子包括调色板，分割线，字体，单个元素(即标题，段落，按钮，图标等)这些元素有个特点就是最小元素不可再切割。

原子1：电商类

原子2，社交类

※  分子 

分子是由原子组成的，在界面中，分子是作为一个单元可以组成UI元素的一个组件。分子包括表单，卡片，商品单元，搜索框，按钮，弹窗等，由几个原子连接在一起成为分子。比如按钮是由颜色，字体原子组合而成分子。

分子1，电商类

分子2，微信电商类

※  组织  

组织是我们开始看到界面汇合在一起的地方。通过组合分子，我们可以构建更复杂但可重复的组织。

组织包括 标题导航，其包括标志，导航链接和搜索字段或注册按钮。

组织1，电商类

组织2，社交电商类

领券页面(组织)= (原子：字体大小，头像,icon)+ (分子：tab,导航，卡券列表)

设置页面(组织)= (原子：字体大小，头像,icon，开关按钮)+ (分子：tab,导航，列表)

※  模块 

以页面为基础的架构，将以上元素进行排版，讲原子，分子，组织进行排版成一个页面，这个页面上结合了很多组织。

模块1，电商类

模块类2，社交类电商

※  页面 

将实际内容(图片、文章等)套件在特定模板，你可以理解为这页面就是用户最终看到的页面，每个页面由将实际内容(图片、文章等)套件在特定模板。

页面1，电商类

页面2，社交类

产品网站的设计，同样也是由原子，分子，组织，模块组成一个页面。

原子设计构成了一个设计世界，运用原子设计方法能够保证我们的设计底层规范是科学的。

当然我们也要辩证地看待原子设计理论

在哲学中，真理分为绝对真理和相对真理，绝对真理是不受任何限制的广义的道理；相对真理是在特定条件下成立的有局限性的道理。原子设计理论就是一种相对真理。

1. 适合用工程师思维

原子设计理论更偏向于工程师的思路和逻辑，遵守层级结构思维；而大部分设计师对组件库的构建和使用，偏向线性结构或自然结构思维，他们更希望快速发现、理解和调用组件，而非一层一层地按照层级结构选择组件。

2. 适合制定基础组件

某些时候，我们以原子设计理论规划构建组件库时，会发现对组件的级别和复杂度有一定的要求。相对于复杂多变的「业务型组件」，高频复用的「基础型组件」会显得更加稳定，适合封装成通用组件纳入设计体系。

3. 适合灵活运用理论

原子设计理论是一种相对真理，需要根据团队、项目的实际情况灵活运用，切勿生搬硬套。比如：既要保证组件的效率和一致，也要兼顾设计师的使用习惯；既要规范化常用组件的使用，也要考虑非常用组件的存在等等。

小结

☆ 原子设计理论包含5个层面：原子、分子、组织、模板、页面；

☆ 原子设计体系的优点：一致、清晰、高效、沟通顺利；

☆ 你可以使用已有的设计体系搭建产品，也可以根据项目需要，自己创建；

☆ 创建 Library 组件库过程中，注意元素的命名逻辑以及 Symbol 的嵌套；

☆ 根据实际情况灵活运用原子设计理论，切勿生搬硬套。

以原子理论为依据构建的设计体系

1. UX Power Tools

UX Power Tools 提供了构建产品和应用程序所需的基本元素，包含了网页端和移动端，均可响应原子级别的操作。除了基础元素，这套体系还添加了各种常见的设计模式、工作流程和模板，让设计师能专注于做更重要的事。

官网：https://www.uxpower.tools

2. Frames

Frames 使用了精致的组件和先进技术，并结合 Sketch 构建了强大的 Web 设计系统，同样能满足修改原子，全局同步更新的功能，支持响应式布局。提供了近百个网页模板，可以非常迅速地完成效果图制作。

官网：http://framesforsketch.com

3. iOS Blueprint

Blueprint 是一款专注于 iOS 应用的响应式设计系统，包括嵌套符号、样式和文本图层，可根据需求轻松进行扩展。除了基本的 Library 功能外，它还提供了一些通用模板，比如登录、注册页等，开箱即用。

官网： https://blueprint.rojcyk.com

4. Nested Symbols

这是一套免费的设计系统，它将按钮、输入框、下拉菜单、通知等控件，都制作成了嵌套符号，方便自定义和编辑。系统中的所有元素，都是作者从他在 UI8.net 上排名第一的畅销产品 Dashboard UI Kit 中挑选出来的。

官网：https://janlosert.com

官网：https://ant.design/index-cn

写在最后>

最近在给自己充电~

涉及的领域有

关于产品、心理学、个人规划等知识。

有机会我分享给大家~

最后，谢谢你们的一直关注与支持~