設計車用的 App 跟手機用的 App，有本質上的不同。車用 App 的內容和互動方式必須在不打擾開車的前提下，擴增駕車的體驗。在車上，開車才是最主要的行為，因此 UI 必須足夠簡單，讓駕駛人的眼睛能夠看著道路，而手也應該能夠放在方向盤上。App 不可分散使用者的注意力，除非有緊急到會影響開車的事情。

 

文 / Google 官方文件來源：https://goo.gl/vU5TEi，譯者：GelaTalk 車用通訊軟體公司

Designing for Android Auto

Designing for cars

設計車用的 App 跟手機用的 App，有本質上的不同。車用 App 的內容和互動方式必須在不打擾開車的前提下，擴增駕車的體驗。

在車上，開車才是最主要的行為，因此 UI 必須足夠簡單，讓駕駛人的眼睛能夠看著道路，而手也應該能夠放在方向盤上。App 不可分散使用者的注意力，除非有緊急到會影響開車的事情。

Android Auto 的操作方法、APIs 和介面樣版（templates)，在App和系統服務之間（包含media和messaging），提供了可預測的互動方式。APIs 和介面樣版可以客製化，以表現出您APP 的品牌和用戶體驗。

Creative vision

設計原則

Auto apps must be predictable and intuitive so that drivers can keep their eyes on the road.

Focus on primary actions and content：Apps 應該要為 Android Auto 平台特別設計。切勿直接把原本的 App 直接轉換成車用，卻不針對開車體驗做任何調整。

Avoid interfaces that require focused attention：複雜的動作和設定應該被設計在手機上操作，而非 Android Auto 上，例如：創建帳號、登入或建立 playlist。

Minimizing driver distraction

Google 很嚴肅的看待駕駛人分心這件事。在架構的設計上，Android Auto 堅持行車安全和避免駕駛分心，且應視為通用的準則。

App 介面的 navigate 方式要快速且簡易。所有 Android Auto 平台上的 App 都必須通過正式的 review，並且符合最起碼的安全和對駕駛人干擾度相關的要求和法規。

Typography

Fonts & sizing

Android Auto 和手機一樣使用 Roboto 字體。有兩種預設的字級大小，可幫助你在車用螢幕上確保可閱讀性。

• Primary font size：用來展示需要讓使用者做決策的資訊，如 playlist 的歌曲名稱
• Secondary font size：作為輔助資訊，不 critical 做決定的資訊，如 playlist 上的歌手

Text length

讓文字簡明，而可以看一眼就讀懂。截字時用…省略。

Auto scrolling：不可讓文字自動 scrolling。使用者要能夠自己控制顯示的速度和時間。

Colors and contrast

對比度：前景(如文字和 icon)和背景(如顏色， 專輯封面等)要有一定對比度，以符合開車

時的可閱讀性。使用足夠的顏色對比是為了要應對各種不同光源的環境，包含夜間、日

Night vs. day modes：

Content displayed during the daytime can be either positive (dark text on a light background) or negative (light text on a dark background).

Nighttime interfaces can only be negative (light text on a dark background).

Image

Imagery & video

圖像可被用來選擇地點。Video 和動態圖片是被禁止的。

如上圖例子：

• 在 Now Playing 的背景放上專輯的封面，再加上黑色的遮罩，以強化背景和文字的
• 如果縮圖可以輔助使用者選擇內容，可在清單內加入縮圖。

廣告只允許 audio stream 內的 audio 廣告。文字和圖像廣告在任何時候都不可以被展示。

System overview

System structure

Activity bar and app switching

Activity bar

固定在頁面底部，Activity bar 的 icon 連結到 Home screen 和下面幾類 activities

• Navigation (導航)
• Communication (通訊)
• Media (媒體)
• Car-related functions (汽車相關功能)

Switching apps

在 Activity bar icon 上點兩下，會展示這類 activity 所有已安裝的 Apps。

Home screen

當使用者把 Android 裝置連接到車子時，Home screen 會出現在車機的螢幕，內容是場

景相關的卡片(根據使用者的地點、時間等) 和經過過濾的通知訊息。

App consumption view

使用者可以使用側邊欄(slide nav)切換該 App 的內容類別或功能。側邊欄從螢幕邊緣滑出，離開側邊欄的方式有：

• 點左上角的 Back 鍵(類似 Android 手機的 Up 鍵)
• 點麥克風下方的空白區域

Demand layer (命令層)

Demand layer 負責聲音的指令動作和搜尋。點擊麥克風可以叫出 Demand layer。

Home Screen

The Home screen contains cards based on the user’s location， time of day， and other contexts.

Usage

使用者可以在 Home screen 上看到最近的通知訊息。

Home screen 卡片的數量有限，所以，你們 App 的訊息卡片有可能會因為有新的或相關的卡片進入而消失。不過，只要回到非車用模式，這些通知訊息還是找的到。

