Android 手錶設計規範【譯】 Android 手錶設計規範 Android 手錶創新理念 Android 手錶設計原則 Android 手錶應用架構 Android 手錶場景感知 Android 手錶控件類型 Android 手錶設計風格 Android 手錶錶盤設計

android_wear_design_title

Google 著    Tsongli 譯

爲可以穿戴的Android手錶設計應用與爲手機和平板設計應用有很大的區別:不同設備有着不同的優勢及劣勢、不同的應用場景及人體工學考量。想要開始設計,我們應該對Android手錶體驗有個整體的認識,並且知道應用怎樣融入才能改善這種體驗。我們還提供了設計源文件以及UI資源,供您 下載

1451353243_80_w240_h69 一種新形式的設備應該對應一種全新的UI模式。概括地說,Android手錶UI主要由兩大類型的模式組成:這兩個部分是“提示”(Suggest)和“命令”(Demand)這兩部分將會在您的應用中佔有極其重要的地位。

提示:情境信息流


stream 情境信息流是一個垂直的卡片列表,每張卡片展示了一個有用的或者適時信息,非常類似於手機和平板上Google Now功能。用戶可以垂直滑動來切換卡片,每次滑動只展示一張卡片。卡片的背景圖片可以用來傳達附加視覺信息。我們的應用也可以在適當的時間或情境下插入自己的卡片。

這種UI模型的好處是:可以保證用戶不必爲了查看是否有新的動態而啓動太多應用。他們可以簡單的瞥一眼信息流,就可以知道最新消息,並且判斷出哪些對他們是有用的。

信息流中的卡片比簡單的通知消息有更多功能。可以水平滑動卡片來顯示附加的頁面信息。再次水平滑動可以顯示動作按鈕,這些按鈕允許用戶在提醒消息上進行操作。通過從左向右滑動可以忽略卡片,把他們從信息流中移除,直到該應用有新消息要展示的時候。

命令:提示卡片


cuecard 如果Android手錶沒有在信息流中主動展示建議卡片的時候,用戶可以通過提示卡片與手錶直接對話。用戶可以直接說“OK Google” 提示卡片將會被打開。向上滑動提示卡片會展示建議的語音需求列表,也可以點擊卡片來展開列表。

每一條推薦語音命令能夠觸發一類特定的內容。開發者可以將你的應用與這些語音命令配對,這樣用戶就可以用這些語音需求來完成任務。可能多個應用會註冊同一個的語音命令,但用戶可以選擇他們想要使用的應用。

應用響應語音命令的方式與響應建議卡片中的操作按鈕的方式相同:可以是添加或者更新建議卡片的方式,或者可以啓動一個全屏應用來響應。語音輸入經常是命令的形式,例如“提醒我去買牛奶”,這種情況下,只要簡單反饋給用戶確認動畫,然後便可以自動返回之前的情境信息流中。

其他UI特性


  • 設備上默認顯示的是 主屏幕 :
    • 背景信息:展示與首張卡片相關的內容或顯示用戶自定義的錶盤。輕觸背景或者說“OK,Google”來進行語音搜索。
    • 狀態指示:顯示連接情況,充電狀態,是否處於飛行模式或未讀消息數量。
    • 情境信息流中的首張卡片會顯示在屏幕底部。不同的錶盤設計決定該卡片的露出程度。
  • 錶盤設計 :用戶可以選擇不同的錶盤設計以便在主屏幕顯示不同的背景。錶盤一般用來展示時間以及容納情境信息流卡片。用戶可通過長按當前錶盤來選擇自定義錶盤設計。
  • 某些設備會在用戶無交互時進入低功耗的 省電模式 ( Ambient Mode ) 該模式下屏幕通常會自動調暗亮度。卡片信息也會相應地自動進行優化,以便更好展示。用戶可通過輕觸屏幕、向內側轉動手腕,或按下設備實體按鍵來退出省電模式。
  • 在主屏幕向下滑動,可以顯示 日期及電量 信息。繼續向下滑動會切換到 靜音模式 ,以關閉震動提醒和亮屏通知。
  • 設置界面 :可通過卡片激活或者通過某些設備上的實體按鍵進入。用戶可在此處關閉或重啓設備、調節屏幕亮度、切換飛行模式以及查詢設備信息。
  • 全屏應用 :可通過信息流頂部進入。雖然系統在風格上並不限制只能採用信息流樣式,但應用應儘量遵從系統設計原則。

Android手錶能夠在適當的時候提供合適的信息,讓用戶在虛擬的世界和現實世界有更多的連接。完美的android手錶體驗可以大致歸納爲以下幾個方面:

自動啓動


vision_traffic 大多數人習慣通過點擊一個圖標來啓動應用,Android手錶則不同。手錶中的應用能夠感知到用戶的情境時間、地點、物理活動等。當檢測到情境相關的時候,應用會自動地將相應卡片插入到信息流中。這種方法讓android手錶實時響應、與用戶任務高度相關而且非常聚焦用戶任務。

掃視可見 (Glanceable)


