想做好车载设计?先掌握这份 Carplay 设计规范(上)

释放双眼,带上耳机,听听看~!
传统的汽车中控系统,大多是相对固定的硬件组合到一起,共同构成中心的控制台,控制着包括导航、收音机、播放器、空调等在内的各种功能。一直到 2000 年前后,汽车的中控台都一直以这样相对固定的物理按钮和旋钮来搭建,用户也可以通过官方或者第三方服务,来升级功能,比如将磁带播放器升级为CD播放器乃至于内嵌电视功能等等。

传统的汽车中控系统,大多是相对固定的硬件组合到一起,共同构成中心的控制台,控制着包括导航、收音机、播放器、空调等在内的各种功能。一直到 2000 年前后 B C f,汽车的中控台都一直以这# K – ~ = K样相对固定的物理按钮和旋钮来搭建,用户也可以通过官方或者第三方服务,来升级功能,比如将磁带播放器升级为CD播放器乃至于内嵌电视功能等等。

想做好车载设计?先掌握这份 Carplay 设计规范(上)

想做好车载设计?先掌握这份 Carplay 设计规范(上)

随着移O A l X f 8 *动端技术的发展,iOS 和 Android 等智能软件系统的0 m ] h / m q ! A完善和提升,汽车的中控系g k # – J O _ V统也不再受限于固化的硬件功能。平台化的软件体系让中控系统有了更多的可能性,影音娱乐开始更加丰富,而已然完善的移动端触摸式交互生态,则为汽车中控以屏幕替代物理按钮打下基础,各类原本存在于手机电脑M T O N 的新型的 APP 、功能、服务也逐渐出现在汽车中控系统上,而特斯拉更是一步到位,以一块巨大的触摸屏彻底革新了中控的交^ i ~ @互体验,OTA 升级,有机多样的UI交互8 B H,彻底释放开了汽车中控交互体验上的想i s m m $ –象力。新的问题出现了,新$ ! y * Q o F的方法在迭代,新的趋势也得到了印证。

想做好车载设计?先掌握这份 Carplay 设计规范(上)

想做好车载设计?先掌握这份 Carplay 设计规范(上)

宝马奔驰保时捷等顶级的汽车厂商大都在中控台的设计上,探索了各自的可能性,国内厂商也毫不I & 0 _ Z r 8示弱,不过其中绝大多数的系统都基于我们熟悉的 Android 或者是 Android Auto 作为基础来进行定制和优化,而苹果则基于自家 iOS 生态,在 2013 年推出了 iOS in the Car 服务,目前正式名称为 Carplay。而目前各大厂f Q D L . % ^ ^商所青睐的 Android Auto 也上在 Carplay 发布之后所跟进并发布的。

目前,Carplay 和 Android Auto 都已经上行业标准级别的存在,今天这篇文章, 我们先聊聊 Carplay。

关于 CarpB e p C Y ^ alay

想做好车载设计?先掌握这份 Carplay 设计规范(上)

想做好车载设计?先掌握这份 Carplay 设计规范(上)

