Carplay 設(shè)計(jì)規(guī)范(上)

2021-3-8    資深UI設(shè)計(jì)者


傳統(tǒng)的汽車中控系統(tǒng),大多是相對(duì)固定的硬件組合到一起,共同構(gòu)成中心的控制臺(tái),控制著包括導(dǎo)航、收音機(jī)、播放器、空調(diào)等在內(nèi)的各種功能。一直到 2000 年前后,汽車的中控臺(tái)都一直以這樣相對(duì)固定的物理按鈕和旋鈕來(lái)搭建,用戶也可以通過(guò)官方或者第三方服務(wù),來(lái)升級(jí)功能,比如將磁帶播放器升級(jí)為CD播放器乃至于內(nèi)嵌電視功能等等。

想做好車載設(shè)計(jì)?先掌握這份 Carplay 設(shè)計(jì)規(guī)范(上)

隨著移動(dòng)端技術(shù)的發(fā)展,iOS 和 Android 等智能軟件系統(tǒng)的完善和提升,汽車的中控系統(tǒng)也不再受限于固化的硬件功能。平臺(tái)化的軟件體系讓中控系統(tǒng)有了更多的可能性,影音娛樂(lè)開始更加豐富,而已然完善的移動(dòng)端觸摸式交互生態(tài),則為汽車中控以屏幕替代物理按鈕打下基礎(chǔ),各類原本存在于手機(jī)電腦的新型的 APP 、功能、服務(wù)也逐漸出現(xiàn)在汽車中控系統(tǒng)上,而特斯拉更是一步到位,以一塊巨大的觸摸屏徹底革新了中控的交互體驗(yàn),OTA 升級(jí),有機(jī)多樣的UI交互,徹底釋放開了汽車中控交互體驗(yàn)上的想象力。新的問(wèn)題出現(xiàn)了,新的方法在迭代,新的趨勢(shì)也得到了印證。

想做好車載設(shè)計(jì)?先掌握這份 Carplay 設(shè)計(jì)規(guī)范(上)

寶馬奔馳保時(shí)捷等頂級(jí)的汽車廠商大都在中控臺(tái)的設(shè)計(jì)上,探索了各自的可能性,國(guó)內(nèi)廠商也毫不示弱,不過(guò)其中絕大多數(shù)的系統(tǒng)都基于我們熟悉的 Android 或者是 Android Auto 作為基礎(chǔ)來(lái)進(jìn)行定制和優(yōu)化,而蘋果則基于自家 iOS 生態(tài),在 2013 年推出了 iOS in the Car 服務(wù),目前正式名稱為 Carplay。而目前各大廠商所青睞的 Android Auto 也上在 Carplay 發(fā)布之后所跟進(jìn)并發(fā)布的。

目前,Carplay 和 Android Auto 都已經(jīng)上行業(yè)標(biāo)準(zhǔn)級(jí)別的存在,今天這篇文章, 我們先聊聊 Carplay。

關(guān)于 Carplay

想做好車載設(shè)計(jì)?先掌握這份 Carplay 設(shè)計(jì)規(guī)范(上)

CarPlay 車載系統(tǒng)旨在令用戶通過(guò)汽車制造商之原生車載系統(tǒng)來(lái)使用、操控iOS設(shè)備并發(fā)揮其功能。該產(chǎn)品的首個(gè)版本計(jì)劃于2014年發(fā)布,最早出現(xiàn)在一些制造商的汽車展覽上。

Carplay 本身并非完全獨(dú)立的存在,它本身會(huì)和 iPhone 一起聯(lián)動(dòng),讓iPhone 成為你的車鑰匙和輔助管理系統(tǒng)。

想做好車載設(shè)計(jì)?先掌握這份 Carplay 設(shè)計(jì)規(guī)范(上)

CarPlay 車載讓你能夠在駕駛車輛時(shí)智能、安全地使用各項(xiàng) iPhone 功能。你可以開導(dǎo)航、打電話、收發(fā)信息、聽喜歡的歌。所有這一切,都整合在車內(nèi)的中控顯示屏上。在 iOS 14 中,CarPlay 車載還引入了全新的 app 類別和適用于 CarPlay 車載儀表盤的自定墻紙。