vision_navigation 經典款手錶設計能夠讓你在不停下手頭事務的情況下瞬時看到時間。Android手錶設計也應該遵循這一原則。用戶花僅僅少量時間使用手錶上的軟件,更多的時間可以專注於他們正在做的事情上面。Android手錶的體驗應該是是迅速、聰明、隨時隨刻的。

始終圍繞提示和命令


vision_voice Android手錶就像個人助理:她瞭解你和你的喜好,她只在非常必要的時候纔會主動打擾你,並且它總是能夠提供一個準備好的答案。Android手錶是樂於助人的、有禮貌的、反應敏捷的。

儘可能少的交互 (Zero or low interaction)


vision_music 基於小型設備的特點,Android手錶注重非常簡單的交互形式。僅僅在非常必要的時候才需要用戶輸入。大多數輸入基於手指滑動或者語音,避免一切需要用手精細操作的輸入行爲。Android手錶是手勢爲主,簡單快捷。

通過一種既不過分打擾用戶當前任務,又能夠使用戶智能地與外界保持關聯的方式,Android手錶會使人感覺既個人又整體、既簡單又智能,既不張揚又隨時待命。遵從這些原則的應用,在整個Andorid手錶體驗中會顯得自然,毫不突兀。

第三方軟件能夠通過更加具體的方式幫助用戶,並能夠延展Android手錶的體驗。用戶通過主動安裝應用的方式,能夠使得Android手錶更好地爲之服務。

這裏提供一些簡單的設計原則來啓發您如何計劃和進行Android手錶應用設計。

不要妨礙用戶


five_seconds 手錶本身就是一種用戶一邊做事一邊使用的設備。比如在煮飯、吃飯、走路、跑步甚至和別人聊天時使用。如果你發現用戶必須停下自己手裏的事情才能使用某個手錶應用,那麼這個應用就有很大的改進空間。

嘗試一下:
看用戶能否在5秒內使用你的應用來完成一項任務?
用戶能不能一邊聊天一邊輕鬆地使用你的應用?
注意觀察用戶在使用應用時是否會影響到他談話的思路以及和對方的眼神交流。

不要設計精細操作手勢 (Design for big gestures)


biggesture 當你在手機上滑動瀏覽照片的時候,很大一部分的顯示區域都可以響應手勢操作,而且無需精準操作,類似這樣的交互就非常適合在手錶上採用。
用戶會在各種場景下使用手錶應用,最不常見的一種場景應該是:端坐在桌前,專心地使用手錶應用。

嘗試一下:
在各種場景下測試你的應用,比如跑步、吃飯、聊天或者點餐的時候。
如果用戶必須停下來手裏的事情或者需要放慢速度才能準確點擊某款手錶應用上的按鈕,
那麼你需要採用容錯率更高的手勢操作。

優先考慮使用卡片流


wear_checkin 穿戴式設備能夠給用戶最好的體驗就是猜中用戶的心思,主動提供給用戶他們在特定場景下所需要的信息。可以利用設備裏的各種感應器以及雲端同步的各種信息來分析何時展示什麼卡片。實在不知道用戶想要什麼的情況下,再利用語音或者手勢交互的形式。

嘗試一下:
列出用戶可能需要使用該應用的所有可能場景。看看這些使用場景之間有什麼共同點?比如相同的地點?每天相同的時間?相同的軀體運動?相同的生理指標?然後你就能夠分析出在什麼場景下給用戶推送你的應用程序信息了。一定要記住,如果用戶覺得你給出的建議那麼不相關的話,用戶隨時有權利刪掉你的建議卡片。

每次只做一件事


雖然用戶每次打開應用只用短短幾秒鐘,但全天重複使用率非常高,比較好的設計應該是:默認顯示的信息量很少,通過滑動纔看到更多的操作

嘗試一下:
看看你的應用默認顯示的信息有多少?所有這些信息是否都是必須的?能否分幾張卡片顯示?設計卡片信息的時候切記卡片是可以分多頁展示的。

爲餘光設計


用戶持續使用應用的時間越久,就會越和現實世界脫節。所以設計方案應該儘可能方便用戶掃視手錶界面,並迅速返回現實世界中來。

嘗試一下:
利用餘光來檢視你的應用,當手表應用界面顯示的時候,儘可能的盯着你的手指關節。看看這種情況下,你是否還能夠明白應用想傳達什麼信息?是否能一眼就看出這是哪個應用?卡片的背景圖片是否能夠傳達界面想傳達的信息?是否使用了照片或者明顯的圖形或顏色?

別總拍我肩膀 (Don’t be a constant shoulder tapper)


手錶戴在手上,與手機不用的一點在於,設備直接接觸皮膚。作爲一個與用戶如此親密接觸的設備,震動提醒用戶的次數應該比手機應用要少的多。

嘗試一下:
想象一下你正在和朋友談話的時候,有人突然輕拍你的肩膀,告訴你一條信息。分析一下這個場景下,你想傳達的紙條信息值不值得打斷用戶的談話?如果不值得?就儘量不要打斷用戶。

