品牌调研 交互设计 概念设计 语音助手 其他设计

PROJECT

智能座舱HMI视觉设计

以小米 SU7 为主的智能座舱视觉探索。从竞品调研、信息架构到交互原型与 UI 界面设计,完整呈现一套以「自然含蓄之美,沉稳自带张力」为调性的车载 HMI 方案。包含中控主页、音乐播放器、控制中心等核心页面,以及语音助手「小柚」的角色设定与动态表达。

YEAR 2025
ROLE
HMI 设计 UI 智驾
TOOLS
Blender3D AIGC Figma AE
HMI 设计主视觉
01
前期分析

五款竞品座舱在仪表、中控、音乐、车控与语音上的体验拆解与洞察。

02
交互设计

信息架构思维导图、中控原型图与原型交互动效。

03
概念设计

风格探索,UI界面设计与动效。

04
语音助手

「小柚」角色设定与五种状态的透明序列帧动态表达。

01 / 前期分析

品牌调研

25-35 年轻 消费力 未婚 活力 科技 前沿 生态互联

竞品座舱体验拆解

竞品座舱体验对比 · 车型 × 体验维度

围绕 仪表 、中控首页、音乐界面、车辆控制、语音助手 五个维度,
对比蔚来 ET7、小米 SU7、极氪 7X、智界 S7、领克 Z10 五款车型进行设计取舍。

仪表端沿用数字仪表的清晰可读性;
中控首页采用壁纸和可拖拽自定义布局,
满足年轻群体的个性化桌面需求;
音乐界面设计风格更加时尚简略有格调。
语音助手新增视觉形象,增加动态表达

02 / 交互设计

信息架构与交互流程

小米 SU7 中控信息架构
中控主页原型图
中控主页原型图
所有App页面原型图
所有 App页面原型图
音乐页面原型图
音乐页面原型图
控制中心原型图
控制中心原型图

中控页面交互

中控主页的常用菜单以竖排的形式放在屏幕左边,方便驾驶人员操作,进入到其他页面后,菜单栏会贴边隐藏起来,减少视觉干扰,右滑屏幕边缘后会再次显示。整个页面都以极简大块面的形式表达,非必要不显示,方便快速视觉锁定与操作。

音乐播放界面交互

音乐界面保留最常用的功能,把常用功能放到左边,交互更加年轻化,符合受众群体,所有按键的布局清晰明了,减少常用功能之外多余步骤。

03 / 概念设计

风格探索与界面设计

情绪版

界面设计

中控-自然 中控-星际 中控-质感
中控首页 · 自然主题
自然-P 星际-P 质感-P
仪表盘 · 停车状态 P
自然-充电 星际-充电 质感-充电
仪表盘 · 充电状态
中控-自然-音乐界面
音乐主页界面
歌词界面2
音乐播放界面
歌词界面1
音乐播放 · 播放列表
AI工具辅助制作动态背景——春夏秋冬主题
车内氛围灯动效
驾驶模式动效

04 / 语音助手

角色设定

姓 名:小柚

佛系治愈 · 自然幽默 · 呆萌耐心

正式唤醒语小柚小柚
偷懒唤醒语柚——(拖长音即可)
静默
正在听
执行中
应答

小柚待机一直在主页上——不打扰,却始终在。

05 / 其他设计

其他设计作品概览

新品预热、发布会 KV、官网、社媒与线下活动视觉,以及 Vibecoding交互原型、 3D 动态、字体实验等作品切片。

新品预热图

AI辅助设计Chat GPT即梦PS
新品预热图
倒计时 3
倒计时 2
倒计时 1
官网预热图

发布会 KV

AI辅助设计Chat GPT即梦PS
发布会 KV 主视觉
发布会样机 1
发布会样机 2

官网设计

AI辅助设计Chat GPTNano Banana即梦FigmaPS
原型图 · 整体
菜单栏放置常用功能和购买按键
产品KV有张力的画面吸引注意力
为什么需要它?展现产品的价值点
在哪里使用它?展现产品的使用场景
小到可以忽略,强到值得信赖展现产品的硬件性能
不只是记录,也是好看的记录展现产品的拍摄性能和成片质量
拍完了,然后呢?展现产品自带的软件性能
包装与配件展现产品全貌
用户说展现购买后用户的高质量评价
购买链接再次出现购买链接,促进成交
更多产品展示更多产品,增加产品曝光量
原型图 1
原型图 2
原型图 3
官网 KV
网页设计 · 页面 1
网页设计 · 页面 2
网页设计 · 页面 3

社媒宣传

AI辅助设计Chat GPT即梦

线下活动视觉

AI辅助设计Chat GPTNano Banana即梦Adobe IllustratorPS
小红书宣传海报 1
小红书宣传海报 2
小红书宣传海报 3
小红书宣传海报 4
线下物料 · 手持 KT 板
线下活动物料 2
线下活动物料 3
物料应用

手机APP交互原型

Vibecoding

3D与动态视觉

BlenderAE
落日排版
Blender Earth 排版
视觉的秩序

字体设计与动态实验

Adobe IllustratorAE
×
×
已复制邮箱