• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 汽车交互专题!全方位解读特斯拉Model 3中控大屏交互布局

汽车交互专题!全方位解读特斯拉Model 3中控大屏交互布局

作者:UI酷设计 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含交互设计,汽车交互设计,经验分享,车载UI,车载系统等相关知识,UI酷设计希望在学习及工作中可以帮助到您

今天我们来聊一聊特斯拉最新的车型 Model 3的中控大屏,这是一块具有标志性意义的中控设计。Model 3 的HMI堪称是对汽车行业的一个颠覆性作品,车内采用了极简的内饰设计基本取消的硬件按钮操作,甚至在所有车上都是标配的汽车仪表都不复存在了。所有功能操作几乎都汇集到了车内的中控大屏上。所有的操作只需要在大屏上点一下、划一下就能很快地操作完成。

特斯拉交互布局分析

Model 3 的交互设计把15寸屏幕整体分成了三块区域:快捷菜单区域,行车信息区域,内容切换区域。

  • 快捷菜单区域是快捷功能的操作入口,这些快捷功能的内容都会以浮窗的形式在右侧内容展示区临时展示。并且这些弹窗都不会直接全部覆盖右侧内容展示区域,而是只会默认覆盖底部的一部分。
  • 行车信息区域是驾车相关的数据信息,也就是承载原有的方向盘下的汽车仪表内容。这些数据的优先级非常高不会被其他内容所遮盖,例如车速,档位,自动驾驶状态等信息。
  • 内容切换区域默认显示地图路况信息,把路况导航的重要度提升到了最高,同时也把地图路况定义为桌面背景,其他快捷功能都会在这个区域以浮层的临时形式展现。

Model 3 的交互设计默认展示了安全驾车相关的内容,多媒体娱乐相关的内容都以浮窗的形式展现。例如音乐模块默认只会展示少量的音乐信息,如果需要查看和操作更多信息需要做两次点击的操作才能全部展开。这种交互布局方式很好的体现了车载HMI的功能需求和场景需求。

细分功能汇总

  • 快捷菜单区域,负责常用的空调、座椅调节入口,以及车辆控制、多媒体等功能入口。
  • 行车信息区域,左承担了传统「仪表屏」的功能,显示车速相关所有信息,ADAS相关信息,并且集成了后置摄像头、语音指令、充电设置甚至手动雨刮器的入口。
  • 内容切换区域,则是多媒体信息显示的区域,包括音乐、电话等。

特斯拉交互布局尺寸分析

特斯拉Model 3的车载中控大屏整体尺寸为1920*1200px,是一块名副其实的超大操作屏幕。底部菜单栏的标准高度为120px,这样的菜单高度能够更好的在行车过程中点击。

整体高度1200px减去菜单栏高度120px,内容高度为1080px。也就是说整体的内容区域为1920*1080px,刚好跟标准的视频比例一致,这个尺寸是不是为娱乐视频准备的还有待考证。

特斯拉交互特点分析

1. 场景化设计

根据场景设置功能和内容展示,同一个功能在不同场景下显示的内容也不相同,尽量满足当前场景下的功能需求。例如,娱乐多媒体功能,在驾驶过程中,导航功能相对重要,所以只显示歌曲名称、专辑的封面与少部分相关操作。用户往上滑动,显示相对多娱乐功能,占据一半屏幕。再往上滑动,显示更多娱乐内容。这种场景化设计思路是Model 3最重要的设计思路。

2. 可视化操作设计

可视化的操方式,空调的风向可通过向上、平行、向下、向左、向右的滑动实时的控制出风口。它通过软件可视化方式来实现跟家里的操作一致,具有趣味性,有效地降低了用户的学习成本,提高产品的使用效率。

这种可视化的操作方式比起硬件操作更加的灵活有趣。

3. 降低层级