用戶習慣於點擊icon來打開一個應用,Android wear則完全不同。典型的Android wear應用會在時機合適,情境適當的情況下,在卡片流中加入一張卡片展示。卡片上可能會加入一個能夠展示全屏應用的按鈕,以便後續的簡單交互,但是通常情況下也可以不加。
提示卡片、卡片流、這些是構建Android應用的基本元素,你可以利用這些元素打造所需的應用體驗。官方強烈建議:不要設計一款用戶必須自己考慮何時何地、在什麼場景下,需要打開什麼應用才能滿足我當前的需求的應用。

  • 卡片流中的情境卡片包括 :
    • 同步提醒: 比如新消息的提醒,會通過Android系統的消息通知中心從手機端推送至手錶端。只需要根據手錶應用做少量代碼改動便可以實現。
    • 情境提醒: 比如健身類的卡片,會在手錶檢測到你開始跑步時自動展示。情境式提醒一般只在情境相關的時候出現,而且通常隻手表端展示,不會同步在手機端提示。通常情況下,情境式卡片能做的事情比手機端的同步提醒要多很多。
  • 全屏應用 :
    • 二維選擇卡: 二維選擇卡允許用戶從給定的一組元素中選擇某個元素,比如在音樂應用中選擇歌手、選擇專輯等。
    • 定製化佈局: 如果你覺得卡片和卡片流的隱喻方式不能滿足你的需要,也可以給出定製化的界面設計方案,比如給出圖表或者地圖。
    • 保持應用始終顯示: 某些信息如需持續更新顯示或者與用戶當前的任務持續相關,則可以採用這種顯示模式,應用處在省電模式顯示時不會消耗過多的電量。

同步提醒


bridgednotifications Bluebird 這是在Android手錶上獲取信息最簡單的方法。實際上如果你的手機應用能發送消息推送的話,就會自動同步給手錶。你可以通過調用通知API,,在手錶上同步提醒中添加額外的頁面展示或語音回覆功能。

情境提醒


context_workout 在用戶需要的時候,向用戶展示信息和功能這正是Android手錶最擅長的部分。

context_lights 提醒的方式大致是這樣:
首先應用需要預判出何時纔是與用戶情境相關的合適時機,然後當時機到來時a應用會觸發一條通知。比如你想設計一款用戶在跑步時候會用到的應用,或者用戶參觀博物館會用到的博物館導覽應用,都是合適推送情境提醒的時機。

想要設計優秀的Android手錶體驗,選擇合適的用戶情境觸發提示是至關重要的。最簡單的方法是利用標準Android提醒消息模板,也可以製作自己的版式。如果決定要採用這種方式,我們強烈建議您參考官方樣式規範,以確保您的設計與系統其他樣式保持一致。最好徹底的測試一下應用的觸發機制。觸發過於頻繁會打擾用戶,導致用戶將你的所有提示都關掉。

二維選擇卡


二維選擇卡很適合展現一個系列的選項。比如Google搜索結果頁就是一個很好的範例。

1D_picker

這種樣式可被用於展現單一縱向列表,或“一維選項”

2D_picker

該樣式同樣也可被用做二維選項矩陣,用來表示不同類別的選項

動作命令

有關卡片上的動作命令部分,請參見動作卡片樣式部分。

便捷選擇 (Making it fast)

2d_picker_indicated 關於二維選擇卡,有一些使用原則需要注意:

  • 儘可能減少卡片的數量
  • 會頻繁使用到的卡片應該在最上層
  • 卡片的內容和樣式都應該儘量簡單
  • 優先考慮方便用戶快捷操作,其次纔是定製化和個性化的需求

如何退出

當用戶做出選擇後,應用應該自動退出二維選擇卡界面。用戶也可以向下滑動第一張卡片來退出,或者從左向右橫滑處每個層級最左側的卡片來退出。

打破卡片佈局 自主定製界面


某些情況下卡片的形式不能夠滿足需求比如拖動底圖或者控制遊戲方向搖桿的需求。這時就應該暫時進入全屏模式。Android手錶上的典型的全屏應用使用體驗如圖所示:
1451368091_2_w708_h252

何時應全屏展示

官方建議只有在卡片本身不能滿足需求的時候才應該進入全屏,進入全屏後應該讓用戶在完成簡單操作後迅速退出全屏,返回卡片流當中。這樣做用戶會感覺你的應用和手錶本身的體驗更好的融合,交互體驗也更加統。Android手錶本身在語音回覆和秒錶應用中採用了全屏界面的展示方式。

有所區分

全屏應用還有幾點需要注意:不要讓全屏界面長得太類似卡片,以免讓用戶產生混淆。如果應用想延續系統的卡片樣式風格的話,可以採用二維選擇卡的方式

自動退出

很多手錶設備上都沒有返回或者home鍵,所以該如何讓用戶退出是值得好好考慮的問題。這裏給出幾種自然退出的場景供大家參考:

  • 地圖應用中如果需要用戶選擇某個地點,那麼用戶在紮下marker後,應用就可以退出,返回到卡片流中
  • 如果是一款小遊戲應用,那麼遊戲結束時自動退出是一種比較自然的方式
  • 如果是一款繪畫的應用,用戶5秒鐘沒有響應時,可以自動退出

手動退出

即便設置了自動退出的機制,也擋不住某些時候用戶希望立即退出的慾望。這種情況下,用戶長按屏幕的行爲可以視爲是希望退出應用的信號。