CarPlay 车载系统旨在令用户通过汽车v { G G制造Y ` e M V O商之原生车载系统来使用、操控iOS设备并发挥其功能。该产品的首个版本计划于2014年发布,最早出现在一些制造商的汽C 8 a S 4 5 O车展览上。

CarplaN q x c ^y 本身并非完全独立的存在,它本身会和 iPhone 一起联动,让iPhone 成为你| 6 # k ` { &的车钥匙4 B e –和辅助管理系统。

想做好车载设计?先掌握这份 Carplay 设计规范(上)

想做好车载设计?先掌握这份 Carplay 设计规范(上)

CarPlay 车载让你能够在驾驶车辆时智能、安全地使用各项 iPhoneP x f C e @ . k R 功能。你可以开导航、打电话、收发信息、听喜欢的歌。所有这一切,都整合在车内的中控显示屏上。在 iOS 14 中,CarPlay 车载还引入了全新的 apv D N D 8p 类别和适用于 CarPlay 车载仪表盘的自定墙纸。

Carplay 以 苹果自身在移动端交: N 9 – i w z互和用户体验上的深厚积淀,总结和梳理出了一套可供学习和值得X : g c A A z ^参考借鉴的规范。

这些规范对于需要考虑车载使用场景的厂商以及正在布局车载移动端软件或者系统的厂商的设计师而言,都有O / _ p着相Y # + J 6 M E ,当的参考和学习价值。

Carplay 核心原则和功能

作为车内辅助、操作、娱乐的中心,Carplay 可以直接连接到汽车中控的触摸屏上,提供基于 iOS 的相关的服务和应用。CarplaQ E O / qy 的整体设计围绕着d 1 v 0 c J M = 7车内驾驶这一使用场景,而它的设计原则也围绕着这一G @ / 1 C : f场景来规划:

  • 成熟。基于最熟悉的 iOS 应P B e A l j L 8用,来设计界面元素,并提供熟悉、} _ S i q s ; j j直观的体验。
  • 简短。采用尽可n c i 1 s F o能简短的= O w . /交互,不过度引人瞩目
  • 相关。屏幕显示信息高度相关,提供尽可能少选项,不需要复杂决策
  • 语音。基于Siri,以语音交互为核心,司机无需视线离开前方,手也不用离开方向盘即可完成交互。

想做好车载设计?先掌握这份 Carplay 设计规范(上)

想做好车载设计?先掌握这份 Carplay 设计规范(上)

1.1、音频应用

Carplay 当中会有提供音频内容的 APP,诸如 Podcasts,网络电台,新闻,音乐,体育节目等等,这些服务和 APP 将会通过内置的屏幕显示,并I : t且借助最常见的「标签栏+列表」来呈现基本的框架,, 6 F N 4 )并且必须包含「播放」界面。尽管这类服务和应用是借由内置的界面% # a框架来呈现,但是依然有值得注意的要点:

想做好车载设计?先掌握这份 Carplay 设计规范(上)

想做好车载设计?先掌握这份 Carplay 设计规范(上)

  1. 即使数据不可用,也始终要提供内容。考虑到内容可能会受到网络状况的影响,在这种情况下,请依然使用占位符。
  2. 请将内容层次结构控制在3个级别,或者更少。
  3. 使用多个标签页来组织内容,并且尽量简化f Z X M h q标签导航的数量和结构。
  4. 优先显示相关度最高6 p g 5 z E e | G的内容,减少用户不必要的操作。
  5. 在最顶层界面中,提供包括单点击触摸即可播放的功能,比如「播放」按钮x w { $ a 7 m Y和「随机播放」等选项。
  6. 行驶过程中,对内容进行智能过滤。比如超速的时候,系统会进行语音提示,此时智能暂停播放的内容,并在界面中呈现正在播放的内容的相关信息。
  7. 提供尽可能简洁的标题和说明。
  8. 提供补充性的可_ ? E P 1 Y视化内容,比如专辑封面等等,r $ J % A v =更加一目了然。
  9. 不要在 Carplay 中内置登录和设置的选项和功能,确保 APP 开箱即用。如果需要,尽量让这类操作在 iPhone 上进行,并且尽早完成。
    想做好车载设计?先掌握这份 Carplay 设计规范(上)

    想做好车载设计?先掌握这份 Carplay 设计规范(上)

↑ 使用此图标代表明确的、本地的B 9 * A B o } : :的内容。

想做好车载设计?先掌握这份 Carplay 设计规范(上)

想做好车载设计?先掌握这份 Carplay 设计规范(上)

↑ 使用此图标来标识在w a f n D线的内容,确保用户知道内容来自网络,并且会耗费网络流量。

在进行音频内容播放的时候,Carplay 会显示「正在播放」的界面,并且会使用如下界面:

想做好车载设计?先掌握这份 Carplay 设计规范(上)

想做好车载设计?先掌握这份 Carplay 设计规范(上)

