第二章 设计规范基础：什么是设计规范、为什么需要规范、规范的核心要素
好，咱们正式开始聊设计规范。
说实话，我见过不少刚入行的同学，一上来就急着画界面。打开Figma就是干，颜色凭感觉选，间距靠肉眼调。结果呢？做到一半发现前面画的跟后面画的完全不像同一个系统。改起来？那叫一个痛苦。
我自己在早期做座舱项目时也踩过这个坑。那时候赶工期，想着「先出图再说」。结果到了联调阶段，HMI工程师跑过来问我：「这个按钮的圆角到底是8px还是10px？你给的标注里两个都有。」我当时就愣住了。嗯，从那以后，我再也不敢不先定规范了。
2.1 什么是设计规范
设计规范，说白了就是一套「游戏规则」。
它规定了你的界面里，颜色怎么用、字体怎么选、间距怎么算、组件长什么样。它不是创意手册，而是工程约束。
举个例子。你开车时看到仪表盘上的红色警告灯，不用看说明书就知道「出问题了」。为什么？因为整个行业都遵循了同一个规范——红色代表危险。座舱系统里的设计规范，干的就是同样的事。
核心定义：设计规范是一套可复用的设计准则和组件库，用于保证产品体验的一致性、提升开发效率、降低沟通成本。
我习惯把规范分成三个层次：
- 原则层：比如「信息优先」「操作直观」——这是价值观
- 元素层：颜色、字体、图标、间距——这是基础材料
- 组件层：按钮、弹窗、列表、卡片——这是预制件
你想想看，没有规范就像盖房子没有图纸。砖头大小不一，水泥标号不同，最后盖出来的东西能住人吗？
2.2 为什么需要规范
这个问题我问过很多学员。有人说「为了好看」，有人说「为了统一」。都对，但不够。
我总结了三层理由，你听听看：
2.2.1 效率——别让设计师重复造轮子
一个座舱系统里，光按钮就有十几种状态：正常、按下、禁用、加载中、选中……如果没有规范，每个设计师都得重新定义一遍。有了规范，直接拖组件库里的现成组件就行。
我在做某自主品牌的项目时，团队有6个设计师并行工作。没有规范之前，光对齐这件事就吵了三天。后来我把规范一定，大家照着做，效率直接翻倍。
2.2.2 一致性——用户不需要重新学习
座舱系统跟手机App不一样。开车时用户的注意力极度有限，他不可能停下来研究你这个按钮为什么长这样。规范保证了「同一个操作，同一个反馈」。
举个例子：
- 所有「确认」按钮都是蓝色，所有「取消」按钮都是灰色
- 所有警告弹窗都有红色边框
- 所有列表的点击区域都不小于44px
用户形成肌肉记忆后，操作几乎不用动脑子。这才是座舱系统该有的体验。
2.2.3 可维护性——改一处，处处生效
这是很多新手容易忽略的点。项目做到后期，需求变更是家常便饭。今天市场部说「品牌色要换」，明天法规说「警告图标必须加大」。
没有规范？那你得一个一个页面去改，改到怀疑人生。有规范？改一个变量，全局自动更新。
我的经验：规范不是一次建完就完事的。它需要持续维护。我建议每个项目都配一个「规范守护者」，专门负责规范的更新和答疑。
2.3 规范的核心要素
好，接下来是重点。规范到底要管哪些东西？我把它归纳为三个核心要素：一致性、可用性、美观性。
| 要素 | 关注点 | 典型问题 |
|---|---|---|
| 一致性 | 视觉统一、行为统一、感知统一 | 同一个功能在不同页面长得不一样 |
| 可用性 | 易识别、易操作、易理解 | 按钮太小、文字看不清、操作路径太长 |
| 美观性 | 视觉层次、色彩和谐、排版舒适 | 界面杂乱、信息堆砌、缺乏呼吸感 |
2.3.1 一致性——规范的基石
一致性是规范存在的首要理由。没有一致性，其他都是空谈。
我把它拆成三个维度：
- 视觉一致：颜色、字体、圆角、阴影、图标风格统一。比如所有主按钮都是16px圆角，所有次级按钮都是8px圆角。
- 行为一致：同样的交互手势产生同样的结果。左滑是删除，那所有列表的左滑都应该是删除。
- 感知一致：同样的信息层级用同样的视觉权重。一级标题永远是24px加粗，二级永远是18px常规。
注意：一致性不等于死板。有些场景下可以打破规范，但必须经过团队评审。我曾经见过一个项目，为了「创新」把确认按钮改成了紫色，结果用户测试时一半人找不到「确定」在哪。创新可以，但别让用户猜。
2.3.2 可用性——规范的核心价值
座舱系统是安全攸关系统。可用性不是「好不好用」，而是「能不能用」。
我总结了几条铁律：
- 可识别性：所有图标必须带文字标签。别指望司机在开车时猜你这个符号是什么意思。
- 可操作性：触控目标不小于44×44px。这是行业共识，别挑战它。
- 可理解性：文案要直白。别用「设备状态异常」这种官方话，直接说「空调故障，请检查」。
- 容错性：危险操作必须有二次确认。比如「恢复出厂设置」，点一下就直接执行？那太可怕了。
我曾经在某个项目中，把「确认删除」按钮放在了屏幕最右侧。结果用户测试时，有3个人因为手滑误触了。后来我改成了「确认」在左、「取消」在右，并且加了0.5秒的延迟响应。误触率直接降为零。你看，这就是规范的价值。
2.3.3 美观性——规范的加分项
很多人觉得规范会扼杀创意。其实恰恰相反。好的规范是在约束中创造自由。
美观性不是让你去搞花里胡哨的设计。座舱系统的美观，核心是「秩序感」：
- 视觉层次清晰：最重要的信息最大、最亮、最靠前。次要信息退后。
- 色彩克制：主色不超过2种，辅助色不超过3种。别把仪表盘搞成彩虹。
- 留白充足：信息之间要有呼吸感。别把所有东西挤在一起。
- 动效自然：过渡动画不超过300ms，缓动曲线用ease-in-out。别让司机觉得晕。
我的审美原则：「少即是多」。座舱界面不是展示设计师才华的地方，而是帮助用户安全高效完成驾驶任务的地方。每一个像素都应该有它存在的理由。
2.4 小结
这一章我们聊了三个问题：
- 什么是设计规范？——一套可复用的设计准则和组件库
- 为什么需要规范？——为了效率、一致性和可维护性
- 规范的核心要素是什么？——一致性、可用性、美观性
下一章，我会带你具体看看座舱系统的色彩规范。颜色这东西，看着简单，用起来全是坑。到时候我会分享一些我踩过的坑和总结出来的配色公式。
咱们下章见。
公众号:蓝海资料掘金营，微信deep3321