保持應用始終顯示


Android手錶應用有兩種模式:

交互模式

界面顯示顏色,用戶可以與應用交互。

省電模式

界面只有黑白和少數灰色顯示的省電模式。

交互模式可以展示實時信息,並相應用戶操作,但是非常耗電。如果想持續展示有效信息並且還想省電的話,應用可以切換爲省電模式。應用處於省電模式時仍可展示動態數據。如果你的應用需要顯示持續更新的數據時,這種模式就會非常有用。比如一款記錄跑步距離的應用、或者類似購物清單這種需要持續展示動態變化的信息供用戶參考的應用。

Andorid 手錶上的省電模式體驗如下圖所示:

interactive_run ambient_run interactive_list ambient_list

應用處在省電模式下時,應去除一切允許用戶交互的元素,以免用戶誤解當前處在交互模式下,並考慮在這種模式下展示時間信息

更新頻率

處於省電模式下的應用基本上每分鐘更新一次數據來省電。你也可以把更新頻率調整成爲10秒一次,但每次更新數據都會消耗電量。

可交互元素

不要在省電模式下展示任何按鈕或其他和交互元素,以免用戶誤解當前處在交互模式下。

顏色和亮度

使用灰色的元素來讓用戶明白必須喚醒設備才能夠交互。由於在低照明的環境下,任何一個不是黑色的像素都會變得異常明顯,所以官方建議在省電模式下,儘可能的使用純黑的背景。

用戶隱私

在設計和開發一款帶有省電模式的應用時,還應該考慮用戶的隱私問題。舉個例子,顯示一款聊天軟件的對話消息提醒是很有用的,但如果在省電模式下持續在手錶界面上展示最新消息可能會帶來某些用戶隱私泄漏的問題。這時可以考慮在屏幕無響應一段時間以後自動刪除隱私信息顯示,或者在進入省電模式時根本不顯示隱私信息。

在android手錶上一些最有力的用戶體驗基於情境感知提醒和操作。通過使用設備傳感器和其他情境線索,當用戶需要的時候你的應用可以精確地顯示信息和功能,一眼就能看見。

比如一款餐館推薦的應用,當應用識別出用戶正在某個餐館裏面時,應用可以推薦這個餐館裏最受歡迎的菜品。下面舉幾個例子來展示你可以在你的android手錶應用裏用提醒和操作確認做哪些事情。

1451369395_76_w796_h695

1451369436_13_w792_h690

1451369447_11_w796_h697

Android手錶主要採用微交互的形式與用戶互動,所以沿用用戶已熟知的設計樣式是至關重要的。

卡片


卡片流中的卡片分爲幾類:

Bluebird single_action_controls expandable_stacks

  • 標準卡片用來展示通知信息
  • 控制開關(比如切換播放和暫停)
  • 可以展開的一疊卡片,用來展示一組相關的通知

應用圖標


clear_bold_type 應用圖標顯示在卡片的右上角固定位置,用來在卡片流中區分消息卡片的來源。圖片背景用來傳達卡片信息而不是用來展示品牌。只有最左側的卡片需要展示圖標,右側的頁面中無需展現圖標。

頁面


separate-info-cards 更詳細的信息可以展示在附加的卡片中。在卡片流中向左滑動卡片可以展示詳情頁面。通常情況下,一張附加卡片就足夠顯示所有信息。比如天氣卡片會展示當前地點現在的天氣情況。

未來幾天的天機情況則會展示在右側的詳情頁面中。詳情卡片應該越少越好,應該保持卡片>詳情頁面>命令按鈕 這樣的順序。不要打亂順序或者交錯出現。

刪除卡片


通過從左向右滑動可以忽略卡片流中的卡片。被忽略的卡片會在下次應用有新的信息需要展示時出現。卡片流中的卡片一旦被忽略,那麼相應的信息也會同步在手機端被刪除。
dismiss_cards

動作按鈕


action_button 在某些情況下,用戶可能需要對卡片上顯示的信息作出某種操作,這時候可以提供一個動作按鈕。按鈕顯示的順序是詳情頁面片卡的右邊。按鈕的樣式是系統生成的藍底白色圖標圓形button,底部附帶一個簡短的動詞來說明按鈕的含義。每組卡片最多不超過三個動作按鈕。輕點按鈕會觸發動作執行,或在配對的手機上繼續某項操作,或者進入一個全屏頁面以便進一步操作。(參right考二維選擇卡部分)

倒計時確認


countdown 一般點擊按鈕後會有以下幾種結果:

  1. 1. 動作立即執行,結果通過更新的卡片信息進行顯示,或者會顯示一段確認動畫(比如一個完成的對勾)
  2. 2. 展示一小段倒計時動畫,用戶可以在這時取消執行。如果倒計時結束,也會顯示一段確認動畫,完成動畫可以自由定製。
  3. 3. 點擊按鈕後需要二次確認,比如爲了表面某些危險動作誤操作的情況,用戶再次確認後也會展示確認動畫。
  4. 4. 激活提示卡片以便繼續某項具體操作。比如在聊天應用中,輕觸“回覆”動作按鈕會激活語音輸入提示卡片,提示用戶使用語音輸入。這種情況下,一般會默認提示用戶 “請說話”或者給出幾種預先設定好的回覆信息供用戶選擇。