Carplay 以 蘋果自身在移動(dòng)端交互和用戶體驗(yàn)上的深厚積淀,總結(jié)和梳理出了一套可供學(xué)習(xí)和值得參考借鑒的規(guī)范。

這些規(guī)范對(duì)于需要考慮車載使用場(chǎng)景的廠商以及正在布局車載移動(dòng)端軟件或者系統(tǒng)的廠商的設(shè)計(jì)師而言,都有著相當(dāng)?shù)膮⒖己蛯W(xué)習(xí)價(jià)值。

Carplay 核心原則和功能

作為車內(nèi)輔助、操作、娛樂(lè)的中心,Carplay 可以直接連接到汽車中控的觸摸屏上,提供基于 iOS 的相關(guān)的服務(wù)和應(yīng)用。Carplay 的整體設(shè)計(jì)圍繞著車內(nèi)駕駛這一使用場(chǎng)景,而它的設(shè)計(jì)原則也圍繞著這一場(chǎng)景來(lái)規(guī)劃:

  • 成熟?;谧钍煜さ?iOS 應(yīng)用,來(lái)設(shè)計(jì)界面元素,并提供熟悉、直觀的體驗(yàn)。
  • 簡(jiǎn)短。采用盡可能簡(jiǎn)短的交互,不過(guò)度引人矚目
  • 相關(guān)。屏幕顯示信息高度相關(guān),提供盡可能少選項(xiàng),不需要復(fù)雜決策
  • 語(yǔ)音?;赟iri,以語(yǔ)音交互為核心,司機(jī)無(wú)需視線離開前方,手也不用離開方向盤即可完成交互。

想做好車載設(shè)計(jì)?先掌握這份 Carplay 設(shè)計(jì)規(guī)范(上)

1.1、音頻應(yīng)用

Carplay 當(dāng)中會(huì)有提供音頻內(nèi)容的 APP,諸如 Podcasts,網(wǎng)絡(luò)電臺(tái),新聞,音樂(lè),體育節(jié)目等等,這些服務(wù)和 APP 將會(huì)通過(guò)內(nèi)置的屏幕顯示,并且借助最常見(jiàn)的「標(biāo)簽欄+列表」來(lái)呈現(xiàn)基本的框架,并且必須包含「播放」界面。盡管這類服務(wù)和應(yīng)用是借由內(nèi)置的界面框架來(lái)呈現(xiàn),但是依然有值得注意的要點(diǎn):

想做好車載設(shè)計(jì)?先掌握這份 Carplay 設(shè)計(jì)規(guī)范(上)

  1. 即使數(shù)據(jù)不可用,也始終要提供內(nèi)容??紤]到內(nèi)容可能會(huì)受到網(wǎng)絡(luò)狀況的影響,在這種情況下,請(qǐng)依然使用占位符。
  2. 請(qǐng)將內(nèi)容層次結(jié)構(gòu)控制在3個(gè)級(jí)別,或者更少。
  3. 使用多個(gè)標(biāo)簽頁(yè)來(lái)組織內(nèi)容,并且盡量簡(jiǎn)化標(biāo)簽導(dǎo)航的數(shù)量和結(jié)構(gòu)。
  4. 優(yōu)先顯示相關(guān)度最高的內(nèi)容,減少用戶不必要的操作。
  5. 在最頂層界面中,提供包括單點(diǎn)擊觸摸即可播放的功能,比如「播放」按鈕和「隨機(jī)播放」等選項(xiàng)。
  6. 行駛過(guò)程中,對(duì)內(nèi)容進(jìn)行智能過(guò)濾。比如超速的時(shí)候,系統(tǒng)會(huì)進(jìn)行語(yǔ)音提示,此時(shí)智能暫停播放的內(nèi)容,并在界面中呈現(xiàn)正在播放的內(nèi)容的相關(guān)信息。
  7. 提供盡可能簡(jiǎn)潔的標(biāo)題和說(shuō)明。
  8. 提供補(bǔ)充性的可視化內(nèi)容,比如專輯封面等等,更加一目了然。
  9. 不要在 Carplay 中內(nèi)置登錄和設(shè)置的選項(xiàng)和功能,確保 APP 開箱即用。如果需要,盡量讓這類操作在 iPhone 上進(jìn)行,并且盡早完成。想做好車載設(shè)計(jì)?先掌握這份 Carplay 設(shè)計(jì)規(guī)范(上)

