想做好車載設(shè)計(jì)？先掌握這份 Carplay 設(shè)計(jì)規(guī)范（下）

在上一篇文章當(dāng)中，我介紹了一些關(guān)于 Carplay 的基本原則和前一半設(shè)計(jì)規(guī)范。Carplay 總體上是在 iOS 的交互設(shè)計(jì)和視覺設(shè)計(jì)的原則上，針對(duì)汽車駕駛這一場(chǎng)景進(jìn)行了深入的優(yōu)化和約束。下半部分的將會(huì)涉及到視覺設(shè)計(jì)和具體 UI 控件的設(shè)計(jì)規(guī)范。

3.5、觸摸屏交互

用戶可以通過內(nèi)置的觸摸屏來與 Carplay 直接進(jìn)行交互。高保真屏幕可能會(huì)比低保真屏幕，在交互效率上更高，更低延遲，支持更多手勢(shì)。Carplay 的交互基本采用的都是單指交互，具體可以參考下方列表：

在設(shè)計(jì)交互的時(shí)候，盡可能少地使用觸摸交互，避免用戶在駕駛過程中分心。

3.6、Siri

Siri 是 Carplay 的基本功能，無干擾的語音讓用戶和程序之間的交互更加自然和安全

即使看不到 Carplay 的屏幕，依然可以使用方向盤上的語音命令按鈕來激活 Siri。激活后，Siri 會(huì)針對(duì)語言進(jìn)行處理和分析，并且轉(zhuǎn)換為可用的指令。

• 快速響應(yīng)，最大程度地減少交互。
• 使用自定義詞匯表，提升 Siri 的識(shí)別準(zhǔn)確度。用戶可以通過特定的術(shù)語來提升語音識(shí)別準(zhǔn)確度。

具體可以參與 SiriKit 編程指南。

4.1、動(dòng)畫

動(dòng)畫可以讓屏幕上的元素，擁有一層附加的視覺效果。如果方法得當(dāng)，動(dòng)畫還能呈現(xiàn)狀態(tài)，提供反饋，增加用戶直接操控時(shí)候的感覺，并且告知用戶可視化操作的結(jié)果。

• 不要為了使用動(dòng)畫而使用動(dòng)畫。過多不必要的動(dòng)畫會(huì)分散用戶注意力。
• 保持真實(shí)感和可靠。當(dāng)動(dòng)畫沒有意義且無視物理規(guī)律的時(shí)候，會(huì)讓用戶感到迷惑。
• 使用一致的動(dòng)畫效果。自定義動(dòng)畫應(yīng)該和內(nèi)置的動(dòng)畫保持一致。
• 將動(dòng)畫設(shè)為可選項(xiàng)。
• 更多動(dòng)畫的演示實(shí)例參考這里的案例：https://developer.apple.com/design/human-interface-guidelines/carplay/visual-design/animation/

4.2、品牌設(shè)計(jì)

成功的品牌設(shè)計(jì)并不只是把 LOGO 塞到 APP 當(dāng)中，出色的 APP 能夠巧妙地使用字體、配色和圖像來構(gòu)建獨(dú)特的品牌形象。

關(guān)于這方面的設(shè)計(jì)，可以詳細(xì)參考 iOS 設(shè)計(jì)規(guī)范中的 配色、版式以及 圖標(biāo)和圖像 這三個(gè)章節(jié)。

在品牌設(shè)計(jì)上，Carplay 要求設(shè)計(jì)師：

• 盡可能將品牌設(shè)計(jì)以精致醒目的方式呈現(xiàn)出來。由于車內(nèi)的使用場(chǎng)景，人們不會(huì)使用 Carplay 來查看廣告，最佳的用戶體驗(yàn)則是他們最需要的東西。
• 著重呈現(xiàn)品牌的一致性和功能性。確保你的 Carplay 界面是直觀且易于導(dǎo)航的，并且提供駕駛時(shí)真正有用的功能。
• 遵守 Apple 的品牌設(shè)計(jì)準(zhǔn)則。具體可參考：Apple Trademark List?和?Guidelines for Using Apple Trademarks

4.3、配色

通常，配色可以提供交互性，提供視覺連貫性，并且對(duì)界面賦予生命力。