在手機上打開


continue_phone 程序應該儘可能地讓用戶在手錶上就能簡單地完成任務。如果某些情況下,必須用手機才能操作的話,會加入在手機上打開的按鈕。用戶點擊該按鈕後,會在手機上打開相應的應用頁面,同時會在手錶上顯示的一個已經在手機上打開的完成動畫。

卡片操作按鈕 (如媒體控制按鈕)


action_on_card 某些情況下,在卡片上直接放置動作按鈕會比較適合. 動作按鈕與卡片操作按鈕的使用規範如下:

  • 只有在非常明確點擊操作按鈕的預期結果時才適合採用卡片操作按鈕。比如一張卡片上顯示了預計到達時間信息,某個具體的地址和一個汽車的icon,很明顯點擊汽車的icon可以發起導航。但是比如一張顯示着好友頭像和名字的卡片,用戶就不是很明確點擊按鈕後會放生什麼?是給好友打電話?還是發消息?或者是發郵件?這種情況下就不適合用卡片操作按鈕的形式。
  • 卡片操作按鈕應該是不需要文字說明也能明確命令含義的操作。
  • 除了在手機上打開某個網頁鏈接這種情況以外,卡片操作按鈕觸發的結果都應該是在手錶上直接顯示的。
  • 每張卡片上只允許有一個操作按鈕。
  • 不要在卡片上放置命令菜單。

比較合適採用卡片操作按鈕的情況包括:播放暫停音樂、控制燈的開關、導航到某個地址、或者撥打電話。

卡片組


expandable_stacks 卡片組是一系列相關的卡片,可以在卡片流中縱向展開。點擊下方的更多可以展開卡片組,以顯示每張卡片的頭部,再次點擊某張卡片可以完全展開該卡片。如果用戶滑走卡片,卡片組會重新收起。

二維選擇卡


二維選擇卡可以從提示卡片或者動作按鈕來觸發。它允許用戶從一列選項中選擇一個,比如簽到應用中,可以用二維選擇卡片來切換選擇要簽到的地點。
2D_picker_action
某些情況下,可能需要用戶提供其他信息,這時應該爲用戶提供最可能的默認選項,並允許用戶在完成操作前最終修改。這種方式遵從了“儘可能減少交互”這一Android手錶的核心設計原則。

語音命令


voice_commands 應用可以響應Android語音命令。比如一款應用可以把“請記錄”作爲語音觸發熱詞,並記錄處理後續的語音輸入內容。如果有多款應用同時註冊了同一觸發熱詞,用戶選擇的響應應用會被自動記錄並保存下來,並可以在配對的手機Android Wear應用中修改偏好設置。

選擇列表


selection_list 從列表中選擇一項是最常見的交互形式。Android手錶上的選擇列表給出了一種適合小屏幕的輕交互形式。默認被選中的項目顯示在中間,單擊便可選擇。如需要選擇某項時,推薦採用這一常用控件。該控件在全局系統界面中被廣泛使用,包括上滑提示卡片後出現的列表中。當然,每款應用也可以根據自身需要打破這些常規控件樣式。更詳細的內容請參考應用架構規範部分。

以下是幾條Android手錶特有的設計要點需要注意:

屏幕尺寸


circle_message2 fitness 謹記不同的屏幕尺寸和形狀。智能穿戴設備是一種兼顧時尚和用戶自我表達的設備。所以Android手錶系統廣泛支持各種形式的設備類型。系統本身已經解決了大部分因需要支持不同設備而產生的複雜問題.但在設計全屏應用時還是應該隨時留意適配不同類型的設備屏幕。可以使用Android手錶模擬器來測試方形屏幕和圓形屏幕,請注意 WatchViewStub 事件可用來檢測所使用的屏幕類型。

具體設計素材


peek-card 根據不同卡片設計,一般需要提供的主要標準設計素材包括: 應用圖標、單張或多張背景圖片、動作按鈕圖標、動作確認動畫等。當然,根據具體設計方案的不同,也可能需要提供其他設計素材。背景圖片應爲橫屏格式,對於包含了通知消息和後續頁面的卡片,背景圖片最小寬度爲600像素,系統會自動添加視差滾動效果。

提示卡(Peek Card) 可讀性


peek-card 測試一下卡片在提示狀態下(peek state) 的佈局,以保證有效信息可以在該狀態下顯示在主屏上。應該保證卡片的主要信息在提示狀態下可讀,尤其對於情境卡片而言更是如此。像長文本消息這類,需要用戶進一步交互才能夠閱讀的內容,應該合理地設置截斷,以便告知用戶應該滑動卡片來查看詳情。

低信息密度


low_info_card 卡片的設計應該方便用戶快速掃視,類似在傳統手錶上看時間的體驗。多數情況下,一組圖標和數值,或者一個標題和簡短說明文字即可傳達有效信息。請注意,背景圖片也應該用來傳達信息,最佳方式是用背景圖片的切換來傳達卡片中的主要信息。如左圖所示,爲了反映當前路況擁堵程度,設計師選擇了一張合適的背景圖片。這並非錦上添花的細節,實際上背景圖片能夠強化信息傳達而且使得內容更方便掃視。

