交互规范：样式库让设计师搭建组件更同频

前行的大熊 2023-07-23 14:17:37

本文主要围绕什么是样式，如何搭建样式库，样式库的应用三个部分进行阐述，在项目中提前定义好样式库将有助于团队设计师搭建组件认知在同一频道，希望对正在了解样式库知识的你有帮助！！！

01 什么是样式

样式是产品设计中的最小原子，决定了一套可视化设计组件库的最基础的形态，主要包括颜色、文字、边角、阴影、图标、线条。

02 如何搭建样式库？

1. 确定颜色

颜色是指界面设计中使用的色彩体系，确定颜色主要从下面个三方面出发：品牌色、中立色、功能色。为了避免干扰UI同学在设计时的用色决策，在交互设计输出交互稿通常使用中性色。

（1）品牌色

品牌色是体现产品特性和传播理念最直观的视觉元素之一。应用场景包括：关键行动点（按钮），操作状态（进行中）、重要信息高亮（价格），图形化（图标）等场景。品牌色色值以UI同学定义的为准，在交互设计中通常用中性色替代。

（2）中性色

中性色主要被大量的应用在界面的文字部分，此外背景、边框、分割线等场景中也非常常见。考虑深色背景以及浅色背景的差异，中性色在落地的时候是按照透明度的方式实现的，主要原因是透明度实现的颜色可以和底色形成叠加关系，保留色彩的调性；而色值实现的结果会出现了瑕疵（如下图）。

透明度色值：

（3）功能色

功能色为界面设计中的特殊场景色，主要为成功、失败、警告、链接等。功能色的选取需要遵守用户对色彩的基本认知，成功（绿色）、失败（红色）、警告（黄色）、链接（蓝色）。具体色值以UI同学定义的为准，在交互设计中通常用 “中性色+图标” 替代。

2. 确定字体

字体是界面设计中最基本的构成之一。通过定义字体在设计上的使用规则，从而在阅读的舒适性上达到平衡。确定字体主要从下面四个方面出发：字体家族、主字体、字阶和行高、字重。

（1）字体家族

字体家族中优先使用系统默认的界面字体，对于不同环境显示条件，则提供了一套满足易读性的备用字体。在交互设计时系统默认字体即可，MAC使用系统默认字体苹方_简，Windows使用系统默认字体微软雅黑。

（2）主字体

基于电脑显示器阅读距离（50 cm）， 12 的字号在显示器上的物理大小对于用户阅读体验并不友好，而 14 的大小既能满足用户的可读性，更为舒适、清晰，也能保证界面的层次感。当字号大于 14 时，对于表格类信息呈现则会受到一定的影响，如因文字过大而无法容纳更多的信息等。

（3）字阶与行高

字阶是指一系列有规律的不同尺寸的字体，拉开了页面的信息层级。行高是指一个包裹在字体外面的无形的盒子，提供了上下文之间呼吸的空间。

（4）字重

多数情况下，只出现 regular 以及 medium 的两种字体重量，Regular 主要应用于正文和辅助文字，Medium 主要应用于标题类，以突出层级关系，让信息更清晰，分别对应代码中的 500 和 400。考虑到数字和西文字体本身面积较小，建议使用 Semibold，使得中西文混排时更适当，对应代码中的 600。

3. 确定边角

边角是用一段与角的两边相切的圆弧替换原来的角，在界面设计中，适当的边角不仅可以反应产品的调性，还提供更友好的视觉体验。确定边角主要从下面三个方面出发：矩形元素、浮出控件、条形元素。

4. 确定阴影

阴影来源于现实生活的反映物体与物体之间距离的物理现象。在界面中，阴影用来塑造空间层级关系，从而使用户更好的理解元素之间的高度距离与层次关系。确定阴影主要从下面三个方面出发：阴影类型、阴影类型、阴影值。

（1）阴影类型

阴影是由两个不同阶层的平面产生，大小由两者之间的高度决定。在界面设计中将阴影类型分为 4 个层级：无阴影（S0）、小阴影（S1）、中阴影（S2）、大阴影（S3 ）。

S0：无投影。物体紧贴地面，投影与物体完全重叠，在界面中不对此层定义阴影值。如：输入框等；
S1：小投影。物体位于低层级，此时物体被操作(悬停、点击等)触发为悬浮状态，当操作完成或取消时，悬停状态反馈也跟随消失，物体回归到原有的层级中，如：卡片 hover、按钮等；
S2：中投影。物体位于中层级，此时物体与基准面的关系是展开并跟随，物体由地面上的元素展开产生，会跟随元素所在层级的移动而移动，如：下拉选项框、气泡提示、拖拽排序等。
S3：大投影。物体位于高层级，该物体的运动和其他层级没有关联，如：对话框等。

（2）阴影方向

阴影的方向是由光源与物体的相对位置所决定的。假定光源所处高度不变，光源与物体的距离和物体与阴影的距离成正比。光源越远，则阴影距离物体越远。阴影的方向在界面里通常使用 X, Y 坐标轴来表示。