Home cards

系統會在卡片上展示 app content 和 meta information。這些元素的大小和位置，取決於比此之間的關聯性。

Intent icon：是系統 icon，用來展現動作的類別，像是聯絡人 導航 播放等等

Text：一個項目的簡述，可能包含次要文字和 meta information

Image：用圖像來提供補充性的內容

Active audio

Actively playing audio content is always available from the Home screen.

App consumption view

(上圖) 動作控制卡片是 icon-based 且水平排列的。使用者也可以透過 extended actions (三個點點) 翻出次要卡片。

App consumption view 是 Android Auto 內 App 預設的起始畫面。就像以前的車內收音機，一進入，內容都已經準備好被播放或檢視了。

所有的 view 都有一些共同的元素，例如 Action card 和 background。

透過 App 的 Drawer 和 Demand layer 導覽內容。

Drawer

Drawer patterns allow simple and quick access to content and actions while driving.

用法

Drawer 讓用戶可以 access to global actions 及優先程度高、對駕駛人有用內容。它不應該包含太長的清單，或只是切換相同內容的不同 view。

例如：playlists 或自動化的電台，比按照字母排序的專輯，內容存取效率更高。

Drawer item types

每一個 drawer 內的項目，必須提供一個單點擊的目標。

Content

單行(建議)：一個畫面僅顯示 5 個單行項目。

 

雙行：雙行包含額外的資訊，特別是額外資訊對用戶的選取很重要時

Categories：可以導引至下一層內容。在展示可以播放的內容之前的 level，最多兩層

Actions：屬於整個 app 的動作。切換兩個相同資料的 view，不屬於 action

Icons：一旦使用了 icon，這一層所有的項目都要有 icon。

Drawer content patterns

選取內容所需的步驟必須有一定的限制，嚴守駕駛人安全規範：取得 playable content 的步驟最多 6 個(通常是 6 個，某些狀況是 4 個)。所謂步驟的定義是：對螢幕遞送任何的指示(touch or click)，而切換到另一個 view。像是：

• 選擇一個項目
• 向前捲動(scrolling forward)以展示新的內容不過，向後捲動(scrolling backward)到之前的 view，不被視為一個步驟

下面這些用法是被允許的：

• 6 個步驟完成動作：This number may differ for some countries. For example， 4 steps is the maximum in Japan.

• 在兩個階層之後，展示內容：在展示 content list 之前，有兩個階層，是被允許的。

• Drawer 內一次最多展示 5 個項目，超過的必須透過捲動操作

最佳實務

簡化內容

• 專注在當下 contextual、即時新鮮且有用的項目
• 簡化 Drawer 的最上層
• 不需要捲動就可以展示大部分的內容

使用單行文字

• 可以一次看到比較多的內容(一個頁面可以到五個項目)
• Enable fast content scanning
• Display metadata at the other end of the line (when it facilitates selection)

Restrict usage of two-line items

• 當文字較多時才使用兩行
• 當這些訊息對做決定很重要時，才使用兩行

慎用 icons

• 只有在能幫助辨識項目時，才使用 icons

Demand layer

The Demand layer handles voice interaction and search.

用法

Demand layer 讓駕駛人可以使用語音去驅動一個新的動作，並且找到他們要的目標。它強化了搜尋的效果以及客製化 voice actions。

Interaction

駕駛人點擊右上角的麥克風，可以調用 Demand layer，將系統變成“listening”狀態。

Notification

只有重要到足以打斷駕駛人，且適合開車時出現的通知訊息才可展示。通知訊息必須符合規範。

用法

通知訊息由上往下進入。系統可能會限制訊息，判斷該訊息是否為高優先展示。

Notification 的解構

Image 和 icon：notification 來源的圖像，例如：頭像和 app 的 badge(icon 右下角的標章)搭配

Text：文字區域是通知訊息的點擊區域

Sound：由系統預設音效

壽命(Lifespan)

Timeout

通知訊息在 5 秒後消失。

已 Timed-out 的通知：

• 移到 Home screen 的卡片裡
• 往上排序在駕駛人手機訊息裡

Dismissal by user (用戶手動取消)

按右邊的 X，會讓通知消失。

已被 dismissed 的通知：

• 不會出現在 Home screen
• 還是會往上排序在駕駛人手機訊息裡

被 app 撤回

第三方 app 可以讓通知訊息撤回或中斷。

取代

系統可以把通知訊息置換掉，如果有更重要的訊息要被展示的話。

• 在 Home screen 還是可以被找到
• 還是會往上排序在駕駛人手機訊息裡

群組

在一段期間內，若有多個 app 的訊息，可能會被群組

Audio apps

Audio app 解構

media template structure 是刻意簡單的：

主要的 Consumption View 包含：控制卡片和完全出血(滿版)的背景圖像

次畫面(Drawer 內)展示 media content queue

 

Main Consumption View