信息分組


separate-info-cards 某些情況下,附加信息必不可少。此時,爲了不影響用戶快速掃視,不要將所有信息都塞進一張卡片裏,而應該在信息流主卡片右側附加一頁(或者幾頁),使用戶可以滑動查看更多信息。參見在手機上打開部分。

減少通知消息


不要濫用通知消息,來吸引用戶注意。會使設備震動的主動通知,只應在適時而且有聯繫人蔘與的場景中使用,比如收到好友消息的時候。非緊急通知應靜默加入信息流中。參見 Android 通知規範

使用清晰明顯的字體


clear_bold_type 系統默認字體爲Roboto Condensed,同時提供常規體和細體兩種字重。文字字號及顏色應遵守規範推薦值。(參考 資源下載 中的UI工具包部分)概括來說,顯示的文字應該越大越好。你的目標是:以最小的成本傳達最多的信息。

使用統一的品牌及色彩


copywrite 圖標的作用是幫助用戶識別不同應用以及樹立品牌。規範定義圖標應顯示在卡片的右上角固定位置,但可以不顯示圖標。請注意不要將圖標或品牌展示在背景圖片中,背景圖片應爲與卡片信息相關的內容。

言簡意賅


省略不必要的文案。爲掃視設計,而非爲閱讀設計。儘量用字詞、短語,少用句子。儘可能使用圖標與數值配合,來代替文字。文字應儘量簡潔,長文會被應截斷以便在一張卡片中顯示。

保持必要的謹慎


智能穿戴設備具有天然的個人屬性,但也並非是完全隱私的。如果消息中包含敏感或隱私信息的話(比如來自約會應用的信息或身體狀況報告信息)注意不要將所有信息都顯示在提示卡片中。可以將消息中的敏感信息顯示在第二頁,必須滑動可見。或者在卡片的提示狀態(peek)和閱讀狀態(focused)下顯示不同細節。

確認動畫


confirmation 如果你的應用允許用戶完成某種動作,那麼有必要提供積極反饋。可顯示通用的或者自行設計的確認動畫。通過確認動畫可以向用戶展現應用的性格氣質,也能夠愉悅用戶。動畫應保持簡單利落(1000毫秒以內) 在完成某種動作後,一個確認動畫能夠有效地完成用戶場景轉移。

Android手錶的錶盤設計支持在傳統錶盤中顯示與用戶當前場景相關的信息。 設計錶盤需要斟酌數據與視覺元素應如何融合,既能讓用戶感知信息,又無需用戶花精力關注。簡單精美的佈局、支持不同屏幕形狀和尺寸、提供可選的配色及顯示方案,這些都能夠使用戶在適合自己的智能穿戴設備上創造出高度個性化的體驗。作爲手錶UI的一部分,提供可交互、帶有省電模式、並考慮如何與系統UI元素互動的錶盤設計是至關重要的。

創新理念


Render_Interactive Render_Next 設計Android手錶錶盤是一項以清晰可視化時間爲目標的考驗。Android手錶提供了一塊獨特的數字畫布讓我們重新思考時間的表達方式。同時Android手錶還允許在錶盤上嵌入其他數據以適應個性化以及場景化需要。
強大的新工具也會帶來設計複雜化的風險。最成功的錶盤設計不但能利用這些先進的能力,同時還能夠優雅整合地展示這些信息。

設計一款錶盤時,首要考慮的原則應該是其掃視可見性(glanceability)。錶盤的設計應高度整合地展示時間及其他相關數據。可以嘗試大膽前衛、簡約的設計方向,使得錶盤即便在一定距離下也高度可讀。

考慮矩形及圓形設備


Android手錶採用了不同形狀及尺寸的屏幕。你需要同時考慮不同形狀不同分辨率的屏幕。某些設計方案僅在特定設備上效果出衆,但只需稍加設計,便可讓不同的屏幕同樣出彩。

下面給出幾條跨設備設計原則:

設計更靈活的方案

ScreenShapes_Invert 理想情況下,錶盤的視覺設計應在圓屏及方屏下同時適用。右側案例中,錶盤的視覺設計能夠靈活地適配兩種屏幕,而無需額外調整。但在其他一些案例中,圓屏和方屏需要不同的設計方案。

採用統一的設計語言

ScreenShapes_Pyramids 嘗試使用統一的配色,線條粗細,陰影以及其他設計元素來創建方屏和圓屏間的視覺關聯。通過採用統一的配色方案及視覺元素,既能夠合理地適配兩種屏幕,又不破壞視覺一致性。

調整指針錶盤方案

ScreenShapes_Rift 某些設計方案會自然而然地採用指針錶盤設計:在圓形錶盤上顯示時針和分針。這種情況下,在爲方屏適配時需要考慮邊角區域的顯示問題。嘗試延展和探索這些額外的顯示區域。

考慮各種顯示模式


Android手錶有兩種主要顯示模式:省電及交互模式。設計錶盤時也應考慮這兩種不同模式。一般來說,如果你的錶盤設計在省電模式下效果出衆,那麼交互模式下則會更加出色。反過來則不一定成立。

