UI设计规范

![80](/media/202411//1731463902.2580287.jpeg)

神楚云  
后台UI设计规范

神楚云UI设计规范  
一、模板  
1.模板样例  
1.1表单——以商品资料模板为例  
字体大小：14px ；颜色：#1E2226；  
![](/media/202411//1731463902.275021.png)  
![](/media/202411//1731463902.2890234.png)  
1.2表格模板  
![企业微信截图_17204059982901](/media/202411//1731463902.3020225.png)  
  
二、设计规范  
**1.colors**  
主题色/功能色/中性色/颜色分类扩展/场景语义  
- 本次规范包含主题色、功能色、中性色，针对项目中组件状态和使用场景  
- 状态：主题色和功能色各扩展出五个色阶，在项目中根据组件使用时强调内容的重要程度以及展示组件不同交互状态为主  
- 场景：中性色主要应用在文字、背景、边框、分割线等使用场景  
**1.1Brand Color 主题色/品牌色**![](/media/202411//1731463902.3130236.png)  
**1.2Neutral Color 中性色(文字颜色/背景色/描边色)**![](/media/202411//1731463902.3230221.png)  
**1.3Functional Color功能色**![](/media/202411//1731463902.3340242.png)  
**2.Corner**在组件中使用了两种边角数值，Corner-1用于小组件，Corner-2用于大组件  
![](/media/202411//1731463902.3440216.png)  
**3.Fonts**字体是 UI 设计中最基本的构成之一，本次规范说明：字体家族、使用规范（字号、行高、字重、颜色）  
![](/media/202411//1731463902.3530204.png)![](/media/202411//1731463902.3620253.png)![](/media/202411//1731463902.373024.png)![](/media/202411//1731463902.3820229.png)  
**4.**Line-height在本次视觉体系中，我们建议字阶控制在 3-5 种之间，字体行高=字号+8。如：主要字体字号 14px，与之对应的22px

![](/media/202411//1731463902.3910232.png)  
**5.Icon**图标作为UI构成中重要的元素，在设计工作中使用率极高。我们建立了一套公共的图标素材库，用以规范B端所有基础类图标的图形内容与风格，解决不同平台复劳动问题的同时，消除差异形成统一的品牌体验与认知。  
**5.1原则**使用图标的目标是通过将概念信息转换成清晰易懂的图形，降低理解成本提升界面视觉感受，基于对目标的理解我们确定了「从简」「易读」「平衡」3个原则。  
·从简：简化参数，尽量消除小数点以及非整数角度，删除多余锚点及不必要装饰  
·易读：选择表意准确的图形，避免过渡抽象而对用户认知造成困扰  
·平衡：控制图标线条疏密及图形搭配的节奏，避免无序与压迫感  
**5.2规范  
5.2.1**画布与网格  
画布与网格是绘制的底层结构，是一切属性的基础，线条长短粗细、图标大小比例等关键参数均在此基础上制定。常见尺寸为 16/20/24/32，这四种尺寸均可清晰呈现在屏幕上。基于通用性与可控性的考量，最终选择以 16px 的尺寸作为图标绘制的统一栅格尺寸。

![](/media/202411//1731463902.4030218.png)  
**5.2.2**出血位  
在画板的周围留有 1px 的出血位，中心14px才是实际操作区域。在一些特殊情况下如图标过长或者有突出的边角等，允许内容适当延展，以确保视觉重量上的统一（ 超出部分建议为多边形的边角，不宜超过 0.5px ）。![](/media/202411//1731463902.414023.png)  
**5.2.3**辅助线  
辅助线由对角线及一些常用的基础图形组成，并根据出血位的尺寸进行了调整。帮助设计师在绘制时约束图标的外形及线条走向，保持各图标间视觉重量的统一。根据绘制对象的形象特征去选择辅助线，在必要时，可以将内容扩展到辅助线之外。  
![](/media/202411//1731463902.4230247.png)  
**5.2.4尺寸**在设计中可以根据所处场景级搭配元素的大小调整图标的尺寸。建议最小尺寸不小于12px，最大尺寸不大于24px，并以2为最小单位进行尺寸的增减。  
![](/media/202411//1731463902.4400222.png)  
**5.3图标预览**![](/media/202411//1731463902.449023.png)![](/media/202411//1731463902.4580219.png)![](/media/202411//1731463902.4690378.png)![](/media/202411//1731463902.478025.png)  
6.栅格![Grid](/media/202411//1731463902.4870222.png)