企业级B端交互设计规范搭建思路- 规范搭建思维导图

主色可以传播产品的特性，及确定产品的主基调

主色的应用场景包括主要按钮、重要信息提示、操作状态等。主色在设计上要注意符合产品调性

主色

功能色通常使用在产品内的信息状态中，例如成功、失败、警告、提示等。我们在功能色的选取上遵循用户对色彩的基本认知

中性色被大量使用在产品界面的文字、边框、分割线等场景中

中性色可以保持产品界面整体的稳定和专业

标题、正文、边框的色值会深一点，分割线、背景、禁用色、斑马纹的色值会浅一点

设计规范中的色值，建议让开发放到代码样式库中，这样子便于做到全局换肤

UI设计师在拓展设计规范的时候，也要严格从色彩库里面取出来，不可随意增加外部颜色来设计界面

在0这一层级中，元素直接放置于界面上，与界面完全重叠，因此元素无阴影。例如输入框、表格

在1这一层级中，元素与基准面的关系是展开并跟随，该层中的元素主要是下拉面板

在2这一层级中，被操作元素为存在于界面上的常态悬浮元素，例如目录组件

在3这一层级中，元素的运动与其他层级没有关联，例如弹框

给人冷冰冰、硬朗的感觉，假如产品界面上都是0px边框圆角的容器，会让用户感觉产品很生硬

容器加入2px边框圆角后，可以发现图形顿时变得柔和了，而这种柔和又不失立挺，传达出了产品专业的感觉

4px边框圆角比2px边框圆角稍微圆润点，和2px边框圆角一样，是B端界面常用的边框圆角数值

8px边框圆角比2px边框圆角显得更加圆润，使用8px边框圆角的界面，会给人柔和的感觉

圆角容器更适合在母婴类、女性类等产品中使用，给用户亲切之感。选择合适的边框圆角可以为产品添加视觉美感和专业性