交互模式

Render_Interactive 用戶擡起手腕來掃視手錶時,屏幕進入交互模式。該模式下表盤可顯示各種色彩及流暢的動畫效果。

省電模式

Render_Ambient 省電模式可延長設備使用時間。

你的設計應明確告知用戶用戶當前屏幕處於省電模式下。背景配色嚴格限制於黑白灰三種顏色。在屏幕支持的前提下,錶盤可採用少量彩色元素,但不能混淆用戶對當前模式的認知。可以採用不超過總屏幕像素5%的面積展示彩色元素。該模式下,屏幕每分鐘刷新一次,所以在省電模式下僅顯示小時和分鐘,不要顯示秒鐘。設備切換爲省電模式時,錶盤也會相應變化,在設計時,請仔細考慮這一點。

爲特殊屏幕優化


Android手錶採用了多種屏幕技術,每種技術各有優勢及其考量。設計省電錶盤時,一項很重要的考量因素是對電池壽命及屏幕老化的考慮。你可以爲不同種類的屏幕設計不同的省電錶盤。儘可能保證錶盤在所有屏幕上都能得到最佳顯示效果。

減少色彩空間

Render_LowBit 減少色彩空間節電法即採用“低位色深”(low-bit)顯示模式。該模式下,可用色彩被限制爲黑、白、藍、紅、品紅、綠、青、黃幾種顏色。設計低位色深省電錶盤時,背景應採用黑色或白色。OLED屏幕必須使用黑色背景。非背景元素面積限制爲屏幕總像素的10%以下,低位色彩元素面積最多不超過屏幕像素的5% 同時,在省電模式下應禁用抗鋸齒效果。務必在低位色深省電模式下測試你的設計方案。其他屏幕通過不使用顏色的方式來省電。設計無色彩省電模式時,背景可爲黑色或白色。

屏幕防老化技術

Render_1Bit 爲OLED屏幕設備設計時,應考慮電池使用效率及屏幕老化現象。當OLED屏設備處於省電模式時,系統會定期將屏幕內容的位置移動幾像素以防止屏幕像素老化。這種情況下,省電模式設計應避免使用大塊像素,同時應保持屏幕95%的像素爲黑色。將普通省電模式下采用的實心填充形狀更換爲空心描邊形狀。同時將填充圖案替換爲像素紋理。對於指針錶盤方案,當時針分針重疊時,應將中間重疊部分鏤空處理,以避免像素老化。

兼容系統UI元素


你的錶盤設計應兼容Android手錶UI元素。這些元素能夠告知用戶設備的當前狀態,並且能夠同步顯示關聯手機上的通知消息。儘量保持錶盤設計中的關鍵元素不被系統UI原色遮擋。

卡片

CardsRender_Build 卡片通知系統是連接手錶和手機間的信息橋樑。卡片同樣也是大部分應用與用戶溝通的主要手段。用戶會在手錶上收到郵件、消息等通知。錶盤開發工程師需要同時兼容大小兩種尺寸的卡片。錶盤可以指定一種卡片尺寸作爲首選項,但用戶也可以自行設置偏好,同時,用戶也能夠向下滑動來暫時隱藏卡片。

提示卡(peek card)是卡片信息流中的首張卡片,它會部分顯示在主屏幕的底部。提示卡片的高度根據通知文字的數量而變化。高度較小的提示卡片會顯示出更多的錶盤設計區域。圓形指針錶盤設計應採用較小的提示卡片。如果能夠確保在提示卡片最高狀態下仍可顯示時間信息,則可以將提示卡片狀態設置爲自適應高度。設置自適應高度提示卡片的好處是,能夠顯示更多的通知信息。相反,如果信息集中在錶盤下半部展示的設計方案應選用高度較小的提示卡片。系統會在提示卡片高度變化時通知錶盤,因此,如果必要時,可重新佈局錶盤元素。

狀態指示

Indicators_Cropped 狀態指示能夠告知用戶手錶的當前狀態,如充電狀態和飛行模式狀態。設計錶盤時,也應考慮狀態指示的顯示。

狀態指示可顯示在屏幕的幾個固定位置。採用較高提示卡時,狀態指示應顯示在屏幕上方或居中區域。如果你將狀態指示或語音熱詞置於屏幕底部時,系統會強制使用高度較小的提示卡片。若錶盤邊緣包含較強視覺元素,如數字或秒數跳動元素時,請將狀態指示放置在屏幕中央。

語音熱詞

Hotword_Cropped 語音熱詞指的是“OK Google”,這句話告訴用戶可以通過語音命令與手錶交互。每當用戶開啓手錶設備時,熱詞都會在屏幕上顯示幾秒。用戶說完5次“OK Google”後,語音熱詞便不再繼續顯示。所以語音熱詞顯示的位置不是那麼重要。但仍需注意避免遮擋錶盤中其他元素。最後,應爲語音熱詞及狀態指示設置背景保護,除非你在錶盤設計中已經爲這些元素定製好了背景,比如使用暗色無圖案的背景。

系統UI元素位置標註信息請參考 規格和資源部分