使用此圖標(biāo)代表明確的、本地的的內(nèi)容。

想做好車載設(shè)計(jì)?先掌握這份 Carplay 設(shè)計(jì)規(guī)范(上)使用此圖標(biāo)來(lái)標(biāo)識(shí)在線的內(nèi)容,確保用戶知道內(nèi)容來(lái)自網(wǎng)絡(luò),并且會(huì)耗費(fèi)網(wǎng)絡(luò)流量。

在進(jìn)行音頻內(nèi)容播放的時(shí)候,Carplay 會(huì)顯示「正在播放」的界面,并且會(huì)使用如下界面:

想做好車載設(shè)計(jì)?先掌握這份 Carplay 設(shè)計(jì)規(guī)范(上)

在設(shè)計(jì)這個(gè)相關(guān)的界面功能的時(shí)候,需要注意以下幾點(diǎn):

  • 播放音頻時(shí),提供有用的、準(zhǔn)確的信息,并且可以進(jìn)行明確的控制。
  • 不要重新定義播放控件的含義。
  • 在中斷播放一段時(shí)間之后,適時(shí)恢復(fù)并繼續(xù)音頻播放。

1.2、汽車廠商應(yīng)用

Carplay 能夠內(nèi)嵌到不同廠商的車中,自然也可以控制車內(nèi)的硬件。這一部分的硬件驅(qū)動(dòng)支持通常是由廠商提供,并且借由 Carplay 內(nèi)的界面,提供統(tǒng)一的交互體驗(yàn)。

想做好車載設(shè)計(jì)?先掌握這份 Carplay 設(shè)計(jì)規(guī)范(上)

  • 將控件和內(nèi)容限制在與汽車本身相關(guān)的范疇以內(nèi),不要加入無(wú)關(guān)的功能
  • 首選標(biāo)準(zhǔn)UI控件,包括按鈕、標(biāo)簽、導(dǎo)航、表單等控件,具體可參閱系統(tǒng)元素
  • 不要重新設(shè)計(jì)標(biāo)準(zhǔn)控件,確保整體的視覺(jué)和體驗(yàn)的一致性
  • 切勿模仿汽車本身的UI 界面設(shè)計(jì),確保 Carplay 內(nèi)的統(tǒng)一性

1.3、信息傳遞和 VoIP應(yīng)用

VoIP 也就是基于 IP 的語(yǔ)音傳輸功能,而在 Carplay 中,VoIP 應(yīng)用主要借助 Siri 服務(wù),并且全由 Siri 操控,它并不為用戶提供直接的交互界面,因此無(wú)需專門設(shè)計(jì) UI 界面。

想做好車載設(shè)計(jì)?先掌握這份 Carplay 設(shè)計(jì)規(guī)范(上)

它支持閱讀信息和編寫/回復(fù)消息,不過(guò)需要用戶授予權(quán)限

想做好車載設(shè)計(jì)?先掌握這份 Carplay 設(shè)計(jì)規(guī)范(上)

2.1、信息標(biāo)識(shí)

當(dāng)你的 APP 有推送信息未讀的時(shí)候,通常會(huì)在 APP 的右上角增加一個(gè)紅色的小紅點(diǎn)標(biāo)識(shí),并且其中會(huì)有一個(gè)白色數(shù)字用來(lái)標(biāo)識(shí)未讀信息的數(shù)量。