• 你需要選擇和你的品牌LOGO可以搭配使用的配色方案。
• 避免讓交互性元素和非交互性元素使用相同的配色。
• 在實(shí)際汽車環(huán)境下，對(duì)你的配色方案進(jìn)行測(cè)試。
• 盡量使用深色背景。
• 注意不同文化對(duì)于色彩的理解，以及色盲用戶的需求。
• UI中采用足夠明顯的色彩對(duì)比。

4.4、布局

Carplay 支持不同像素密度不同縱橫比的顯示，但是這也意味著在實(shí)際布局設(shè)計(jì)的時(shí)候，要格外小心，盡量讓你的設(shè)計(jì)在不同的屏幕分辨率和長(zhǎng)寬比之下，都顯得足夠正常。

• 以整潔的布局提供有用的信息，讓駕駛者可以一目了然地掃視到信息。
• 在整個(gè) APP 內(nèi)部保持一致的外觀。

• 確保主要內(nèi)容足夠清晰醒目，并且感覺上是可用的。
• 使用對(duì)齊的方式來保持清晰的層次結(jié)構(gòu)，一目了然。
• 為交互元素留出足夠的間距和交互空間。
• 基于駕駛員的位置來排布元素，盡可能順手。
• 考慮物理控件對(duì)于界面的影響。

4.5、字體版式

Carplay 采用的字體是蘋果的 SF 字體。你可以在這里下載到字體：

• 最小程度使用文本，使用圖像信息傳遞速度更快。
• 強(qiáng)調(diào)重要信息。通過色彩和字體粗細(xì)，來凸顯最重要的信息。
• 避免使用自定義字體。
• 盡可能使用內(nèi)置的文本樣式。
• 使用正文文本樣式作為主要內(nèi)容的字體。
• 使用 SF 字體的時(shí)候，Carplay 會(huì)根據(jù)最佳的文本大小自動(dòng)適配間距。

5.1、圖片尺寸和分辨率

和 iOS 類似，在 Carplay 當(dāng)中，屏幕分辨率也分為 1x 2x 和 3x。

5.2、APP 圖標(biāo)

每個(gè) Carplay APP 都應(yīng)該有一個(gè)顯著突出的圖標(biāo)，確保在駕駛的時(shí)候可以輕松點(diǎn)擊到。

• 可以直接使用 iPhone 的 應(yīng)用圖標(biāo)。
• 不要使用黑色作為圖標(biāo)的底色。
• 設(shè)計(jì)圖標(biāo)的時(shí)候，圖標(biāo)應(yīng)該有視覺焦點(diǎn)。
• 采用簡(jiǎn)單且易于理解的圖標(biāo)設(shè)計(jì)。
• 確保圖標(biāo)本身是不透明的，并且讓圖標(biāo)背景足夠簡(jiǎn)單。
• 不要在圖標(biāo)當(dāng)中使用照片、截圖或者其他界面元素。
• 不要在APP的具體界面當(dāng)中使用 APP 圖標(biāo)，避免混淆。
• 設(shè)計(jì)完成的圖標(biāo)應(yīng)該是方形的，系統(tǒng)會(huì)使用蒙版將邊緣處理為圓角矩形。
• Carplay 的圖標(biāo)尺寸分別為 @1x 60x60px ；@2x 120x120px ；@3x 180x180px

5.3、自定義圖標(biāo)

如果你設(shè)計(jì)的 APP 當(dāng)中，需要的圖標(biāo)并不存在于系統(tǒng)圖標(biāo)當(dāng)中，或者系統(tǒng)圖標(biāo)與你的 APP 并不匹配，可以自定義圖標(biāo)設(shè)計(jì)。

• 創(chuàng)建簡(jiǎn)單的，可識(shí)別的圖標(biāo)設(shè)計(jì)。不要加入過多的細(xì)節(jié)，確保可讀性。
• 設(shè)計(jì)圖標(biāo)的時(shí)候，使用透明背景、抗鋸齒且無陰影的純色圖標(biāo)。
• 保持圖標(biāo)在風(fēng)格、尺寸以及各個(gè)規(guī)格上的高度一致。
• 在設(shè)計(jì)選項(xiàng)卡圖標(biāo)的時(shí)候，選擇兩種不同版本的圖標(biāo)，分別是選中狀態(tài)和未選中狀態(tài)的。