設計融入數據的錶盤


Render_Saturn 錶盤可向用戶展示與情境相關的數據,並通過顏色或風格的變化來體現不同數據。

你想傳達給用戶什麼信息?

設計融入數據錶盤的第一步是要基於現有數據,設想預期達到的效果。首先,基於真實用戶需求,設想你認爲可能出現的結果。你希望用戶在輕瞥錶盤後得知哪些信息?一旦設定了預期達到的效果,你就需要思考如何獲取相關數據以達成這一結果。

錶盤是條時間軸,合理爲其添加數據

Render_Episode 你的錶盤設計也許包含了一些非時間信息,比如天氣,日曆或健身數據等。好好考慮一下如何有創造性地融合這些數據。不要僅僅在時間顯示的基礎上,簡單地羅列其他數據。而要思考如何通過時間維度來表達這些數據。例如,不要將一款天氣主題的錶盤簡單地設計成:時鐘加上當前氣溫,也許可以把它設計成一款:描述全天氣溫將如何變化的錶盤。

保持信息高度整合

Render_Albumem 一旦確立設計概念方向及預期效果,便需要開始錶盤的視覺設計。優秀的錶盤設計應該是信息高度可讀、數據高度整合的。爲了確定整合的信息,必須分辨出哪些纔是最重要的數據。例如:你也許最終決定只顯示一項近期安排,而不是將整月的日程安排都顯示出來。通過一系列做減法的過程,你的設計最終應該能夠達到數據高度整合的效果。

始於洞察 不斷驗證

確保你的方案源自對用戶需求及預期的洞察。並通過用戶,持續驗證設計方案中的假設是否成立。可以試着先在紙上畫出大致的草圖,問問朋友是否明白它代表什麼?通過不同的場景和數據類型來驗證你的想法。在最終編碼之前,先在實際的手錶屏幕上測試一下設計方案。

設計可交互的錶盤


在確保無其他元素響應衝突的情況下,錶盤可以響應用戶單擊手勢。用戶需要與錶盤交互的的理由可能有以下幾點:

  • 改變錶盤的設計, 例如調整配色方案。
  • 在當前界面展現更多信息 ,例如顯示詳細的步數。
  • 在當前界面或後臺完成某項動作 ,例如開始計時器。
  • 發起某項活動 ,例如在消息應用中發起聊天。

可用手勢

只允許使用單擊手勢。這種限制有利於保持系統整體手勢的清晰一致性,並能保持錶盤交互儘量簡潔。無論你或用戶都不應把錶盤當做一款功能齊備的應用來看。圖1總結了各種手勢的類型及用途。
遵循以下原則:錶盤交互應該是輕量的,用戶只需一兩次操作即可完成預期動作。
1451373054_4_w755_h269

點擊對象

如果僅僅想改變錶盤的狀態,比如調整配色的話,可將整個錶盤作爲點擊對象。對於較大的改變或動作,如發起一項活動或給朋友發送一條消息等操作,需要將點擊對象設置爲約48至90 dp之間(譯註:原文爲 48-90 dpi 疑爲筆誤)以避免誤觸。各元素之間應保持 8-16 dp的間隔。爲了優化點擊體驗,一次最多顯示7至9個點擊對象。

點擊區域

你可以設定不同的點擊區域來觸發不同的錶盤變化。例如:點擊整個錶盤可以切換錶盤狀態,點擊某個具體對象則在當前界面展示與之相關的信息,再次點擊該對象之外的區域則回到錶盤初始狀態。

視覺反饋

visual_feedback 當用戶手指觸碰到錶盤時,需要提供視覺反饋。雖然只有當手指離開屏幕時,點擊事件纔會被觸發,但是手指觸碰時的視覺反饋不僅能夠表明系統接收到了用戶的點擊行爲,同時也能夠告知用戶手指的觸點位置。

注意: 不要在手指觸碰錶盤時立即展示新界面,這與系統界面交互手勢相沖突,比如:錶盤選擇、通知卡片流、快速設置面板以及應用啓動面板的交互。

設計示例

下面給出一些可交互錶盤的設計示例:

改變錶盤外觀

aesthetic

切換錶盤狀態

toggling-states

改變具體界面元素

changing-target

在當前界面展示信息

revealing-info

單擊觸發事件

1-tap-launch

雙擊觸發事件

2-tap-launch

支持Android Wear 應用


用戶可通過手機端Android Wear應用安裝及設置錶盤。
CompanionApp_Build DeviceSettings_Build

不要設置單獨的錶盤圖標

所有可用錶盤均可通過手機端Android Wear應用或手錶的第三方應用啓動,沒有必要爲錶盤設置一款單獨的啓動圖標。

設置

每款支持用戶定製的錶盤都有對應的設置面板,可以通過手錶或手機端應用進入。標準界面可以滿足大多數情況需要,但在該基礎上也可探索其他創新方向。
手錶端的設置界面應僅限使用開關及滾動列表控件。手機端設置界面可包含其他較爲複雜的設置項目。

規格及資源


錶盤設計範例及詳細系統界面元素尺寸可參見 Andorid手錶設計資源下載
原文鏈接: http://developer.android.com/design/wear/index.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章