HMI车载UI设计 - 第二章:用户体验与产品思维
分享给朋友:

按住画面移动小窗

下载
HMI车载设计原则-车载界面实操课06
虎课APP支持视频下载
扫码下载/打开虎课APP
支持视频下载,随时随地学
手机观看
扫一扫,手机继续学
扫码下载/打开虎课APP
支持视频下载,随时随地学
HMI车载设计原则-车载界面实操课06_虎课网
记笔记

全新AI视频总结上线

一键节省你80%学习时间

视频暂不支持AI视频总结
AI视频总结
编辑完成后,记得点我~

314

已学

9小时

时长

0

配套素材

完课证书

¥199(¥299)

全站通VIP免费畅学

立即购买
图文教程学员评价 (7条评论)视频字幕

本节课讲解虎课_车载课程_第六课,同学们可以在下方评论区进行留言,老师会根据你们的问题进行回复。

那我们开始今天的教程吧。

1.车载UI和手机UI有什么区别,首先是操作习惯,手机是手指的点击和滑动,汽车停留在中控时间越长越容易出现交通事故。

2.手机的使用环境是比较安全的情况下,车载是在行车和驻车过程中,两个的使用环境不同,车载选择饱和度比较低的颜色降低反光。

3.车载界面设计原则及要点,所有的设计都是围绕安全性,动效要少一些,容易屏幕崩溃,也容易吸引人的注意力。

4.浅层级的操作,要简单明了,同一个操作不

查看更多
您需要学习后才可以评价, 立即学习
您需要学习后才可以评价, 立即学习
评论列表
仅显示有内容的评论
仅显示带图评论
排序方式:

大家好,我是讲师大冯 ,今天我们来学一下 ,HMI的车载设计原则 ,首先我们来看一下 ,车载UI和手机上的UI上 ,有哪一些区别 ,主要区别第一项就是操作习惯 ,那在手机上我们主要的操作方式 ,就是靠手指的点击和滑动 ,而对于我们车机端来说 ,可能就是一个完全不同的操作习惯 ,那像车机端的操作 ,不仅是用手指去点击 ,而且包括手势 ,还有语音等多模态交互的形式 ,那在用手势点击的时候 ,可能会用胳膊 ,一起去点击中控的位置 ,那你点击的区域一定要大一些 ,如果说区域过小的情况下 ,就会非常容易点错 ,就好像如果你要叉一个广告一样 ,好半天都叉不掉是吧 ,在手机上是非常常见的 ,而且一不小心的话可能还会点进去 ,就是特别的烦躁 ,当然广告的这种阻碍式设计 ,是一个比较特殊的设计形式 ,那我们回到车机端的话 ,在开车的过程中 ,如果你要是一个特别小的叉 ,我再去点击 ,可能花费两秒 ,甚至三秒的时间 ,那这个播放时间 ,可能车子就已经开出去四五十米了 ,那停留在中控时间越长的话 ,越容易造成车辆的安全事故 ,那么我们再来看一下屏幕尺寸 ,手机上和车机上的屏幕尺寸 ,是完全不一样的 ,手机上目前最大的尺寸可能就是 ,介于7寸到8寸左右 ,那么我们平常使用的手机 ,一般都是4寸到6寸左右 ,再大一点的话 ,可能就会不太方便握持了 ,就像我本人的话手可能比较大 ,但是握一个6.1寸的手机 ,可能也会非常的笨重 ,