在设计这个相关的界面功能的时候,需要注意以下几点:

  • 播放音频时,提供有用的、准确的信息,并且Q ( J q # N }可以进行明确的控制。
  • 不要重新定义播放控件的含义。
  • 在中断播放一段时间之后,适时恢复并继续音频播放。

1.2、汽车厂商应用

Carplay 能够内嵌到不同厂商的车中,自/ d K H G + |然也可以控制车内的硬件。这一部分的硬件驱动支持通常是由厂商提供,并且借由 Carplay 内的界面,提供统一的G N R 交互体验。

想做好车载设计?先掌握这份 Carplay 设计规范(上)

想做好车载设计?先掌握这份 Carplay 设计规范(上)

  • 将控件和内容限制在与汽车本身相关的范畴以内,不要加入无关的功能
  • 首选[ V 4 .标准UI控件,包括按钮、标签、导航、表单等控件,具体可参阅系统元素
  • 不要重新设计标准控件,确, . d ` $ : e保整体的视T b % @ : h觉和体验的一致性
  • 切勿模仿汽车本身的UI 界面设计,确保 Carplay 内的统一性

1.3、信息传递r z H . p d # E r和 VoIP应用

VoIP 也就是基于 IP 的语音传输功能,而在 Carplay 中,VoQ 5 v A t 1 IP 应用主要借助 Siri 服务,并且全由 Siri 操控,它并不为用户提供直接的交互界面,因此无需专门设计 UI 界面。y # Y ; I ,

想做好车载设计?先掌握这份 Carplay 设计规范(上)

想做好车载设计?先掌握这份 Carplay 设计规范(上)

它支持阅读信息和编写/回复消息,不过需u 0 :要用户; 5 X 3授予权限

想做好车载设计?先掌握这份 Carplay 设计规范(上)

想做好车载设计?先掌握这份 Carplay 设计规范(上)

建议启用 Carplay 的9 * i b S N 7 | K通知功能。具体参阅:UNNotificationCategoryOptionAllowInCarPlay

如果你的 APP 支持 VoIP,请启用 Siri r # ~i 功能。具体参阅:INSearchCallHistoryIntentIdentifier 和 INStartAudioCallIntentIdentifier

2.1、信息标识

当你的 APP 有推w h C送信息未读的时候,通常会在 APP 的右上角增加一个红色的小红点标识,并且其中会有一个白色数字用来标识未读信息的数量。

想做好车载设计?先掌握这份 Carplay 设计规范(上)

想做好车载设计?先掌握这份 Carplay 设计规范(上)

  • 尽量让信息标识足够直观。让用户打开APP之后能够看到推送信息。
  • 保持克制。不要让推送信息大量而频繁,在这个场景下会让用户感到迷惑。
  • 注意重要信息的呈^ 9 O y q N现。在标签栏和APP内的重点位置凸显重要信息,不要仅靠信息3 ; 2 1标识来凸显关键信息推送。
  • 避免使用警报提示来作为信息标识的补充。即使有重要的& w 3 ] D信息,用户也不希望你在打开APP的时候出现警报弹出框来推送信息。这些信息应当是可见,显著,但是用户选择是否要打开和点击的。
  • 始终保持信息标识是最新的。

2.2、= G :错误推送

对于错误信息,应当妥善处理,并且绝对是要在必要的时候才推送报错信息。

  • 通过 Carplay 推送错误信息,而不是推送到连接的 iPhone 上去。
  • 优先以非侵入性的V D D 0状态推送来推送报错信息,而不是直接弹出警报。

2.3、加载状态

在加载内容的时候,使用黑屏或者静y } B Q U ] l 2态的界面,可能会让它整体上看起来像是死机了一样,者可能会导致用户离开。

想做好车载设计?先掌握这份 Carplay 设计规范(上)

想做好车载设计?先掌握这份 Carplay 设计规范(上)

  • 进行加载的时候,尽量明确显示加载状态
  • 加载时,尽快显示主要内容a U C Y J ~,使用文本和图片占位符来呈现内容布局,并且在完成之后替换,如果可能,尽量预加载已有内容,再更新。

2.4、导航模式

在 Carplay 当中,有2种常见的导航模式:

横向导航。通常使用标签栏来进行导航,不同内容横向排布,用户可以快速点击不同标签切换。

想做好车载设计?先掌握这份 Carplay 设计规范(上)

想做好车载设计?先掌握这份 Carplay 设计规范(上)

分层导航。用户在屏幕上点选不同选项,通往不同的子界面。其中地图应用采用的是这种结构。

想做好车载设计?先掌握这份 Carplay 设计规范(上)

想做好车载设计?先掌握这份 Carplay 设计规范(上)

音乐类应用可以使用横向导航,也可以使用分层导航,在设计导航的过程中,应当注意:

  • 尽可能让用户快速而轻松地获取内容。结构化信息,让u 5 ) 5 ( P用户以最少点击、滑动1 U I D来找到他们想要的东西。
  • 用户在进行返回操作M 5 ` y的时候,请保留之前的界面,防止用户迷失。避免音频自动播放,除非它是主要功能。
  • 为每] D e e } g W s一个界面分配一个固定清晰的路径。
  • 尽可能使用标准的导航组件,比如使用选项卡菜单栏和列表视图。
  • 使用导航y 9 i n L K ? q 41 b G Z应该能够遍历所有的层次结构。
  • 使用标签页选项卡的时候,显示同一级的内容或者分类。