Tesla Model 3 界面设计首先默认展示跟安全驾驶相关的内容,其他功能内容都以模态窗口、浮窗的方式展示,尽可能的降低操作界面的层级,使用完成即收起内容,最大程度提高产品使用效率。因为车载UI特殊的行业属性和功能需求,注定了必须要以安全驾驶为核心,其他娱乐功能为辅助。这个前提也就决定了它的操作层级必须要做到最低。

4. 自定义内容

Model 3这次的设计可以自定义设置菜单功能选项,尽可能的满足不同用户的个性化需求,工具栏其中部分功能对用户开放,用户可以根据自己的使用习惯就行自定义产品功能位置。例如,可以自定义将微信应用设置到快捷菜单中。这种设计也体现了特斯拉追求人性化设计的理念。

5. 减少硬件操作(有好有坏)

这次的Model 3的设计中最大的设计理念就是尽量的抛弃物理按键的操作,比如空调的温度风向的设置、雨刷、汽车前盖、后盖、车内饰的存物箱、天窗等开与关。所有的设置操作都放置在了中控大屏之中。这也许是今后HMI的一个大的趋势。当然也有看法是说,由于成本问题导致缩减了硬件设施,关于这些争论只能拭目以待了。

Tesla Model 3的HMI设计是汽车行业的革命性产品,其对HMI的设计思路有了极大地提升。注重场景化设计,有限安全驾驶的功能需求并且合理的设计了交互方式。值得汽车UI行业的设计师仔细研究学习。

欢迎关注作者的微信公众号:


「汽车UI设计好文」

  • 《UI丨重塑车载用户体验之仪表盘的重设计》
  • 《让用研落地!重塑车载用户体验之为司机焦虑而设计》
  • 《汽车UI界面怎么做?来看特斯拉和Apple Carplay等高手的案例!》
  • 《向着下一个时代进发!酷炫的汽车仪表盘UI设计合集》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 交互设计和心理学之间的18条奇妙联系
  • Apple Watch 交互设计中四个全然不同以往的经验揭密
  • 资讯类产品阅读列表的交互设计思考与经验分享
  • 163邮箱登录框交互设计的改进经验与分享
  • 超全面!Android 应用与iOS 应用之间的设计差异对比
  • 超全面的设计异常情况和处理方式汇总
  • 以Apple Music为例,为你解读格式塔7大法则
  • 界面设计中,交互方式是选择滑动还是点击呢?
  • 新手交互设计师如何迅速成长?爱彼迎高手来教你!
  • 在开始 VUI 设计之前,你需要做些什么?

相关文章

  • 2018-08-23网站要上线了,问问自己这15个问题再做决定
  • 2017-08-062013年网页设计UI最热趋势 最流行的UI设计
  • 2018-08-23专访三部曲!Google设计主管如何培养设计文化?
  • 2018-08-23实战经验!聊聊全链路设计和传统设计的流程差异
  • 2018-08-23交互基础小课堂!目标导向设计之「定义交互设计框架」
  • 2018-08-23网易实战案例!用五步设计流程,让你的设计更有说服力!
  • 2018-08-23UI 入门基础!像素、分辨率和适配的知识全面总结
  • 2018-08-23这个大公司越来越重视的体验文案编写师,到底是干嘛的?
  • 2018-08-23那些很熟悉但又叫不出名字的设计法则: 预期效应
  • 2017-08-06输入自动提示搜索提示功能的样式文件:suggestion.css

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 清除浮动(clearfix 和 clear)的用法示例介绍
    • 用js实现css3效果的圆角方法
    • 用超多案例,带你全面看懂尼尔森十大可用性原则!
    • 背后的分析!iOS 11的设计理念和3个设计方向总结
    • 「这个控件叫什么」系列之虚拟键盘/软键盘/Soft Keyboard
    • IE8兼容视图(IE7 mode)与独立IE7的区别详解
    • 为什么你做的设计总是不耐看?
    • 超全面!体验设计中的「功能可供性」基础科普
    • 为了让 iPhone X 更好浏览网页,我给网页加了个导航按钮
    • 用户体验和可用性之间的联系和差异,你都知道吗?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有