那么再稍微大一点的话 ,可能就是属于iPad那个行列了 ,11寸,12寸可能用双手 ,才能把这个pad拿起来 ,单手操作基本上是不可能的 ,但是在于我们车机端来说 ,可以看一下这两张图 ,你可以看到它虽然都是横屏 ,但是一个比较窄 ,一个比较宽 ,屏幕的大小也是不一样的 ,甚至有的是横屏 ,有的是竖屏,这两种形式的展现 ,那么也就说明 ,整个车机端 ,和手机端的设计规则 ,是完全不一样的 ,再来看一下使用的环境 ,那么我们在手机上 ,主要的使用环境 ,可能是处于一个 ,比较安全的情况下 ,可能是在室内或者可能是在室外 ,那场景也是包括这个走路 ,或者是休息的状态 ,或者是我躺在床上 ,坐在凳子上想怎么玩就怎么玩 ,但是在车就完全不一样了 ,可以看一下右边那张图 ,基本上只有两种形态 ,第一个是我在行车的过程中 ,就是我在开车 ,还有一个是我在驻车的过程中 ,也就是我在停车之间 ,操作的一个情况 ,那我举一个例子 ,可能是在开车的过程中 ,会遇到这个反光 ,那么我们如果用手机 ,在室外的情况下 ,可能转一个身 ,或者是找一个 ,比较偏向于阴凉的地方 ,这个问题就能完美的解决了 ,但是在车的情况下 ,你在行驶过程中不可能是 ,因为躲阳光去掉头 ,或者是偏离车道 ,这样的话是非常危险 ,而且也会驾照扣分的 ,所以说在车上的这个使用环境 ,和手机的使用环境 ,它是完全不一样的 ,比如刚才所说的驻车情况 ,那么操作最多的是什么 ,可能是我要导航去某某地点 ,这个时候我可能用车上的车载端 ,

去进行操作 ,大部分都是在开车之前的这个准备工作 ,那再结合以上的场景 ,开车当中 ,经常是处于一个进光量比较高 ,或者是强光的这个情况 ,导致车内的反光会比较强 ,而且在开车的过程中 ,不可能随意的去调整角度 ,再或者是我在夜间开车的时候 ,这个车内的光线会变得很暗 ,如果说你这个光 ,还是非常的刺眼的话 ,或者是使用一个高亮的界面 ,这样的话一般会对驾驶员 ,产生一个非常强烈的影响 ,所以说我们在设计的时候 ,考虑到使用场景的这一块 ,我们一般使用饱和度比较低的颜色 ,去降低反光 ,直接对驾驶员产生的这个影响 ,那不知道朋友们有没有注意过 ,可能在平时浏览Dribbble ,或者是Behancce的时候 ,其实你大多数看到的 ,都是一个暗色的界面 ,但是你们看到白色的界面 ,或者是浅色的这个情况下 ,会非常的少,因为这样的原因 ,目前这个前几节课也讲过了 ,暗色和浅色模式之间的切换 ,可能过渡的不太好 ,体验也不是特别好 ,所以说大部分厂商为了保险 ,还是选择了暗色的模式的这个界面 ,那看完车载UI ,和手机UI上这个区别以后 ,我们再来看一下 ,车载界面设计的原则以及要点 ,那么我在上正课的时候也是 ,和大家一直在强调 ,车载界面上设计的原则 ,一定要遵循所有交互视觉 ,都是需要去遵循这个原则 ,否则你设计出来的东西 ,就不是特别合格的 ,那么我们先来看一下安全性的这个方面 ,所有的设计都是围绕安全性 ,安全性,还是安全性 ,重要的话一定要说三遍 ,一定是所有的界面 ,无论视觉或者交互也好 ,

都是以安全性为前提之下 ,去进行设计 ,如果你在设计的时候 ,不多去考虑这个因素 ,那么你设计出来的界面就是失败的 ,你可以看到图上来讲 ,那这个60和20就会被设计的很大 ,为什么 ,是因为它这个字号放大之后 ,能让驾驶员第一眼上 ,就能瞬间的读取 ,而不是像传统的UI界面 ,可能为了好看 ,把这个60和20会缩得非常的小 ,可能像左下角这个时间 ,或者温度一样就特别小 ,那驾驶员对于这种核心重要的消息 ,如果看不到的话 ,可能会多看几眼 ,这样的话视线就停留在仪表盘 ,而不是停留在界面上 ,会产生一个非常不安全的因素 ,接下来再去看一下这个动效 ,其实动效这个方面 ,我一直跟大家去强调 ,少用动效 ,无论说芯片的性能是高或者是低 ,第一个就是非常会转移注意力 ,尤其像我现在当前这个界面上 ,去展示的这个动效效果是吧 ,你可以看到它特别的花里胡哨 ,人的眼睛可能余光会不自觉的 ,被这种动效 ,或者是鲜艳的颜色 ,去吸引转移注意力 ,再一个就是动效太多 ,很容易造成别的屏幕上崩溃卡死 ,那么我以前和我的这个产品经理 ,聊过这个事情 ,现在大部分的性能 ,都是以仪表为优先 ,而且仪表的系统 ,和中控的系统 ,稳定性也是不一样 ,那么就保证在中控如果死机的话 ,仪表依然能够运行 ,那么对于这个部分 ,我在前一节课上的硬件 ,那个方面也是讲了 ,目前大部分的硬件 ,还是达不到这个要求 ,如果说换算成手机行业的话 ,这个我们比较了解 ,