2.5、测试

全面的测试,是确保应 ( E k ` C用可用性的重要前提。

  • 请在实际与 Carplay 兼容的显示器上进行测试,最好是在真实的车上进行测试。
  • 在恶劣的网络条件下测试,比如穿越隧道或者网络覆盖状况较差的区域。
  • 测试安装和设置的流程U M n } K M R中有没有问题,并且密切注意涉及到登录和隐私相关的问题。

3.1、音频内容

无论音频是否是你的 APP 的主要内容呈现形式,你都需要了解用户对于音频有哪些期待,并且尽量去贴合这些需求。

  • 只有当准备好播放之后,才会切换到h j T L –「正在播放」的屏幕页面。
  • 音频加载完毕之后g ( q 7 K就可以开始播放,即使描述性的信息依然在加载。
  • 尽量避s t y { M S = a !免自动播放。
  • 如果被别的程序和提示打断,在暂停之后再继续恢复音频播放。
  • 在必要的时候,自动调整当前内容的音Y S s # S i M n量,而不是整体的音量。
  • 在系统发出短提示音的时候,使用系统音量。比如警9 [ T } 2报。

3.2、汽车数据

在管理汽车功能的页面当中,厂商提供的功能和数据将会无缝的接入到 Carplay 当中,比如气候t S |、网络、GPS 等等。当数据不可用的时候,尽量~ p 8 t : ~提供合理的响应方式。

比如当汽车通过隧道,没有 GPm , nS 信息的时候,尽量以不打扰的方式来告知用户。具体的开发接口,请参阅:External Accessory Programming Topics 和 ExternalAccesso( p : g K bry。

3.3、iPhone

Carplay 是和 iPhone 连接起来使用的,并且在程序数据上也相互兼容互通,只是Carplay 本身提供的是简化之后的 UI ,A o L | G Y 1并且针对驾驶的场景G N t进行了优化。

  • 当 Carplay 处于活动状态时,隐去 iPhone 上的~ x 1 m APP 交互。
  • 请不要将 iPhone 和相关用j l V R r | 6 5户置于 Carplay 范畴以外,因为正常使用的时候需要 iPhone 的数据接入。
  • 确保当 iPhone 锁定或者在后备箱中的时候,你的程序可以正常x 6 ^ E H 4 i S使用。

3.4、旋钮和控件

支持 C! ) U Iarplay 的车辆通常会有物理按钮和旋钮,它们可以作为 Carplay 交互的辅助。当物理按键作为用户的主要交互介质的时候,通常至少会存在一个 Siri 按钮,导航控件,选择控件,以及后5 % ( s x – `退控件。

这些控件和 Carplay 应当高度对应,无论是播放、暂停、上一首/下一首 都应该做出准确的相应。^ } d m l o z _具体可以参阅:MPRemotF d j B % h 7 s eCommandCenter

想做好车载设计?先掌握这份 Carplay 设计规范(上)

想做好车载设计?先掌握这份 Carplay 设计规范(上)

当 Carplay 投射的屏幕T Q 1 k W y X M不支持触摸的时候,还有基于旋钮的焦点式交互方式,当用户拧动旋u @ I K C钮的时候,能够让光标从一个元素切换到另一个元素,激活并交互。具体可以参阅这份文档:UIFocusEh r n 5 j F 6 R _nvironment

下半部分随后更新。

参考来源:

https://www.apple.coH ; ! d ) Ym.cn/ios/carplay/

https://developer.@ ; 5 ! p Q Qapple.com/design/human-interface-guidelines/carplay/overview/introduction/

给TA打赏
共{{data.count}}人
人已打赏
教程分享

数据可视化设计必修课(一):图表篇

2021-3-4 17:17:54

教程分享

我设计的图标明明很精致,可总监还是说不专业?

2021-3-5 17:17:15

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索