想做好車載設(shè)計(jì)?先掌握這份 Carplay 設(shè)計(jì)規(guī)范(上)

  • 盡量讓信息標(biāo)識(shí)足夠直觀。讓用戶打開APP之后能夠看到推送信息。
  • 保持克制。不要讓推送信息大量而頻繁,在這個(gè)場(chǎng)景下會(huì)讓用戶感到迷惑。
  • 注意重要信息的呈現(xiàn)。在標(biāo)簽欄和APP內(nèi)的重點(diǎn)位置凸顯重要信息,不要僅靠信息標(biāo)識(shí)來(lái)凸顯關(guān)鍵信息推送。
  • 避免使用警報(bào)提示來(lái)作為信息標(biāo)識(shí)的補(bǔ)充。即使有重要的信息,用戶也不希望你在打開APP的時(shí)候出現(xiàn)警報(bào)彈出框來(lái)推送信息。這些信息應(yīng)當(dāng)是可見(jiàn),顯著,但是用戶選擇是否要打開和點(diǎn)擊的。
  • 始終保持信息標(biāo)識(shí)是最新的。

2.2、錯(cuò)誤推送

對(duì)于錯(cuò)誤信息,應(yīng)當(dāng)妥善處理,并且絕對(duì)是要在必要的時(shí)候才推送報(bào)錯(cuò)信息。

  • 通過(guò) Carplay 推送錯(cuò)誤信息,而不是推送到連接的 iPhone 上去。
  • 優(yōu)先以非侵入性的狀態(tài)推送來(lái)推送報(bào)錯(cuò)信息,而不是直接彈出警報(bào)。

2.3、加載狀態(tài)

在加載內(nèi)容的時(shí)候,使用黑屏或者靜態(tài)的界面,可能會(huì)讓它整體上看起來(lái)像是死機(jī)了一樣,者可能會(huì)導(dǎo)致用戶離開。

想做好車載設(shè)計(jì)?先掌握這份 Carplay 設(shè)計(jì)規(guī)范(上)

  • 進(jìn)行加載的時(shí)候,盡量明確顯示加載狀態(tài)
  • 加載時(shí),盡快顯示主要內(nèi)容,使用文本和圖片占位符來(lái)呈現(xiàn)內(nèi)容布局,并且在完成之后替換,如果可能,盡量預(yù)加載已有內(nèi)容,再更新。

2.4、導(dǎo)航模式

在 Carplay 當(dāng)中,有2種常見(jiàn)的導(dǎo)航模式:

橫向?qū)Ш?。通常使用?biāo)簽欄來(lái)進(jìn)行導(dǎo)航,不同內(nèi)容橫向排布,用戶可以快速點(diǎn)擊不同標(biāo)簽切換。

想做好車載設(shè)計(jì)?先掌握這份 Carplay 設(shè)計(jì)規(guī)范(上)

分層導(dǎo)航。用戶在屏幕上點(diǎn)選不同選項(xiàng),通往不同的子界面。其中地圖應(yīng)用采用的是這種結(jié)構(gòu)。

想做好車載設(shè)計(jì)?先掌握這份 Carplay 設(shè)計(jì)規(guī)范(上)

音樂(lè)類應(yīng)用可以使用橫向?qū)Ш剑部梢允褂梅謱訉?dǎo)航,在設(shè)計(jì)導(dǎo)航的過(guò)程中,應(yīng)當(dāng)注意:

  • 盡可能讓用戶快速而輕松地獲取內(nèi)容。結(jié)構(gòu)化信息,讓用戶以最少點(diǎn)擊、滑動(dòng)來(lái)找到他們想要的東西。
  • 用戶在進(jìn)行返回操作的時(shí)候,請(qǐng)保留之前的界面,防止用戶迷失。避免音頻自動(dòng)播放,除非它是主要功能。
  • 為每一個(gè)界面分配一個(gè)固定清晰的路徑。
  • 盡可能使用標(biāo)準(zhǔn)的導(dǎo)航組件,比如使用選項(xiàng)卡菜單欄和列表視圖。
  • 使用導(dǎo)航欄應(yīng)該能夠遍歷所有的層次結(jié)構(gòu)。
  • 使用標(biāo)簽頁(yè)選項(xiàng)卡的時(shí)候,顯示同一級(jí)的內(nèi)容或者分類。

2.5、測(cè)試

