1、设计规范目的

• 在搭建设计系统之前，我们要想清楚设计规范的目标是什么？使用者是谁？
• 目标：保持产品风格统一性、提高设计输出效率、减少无效沟通。
• 使用人群：UI、交互、前端、测试。

![](<https://api2.mubu.com/v3/document_image/c9d8ffb1-ef18-4e24-a37d-80df22f64e33-9118551.jpg>)

2、设计原则

• 设计规范要符合基本的设计原则，否则你的规范会杂乱无章。这里总结了 6 条原则供大家参考。

![](<https://api2.mubu.com/v3/document_image/bd92f4f2-668a-41e3-981b-c470e71823c1-9118551.jpg>)

• Unity（统一性）：页面风格、色彩、布局等要保持全局统一，不可为了某一功能的美观而去破坏整体性。
• Accessibility（易用性）：易用是首要考虑的因素，能一步解决的事情绝不两步。
• Proximity（亲密性）：如果信息的关联性强，则他们的距离就要相应的缩短，让他们看起来是一个视觉单元；反之，则距离要加大。要让用户对信息的区域划分一目了然。
• Alignment（对齐原则）：在界面中，将元素进行对齐，即符合用户的认知，也可以引导视觉流向，让用户更加流畅地阅读信息。
• Contrast（对比原则）：对比是增加视觉效果最有效方法之一，同时也能在不同元素之间建立一种有组织的层次结构，让用户快速识别关键信息。
• Repetition（重复原则）：相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。

3、框架布局

• 栅格布局能够适应各种屏幕尺寸及分辨率，确保整体布局的一致性。
• 栅格建议使用 1、2、3、4、6 切分布局，可以进行多种布局组合，并在整个设计中保持布局的结构的一致性。

![](<https://api2.mubu.com/v3/document_image/3abc1009-c9dc-441d-88a6-b183e8d7f1f7-9118551.jpg>)

• 页面中一般采用 24 列自适应网格，你可以使用它为各种屏幕尺寸创建灵活的布局。