第4章视觉设计原则

4、视觉设计原则：一致性原则、对比与层次、色彩与可读性、动效设计

各位同学，咱们今天聊点实在的。视觉设计这块，说白了就是让用户「一眼看懂，一用就顺」。我做了这么多年座舱HMI，见过太多「好看但不好用」的设计。嗯，今天我把四个核心原则掰开揉碎了讲给你听。

什么叫一致性？就是同一个功能，在仪表盘、中控屏、副驾屏上，长得一样、操作逻辑一样。你想想看，如果方向盘上的「音量+」是向上拨，中控屏上的音量滑块却是向右拖——用户不骂娘才怪。

核心要点：

我在项目中遇到过一件事：某款车型的仪表盘用「km/h」显示车速，中控屏的导航却用「km/h」但多了个小数点后一位。用户投诉说「两个屏幕数字不一样，到底哪个准？」——你看，这就是一致性问题。

我的习惯：做设计规范文档时，我会把「所有屏幕共用组件」单独列一张表。比如「温度显示」这个组件，字体、颜色、单位、小数点位数，全车统一。省得后期开发扯皮。

为什么有些界面看着「平」？因为没有层次。人的视觉天生会被「不一样的东西」吸引。你想想看，如果所有文字都是12号灰色，用户怎么知道哪个是警告、哪个是提示？

我建议用三个维度来建立层次：

我曾经在一个项目中，把「续航里程不足」的警告做成了和普通信息一样的灰色小字。结果用户开到没电了才发现——嗯，那次之后我学乖了，对比度不够，用户真的会忽略。

避坑指南：对比不是越强越好。比如夜间模式下，纯白文字配纯黑背景，虽然对比度高，但长时间看眼睛会累。我一般建议用「深灰底+浅灰字」，对比度控制在4.5:1到7:1之间（WCAG AA标准）。

色彩这块，我踩过不少坑。先说一个最基础的：颜色不能作为唯一的信息传递方式。为什么？因为色盲用户大概占全球人口的8%，其中红绿色盲最常见。

举个例子：如果你用「红色=故障，绿色=正常」，那红绿色盲用户根本分不清。我建议的做法是：

可读性三要素：

字体选择：座舱内推荐无衬线字体（如Noto Sans、PingFang SC），字重建议用Regular和Medium，不要用Thin或Light——阳光下根本看不清
字号层级：主信息≥32px，次级信息≥20px，辅助信息≥14px（以中控屏为例）
背景对比：浅色模式下，文字与背景对比度≥4.5:1；深色模式下，≥3:1（但建议也做到4.5:1）

我记得有一次做夜间模式测试，发现蓝色文字在深色背景上完全看不清。后来查了资料才知道，人眼对蓝色光的敏感度在低亮度下会大幅下降。所以我现在做深色模式，基本不用纯蓝色文字，改用青色或蓝绿色。

小技巧：用在线对比度检查工具（比如WebAIM Contrast Checker）验证你的配色。我习惯把「所有常用配色组合」都测一遍，确保通过AA标准。别嫌麻烦，这步省了，后面用户投诉更麻烦。

动效不是装饰，是功能。我见过有些车机，切换页面时来个360度旋转动画，看着炫，但用户等得着急。动效的核心目的是「引导注意力」和「解释状态变化」。

我个人把动效分成三类：

为什么时长这么重要？因为人脑处理动效需要时间。超过300ms，用户会觉得「卡」；低于100ms，用户根本注意不到。我习惯用「缓入缓出」的曲线（ease-in-out），而不是线性运动——线性运动看起来像机器，不自然。

避坑指南：我曾经在一个项目中，给「空调温度调节」加了旋转动画，每次调节都要等动画播完才能操作下一次。结果用户疯狂吐槽「调个温度要等半天」。后来我改成「动画不阻塞操作」，用户调温度时动画实时跟随，体验瞬间好了。

还有一个容易被忽略的点：动效不能引起晕车。座舱内的屏幕离用户很近，大幅度的平移、旋转动效，配合车辆本身的震动，很容易让用户头晕。我建议：

总结一下我的经验：

这四个原则，说白了就是一句话：让用户用最少的脑力，完成最多的操作。你想想看，开车时谁有心思研究你的界面设计？

好了，这一章就到这里。下一章咱们聊聊「多屏交互的注意力管理」，到时候我会分享一个我踩过的「副驾屏干扰主驾」的大坑——嗯，保证让你印象深刻。