也就是说在好几年前的 ,这个诺基亚的时代 ,只能开发出像愤怒的小鸟 ,但是开发不出来 ,现在主流的这个游戏,王者荣耀,为什么 ,是因为大家当时没有开发 ,王者荣耀这个想法吗 ,或者是吃鸡 ,不是的,是因为当时的硬件 ,远远达不到支撑运行 ,这种大型游戏的要求 ,换算成车机其实也是一个样子的 ,接下来我们看一看这个浅层级 ,浅层级方面我在这张图上放的是 ,理想One的这款车型 ,你可以看到他把所有的快捷卡片 ,全部是铺在了当前这个页面 ,也就是说我一直也在强调这个事情 ,不做深层级的操作 ,一定要简单明了 ,我点击上就直接可以进入 ,那么我们常用的功能 ,不用再像手机APP一样 ,可能接听电话的时候 ,我想再去调整一下WiFi的设置 ,那么可能在手机上来讲就是得退出 ,然后再去进行下一个操作 ,那在车机上来讲可以把以上两件事 ,或者三件事 ,同时可以同一个操作 ,而不用去反反复复的去退出 ,那么我们再举一个简单的例子 ,就好像QQ音乐一样 ,比如说我想听一首歌 ,具体的名字首先我得打开QQ音乐 ,然后输入名字,我再去点击播放 ,可能大部分车主 ,使用语音的操控系统 ,直接就去点了 ,或者说我想随便听点歌 ,再或者说我想听个响那怎么办 ,直接就在中控上点击这个播放的按钮 ,或者是像这个广播FM一样对吧 ,直接点这个播放就OK了 ,而不用再去找来找去 ,接下来就是操作区域居左 ,那可以看到,像这个车型是比较特殊 ,

这个是特斯拉 ,但是它也是非常照顾 ,中国的驾驶习惯 ,因为中国是驾驶位在左侧 ,也就是左舵驾驶 ,所以说他就把主要的button ,和操作区域 ,

登录后查看更多
UX/交互设计师
共 45 节课
网页设计师
共 166 节课
UI设计师
共 104 节课
HMI车载UI设计
共 20 节课
已是第一张图了
已是最后一张图了
记笔记

导出笔记

笔记导出历史

00:00

0/12
确定保存
笔记导出历史导出完成的笔记将保留1天,如有需求请及时下载
课程名称
导出时间
文件大小
状态
操作
AI视频总结
AI正在分析视频,请稍等…
AI总结遇到了一些问题 点击重新获取
点击重新获取
成为全站通VIP 查看完整AI总结
复制

职业路径建议意见

请选择你对职业路径课程的满意程度

请选择你对职业路径课程的满意程度

请填写关于职业路径的建议意见:

同学,小虎知道你非常努力的想学习!

老师录制课程真的也很辛苦

赞助一下吧

确定学习吗?

您每天可免费学习一个教程。

成为VIP可无限学习 !

成为VIP吧!

成为VIP吧!

您已经免费学习 1 个教程 !

我们录制教程很努力的,赞助下吧 !

升级VIP吧!

您已经学习 5 个教程啦!

我们录制教程很努力的,赞助升级下吧 !

您已经累计下载5个源文件


您在当前分类下不是VIP,赞助VIP享受无限下载


您已经累计下载5个素材文件


您在当前分类下不是VIP,赞助VIP享受无限下载


您已经累计下载5个源文件


您在当前分类下不是VIP,赞助VIP享受无限下载


您已经累计观看5个图文教程


您在当前分类下不是VIP,赞助VIP享受无限观看


学习后才能评价哦!

获得30虎课币

评论提交成功,将在审核通过后显示

×

下载素材/源文件:

收藏成功
取消成功
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习89000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了41,154
并提交了234份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证