• 不要在標(biāo)簽欄圖標(biāo)當(dāng)中使用文本，如果需要，則在標(biāo)簽欄下方的標(biāo)題中說明。
• 自定義圖標(biāo)尺寸要求如下：

5.4、系統(tǒng)圖標(biāo)

系統(tǒng)本身內(nèi)置了許多小圖標(biāo)，服務(wù)于日常各種不同的任務(wù)，通常這些小圖標(biāo)會(huì)使用在導(dǎo)航欄和標(biāo)簽欄當(dāng)中，盡可能使用這些內(nèi)置的圖標(biāo)。

• 按照用戶習(xí)慣和預(yù)期來使用這些系統(tǒng)圖標(biāo)。
• 如果找不到滿足需求的圖標(biāo)，就請(qǐng)使用自定義圖標(biāo)。
• 在導(dǎo)航欄中使用圖標(biāo)的時(shí)候，具體可參閱這份文檔：UIBarButtonItem

• 在標(biāo)簽欄中使用圖標(biāo)，請(qǐng)參考這份文檔：UITabBarItem

6.1、上拉菜單（Action Sheets）

上拉菜單是一種特定的彈出菜單，通常從屏幕底部彈出，并且包含2個(gè)以上的選項(xiàng)。不過在 Carplay 當(dāng)中應(yīng)該盡量避免使用上拉菜單，在 iPhone 上倒是可以使用它，但是不要在 Carplay 中顯示。

6.2、活動(dòng)指示器（Activity Indicators）

在內(nèi)容加載的過程當(dāng)中，請(qǐng)勿讓屏幕保持靜止，或者空白，使用活動(dòng)指示器確保它看起來沒有靜止。

如果可以的話，可以在加載過程中提供對(duì)用戶有幫助的信息。具體可以參考 UIActivityIndi??catorView

6.3、警告（Alerts）

警告會(huì)用來通知用戶一些關(guān)鍵性的信息，警告通常由標(biāo)題、可選信息以及一個(gè)或者多個(gè)按鈕組成。除此之外，警報(bào)的視覺系統(tǒng)是靜態(tài)的，無法自定義。

警告最小化呈現(xiàn)。由于警告本身會(huì)破壞用戶體驗(yàn)，所以請(qǐng)?jiān)谥匾那闆r下使用警報(bào)。
相關(guān)開發(fā)人員可以參考這份文檔：UIAlertController

• 盡可能編寫足夠簡(jiǎn)單的、描述性的文本標(biāo)題。
• 請(qǐng)盡量使用簡(jiǎn)短完整的句子。
• 避免讓文本聽起來上指責(zé)、評(píng)判或者侮辱。
• 不要對(duì)警報(bào)按鈕進(jìn)行解釋。
• 單鍵警告僅僅具備通知的作用，通常采用有2個(gè)選項(xiàng)的兩鍵警告。
• 給警告按鈕以足夠簡(jiǎn)明的邏輯和標(biāo)題。
• 在右側(cè)放置常用的選項(xiàng)，在左側(cè)放置取消按鈕。
• 對(duì)取消按鈕采用正確的文本標(biāo)簽。
• 對(duì)于涉及刪除的破壞性操作，應(yīng)該采用特別的樣式標(biāo)識(shí)出來，具體可以參考
• UIAlertActionStyleDestructive 和 UIAlertAction 這兩份文檔。
• 允許通過點(diǎn)擊「Home」按鈕來消除警告。

6.4、按鈕（Buttons）

按鈕通常可以用來觸發(fā)一些特定的操作，具有可自定義的背景，并且可以包含標(biāo)題和圖標(biāo)。和 iOS 不同，Carplay支持的按鈕樣式非常有限。

• 在按鈕標(biāo)簽中使用動(dòng)詞。
• 保持標(biāo)題足夠簡(jiǎn)短
• 僅在必要的時(shí)候，添加邊框和背景
• 更具體的開發(fā)參考 UIButtonTypeSystem 和 UIButton

6.5、標(biāo)簽（Labels）

