📐 多屏HMI · 一致性设计

30章从入门到生态

01 多屏系统概述

什么是多屏系统、应用场景（汽车/工业/医疗）、一致性的重要性

02 一致性设计原则

视觉·行为·信息·操作一致性定义与区别

03 用户心智模型

跨屏心智模型、预期管理、认知负荷最小化

04 视觉语言系统

色彩体系、字体规范、图标风格、间距网格统一设计

05 布局与栅格系统

响应式栅格、跨屏布局适配、安全区域与边界

06 交互模式统一

点击、滑动、拖拽、手势在多屏间的一致性

07 导航与信息架构

全局导航、局部导航、上下文导航跨屏设计

08 状态与反馈设计

加载·空状态·错误·成功状态的跨屏统一

09 动效与转场设计

跨屏动效一致性、转场动画规范、时长曲线统一

10 数据可视化一致性

图表风格、数据刷新、实时数据跨屏设计

11 表单与输入设计

输入框、选择器、开关、滑块等控件一致性

12 通知与提示系统

Toast、Dialog、Snackbar、Badge跨屏规范

13 多屏协同操作

主副屏交互、跨屏拖拽、接力操作设计

14 屏幕尺寸适配策略

小屏·中屏·大屏·异形屏适配方法

15 分辨率与像素密度

DPI/PPI适配、矢量图与位图使用场景

16 多屏系统设计工具

Figma、Sketch、Axure多屏设计技巧

17 设计规范文档编写

多屏HMI设计规范、组件库管理

18 开发协作流程

设计与开发交接规范、标注与切图规范

19 前端实现一致性

CSS变量、组件化开发、响应式框架选择

20 多屏测试策略

功能·视觉·交互·自动化测试

21 用户研究与可用性测试

跨屏用户测试、眼动追踪、A/B测试

22 汽车HMI多屏案例

仪表盘·中控屏·HUD·后排娱乐屏一致性

23 工业控制多屏案例

操作屏·监控屏·维护屏交互一致性

24 医疗设备多屏案例

诊断屏·监护屏·信息屏合规与一致性

25 智能家居多屏案例

面板屏·手机APP·语音屏交互统一

26 多屏系统的无障碍设计

色盲模式、字体缩放、语音交互辅助

27 国际化与本地化

多语言布局、RTL支持、文化差异处理

28 性能与资源优化

多屏渲染性能、内存管理、资源加载策略

29 版本管理与迭代

设计系统版本控制、组件更新、向后兼容

30 未来趋势与挑战

AI辅助设计、AR/VR多屏交互、跨设备生态融合