UI设计基础：设计原则与规范

各位同学好，我是老张。今天咱们聊聊UI设计最基础的东西——设计原则和规范。说实话，我见过太多新手一上来就追求炫酷效果，结果做出来的界面在座舱里根本没法用。嗯，咱们先从最核心的设计原则说起。

一、设计三原则：一致性、反馈、容错性

这三个原则，说白了就是让用户用得舒服、用得放心。我在做座舱系统时，这三条是铁律，谁都不能碰。

1. 一致性

什么叫一致性？就是整个系统里，同样的东西长得一样，干的事也一样。举个例子，你想想看，如果方向盘左边的按键是控制音量的，右边也是控制音量的，那用户不得疯掉？

我个人习惯把一致性分成三层：

• 视觉一致性：同样的功能用同样的图标、同样的颜色、同样的字体大小。比如所有警告都用红色，所有确认按钮都用蓝色。
• 交互一致性：同样的操作产生同样的结果。比如点击任何列表项都进入详情页，而不是有的跳转、有的弹窗。
• 语义一致性：同样的词汇表达同样的意思。比如“保存”就是保存，别一会儿叫“存储”，一会儿叫“存档”。

2. 反馈

反馈，就是告诉用户“你的操作我收到了，正在处理”。这个在座舱系统里特别重要。你想想，开车的时候按个按钮，如果没反应，用户会反复按，甚至分心去看屏幕——这多危险。

反馈分三种：

• 即时反馈：点击按钮，按钮要立刻有状态变化（比如颜色变深、有按压动画）。
• 过程反馈：加载中要有进度条或转圈动画。我建议用骨架屏代替转圈，用户体验好很多。
• 结果反馈：操作完成要明确告知成功或失败。比如保存成功后弹个toast：“已保存”。

3. 容错性

容错性，说白了就是允许用户犯错，而且犯错后能轻松挽回。这个在座舱里尤其重要——驾驶员操作时注意力有限，误操作是难免的。

容错性设计要点：

• 可撤销：所有破坏性操作都要能撤销。比如删除导航历史，要提供“撤销”按钮。
• 确认机制：重要操作前加确认弹窗。比如“确定要恢复出厂设置吗？”
• 防误触：关键按钮要加防误触设计。比如音量调节按钮，长按才生效，短按只是预览。

二、设计规范：间距、色彩、字体

规范这东西，说白了就是让团队协作时不打架。我见过太多项目，设计师和开发因为“这个按钮离左边是16px还是20px”吵半天。有了规范，大家都按规矩来。

1. 间距规范

间距不是随便定的。我推荐用8px网格系统。为什么是8？因为大多数屏幕的分辨率都能被8整除，而且8的倍数（8、16、24、32、40...）在视觉上很舒服。

间距层级	数值	使用场景
xs	4px	图标与文字之间
sm	8px	列表项内部间距
md	16px	卡片内边距
lg	24px	区块间距
xl	32px	页面边距

我个人习惯在Figma里建一个间距变量库，所有组件都引用变量。这样改一个值，全局都跟着变——省事。

2. 色彩规范

座舱系统的色彩，第一原则是安全。别整那些花里胡哨的颜色，驾驶员需要的是清晰、易读。

我建议用这套配色方案：

• 主色：深蓝色（#1A237E）或深灰色（#212121），沉稳、不刺眼。
• 强调色：橙色（#FF6F00）或绿色（#2E7D32），用于重要信息。
• 警告色：红色（#D32F2F），用于危险警告。
• 背景色：深色背景（#121212）或浅色背景（#F5F5F5），看具体场景。
• 文字色：白色（#FFFFFF）或深灰色（#333333），保证对比度。

3. 字体规范

字体选择，我推荐用无衬线字体。为什么？因为屏幕显示更清晰，尤其是小字号时。座舱系统里，我常用这些：

• 标题：24px-32px，粗体，用于页面标题。
• 正文：16px-18px，常规体，用于主要信息。
• 辅助文字：12px-14px，常规体，用于标签、提示。
• 数字：等宽字体，用于速度、里程等数据展示。

嗯，这里要注意：中文字体用思源黑体或苹方，英文字体用Roboto或Inter。别混用，否则视觉上会很乱。

三、设计工具介绍：Figma vs Sketch

工具这东西，没有最好的，只有最适合的。我两个都用过，说说我的感受。

1. Figma

Figma是目前的主流。为什么？因为它是网页版的，不用安装，团队协作方便。我在做座舱项目时，设计师、开发、产品经理都在一个Figma文件里实时协作，效率很高。

Figma的优点：

• 实时协作，多人同时编辑
• 自动保存，不怕丢文件
• 组件库和变量功能强大
• 插件生态丰富

缺点：

• 需要网络，离线功能有限
• 大型文件会卡

2. Sketch

Sketch是老牌工具，Mac独占。我刚开始做设计时用的就是它。说实话，Sketch的本地性能比Figma好，尤其是处理大型文件时。

Sketch的优点：

• 本地运行，速度快
• 符号和样式功能成熟
• 插件系统稳定

缺点：

• 只有Mac版
• 协作需要第三方工具（如Abstract）

四、实战：从零搭建一个设计规范

光说不练假把式。咱们来搭一个简单的设计规范框架。假设我们要做一个车载音乐播放器。

// 间距变量
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;

// 色彩变量
--color-primary: #1A237E;
--color-accent: #FF6F00;
--color-warning: #D32F2F;
--color-background: #121212;
--color-text: #FFFFFF;

// 字体变量
--font-size-title: 28px;
--font-size-body: 16px;
--font-size-caption: 12px;
--font-family: 'Noto Sans SC', 'Roboto', sans-serif;

在Figma里，把这些变量建好，然后所有组件都引用它们。这样，如果客户说“我想换个主色”，你只需要改一个变量，整个设计稿都跟着变——省时省力。

好了，这一章的内容就到这里。下一章咱们聊聊用户研究，看看怎么真正理解用户的需求。记住，设计不是自嗨，是解决问题。