HMI车载UI设计 - 第三章:HMI车载模块设计
分享给朋友:

按住画面移动小窗

下载
HMI概念中控设计地图导航-车载界面实操课16
虎课APP支持视频下载
扫码下载/打开虎课APP
支持视频下载,随时随地学
手机观看
扫一扫,手机继续学
扫码下载/打开虎课APP
支持视频下载,随时随地学
HMI概念中控设计地图导航-车载界面实操课16_虎课网
记笔记

全新AI视频总结上线

一键节省你80%学习时间

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

299

已学

9小时

时长

0

配套素材

完课证书

¥199(¥299)

全站通VIP免费畅学

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

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

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

1.车辆导航页面有什么内容,页面分别是高德地图、百度地图、腾讯地图,红框部分是可以自定义的。

2.高德地图APP分为两个模块,导航卡片和全程路况,图面显示可以进行自定义开启。

3.三个地图获取的渠道,Mapbox、高德开发平台、百度地图开放平台,都有各自的优势所在。

4.打开软件,新建画布,制作导航的大概布局。

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

Hello大家好 ,我是本节课的讲师大冯 ,今天我们来看一下 ,HMI概念中控设计的导航模块 ,那对于车载导航模块 ,应该都有什么内容 ,大家可以先思考一下 ,和手机中的导航模块 ,它到底有什么区别 ,那么回答这个问题之前 ,我们来先去看一下 ,手机导航里面 ,它都有什么样的配置 ,从左到右依次是高德 ,百度还有腾讯 ,目前也是国内使用量最多的 ,导航类的APP ,最上面它都是有一排导航的提示 ,包括下一个路口 ,是应该向左转 ,还是向右转等等 ,其余部分可以看到大同小异 ,我们再来看一下腾讯地图的APP ,它这个最下面有一个音乐的播放模块 ,这个其实对于车主来讲 ,是一个非常实用的功能 ,因为大部分人 ,现在都是使用手机支架 ,把手机连车上的蓝牙之后 ,就放在这个上面 ,那手机的导航语音播报和音乐的播放 ,其实可以通过手机来进行控制 ,而不是单独的使用车机来进行控制 ,还是很方便的一个功能 ,可控制信息 ,包括像在图里面画红线的部分 ,都是可以去进行自定义操控 ,可以进行自定义控制的 ,那么这里面有什么样的信息 ,我们哪个部分可以去更改 ,哪个部分不可以更改 ,是强制使用的呢 ,我们再去看一下高德地图的APP ,它这是一个自定义的导航 ,可以看到它整体分为两个大的模块 ,第一个就是导航卡片和全程的路况 ,它这是一个二选一 ,是一个强制性的选项 ,再来看一下图面上的显示 ,是在这一个部分 ,

那图面的显示可以进行自定义的设置 ,有的东西你是可以进行开启的 ,有的东西你可以不进行开启 ,这个都是没有什么问题的 ,在汽车上来讲 ,还有一个功能要着重的说一下 ,就是这个放大缩小控件 ,在对于这一块 ,可以去配合硬件来进行设计 ,在车上有很多车厂 ,是作为安全的角度进行考虑 ,所以说很多车上只有一点触控 ,而不是多点触控 ,那么现在手机发展到现在这个程度 ,大部分都是有实点触控 ,所以说不用去考虑这个问题 ,但是在单点触控 ,没有多点触控的这个车机上来讲 ,就得考虑加一个放大缩小的控件了 ,否则的话你这个地图放大 ,或者缩小的逻辑 ,会非常的混乱 ,那么我们再来看一下 ,实车类的导航界面 ,左边是沃尔沃的XC60 ,这是当前一个导航 ,到天安门广场入口的一个图示 ,从a到b点 ,你可以看到它左上角 ,是集成了一个现在导航的信息 ,右下角是缩略图 ,包括右面的这个哈弗 大狗 ,它是准备进行导航的这个模块 ,它在右下角是有加和减进行缩放 ,右上角也是有一些当前信息的开关 ,那么根据以上信息 ,我们可以看到 ,车载导航的模块都有什么 ,那有的朋友可能会问 ,地图是应该怎么获取 ,是在网上随便截取一张 ,并不是,那这里面我给大家介绍 ,三个地图获取的渠道 ,第一个是Mapbox ,作为地图的供应商 ,在国外是比较OK的 ,它唯一的好处是 ,可以进行自定义修改 ,包括地图上的文字 ,还有底图的颜色 ,还有哪些可以显示 ,

哪些不可以显示 ,全部是可以进行自定义调整的 ,其实这个点 ,对于我们设计师来讲的话 ,是一个非常利好的功能 ,那右边这两个平台 ,显然对比左边来讲自定义的程度 ,没有那么的开放 ,而且不支持截图的下载 ,大家可以自定义试一下 ,包括像左边和右边,它各有各的优势 ,那么接下来就是到我们 ,概念风格实操的部分了 ,我们首先来打开Figma ,这里面我也是提前建好了 ,1920×720的这个画布 ,颜色也是做好了,放在了这个上面 ,那么首先应该画一个草图 ,也就是这个原型图 ,1920×720 ,把它的尺寸做出来 ,接下来绘制一下 ,上面应该有什么信息 ,首先首页,全部应用 ,还有下面的这个语音 ,接下来分割线 ,把它们分割一下 ,对于左边的部分 ,是不是应该有一个 ,导航的总体提示 ,还有下半部分 ,对于这个部分可以做一个控制组件 ,还有像这个加和减的控制组件 ,以及我们可以再回到 ,这个PPT里面 ,可以看到 ,使用全程路况的 ,光柱图的形式进行表现 ,大概就是这个样子 ,最中间的就是一个地图的形式 ,那在上面应该有什么样的功能呢 ,首先这个是加和减 ,

加和减,那上面可以做一个定位 ,设置 ,对下边的部分搜索 ,都是一个比较高频上的功能 ,对于上面的导航卡片 ,可以参照移动端上面来进行设置 ,首先在最左边 ,给它做一个区分,这个颜色 ,最左边就是导航的路标指引 ,除了指引以外还不够 ,我们还需要使用文字来进行提示 ,比如说380米后 ,进入哪里呢,什么车道 ,这个都是需要提示的 ,什么某某道路 ,东或者西侧 ,辅路或者是大路 ,具体是按照你整个地图 ,模块上来进行确定的 ,那么根据这个原型图 ,我们首先来进行绘制视觉设计稿 ,使用70×70的这个图标 ,然后语音模块 ,这个语音模块 ,你可以自行画一个语音的助手 ,我在这里面 ,只是作为一个演示的存在 ,

并不用和我这个一模一样 ,颜色吸取一下 ,可以稍微要大一点 ,用这个3也可以 ,双击进去进行编辑 ,把没有上面出来角的这一块 ,可以动一下 ,让它把这个尖尖露出来 ,设置一下 ,接下来描边,由纯色改为渐变的模式 ,可以拖动到两边 ,中间的部分给它一个100%的亮度 ,左右各0% ,这样的话 ,稍微有一个渐变过渡的效果 ,可以后期自行去改动 ,稍微颜色给它降低一点 ,毕竟它不是主角 ,它只是一个辅助的功能 ,那么我们来去做一个 ,

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

导出笔记

笔记导出历史

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