在产品设计的宏大体系中，一致性是用户体验的基石。而要实现这种一致性，团队必须对设计的“最小原子”达成共识。这些原子构成了风格库的核心，它们不仅是视觉表现的规范，更是连接设计与开发的桥梁。构建一套科学的风格库，能够有效护送页面元素的细节统一，降低沟通成本，让设计师在同一频道上协作。

一、风格的本质：设计的原子

风格并非虚无缥缈的感觉，而是产品设计中最小的可视原子。它决定了一套组件库最基本的形式语言。一个完整的风格体系通常由六大核心要素构成：颜色、文字、边角、阴影、图标以及线条。这些元素组合在一起，形成了产品的视觉基因。



二、构建风格库的核心维度

1. 颜色系统：视觉的第一语言



颜色是界面中最直观的视觉元素，合理的色彩系统能从三个维度确立：品牌色、中性色和功能色。

* 品牌色：这是产品身份的体现。它通常应用于关键行动点（如主要按钮）、操作状态（如进度条）、重要信息高亮（如价格）以及图形化图标中。品牌色的定义权在于 UI 设计师，但在交互设计阶段，为避免色彩干扰决策，常先用中性色占位。
* 中性色：主要用于文本、背景、边框及分割线。在处理深色与浅色背景的差异时，建议通过透明度来实现中性色。这是因为透明度颜色可以与背景叠加，保持色调的一致性；而固定色值在不同背景下容易出现视觉缺陷。
* 功能色：用于特殊场景的状态反馈，需遵循用户的普遍认知。例如，成功用绿色，失败用红色，警告用黄色，链接用蓝色。具体的色值由 UI 设计师定义，交互稿中可用“中性色 + 图标”替代。

2. 字体规范：阅读的舒适性

字体是界面信息传递的载体。定义字体的使用规则，旨在平衡阅读的舒适性与信息的层次感。

* 字体家族：优先使用系统默认字体，以确保在不同环境下的可读性。例如，macOS 默认使用苹方 _ 简，Windows 默认使用微软雅黑。
* 主字体大小：基于计算机显示器约 50cm 的阅读距离，12px 的物理大小往往体验不佳。14px 不仅能满足可读性，还能保证界面清晰舒适。若字号过大，则会影响表格等信息的容纳量。
* 字阶与行高：字阶是一系列定期变化的字体尺寸，用于打开页面的信息层级。行高则是包裹字体的无形盒子，为上下文提供呼吸空间，避免拥挤。
* 字重：通常使用 Regular（对应代码 400）用于正文和辅助文本，Medium（对应代码 500）用于标题以突出层次。考虑到数字和西文字体面积较小，中西文混排时建议使用 Semibold（对应代码 600），使视觉重心更平衡。

3. 边角处理：产品的性格

边角是用弧线代替直角的设计细节。适当的圆角不仅能反映产品的调性（圆润亲切或严谨硬朗），还能提供更友好的视觉体验。确定边角规范时，需分别从矩形元素、浮出控件和条形元素三个场景入手定义半径。

4. 阴影层级：空间的物理反馈

阴影源于现实生活中物体之间的距离感。在界面中，阴影用于塑造空间层次，帮助用户理解元素的高低关系。

* 阴影类型：分为四个层级。S0 无投影，物体贴近地面（如输入框）；S1 小投影，物体处于低水平，常用于悬停或点击反馈（如卡片 Hover）；S2 中投影，物体位于中间层，随元素移动（如下拉框、气泡）；S3 大投影，物体位于高层，独立于其他层次（如对话框）。
* 阴影方向：取决于光源位置。光源越远，阴影越远。通常用 X、Y 坐标轴表示。
* 阴影值：物体离地面越远，阴影颜色越浅、模糊度越高、面积越大。为了模拟真实世界的柔和感，建议采用三层阴影叠加的表达方式。



5. 图标与线条：细节的秩序

* 图标：图标是图形界面的重要指引。尺寸定义可参考斐波那契数列或 8px 网格系统，主尺寸通常设为 8px（最小）、16px、24px、40px、64px（最大）。选择图标时，需确保视觉区域、点线面风格及圆角处理保持一致。
* 线条：用于管理内容和分隔布局。风格上主要分为实线和虚线，但为避免杂乱，全线风格不应超过 3 种。粗细分为细（1px）、中（2px）、粗（3px）三个层次，越粗的线条视觉感知越强。



三、风格库的实际应用

风格库的价值在于应用。其落地主要分为两步：一是基于设定的颜色、文字、边角、阴影等原子搭建组件库；二是通过调整样式库参数，快速生成适配新项目的组件库。

以按钮组件为例，它不是独立绘制的，而是由背景色（颜色）、文案（字体）、圆角（边角）和悬浮效果（阴影）组合而成。当我们需要适配一个新项目时，无需重新绘制每个组件，只需调整风格库中的基础参数（如将品牌色从蓝色改为红色，将圆角从 4px 改为 8px），整个组件库即可快速更新。

结语

风格库是设计系统化的起点。通过对颜色、文字、边角、阴影、图标和线条的标准化定义，团队设计师可以利用工具（如 Axure 组件样式管理）直接调用参数，高效构建统一的组件。这种“原子化”的思维，不仅能保证 0 到 1 阶段的设计质量，更能通过参数的灵活调整，让设计资产在不同项目间快速复用，实现效率与一致性的双赢。