3、设计基础与规范：视觉设计基本原则（色彩、排版、间距、层级）及设计系统基础
在UI视觉设计中，工具链只是“武器”，而设计原则与规范才是“内功心法”。无论使用 Figma、Sketch 还是 Adobe XD，最终交付的界面质量取决于设计师对视觉底层规律的掌握程度。本章聚焦四大视觉基石——色彩、排版、间距、层级，并延伸至设计系统（Design System）的构建逻辑。理解这些原则，不仅能让界面“好看”，更能让界面“好用”——提升信息传达效率、降低用户认知负荷、保证多端一致性。
3.1 色彩：情绪、对比与可访问性
核心原理
色彩是UI设计中最先被用户感知的要素，它同时承担三重角色：品牌识别（如淘宝橙、微信绿）、功能引导（如红色错误提示、蓝色链接）、信息分层（通过饱和度与明度区分主次）。色彩设计不是“选一个好看的颜色”，而是建立一套可复用的色彩体系。
判断方法与操作流程
- 确定主色：基于品牌定位选择1个主色（占界面面积约60%），通常来自品牌Logo或核心业务色。
- 扩展中性色：灰阶（Gray Scale）用于文字、边框、背景，至少需要5个梯度（如 #111、#333、#666、#999、#EEE）。
- 定义功能色：成功（绿）、警告（橙）、错误（红）、信息（蓝），每个功能色需包含浅底、默认、深字三个变体。
- 校验对比度：使用 WCAG 标准，正文文字与背景对比度需 ≥ 4.5:1，大号文字（≥18pt）需 ≥ 3:1。
| 色彩角色 | 用途 | 建议数量 | 示例 |
|---|---|---|---|
| 主色（Primary） | 主要按钮、选中态、品牌强调 | 1个 + 3个深浅变体 | #0F62FE → #0043CE |
| 中性色（Neutral） | 背景、文字、边框、分割线 | 5-10个灰阶 | #F4F4F4 → #161616 |
| 功能色（Semantic） | 状态反馈、提示信息 | 4组（成功/警告/错误/信息） | #24A148 / #F1C21B / #DA1E28 / #0043CE |
| 数据色（Data） | 图表、可视化 | 6-12个可区分色 | #6929C4 / #1192E8 / #005D5D |
案例拆解：电商App“立即购买”按钮配色
背景与约束：某电商App改版，原按钮为纯橙色（#FF6600），但用户反馈“刺眼”“廉价感”。设计目标：提升品质感，同时保持购买转化率不下降。
分析过程：团队对竞品（京东、天猫、拼多多）进行色彩采样，发现高端电商（如网易严选）倾向低饱和主色。通过A/B测试，将主色调整为深橙红（#E64A19），并增加浅橙背景（#FFF3E0）作为按钮容器，文字改为白色。
操作步骤：① 调整主色HSL饱和度从90%降至70%；② 增加按钮按下态（#BF360C）；③ 在按钮旁增加浅色辅助文字“限时优惠”，用中性灰（#666）降低视觉噪音。
结果对比：改版后点击率提升3.2%，用户停留时长增加8%，投诉“刺眼”的反馈下降90%。
复盘经验：色彩调整不能只看“好不好看”，必须结合业务指标验证。低饱和主色+高对比文字是提升品质感的通用策略。
3.2 排版：字体、字号与行高
核心原理
排版决定信息的“可读性”与“阅读节奏”。UI排版不同于平面设计，它需要适配不同屏幕尺寸、分辨率与用户缩放需求。核心原则是：建立字体阶梯（Type Scale），用有限的字号组合覆盖所有场景。
操作流程：建立字体阶梯
- 选择字体族：优先使用系统字体（如 SF Pro、Roboto、PingFang SC），保证加载速度与跨平台一致性；品牌定制字体需考虑字重与授权。
- 定义字号阶梯：以1.25倍或1.333倍比例生成（如 12/14/16/20/24/32/40px），至少包含7个层级。
- 设置行高：正文行高建议为字号1.5-1.6倍，标题为1.2-1.3倍。行高过小易拥挤，过大则散乱。
- 控制字重：Regular（400）用于正文，Medium（500）用于强调，Bold（700）用于标题。避免使用过细字重（如100）在浅色背景上。
| 层级 | 字号 | 行高 | 字重 | 典型用途 |
|---|---|---|---|---|
| Display | 32-40px | 1.2 | Bold | 页面大标题、空状态主文案 |
| Title | 24-28px | 1.3 | Bold | 卡片标题、弹窗标题 |
| Subtitle | 18-20px | 1.4 | Medium | 区块小标题、列表项标题 |
| Body | 14-16px | 1.5-1.6 | Regular | 正文内容、说明文字 |
| Caption | 12px | 1.4 | Regular | 辅助说明、时间戳、标签 |
实战场景：数据仪表盘排版优化
某SaaS后台仪表盘，原界面将关键指标（如“今日销售额”）用16px展示，用户反馈“找不到重点”。优化方案：将核心指标提升至32px Display层级，辅助说明文字降至12px Caption层级，并用字重区分主次。改版后，用户完成核心任务的时间从45秒缩短至28秒。
3.3 间距：节奏、留白与栅格
核心原理
间距是UI设计的“呼吸感”来源。合理的间距让界面有节奏感，引导用户视线流动。间距设计的关键是建立间距基数（Spacing Unit），通常以4px或8px为基准，所有间距均为基数的整数倍。
判断方法：间距决策清单
- 关系判断：元素关系越紧密，间距越小（如图标与文字之间用8px）；关系越疏远，间距越大（如不同卡片之间用24px）。
- 分组判断：同一组元素内部间距一致，组与组之间间距大于组内间距（如列表项内间距16px，列表项之间间距8px）。
- 栅格对齐：使用8pt栅格系统，所有元素尺寸与间距均为8的倍数（8/16/24/32/40/48/64/80/96）。
案例拆解：移动端表单页间距调整
初始现象：某银行App开户表单，用户填写中途放弃率高达35%。分析发现：输入框之间间距为12px，标签与输入框间距为4px，视觉上“挤成一团”。
调整方案：① 标签与输入框间距改为8px（保持关联）；② 输入框与下一组标签间距改为24px（明确分组）；③ 表单底部操作按钮与上方内容间距改为48px（强调最终动作）。
结果：放弃率降至22%，用户平均填写时间减少15%。
3.4 层级：视觉引导与焦点控制
核心原理
层级（Hierarchy）决定用户“先看什么、后看什么、不看什么”。通过对比（大小、颜色、字重、留白）建立视觉权重，让重要信息脱颖而出。没有层级的界面是“平”的，用户会感到迷茫。
操作流程：建立视觉层级
- 确定主次：列出页面所有信息元素，按重要性排序（如：主操作按钮 > 标题 > 正文 > 辅助信息）。
- 分配视觉权重：最重要的元素使用最大字号、最高对比度、最多留白；次要元素降低视觉存在感。
- 使用对比工具：字号差至少2倍、字重差至少1级、颜色对比度差至少2:1，才能形成明显层级。
- 验证视线流：用“三秒测试”——让用户看界面3秒，询问他们记住了什么。如果回答与设计意图一致，则层级有效。
常见误区
- 误区一：所有内容都重要——结果所有内容都不突出。必须做出取舍。
- 误区二：只靠颜色区分层级——色盲用户无法感知。应结合字号、字重、间距等多维度。
- 误区三：层级过多——超过4个层级（如：主标题/副标题/正文/辅助/注释）会让界面混乱。
3.5 设计系统基础：从原则到资产
核心原理
设计系统（Design System）是将视觉原则转化为可复用资产的方法论。它包含设计令牌（Design Tokens）、组件库（Component Library）、模式规范（Patterns）和文档（Documentation）四层。设计系统不是“组件集合”，而是“决策的沉淀”。
设计系统核心组成
| 层级 | 内容 | 示例 | 工具 |
|---|---|---|---|
| 设计令牌 | 色彩、字体、间距、圆角、阴影的命名变量 | color.primary / spacing.md / radius.lg | Style Dictionary |
| 基础组件 | 按钮、输入框、卡片、弹窗等原子组件 | Button（Primary/Secondary/Ghost） | Figma / Storybook |
| 复合模式 | 表单页、列表页、空状态等常见页面模式 | Search Bar + Filter + Result List | Figma / Zeroheight |
| 规范文档 | 使用规则、交互行为、可访问性要求 | “按钮文字需为动词，不超过4个字” | Notion / Confluence |
构建设计系统的操作流程
- 审计现状：收集现有产品所有界面，标记重复出现的组件与不一致的样式。
- 定义令牌：将色彩、字体、间距等抽象为命名变量，例如
color.brand.primary、font.size.body。 - 构建组件库：在Figma中创建基础组件，设置变体（Variant）与属性（Property），确保响应式适配。
- 编写文档：为每个组件编写使用说明、交互状态、代码示例、可访问性标注。
- 持续迭代：设计系统是“活物”，需定期收集反馈、更新版本、同步到代码库。
实战场景：从0到1搭建小型设计系统
背景与约束：某创业公司有3个前端工程师、2个设计师，产品覆盖Web与移动端。时间紧迫（2周），预算有限。
关键决策：① 使用Figma Community的免费设计系统模板（如Ant Design）作为起点，而非从零绘制；② 只定义20个核心令牌（8个颜色、6个字号、4个间距、2个圆角）；③ 组件库先做10个高频组件（Button/Input/Select/Checkbox/Radio/Switch/Tabs/Card/Modal/Toast）。
操作步骤：第1周完成令牌与组件设计，第2周与前端同步开发，使用Storybook进行代码组件管理。过程中发现：设计师与工程师对“间距”的理解不一致（设计师用8px，工程师用4px），通过统一为4px基数解决。
结果对比：2周后，新页面开发效率提升40%，设计走查返工率降低60%。
复盘经验：设计系统的核心价值是“统一决策”，而非“完美设计”。先跑通流程，再逐步完善。
3.6 常见误区与总结复盘
| 误区 | 表现 | 后果 | 正确做法 |
|---|---|---|---|
| 色彩过多 | 一个页面超过5种主色 | 视觉混乱、品牌感弱 | 限制主色+中性色+功能色 |
| 排版无阶梯 | 所有文字都是16px | 无法区分主次 | 建立7级字号阶梯 |
| 间距随意 | 间距值五花八门（7px/13px/21px） | 界面不整齐、开发难还原 | 使用4px或8px基数 |
| 层级靠“加粗” | 所有重要文字都加粗 | 视觉噪音增加 | 综合使用字号/颜色/留白 |
| 设计系统“一次性” | 建完不用、不更新 | 设计系统沦为摆设 | 建立维护机制与版本管理 |
本章总结：视觉设计原则是UI设计的“语法”，设计系统是“词典”。掌握色彩、排版、间距、层级四大基石，再通过设计系统将其固化为可复用的资产，才能实现高效、一致、可维护的UI交付。下一阶段的学习将聚焦于具体工具链（如Figma、Design Tokens、Storybook）如何落地这些原则。