UI设计规范

什么是UI设计规范?

UI设计规范是一套系统化的设计准则和标准,它定义了产品界面中所有视觉元素和交互行为的使用规则。这包括色彩、排版、布局、组件、间距、动效等各个方面的详细规定。

为什么需要设计规范?

• 提升团队协作效率: 设计师和开发者遵循统一标准,减少沟通成本
• 保证品牌一致性: 确保产品在不同平台和场景下呈现统一的视觉形象
• 加速开发流程: 可复用的组件和规则大幅缩短设计和开发时间
• 提升用户体验: 一致的交互模式降低用户学习成本
• 便于维护迭代: 规范化的系统更易于扩展和更新

色彩是品牌识别的核心

一个完整的色彩系统通常包含以下几类颜色:

• 主色(Primary): 品牌的核心颜色,用于主要操作按钮、重要信息强调
• 辅助色(Secondary): 补充主色,用于次要操作和视觉层次区分
• 中性色(Neutral): 黑白灰色系,用于文本、背景、边框等
• 语义色(Semantic): 传达特定含义的颜色
  • 成功(Success): 通常为绿色,表示操作成功、正确状态
  • 警告(Warning): 通常为橙/黄色,表示需要注意的信息
  • 错误(Error): 通常为红色,表示错误、危险操作
  • 信息(Info): 通常为蓝色,表示提示性信息

文字层级与规范

排版系统定义了文本在界面中的呈现规则,包括字体选择、字号大小、字重、行高、颜色等。良好的排版系统能够建立清晰的信息层级。

• 字体家族: 选择2-3种字体,通常包括标题字体和正文字体
• 字号层级: 建立从H1到H6以及正文、小字的字号体系
• 字重(Font Weight): 定义不同场景下的字重,如Regular(400)、Medium(500)、Bold(700)
• 行高(Line Height): 通常为字号的1.4-1.8倍,确保可读性
• 字间距与段落间距: 保持适当的留白,提升阅读体验

栅格系统的作用

栅格系统是页面布局的骨架,它通过将页面划分为规则的列和行,帮助设计师创建对齐、平衡、有节奏感的布局。

• 列数(Columns): 常见的有12列、16列、24列系统,12列最为通用
• 水槽(Gutter): 列与列之间的间距,通常为16px、20px或24px
• 边距(Margin): 内容区域与屏幕边缘的距离
• 响应式断点: 定义不同屏幕尺寸下的布局变化
  • 移动端(Mobile): < 768px
  • 平板(Tablet): 768px - 1024px
  • 桌面(Desktop): > 1024px
  • 大屏(Large): > 1440px

图标设计规范

图标是UI中重要的视觉元素,需要保持统一的风格和规格。

• 图标风格: 线性、填充、双色等,需在整个产品中保持一致
• 尺寸规范: 定义标准尺寸,如16px、24px、32px、48px
• 绘制规则:
  • 线宽: 通常为1.5px或2px,保持统一
  • 圆角: 定义统一的圆角半径
  • 网格对齐: 使用像素网格确保清晰度
  • 视觉平衡: 保持图标视觉重量一致
• 颜色使用: 单色图标使用主题色,语义图标使用对应的语义色

基础组件与交互状态

组件库是设计系统的核心,包含了所有可复用的UI元素。每个组件都需要定义清晰的交互状态。

• 按钮(Button): 主要按钮、次要按钮、文本按钮等
• 输入框(Input): 文本输入、数字输入、搜索框等
• 选择器: 下拉菜单、单选框、复选框等
• 反馈组件: 提示框、对话框、通知等
• 交互状态:
  • 默认(Default): 组件的初始状态
  • 悬浮(Hover): 鼠标悬停时的状态
  • 激活(Active): 点击或选中时的状态
  • 聚焦(Focus): 键盘导航聚焦时的状态
  • 禁用(Disabled): 不可交互时的状态

统一的空间系统

间距系统定义了元素之间和元素内部的空白距离,是创建视觉节奏和层次的关键。

• 基准单位: 通常选择4px或8px作为基准单位
• 间距尺度: 基于基准单位的倍数创建间距体系
  • 4px (0.5x) - 极小间距
  • 8px (1x) - 小间距
  • 16px (2x) - 中等间距
  • 24px (3x) - 大间距
  • 32px (4x) - 超大间距
  • 48px (6x) - 区块间距
