अभी लॉगिन करें 做设计的人大概都有过这种感受：团队里不同人做的按钮，圆角、字号、阴影常常不一样，几个页面拼在一起，总觉得哪里不对劲。问题通常不在设计能力上，而是大家缺少一个共同认可的基础——那些最底层、不可再拆分的视觉“原子”没有统一。这些原子，就是风格。
风格可以理解为一套可视化组件库赖以成形的最小单元，它决定了界面最根本的观感，通常包括颜色、文字、边角、阴影、图标和线条这几项。把这些提前定义清楚，就像给团队定下了一套视觉语法，后面无论怎么组合组件，都不会跑偏。那么，到底该怎么一步步搭建风格库，它又能在实际项目中起什么作用？我们不妨从颜色开始说起。
界面用色大致可以拆成三块：品牌色、中性色和功能色。品牌色是最直观的视觉符号，常出现在关键按钮、进度条、价格标签、图标等位置，用来传递产品的性格。在交互稿阶段，为了避免干扰视觉决策，一般会用中性色先代替，具体的色值留给UI同学去敲定。
中性色主要用在文字、背景、边框和分割线上。考虑到一款产品往往同时存在浅色和深色两种背景，落地时更推荐用透明度来实现中性色，而不是直接写死一个色值。原因在于，透明度能让颜色和底层背景叠加，保持整体色调的一致性；如果直接用一个固定色值，切到深色背景时很容易显得发灰、突兀，视觉效果会打折扣。
功能色服务于特定的状态反馈，比如成功、失败、警告、链接。这些颜色的选择不能太随意，得遵循用户长期形成的认知习惯——绿色代表成功，红色代表失败，黄色警示，蓝色表示可点击。在交互稿里，我们同样习惯用中性色加图标来示意，最终色值也交给UI环节确定。
颜色体系搭建好之后，接下来就是文字。字体是界面里承载信息的主力，把它的使用规则定义清楚，能很好地平衡阅读舒适度和信息层级。首先要指定字体家族。为了兼顾不同系统的显示效果，通常会优先使用系统默认字体，并准备一套备用字体序列，比如在 macOS 上默认使用苹方，Windows 上默认使用微软雅黑，这样不用额外加载字体也能获得不错的阅读体验。
主字号的选取需要结合典型的阅读距离。电脑屏幕的观看距离大约在 50 厘米左右，12px 以下的文字对阅读体验并不友好。14px 这个尺寸，既能保证清晰舒适，又能维持界面的层次感。如果字号再大，虽然更易读，但在表格这类信息密集的场景里，能容纳的内容就会变少，影响信息密度。
有了主字号，还需要一套字阶来拉开信息层级。字阶就是一系列有规律变化的不同字号，配合行高一起使用。行高可以理解为包裹在文字外面的无形盒子，它为文本之间提供呼吸空间，避免上下行贴得太紧。字重方面，大多数情况下用 Regular 和 Medium 两种就够了，Regular 用于正文和辅助说明，Medium 用于标题，形成清晰的层次关系。在代码里，对应 400 和 500 就够用。数字和西文字母本身的视觉面积偏小，混排在中文字符里时，建议把西文部分设置成 Semibold（对应 600），这样整体看起来会更协调。
边角在界面里扮演的角色比想象中重要。它通过用与两边相切的弧代替直角，来影响产品气质——圆角大一些，会显得温润亲和；接近直角，则更硬朗理性。定义边角时，通常会从矩形元素（如卡片、按钮）、浮出控件（如弹窗、菜单）和条状元素（如输入框、标签）这三类入手，分别指定合适的圆角值，让同一类元素保持一致的转角感受。
阴影可以帮助我们塑造空间上的层次。它模拟了现实世界中物体与地面之间的高度关系，让用户能感知到哪个元素“浮”在上面，哪个元素“贴”在底下。在界面里，阴影一般分成四个层级：无阴影（S0），比如输入框，因为它和背景融为一体；小阴影（S1），通常用于悬停态，像卡片被 hover 时微微抬起；中阴影（S2），用于下拉菜单、气泡提示、拖拽排序等跟随元素，它从某个基准面展开并跟随移动；大阴影（S3），用在模态对话框这类与当前页面完全脱离的顶层元素上。
阴影的方向由光源和物体的相对位置决定，在界面中通常用 X、Y 值来表示。而阴影的颜色、模糊度和面积则随高度变化：物体离地面越远，阴影颜色越浅、模糊度越高、面积越大，反之则更深、更实、更小。为了让阴影看起来更柔和自然，可以采用三层阴影叠加的表达方式，这比单一阴影更贴近现实世界的光影反馈。
图标是图形界面里不可或缺的引导元素，能帮助用户快速理解功能和操作。图标尺寸的规划可以参照斐波那契数列，比如 1、2、3、5、8、13、21……对应到常用尺寸，我们定出 8px、16px、24px、40px、64px 这些主尺寸，最小的 8px 用于极窄场景，最大的 64px 用于空状态或引导页的大图标。这样既保证了使用上的灵活性，又不会无限膨胀图标数量。另外，选择图标时一定要留意视觉重量的一致性，整套图标在点、线、圆角、三角形的处理上要统一，否则放到界面里会显得东拼西凑，十分粗糙。
线条主要用于分隔和管理内容，让页面有更清晰的视觉动线和空间感。线条的样式不宜过多，通常控制在三种以内，比如实线、虚线，再配合一到两种虚线变体即可。粗细层次上，可以简化为 1px 的细线、2px 的中线和 3px 的粗线，分别用在分割线、卡片边框和强调分隔等场景，线越粗，视觉存在感越强。
把这些基础定义落地，就可以开始构建组件库了。组件本质上就是风格原子的组合。以按钮为例，它需要调用颜色、文字、边角、阴影这些样式参数。当我们把这些参数通过 Axure 的组件样式管理（或者 Figma、Sketch 的样式功能）设定好，团队里任何人拖出一个按钮，都会自动遵循相同的视觉规则，不必再反复口头对齐。
风格库的另一个价值在于，它让跨项目复用变得非常高效。从一个项目切换到另一个项目时，往往只需要调整风格库里的参数——比如把品牌色从蓝色改成橙色，把圆角从 4px 调到 8px，整个组件库就会同步刷新，不需要一个个组件去修改。这样，新项目的组件库几乎可以瞬间生成，大幅降低重复劳动。
说到底，风格库就是通过定义颜色、文字、边角、阴影、图标、线条这些最基础的参数，让团队成员在同一个频道上建立组件认知，从而护住页面细节的一致性。如果你正在从零搭建一款产品，除了风格库，框架布局、栅格系统和响应式设计也是绕不开的功课，它们会和你今天建立的这套视觉原子相互配合，让整个设计基础更加稳固。