一、UI 设计规范有什么用？

UI 设计规范的作用，概括来说有三点：提升效率、保障质量、统一体验。

交互设计师和产品经理，能根据这套规范快速搭建页面；

视觉设计师，能根据这套规范产出视觉风格统一、细节精良的页面；

前端工程师，能根据这套规范快速推进开发，遇到通用组件不清晰的地方，直接可以查；

运营，在某些时候，也能根据这套规范，自己搭建简单的页面；

用户，根据这套规范指导下设计的产品，使用起来，在视觉、交互方面有统一的体验。

国内一些大厂做得优秀的设计规范案例，比如蚂蚁金服的 Ant Design，饿了么的 Element，已经实现了端到端的体验一致，而且它们组件的丰富程度足够满足大部分使用场景。

二、大厂设计规范参考

想要提升自己对规范的理解和建立规范的能力，多向成熟的大厂规范学习，是很有必要的。

推荐你关注即时设计的资源广场，持续分享国内外大厂的设计规范，而且这些资源都可以免费获取。目前已有大厂资源，包括苹果、谷歌、字节跳动、蚂蚁金服、饿了么、百度......

· iOS 15 设计规范和组件库

· ArcoDesign 全套设计资源（字节跳动内部团队打造的企业级设计系统）

· Ant Design 全套设计资源（蚂蚁金服团队打造的服务于企业级产品的设计体系）

· WeUI 设计规范（微信官方出品为微信内网页和微信小程序设计）

· Element 饿了么 设计规范

· Material Design 设计规范

· Harmony OS 设计规范

· 百度智能小程序全套设计资源

三、设计规范的制作方法

这里推荐一个原子设计理论，从这个理论的操作方法中，可以一窥设计规范的制作原理，而且使用起来也比较简单，适合那些处在开发初期，而且规模比较小的团队。

原子设计就是由原子、分子、组织、模板和页面共同协作，创造出用户界面系统的一种设计方法论。

原子设计的五​个阶段分别是：

1.原子。构成页面的基本元素。例如标签、输入，或是一个按钮，也可以为抽象的概念，例如字体、色调等。

2.分子。由原子构成的简单 UI 组件。例如，一个表单标签，搜索框和按钮共同打造了一个搜索表单分子。

3.组织。由原子及分子组成的相对复杂的 UI 构成物 。

4.模版。将以上元素进行排版，显示设计的底层内容结构。

5.页面。将实际内容（图片、文章等）套件在特定模板，页面是模板的具体实例。

原子设计理论的优点是一致、清晰、高效，使用的时候要根据实际情况灵活运用，不求全面，但求实用。

「即时设计」官网地址：https://js.design

关键词： UI