Main Consumption View 是使用者打開 app 或服務的第一個畫面。包含控制卡和完全出血的專輯封面當背景。

Action card

展示 media app 常用的控制項在容易被 target 到的控制卡片上，像是 Play/Pause，

Previous， and Next。最多到八個控制項。

如果有超過 5 個 actions，應該要放到下一層。從最右方的 overflow button 進入。

Primary action card

為了確保跨媒體服務的一致性，actions 必須要按照一定的順序出現在卡片上，如上圖。

如果你的服務沒有提供 Previous 和 Next，則這兩顆按鈕可以被其它的取代。

Secondary action card

Secondary action card 展示另外 4 個 actions，像是讚或爛。最右邊的按鈕

保留做為回到 Primary action card 的用途。

Drawer

Drawer 揭露內容和必要的 actions。

App 的 drawer 應該被量身訂造：

• 最上面那一層是最常被使用的項目，像是 playlists 或頻道
• 讓用戶存取最喜愛或最受歡迎的內容

上圖 OK。秀出跟時間或情境相關的類別，像最近播放的歌手或最常聽的。將內容群組起來以方便快速瀏覽，例如：最愛的歌手，最近的歌曲或 recommended for you。

上圖 NG。不要用類似 “全部歌手” 或 “全部播放清單” 這樣的類別。會超過最大的步驟限制(美國是 6 步)。

Queue screen

Queue screen 展示待播放的內容。

正在播放的內容，會被釘在最上面。

點 action cards 上的 Queue button 進入 Queue screen。

Queue screen 能夠讓使用者：

• 快速切換其它的內容
• 點正在播放的項目，可以回到播放畫面

Messaging apps

Voice-based messaging

以聲音為基礎的通訊(Voice-based messaging)可以讓駕駛人在溝通時，將視線保持在道路上。Android Auto 的 Voice-based messaging template 使各個通訊軟體，使用單向的 navigation 方式(底下會說明)，而這些只使用文字做為溝通媒介的通訊軟體，例如 SMS 和 email，我們會把文字轉為語音。

用法

收到文字訊息時，會從螢幕頂部，由上而下滑出通知訊息。如果駕駛人沒有立即回應，之後可以在 Home screen 或者下車後的手機模式找到此訊息。

駕駛人可以透過兩個地方找到訊息：

• Notifications
• Home screen

Conversational flow

駕駛人使用單向的流程，播放和回應訊息，如下圖。

用聲音回應訊息：底下表格描繪語音指令回覆訊息的用法及順序。為了讓 Android Auto

了解，指令必須按照順序。

Notifications

Incoming messages are displayed as notifications that animate down from the top of the screen.

訊息通知的展示必須符合底下條件：

• 要夠重要，而足以打斷駕駛人
• 必須是開車時合宜的(They are appropriate for driving)

例如：有人送出加好友的邀請，並不適合打斷駕駛人

系統可能會限制訊息，判斷該訊息是否為高優先展示。訊息通知也應該符合相關法規和規範。

Use of Home screen

沒有被處理的訊息通知(由上往下滑出那個)會被自動 dismiss。然後以獨立卡片的形式出現 Home screen。

這些訊息卡片，有以下行為：

• 可能會被 ranked 或 grouped
• 有數量的上限 (清單的長度不能太長)
• 可能會被新的或相關的內容擠壓，而被離開 Home screen
• 下車後，都可以在手機模式找到

訊息卡片解構：

Image & Icon：頭像和 app icon 配對，以顯示出來自哪個 app

Content area：輕觸卡片會播放文字轉語音的內容 (text-to-speech (TTS))。播放完畢後，系統會展示回覆訊息的提示。

Colors & branding

Color themes

你的 App 可以套用 Material color palette。

Android Auto 可能會指定底下兩個色盤，做為系統色盤。

1. colorPrimaryDark

2. colorAccent

Day and night colors

白天的色盤使用深字淺底(如下左圖)，或淺字深底(如下右圖)皆可。

夜間的色盤只能使用淺字深底(如下右圖)，你也可以指定比範例更深的顏色。

Expressing your brand

在 Android Auto 裡，App 可以在藉由展示品牌名稱、Icon 和品牌顏色，來彰顯自己的品牌。表現方式如下例子：

品牌 logo 樣本

表現品牌的顏色 scheme

品牌在 notification 上展示

品牌在 Home screen 上展示

 

註：GelaTalk 是一款專為開車通訊而設計的 App，我們致力於發展更簡單、更安全的車載應用。本文翻譯自 Google 官方 Android Auto 設計準則，僅做為中文設計師或開發者快速了解 Android Auto 之用，精確之內容請直接參考 Google 官方文件。

加入 GelaTalk Facebook 專頁了解更多車載應用服務：https://www.facebook.com/gelatalk

---

訂閱 vide 最新訊息： vide 臉書粉絲頁 http：//facebook.com/videmedia