编写设计文档、完善组建库、制定动效规范
定义红旗HMI设计系统
/ ABOUT THE PROJECT
新能源汽车的高速发展，作为国产老牌的红旗汽车更需要跟上步伐，特别是在智能座舱方面的不断设计创新和迭代优化。
随着团队壮大、项目增多带来更多样化的车型配置，维护组建库的一致性成为一项重大的任务。
因此，团队与红旗方合作。通过搭建一套完善的设计系统，从而帮助红旗团队更高效的进行开发和协作，但要实现这一目标，我们需要从零开始构建这套系统。
- / Info
- 红旗网联部2021.08-2022.10
- / Role
- UI Designer
Design System
整个设计系统涵盖了设计理念、设计原则、人因工程研究、交互&视觉规范、组件库等，旨在为设计侧提供精准、高效的执行导向，同时打通研发侧对设计逻辑与工程实现细节的认知。
针对 HMI 行业的高速演进及通用技术约束，1.0 版本采用轻量化、解耦化的构建策略。通过低嵌套、高内聚的原子化体系，在确保系统稳健性的同时，为后续业务场景的横向扩展与体验迭代预留了充足的弹性空间。
布局 Layout
中控采用模块化布局结构，聚焦于三大核心：承担重要操作和任务的‘导航区’、承载多元化内容的‘应用区’、以及提供即时触达的‘快捷入口’。模块化的解耦设计，确保了各功能单元在不同屏幕比例下的高度适配性。
同时，立足于‘驾驶安全优先’的设计底线，对UI页面层级进行规范定义，确保核心任务闭环聚焦在 3-5 次交互内。旨在优化驾驶者的认知负荷分配，避免深层级操作造成的视觉注意力偏移，从而实现‘低认知、高反馈’的安全交互体验。
仪表内容框架布局
建立栅格体系
通过响应式栅格，兼容横屏、竖屏多样化的硬件规格；采用 4px 作为基础步进，构建了严谨的视觉节奏，使信息排布具备清晰的逻辑层次。同时采用‘混合式栅格逻辑’：核心操作区使用固定像素宽度以保障触控精度，内容展示区采用百分比流体布局以最大化信息容量。
色彩 Color
基于一套色彩理论和借助色板工具，生成中性色板及不同主题色色板，并在实际设计过程中验证并调整后，定义在色彩规范中，便于后续模块内容的扩展和多主题模式结构。
动效 Motion
构建从 0 到 1 的动效设计体系，旨在解决当前交互体验中的不确定性。我们将通过定义统一的时间、曲线与空间逻辑，将动效转化为可量化的设计资产。这不仅能显著提升产品的易用性与情感价值，更将动态语言转化为核心品牌资产，强化用户心智。