• 圆角规范: 定义统一的圆角值
  • 小圆角: 4px - 用于按钮、标签
  • 中圆角: 8px - 用于卡片、输入框
  • 大圆角: 16px - 用于大型容器
  • 全圆角: 50% - 用于头像、徽章

动效让界面更生动

合理的动效能够提升用户体验,提供视觉反馈,引导用户注意力。

• 动画时长: 根据动画类型选择合适的时长
  • 微交互: 100-200ms (按钮点击、开关切换)
  • 小型动画: 200-300ms (下拉菜单、提示框)
  • 中型动画: 300-500ms (页面切换、抽屉展开)
  • 大型动画: 500-800ms (模态框、页面加载)
• 缓动曲线(Easing): 定义动画的速度变化
  • ease-in: 慢速开始,用于元素退出
  • ease-out: 慢速结束,用于元素进入
  • ease-in-out: 两端慢速,用于位置变化
  • cubic-bezier: 自定义曲线,用于特殊效果
• 微交互原则:
  • 提供即时反馈,让用户知道操作已响应
  • 保持动画自然流畅,避免生硬
  • 不要过度使用,避免分散注意力
  • 考虑性能,避免卡顿

什么是设计令牌?

设计令牌是设计系统的基础构建块,它们是存储设计决策的变量,如颜色、字体、间距、动画等。通过使用令牌,可以实现设计与开发的无缝衔接。

• 全局令牌 (Global Tokens): 基础变量,如原始颜色值、字体大小
• 别名令牌 (Alias Tokens): 语义化命名,如 primary-color、text-secondary
• 组件令牌 (Component Tokens): 特定组件的变量,如 button-padding、card-border-radius

令牌命名规范

暗黑模式设计原则

暗黑模式不仅仅是颜色反转,而是需要精心设计的完整配色方案。

• 背景颜色: 避免纯黑(#000),使用深灰(#121212-#1a1a1a)更加舒适
• 文本颜色: 避免纯白(#fff),使用淡灰(#e0e0e0-#f0f0f0)减少眩光
• 对比度: 保持足够的对比度(WCAG AA标准: 4.5:1)
• 语义色调整: 在暗色背景上可能需要调整语义色的明度
• 阴影处理: 暗黑模式中阴影不明显,可使用边框或微弱发光效果替代
• 图片处理: 考虑为图片添加微弱蒙版或降低亮度

颜色映射策略

断点系统

定义清晰的断点系统,确保在不同设备上都有良好的体验。

移动优先设计原则

• 内容优先: 移动端优先展示最重要的内容
• 触控友好: 点击目标最小 44x44px, 按钮间距充足
• 排版调整: 小屏幕使用更大的字体和行高
• 导航简化: 使用汉堡菜单或底部导航栏
• 图片优化: 使用响应式图片和懒加载
• 表单优化: 堆叠表单字段, 使用原生输入类型

WCAG 2.1 核心原则

可访问性设计确保所有用户，包括残障用户，都能使用产品。

• 可感知 (Perceivable):
  • 为所有非文本内容提供替代文本 (alt text)
  • 提供字幕和视频转录
  • 确保色彩对比度达标 (AA: 4.5:1, AAA: 7:1)
• 可操作 (Operable):
  • 所有功能可通过键盘操作
  • 提供跳过导航的链接
  • 给用户足够的时间完成操作
• 可理解 (Understandable):
  • 使用清晰简洁的语言
  • 保持一致的导航和布局
  • 提供错误预防和纠正机制
• 鲁棒性 (Robust):
  • 使用语义化 HTML 标签
  • 确保与辅助技术兼容
  • 使用 ARIA 属性增强可访问性

色彩对比度指南

焦点状态设计

• 所有可交互元素必须有可见的焦点指示器
• 焦点指示器对比度至少 3:1
• 不要仅使用颜色来指示焦点,可结合边框、轮廓等
• 焦点顺序应符合逻辑阅读顺序

核心要点回顾

UI设计规范是构建优秀产品的基石。通过建立系统化的设计规范,我们能够:

• 确保产品在不同场景下保持一致的视觉和交互体验
• 提高设计和开发团队的协作效率
• 降低维护成本,便于产品迭代和扩展
• 提升用户体验,建立品牌认知

最佳实践清单