動態

動態影像是一項強大的工具,但在駕駛環境中應謹慎使用。只有當它能夠幫助駕駛員獲取資訊而不分散其註意力時,才是合適的。

簡要指南(TL;DR):

  • 避免用不必要的動作分散使用者的注意力
  • 利用動態效果來增進使用者理解並提升其熟練程度
  • 確保你的運動控制語言夠靈活,能夠相容於所有相關的硬體。
  • 根據您的具體情況,使用建議的動作模式。

運動原理

在為 Android for Cars 介面設計動態效果時,請牢記三個基本原則:安全、資訊豐富、靈活。

安全的

駕駛是用戶的首要任務——其他一切都是次要的。要將使用者的注意力視為有限的資源,避免利用動態效果造成不必要的干擾。

眼睛 gif

資訊豐富

利用動態效果傳遞訊息,幫助使用者理解產品。例如,動態效果可以透過展示元素之間的層級關係和空間關係,加深使用者對產品的理解。此外,動態效果還可以透過指示可用的互動方式,幫助使用者熟練介面操作。

資訊豐富的GIF

靈活的

定義一種具有可擴展性和靈活性的動態語言,以適應各種尺寸和形狀的螢幕以及各種類型的使用者輸入。

Flex 螢幕 gif

運動模式

為了確保所有應用程式都能提供一致的使用者體驗,Android Automotive 針對以下情況提供了特定的運動模式建議:

  • 在同一級別視圖之間切換
  • 切換到詳細視圖
  • 擴展現有行動
  • 最小化和擴大行動
  • 擾亂一項行動

本節的所有動畫效果均基於標準緩動,如 Material Design緩動指南中所述。也就是說,動畫速度會迅速加快,然後逐漸減慢,從而將觀眾的注意力吸引到過渡的最後階段。


在同一級別視圖之間切換

在應用程式中相同層級的不同視圖之間切換時,例如應用程式列中的標籤頁或播放清單中的歌曲,請使用左右滑動的動畫效果。這種水平滑動能夠強化使用者在應用程式內保持同一層級的概念。

同伴過渡範例
在 Android Automotive 系統中,使用者可以透過快速淡入淡出效果在導航應用程式和媒體應用程式之間來回切換。

例子

在 Android Automotive OS 中,媒體應用程式中從「首頁」標籤頁切換到「播放清單」標籤頁時的左右滑動效果,強化了這兩個標籤頁都是內容頂級視圖的概念。

切換到詳細視圖

從內容的高層視圖切換到細節視圖時,使用 Z 軸深度動畫,使底層視圖逐漸放大並淡入,同時高層視圖逐漸淡出。這種動畫強化了高層視圖和細節視圖之間的父子關係,從而將注意力吸引到細節視圖上。

父母到孩子的過渡
從父螢幕中,子元素向上提起並展開到位。

例子

切換到詳細視圖
在 Android Automotive OS 媒體範本中,當使用者點擊專輯網格中的特定專輯時,該專輯的歌曲清單會放大展開,使用戶能夠更清晰地查看詳細資訊。

擴展現有行動

當使用者正在進行某個操作並執行相關操作時,使用垂直(向上或向下)的滑動操作,在主操作上方以全螢幕疊加層的形式引入輔助操作,並帶有薄紗背景。透過薄紗背景可以看到主操作,可以強化使用者仍在執行當前操作的印象。

關閉輔助操作時,請使用該操作的反向動作。反向動作應比原始動作耗時更短,因為使用者已完成輔助操作並準備退出。

標註圖標
期間
Material Design 關於過渡時間應有多長的指導原則
輔助動作疊加
在此,次要動作透過疊加層從主要動作中升起,而主要動作則在布幕後方部分可見。

例子

Android Auto OS 操作疊加範例
在 Android Automotive OS 媒體範本中,當使用者點擊溢位按鈕展開控制列時,額外的控制項會彈出並顯示在疊加層上。

最小化和擴大行動

當要將已最小化到較小螢幕格式的正在進行的操作擴展以允許多任務處理時,請使用具有全螢幕淡入效果的擴展視窗遮罩。

最小化正在進行的動作時,請使用該動作的逆向操作。最小化動作應比展開動作耗時更短,因為使用者實際上正在結束當前動作,並準備將其關閉。

標註圖標
期間
Material Design 關於過渡時間應有多長的指導原則
展開最小化的螢幕
最小化的操作會逐漸擴展到全屏,並淡入顯示在目前操作之上。

例子

Android Automotive OS 控制列範例
在 Android Automotive OS 媒體範本中,最小化的控制列會展開成完整的播放視圖,然後在使用者點擊向下箭頭時會縮回最小化狀態。

擾亂一項行動

當需要在正在進行的動作上方突然出現一個短暫的、非阻塞性的動作時,可以將其從螢幕邊緣上下滑動(使用部分遮罩),或淡入螢幕中央(使用全遮罩)。從距離新動作出現位置最近的位置開始動畫。

簡短行動範例
當幹擾性動作應該出現在螢幕頂部附近時,用部分遮光簾從頂部將其滑入。

例子

對話範例
當 Android Automotive OS 媒體範本中間出現幹擾性操作時,它會以全螢幕遮擋的方式淡入,暫時將使用者註意力集中到新操作上-在本例中,該操作是請求使用位置資料的權限。