全面的測(cè)試,是確保應(yīng)用可用性的重要前提。

  • 請(qǐng)?jiān)趯?shí)際與 Carplay 兼容的顯示器上進(jìn)行測(cè)試,最好是在真實(shí)的車上進(jìn)行測(cè)試。
  • 在惡劣的網(wǎng)絡(luò)條件下測(cè)試,比如穿越隧道或者網(wǎng)絡(luò)覆蓋狀況較差的區(qū)域。
  • 測(cè)試安裝和設(shè)置的流程中有沒(méi)有問(wèn)題,并且密切注意涉及到登錄和隱私相關(guān)的問(wèn)題。

3.1、音頻內(nèi)容

無(wú)論音頻是否是你的 APP 的主要內(nèi)容呈現(xiàn)形式,你都需要了解用戶對(duì)于音頻有哪些期待,并且盡量去貼合這些需求。

  • 只有當(dāng)準(zhǔn)備好播放之后,才會(huì)切換到「正在播放」的屏幕頁(yè)面。
  • 音頻加載完畢之后就可以開始播放,即使描述性的信息依然在加載。
  • 盡量避免自動(dòng)播放。
  • 如果被別的程序和提示打斷,在暫停之后再繼續(xù)恢復(fù)音頻播放。
  • 在必要的時(shí)候,自動(dòng)調(diào)整當(dāng)前內(nèi)容的音量,而不是整體的音量。
  • 在系統(tǒng)發(fā)出短提示音的時(shí)候,使用系統(tǒng)音量。比如警報(bào)。

3.2、汽車數(shù)據(jù)

在管理汽車功能的頁(yè)面當(dāng)中,廠商提供的功能和數(shù)據(jù)將會(huì)無(wú)縫的接入到 Carplay 當(dāng)中,比如氣候、網(wǎng)絡(luò)、GPS 等等。當(dāng)數(shù)據(jù)不可用的時(shí)候,盡量提供合理的響應(yīng)方式。

比如當(dāng)汽車通過(guò)隧道,沒(méi)有 GPS 信息的時(shí)候,盡量以不打擾的方式來(lái)告知用戶。

3.3、iPhone

Carplay 是和 iPhone 連接起來(lái)使用的,并且在程序數(shù)據(jù)上也相互兼容互通,只是Carplay 本身提供的是簡(jiǎn)化之后的 UI ,并且針對(duì)駕駛的場(chǎng)景進(jìn)行了優(yōu)化。

  • 當(dāng) Carplay 處于活動(dòng)狀態(tài)時(shí),隱去 iPhone 上的 APP 交互。
  • 請(qǐng)不要將 iPhone 和相關(guān)用戶置于 Carplay 范疇以外,因?yàn)檎J褂玫臅r(shí)候需要 iPhone 的數(shù)據(jù)接入。
  • 確保當(dāng) iPhone 鎖定或者在后備箱中的時(shí)候,你的程序可以正常使用。

3.4、旋鈕和控件

支持 Carplay 的車輛通常會(huì)有物理按鈕和旋鈕,它們可以作為 Carplay 交互的輔助。當(dāng)物理按鍵作為用戶的主要交互介質(zhì)的時(shí)候,通常至少會(huì)存在一個(gè) Siri 按鈕,導(dǎo)航控件,選擇控件,以及后退控件。

這些控件和 Carplay 應(yīng)當(dāng)高度對(duì)應(yīng),無(wú)論是播放、暫停、上一首/下一首 都應(yīng)該做出準(zhǔn)確的相應(yīng)。具體可以參閱:MPRemoteCommandCenter

想做好車載設(shè)計(jì)?先掌握這份 Carplay 設(shè)計(jì)規(guī)范(上)

當(dāng) Carplay 投射的屏幕不支持觸摸的時(shí)候,還有基于旋鈕的焦點(diǎn)式交互方式,當(dāng)用戶擰動(dòng)旋鈕的時(shí)候,能夠讓光標(biāo)從一個(gè)元素切換到另一個(gè)元素,激活并交互。

文章來(lái)源:優(yōu)設(shè) 作者:陳子木

藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)



分享本文至:

日歷

鏈接

個(gè)人資料

存檔