標(biāo)簽是推送到屏幕上的一條短消息，這個(gè)標(biāo)簽可以顯示任意數(shù)量的靜態(tài)文本。在設(shè)計(jì)標(biāo)簽的時(shí)候，盡量保持標(biāo)簽清晰易讀。具體開發(fā)可參考UILabel。

6.6、導(dǎo)航欄

導(dǎo)航一般在屏幕的頂部，通常導(dǎo)航欄右側(cè)會(huì)有返回按鈕，中央是標(biāo)題。有時(shí)右側(cè)會(huì)有其他的可交互的控件。

• 在導(dǎo)航欄中間顯示當(dāng)前視圖的標(biāo)題。
• 避免在導(dǎo)航欄上放過多的控件。
• 不要包含多段式面包屑導(dǎo)航。
• 導(dǎo)航欄標(biāo)題應(yīng)該給按鈕留下足夠的空間。
• 使用標(biāo)準(zhǔn)的返回按鈕。
• 開發(fā)請(qǐng)參考 UINavigationBar 這份文檔

6.7、滾動(dòng)視圖（Scroll Views）

滾動(dòng)視圖讓用戶可以瀏覽到更多的內(nèi)容，用戶可以用滑動(dòng)或者輕拂來進(jìn)行瀏覽信息。

• 不要將一個(gè)滾動(dòng)視圖嵌套到另外一個(gè)滾動(dòng)視圖當(dāng)中。
• 通常，一次只顯示一個(gè)滾動(dòng)視圖。
• 開發(fā)可以參考文檔：UIScrollView

6.8、標(biāo)簽欄（Tab Bars）

標(biāo)簽欄通常出現(xiàn)在屏幕頂端，并且用戶可以借此快速切換。邏輯上標(biāo)簽欄可以包含無限多的 Tab，但是可見的標(biāo)簽數(shù)量，會(huì)根據(jù)實(shí)際顯示尺寸而有所不同。

• 通常標(biāo)簽欄展現(xiàn)的是平鋪的信息層次結(jié)構(gòu)。
• 選項(xiàng)卡功能不可用的時(shí)候，不要?jiǎng)h除或者禁用該選項(xiàng)卡。
• 嚴(yán)格使用標(biāo)簽欄來進(jìn)行導(dǎo)航。
• 通常使用 3 個(gè)到 5 個(gè)選項(xiàng)卡。
• 使用圖標(biāo)來標(biāo)示標(biāo)簽欄，會(huì)更加通俗易懂。
• 具體開發(fā)可參考文檔：UITabBar

6.9、表格（Tables）

表單通常會(huì)以單列的樣式存在，干凈有效地呈現(xiàn)大量信息。

• 考慮表單的寬度，避免難以讀取。
• 盡可能快速地顯示表單的內(nèi)容。
• 在加載的時(shí)候，結(jié)合活動(dòng)指示器呈現(xiàn)進(jìn)度。
• 具體參考開發(fā)文檔：UITableView

在具體的表單條目的設(shè)計(jì)上，也有詳細(xì)的規(guī)格要求。

默認(rèn)樣式，左側(cè)可放置圖片，并且標(biāo)題也是靠左對(duì)齊的。具體參考文檔：UITableViewCellStyleDefault 以及 UITableViewCell

副標(biāo)題樣式。這是包含標(biāo)題和副標(biāo)題的一種樣式，兩者靠左對(duì)齊，上下排布。具體參考文檔：UITableViewCellStyleSubtitle 和 UITableViewCell

Value1 樣式。標(biāo)題靠左對(duì)齊，副標(biāo)題靠右對(duì)齊。具體參考文檔：UITableViewCellStyleValue1 和 UITableViewCell

Value2 樣式。標(biāo)題和副標(biāo)題文本都靠右對(duì)齊，具體參考文檔：UITableViewCellStyleValue2 和 UITableViewCell

• 保持文本足夠簡(jiǎn)介，避免無法完整顯示。
• 點(diǎn)擊選擇之后，記得顯示反饋。
• 為非標(biāo)準(zhǔn)表格設(shè)置自定義樣式。
• 更多開發(fā)細(xì)節(jié)參考文檔：UITableViewCell

參考來源：

https://www.apple.com.cn/ios/carplay/

https://developer.apple.com/design/human-interface-guidelines/carplay/overview/introduction/