Android 手表設(shè)計規(guī)范

0 評論 18985 瀏覽 129 收藏 59 分鐘

為可以穿戴的Android手表設(shè)計應(yīng)用與為手機(jī)和平板設(shè)計應(yīng)用有很大的區(qū)別:不同設(shè)備有著不同的優(yōu)勢及劣勢、不同的應(yīng)用場景及人體工學(xué)考量。想要開始設(shè)計,我們應(yīng)該對Android手表體驗有個整體的認(rèn)識,并且知道應(yīng)用怎樣融入才能改善這種體驗。我們還提供了設(shè)計源文件以及UI資源,供您下載。

 

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

提示:情境信息流

stream

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

這種UI模型的好處是:可以保證用戶不必為了查看是否有新的動態(tài)而啟動太多應(yīng)用。他們可以簡單的瞥一眼信息流,就可以知道最新消息,并且判斷出哪些對他們是有用的。

信息流中的卡片比簡單的通知消息有更多功能??梢运交瑒涌ㄆ瑏盹@示附加的頁面信息。再次水平滑動可以顯示動作按鈕,這些按鈕允許用戶在提醒消息上進(jìn)行操作。通過從左向右滑動可以忽略卡片,把他們從信息流中移除,直到該應(yīng)用有新消息要展示的時候。

命令:提示卡片

cuecard

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

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

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

其他UI特性

設(shè)備上默認(rèn)顯示的是主屏幕:

  • 背景信息:展示與首張卡片相關(guān)的內(nèi)容或顯示用戶自定義的表盤。輕觸背景或者說“OK,Google”來進(jìn)行語音搜索。
  • 狀態(tài)指示:顯示連接情況,充電狀態(tài),是否處于飛行模式或未讀消息數(shù)量。
  • 情境信息流中的首張卡片會顯示在屏幕底部。不同的表盤設(shè)計決定該卡片的露出程度。
  • 表盤設(shè)計:用戶可以選擇不同的表盤設(shè)計以便在主屏幕顯示不同的背景。表盤一般用來展示時間以及容納情境信息流卡片。用戶可通過長按當(dāng)前表盤來選擇自定義表盤設(shè)計。
  • 某些設(shè)備會在用戶無交互時進(jìn)入低功耗的省電模式(?Ambient Mode) 該模式下屏幕通常會自動調(diào)暗亮度??ㄆ畔⒁矔鄳?yīng)地自動進(jìn)行優(yōu)化,以便更好展示。用戶可通過輕觸屏幕、向內(nèi)側(cè)轉(zhuǎn)動手腕,或按下設(shè)備實體按鍵來退出省電模式。
  • 在主屏幕向下滑動,可以顯示日期及電量信息。繼續(xù)向下滑動會切換到靜音模式,以關(guān)閉震動提醒和亮屏通知。
  • 設(shè)置界面:可通過卡片激活或者通過某些設(shè)備上的實體按鍵進(jìn)入。用戶可在此處關(guān)閉或重啟設(shè)備、調(diào)節(jié)屏幕亮度、切換飛行模式以及查詢設(shè)備信息。
  • 全屏應(yīng)用:可通過信息流頂部進(jìn)入。雖然系統(tǒng)在風(fēng)格上并不限制只能采用信息流樣式,但應(yīng)用應(yīng)盡量遵從系統(tǒng)設(shè)計原則。

Android 手表創(chuàng)新理念

Android手表能夠在適當(dāng)?shù)臅r候提供合適的信息,讓用戶在虛擬的世界和現(xiàn)實世界有更多的連接。完美的android手表體驗可以大致歸納為以下幾個方面:

自動啟動

vision_traffic

大多數(shù)人習(xí)慣通過點擊一個圖標(biāo)來啟動應(yīng)用,Android手表則不同。手表中的應(yīng)用能夠感知到用戶的情境時間、地點、物理活動等。當(dāng)檢測到情境相關(guān)的時候,應(yīng)用會自動地將相應(yīng)卡片插入到信息流中。這種方法讓android手表實時響應(yīng)、與用戶任務(wù)高度相關(guān)而且非常聚焦用戶任務(wù)。

掃視可見 (Glanceable)

vision_navigation

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

始終圍繞提示和命令

vision_voice

Android手表就像個人助理:她了解你和你的喜好,她只在非常必要的時候才會主動打擾你,并且它總是能夠提供一個準(zhǔn)備好的答案。Android手表是樂于助人的、有禮貌的、反應(yīng)敏捷的。

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

vision_music

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

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

第三方軟件能夠通過更加具體的方式幫助用戶,并能夠延展Android手表的體驗。用戶通過主動安裝應(yīng)用的方式,能夠使得Android手表更好地為之服務(wù)。

Android 手表設(shè)計原則

這里提供一些簡單的設(shè)計原則來啟發(fā)您如何計劃和進(jìn)行Android手表應(yīng)用設(shè)計。

不要妨礙用戶

five_seconds手表本身就是一種用戶一邊做事一邊使用的設(shè)備。比如在煮飯、吃飯、走路、跑步甚至和別人聊天時使用。如果你發(fā)現(xiàn)用戶必須停下自己手里的事情才能使用某個手表應(yīng)用,那么這個應(yīng)用就有很大的改進(jìn)空間。

嘗試一下:

  • 看用戶能否在5秒內(nèi)使用你的應(yīng)用來完成一項任務(wù)?
  • 用戶能不能一邊聊天一邊輕松地使用你的應(yīng)用?
  • 注意觀察用戶在使用應(yīng)用時是否會影響到他談話的思路以及和對方的眼神交流。

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

biggesture

當(dāng)你在手機(jī)上滑動瀏覽照片的時候,很大一部分的顯示區(qū)域都可以響應(yīng)手勢操作,而且無需精準(zhǔn)操作,類似這樣的交互就非常適合在手表上采用。

用戶會在各種場景下使用手表應(yīng)用,最不常見的一種場景應(yīng)該是:端坐在桌前,專心地使用手表應(yīng)用。

嘗試一下:

在各種場景下測試你的應(yīng)用,比如跑步、吃飯、聊天或者點餐的時候。如果用戶必須停下來手里的事情或者需要放慢速度才能準(zhǔn)確點擊某款手表應(yīng)用上的按鈕,那么你需要采用容錯率更高的手勢操作。

優(yōu)先考慮使用卡片流

wear_checkin

穿戴式設(shè)備能夠給用戶最好的體驗就是猜中用戶的心思,主動提供給用戶他們在特定場景下所需要的信息??梢岳迷O(shè)備里的各種感應(yīng)器以及云端同步的各種信息來分析何時展示什么卡片。實在不知道用戶想要什么的情況下,再利用語音或者手勢交互的形式。

嘗試一下:

列出用戶可能需要使用該應(yīng)用的所有可能場景??纯催@些使用場景之間有什么共同點?比如相同的地點?每天相同的時間?相同的軀體運(yùn)動?相同的生理指標(biāo)?然后你就能夠分析出在什么場景下給用戶推送你的應(yīng)用程序信息了。一定要記住,如果用戶覺得你給出的建議那么不相關(guān)的話,用戶隨時有權(quán)利刪掉你的建議卡片。

每次只做一件事

雖然用戶每次打開應(yīng)用只用短短幾秒鐘,但全天重復(fù)使用率非常高,比較好的設(shè)計應(yīng)該是:默認(rèn)顯示的信息量很少,通過滑動才看到更多的操作

嘗試一下:

看看你的應(yīng)用默認(rèn)顯示的信息有多少?所有這些信息是否都是必須的?能否分幾張卡片顯示?設(shè)計卡片信息的時候切記卡片是可以分多頁展示的。

為余光設(shè)計

用戶持續(xù)使用應(yīng)用的時間越久,就會越和現(xiàn)實世界脫節(jié)。所以設(shè)計方案應(yīng)該盡可能方便用戶掃視手表界面,并迅速返回現(xiàn)實世界中來。

嘗試一下:

利用余光來檢視你的應(yīng)用,當(dāng)手表應(yīng)用界面顯示的時候,盡可能的盯著你的手指關(guān)節(jié)??纯催@種情況下,你是否還能夠明白應(yīng)用想傳達(dá)什么信息?是否能一眼就看出這是哪個應(yīng)用?卡片的背景圖片是否能夠傳達(dá)界面想傳達(dá)的信息?是否使用了照片或者明顯的圖形或顏色?

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

手表戴在手上,與手機(jī)不用的一點在于,設(shè)備直接接觸皮膚。作為一個與用戶如此親密接觸的設(shè)備,震動提醒用戶的次數(shù)應(yīng)該比手機(jī)應(yīng)用要少的多。

嘗試一下:

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

Android 手表應(yīng)用架構(gòu)

用戶習(xí)慣于點擊icon來打開一個應(yīng)用,Android wear則完全不同。典型的Android wear應(yīng)用會在時機(jī)合適,情境適當(dāng)?shù)那闆r下,在卡片流中加入一張卡片展示??ㄆ峡赡軙尤胍粋€能夠展示全屏應(yīng)用的按鈕,以便后續(xù)的簡單交互,但是通常情況下也可以不加。
提示卡片、卡片流、這些是構(gòu)建Android應(yīng)用的基本元素,你可以利用這些元素打造所需的應(yīng)用體驗。官方強(qiáng)烈建議:不要設(shè)計一款用戶必須自己考慮何時何地、在什么場景下,需要打開什么應(yīng)用才能滿足我當(dāng)前的需求的應(yīng)用。

卡片流中的情境卡片包括:

  • 同步提醒:比如新消息的提醒,會通過Android系統(tǒng)的消息通知中心從手機(jī)端推送至手表端。只需要根據(jù)手表應(yīng)用做少量代碼改動便可以實現(xiàn)。
  • 情境提醒:比如健身類的卡片,會在手表檢測到你開始跑步時自動展示。情境式提醒一般只在情境相關(guān)的時候出現(xiàn),而且通常只手表端展示,不會同步在手機(jī)端提示。通常情況下,情境式卡片能做的事情比手機(jī)端的同步提醒要多很多。

全屏應(yīng)用:

  • 二維選擇卡:二維選擇卡允許用戶從給定的一組元素中選擇某個元素,比如在音樂應(yīng)用中選擇歌手、選擇專輯等。
  • 定制化布局:如果你覺得卡片和卡片流的隱喻方式不能滿足你的需要,也可以給出定制化的界面設(shè)計方案,比如給出圖表或者地圖。
  • 保持應(yīng)用始終顯示:某些信息如需持續(xù)更新顯示或者與用戶當(dāng)前的任務(wù)持續(xù)相關(guān),則可以采用這種顯示模式,應(yīng)用處在省電模式顯示時不會消耗過多的電量。

同步提醒

bridgednotifications

Bluebird

這是在Android手表上獲取信息最簡單的方法。實際上如果你的手機(jī)應(yīng)用能發(fā)送消息推送的話,就會自動同步給手表。你可以通過調(diào)用通知API,,在手表上同步提醒中添加額外的頁面展示或語音回復(fù)功能。

情境提醒

context_workout

context_lights

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

提醒的方式大致是這樣:

首先應(yīng)用需要預(yù)判出何時才是與用戶情境相關(guān)的合適時機(jī),然后當(dāng)時機(jī)到來時a應(yīng)用會觸發(fā)一條通知。比如你想設(shè)計一款用戶在跑步時候會用到的應(yīng)用,或者用戶參觀博物館會用到的博物館導(dǎo)覽應(yīng)用,都是合適推送情境提醒的時機(jī)。

想要設(shè)計優(yōu)秀的Android手表體驗,選擇合適的用戶情境觸發(fā)提示是至關(guān)重要的。最簡單的方法是利用標(biāo)準(zhǔn)Android提醒消息模板,也可以制作自己的版式。如果決定要采用這種方式,我們強(qiáng)烈建議您參考官方樣式規(guī)范,以確保您的設(shè)計與系統(tǒng)其他樣式保持一致。最好徹底的測試一下應(yīng)用的觸發(fā)機(jī)制。觸發(fā)過于頻繁會打擾用戶,導(dǎo)致用戶將你的所有提示都關(guān)掉。

二維選擇卡

二維選擇卡很適合展現(xiàn)一個系列的選項。比如Google搜索結(jié)果頁就是一個很好的范例。

1D_picker

這種樣式可被用于展現(xiàn)單一縱向列表,或“一維選項”

2D_picker

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

動作命令

有關(guān)卡片上的動作命令部分,請參見動作卡片樣式部分。

便捷選擇 (Making it fast)
2d_picker_indicated

關(guān)于二維選擇卡,有一些使用原則需要注意:

  • 盡可能減少卡片的數(shù)量
  • 會頻繁使用到的卡片應(yīng)該在最上層
  • 卡片的內(nèi)容和樣式都應(yīng)該盡量簡單
  • 優(yōu)先考慮方便用戶快捷操作,其次才是定制化和個性化的需求

如何退出

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

打破卡片布局 自主定制界面

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

何時應(yīng)全屏展示

官方建議只有在卡片本身不能滿足需求的時候才應(yīng)該進(jìn)入全屏,進(jìn)入全屏后應(yīng)該讓用戶在完成簡單操作后迅速退出全屏,返回卡片流當(dāng)中。這樣做用戶會感覺你的應(yīng)用和手表本身的體驗更好的融合,交互體驗也更加統(tǒng)。Android手表本身在語音回復(fù)和秒表應(yīng)用中采用了全屏界面的展示方式。

有所區(qū)分

全屏應(yīng)用還有幾點需要注意:不要讓全屏界面長得太類似卡片,以免讓用戶產(chǎn)生混淆。如果應(yīng)用想延續(xù)系統(tǒng)的卡片樣式風(fēng)格的話,可以采用二維選擇卡的方式。

自動退出

很多手表設(shè)備上都沒有返回或者h(yuǎn)ome鍵,所以該如何讓用戶退出是值得好好考慮的問題。這里給出幾種自然退出的場景供大家參考:

  • 地圖應(yīng)用中如果需要用戶選擇某個地點,那么用戶在扎下marker后,應(yīng)用就可以退出,返回到卡片流中
  • 如果是一款小游戲應(yīng)用,那么游戲結(jié)束時自動退出是一種比較自然的方式
  • 如果是一款繪畫的應(yīng)用,用戶5秒鐘沒有響應(yīng)時,可以自動退出

手動退出

即便設(shè)置了自動退出的機(jī)制,也擋不住某些時候用戶希望立即退出的欲望。這種情況下,用戶長按屏幕的行為可以視為是希望退出應(yīng)用的信號。

保持應(yīng)用始終顯示

Android手表應(yīng)用有兩種模式:

交互模式

界面顯示顏色,用戶可以與應(yīng)用交互。

省電模式

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

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

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

QQ截圖20160106175217

更新頻率

處于省電模式下的應(yīng)用基本上每分鐘更新一次數(shù)據(jù)來省電。你也可以把更新頻率調(diào)整成為10秒一次,但每次更新數(shù)據(jù)都會消耗電量。

可交互元素

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

顏色和亮度

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

用戶隱私

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

Android 手表場景感知

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

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

1451369395_76_w796_h695

1451369436_13_w792_h690

1451369447_11_w796_h697

Android 手表控件類型

Android手表主要采用微交互的形式與用戶互動,所以沿用用戶已熟知的設(shè)計樣式是至關(guān)重要的。

卡片

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

QQ截圖20160106175515

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

應(yīng)用圖標(biāo)

clear_bold_type

應(yīng)用圖標(biāo)顯示在卡片的右上角固定位置,用來在卡片流中區(qū)分消息卡片的來源。圖片背景用來傳達(dá)卡片信息而不是用來展示品牌。只有最左側(cè)的卡片需要展示圖標(biāo),右側(cè)的頁面中無需展現(xiàn)圖標(biāo)。

頁面

separate-info-cards

更詳細(xì)的信息可以展示在附加的卡片中。在卡片流中向左滑動卡片可以展示詳情頁面。通常情況下,一張附加卡片就足夠顯示所有信息。比如天氣卡片會展示當(dāng)前地點現(xiàn)在的天氣情況。

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

刪除卡片

通過從左向右滑動可以忽略卡片流中的卡片。被忽略的卡片會在下次應(yīng)用有新的信息需要展示時出現(xiàn)??ㄆ髦械目ㄆ坏┍缓雎裕敲聪鄳?yīng)的信息也會同步在手機(jī)端被刪除。

dismiss_cards

動作按鈕

action_button

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

倒計時確認(rèn)

countdown

一般點擊按鈕后會有以下幾種結(jié)果:

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

在手機(jī)上打開

continue_phone

程序應(yīng)該盡可能地讓用戶在手表上就能簡單地完成任務(wù)。如果某些情況下,必須用手機(jī)才能操作的話,會加入在手機(jī)上打開的按鈕。用戶點擊該按鈕后,會在手機(jī)上打開相應(yīng)的應(yīng)用頁面,同時會在手表上顯示的一個已經(jīng)在手機(jī)上打開的完成動畫。

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

action_on_card

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

  1. 只有在非常明確點擊操作按鈕的預(yù)期結(jié)果時才適合采用卡片操作按鈕。比如一張卡片上顯示了預(yù)計到達(dá)時間信息,某個具體的地址和一個汽車的icon,很明顯點擊汽車的icon可以發(fā)起導(dǎo)航。但是比如一張顯示著好友頭像和名字的卡片,用戶就不是很明確點擊按鈕后會放生什么?是給好友打電話?還是發(fā)消息?或者是發(fā)郵件?這種情況下就不適合用卡片操作按鈕的形式。
  2. 卡片操作按鈕應(yīng)該是不需要文字說明也能明確命令含義的操作。
  3. 除了在手機(jī)上打開某個網(wǎng)頁鏈接這種情況以外,卡片操作按鈕觸發(fā)的結(jié)果都應(yīng)該是在手表上直接顯示的。
  4. 每張卡片上只允許有一個操作按鈕。
  5. 不要在卡片上放置命令菜單。

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

卡片組

expandable_stacks

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

二維選擇卡

二維選擇卡可以從提示卡片或者動作按鈕來觸發(fā)。它允許用戶從一列選項中選擇一個,比如簽到應(yīng)用中,可以用二維選擇卡片來切換選擇要簽到的地點。

2D_picker_action

某些情況下,可能需要用戶提供其他信息,這時應(yīng)該為用戶提供最可能的默認(rèn)選項,并允許用戶在完成操作前最終修改。這種方式遵從了“盡可能減少交互”這一Android手表的核心設(shè)計原則。

語音命令

voice_commands

應(yīng)用可以響應(yīng)Android語音命令。比如一款應(yīng)用可以把“請記錄”作為語音觸發(fā)熱詞,并記錄處理后續(xù)的語音輸入內(nèi)容。如果有多款應(yīng)用同時注冊了同一觸發(fā)熱詞,用戶選擇的響應(yīng)應(yīng)用會被自動記錄并保存下來,并可以在配對的手機(jī)Android Wear應(yīng)用中修改偏好設(shè)置。

選擇列表

selection_list

從列表中選擇一項是最常見的交互形式。Android手表上的選擇列表給出了一種適合小屏幕的輕交互形式。默認(rèn)被選中的項目顯示在中間,單擊便可選擇。如需要選擇某項時,推薦采用這一常用控件。該控件在全局系統(tǒng)界面中被廣泛使用,包括上滑提示卡片后出現(xiàn)的列表中。當(dāng)然,每款應(yīng)用也可以根據(jù)自身需要打破這些常規(guī)控件樣式。更詳細(xì)的內(nèi)容請參考應(yīng)用架構(gòu)規(guī)范部分。

Android 手表設(shè)計風(fēng)格

以下是幾條Android手表特有的設(shè)計要點需要注意:

屏幕尺寸

0160106180158

謹(jǐn)記不同的屏幕尺寸和形狀。智能穿戴設(shè)備是一種兼顧時尚和用戶自我表達(dá)的設(shè)備。所以Android手表系統(tǒng)廣泛支持各種形式的設(shè)備類型。系統(tǒng)本身已經(jīng)解決了大部分因需要支持不同設(shè)備而產(chǎn)生的復(fù)雜問題.

但在設(shè)計全屏應(yīng)用時還是應(yīng)該隨時留意適配不同類型的設(shè)備屏幕??梢允褂肁ndroid手表模擬器來測試方形屏幕和圓形屏幕,請注意

WatchViewStub?事件可用來檢測所使用的屏幕類型。

具體設(shè)計素材

peek-card

根據(jù)不同卡片設(shè)計,一般需要提供的主要標(biāo)準(zhǔn)設(shè)計素材包括: 應(yīng)用圖標(biāo)、單張或多張背景圖片、動作按鈕圖標(biāo)、動作確認(rèn)動畫等。當(dāng)然,根據(jù)具體設(shè)計方案的不同,也可能需要提供其他設(shè)計素材。背景圖片應(yīng)為橫屏格式,對于包含了通知消息和后續(xù)頁面的卡片,背景圖片最小寬度為600像素,系統(tǒng)會自動添加視差滾動效果。

提示卡(Peek Card) 可讀性

peek-card

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

低信息密度

low_info_card

卡片的設(shè)計應(yīng)該方便用戶快速掃視,類似在傳統(tǒng)手表上看時間的體驗。多數(shù)情況下,一組圖標(biāo)和數(shù)值,或者一個標(biāo)題和簡短說明文字即可傳達(dá)有效信息。請注意,背景圖片也應(yīng)該用來傳達(dá)信息,最佳方式是用背景圖片的切換來傳達(dá)卡片中的主要信息。如左圖所示,為了反映當(dāng)前路況擁堵程度,設(shè)計師選擇了一張合適的背景圖片。這并非錦上添花的細(xì)節(jié),實際上背景圖片能夠強(qiáng)化信息傳達(dá)而且使得內(nèi)容更方便掃視。

信息分組

separate-info-cards

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

減少通知消息

不要濫用通知消息,來吸引用戶注意。會使設(shè)備震動的主動通知,只應(yīng)在適時而且有聯(lián)系人參與的場景中使用,比如收到好友消息的時候。非緊急通知應(yīng)靜默加入信息流中。參見?Android 通知規(guī)范。

使用清晰明顯的字體

clear_bold_type

系統(tǒng)默認(rèn)字體為Roboto Condensed,同時提供常規(guī)體和細(xì)體兩種字重。文字字號及顏色應(yīng)遵守規(guī)范推薦值。(參考資源下載中的UI工具包部分)概括來說,顯示的文字應(yīng)該越大越好。你的目標(biāo)是:以最小的成本傳達(dá)最多的信息。

使用統(tǒng)一的品牌及色彩

copywrite

圖標(biāo)的作用是幫助用戶識別不同應(yīng)用以及樹立品牌。規(guī)范定義圖標(biāo)應(yīng)顯示在卡片的右上角固定位置,但可以不顯示圖標(biāo)。請注意不要將圖標(biāo)或品牌展示在背景圖片中,背景圖片應(yīng)為與卡片信息相關(guān)的內(nèi)容。

言簡意賅

省略不必要的文案。為掃視設(shè)計,而非為閱讀設(shè)計。盡量用字詞、短語,少用句子。盡可能使用圖標(biāo)與數(shù)值配合,來代替文字。文字應(yīng)盡量簡潔,長文會被應(yīng)截斷以便在一張卡片中顯示。

保持必要的謹(jǐn)慎

智能穿戴設(shè)備具有天然的個人屬性,但也并非是完全隱私的。如果消息中包含敏感或隱私信息的話(比如來自約會應(yīng)用的信息或身體狀況報告信息)注意不要將所有信息都顯示在提示卡片中??梢詫⑾⒅械拿舾行畔@示在第二頁,必須滑動可見?;蛘咴诳ㄆ奶崾緺顟B(tài)(peek)和閱讀狀態(tài)(focused)下顯示不同細(xì)節(jié)。

確認(rèn)動畫

confirmation

如果你的應(yīng)用允許用戶完成某種動作,那么有必要提供積極反饋。可顯示通用的或者自行設(shè)計的確認(rèn)動畫。通過確認(rèn)動畫可以向用戶展現(xiàn)應(yīng)用的性格氣質(zhì),也能夠愉悅用戶。動畫應(yīng)保持簡單利落(1000毫秒以內(nèi)) 在完成某種動作后,一個確認(rèn)動畫能夠有效地完成用戶場景轉(zhuǎn)移。

Android 手表表盤設(shè)計

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

創(chuàng)新理念

QQ截圖20160106180602

設(shè)計Android手表表盤是一項以清晰可視化時間為目標(biāo)的考驗。Android手表提供了一塊獨特的數(shù)字畫布讓我們重新思考時間的表達(dá)方式。同時Android手表還允許在表盤上嵌入其他數(shù)據(jù)以適應(yīng)個性化以及場景化需要。

強(qiáng)大的新工具也會帶來設(shè)計復(fù)雜化的風(fēng)險。最成功的表盤設(shè)計不但能利用這些先進(jìn)的能力,同時還能夠優(yōu)雅整合地展示這些信息。

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

考慮矩形及圓形設(shè)備

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

下面給出幾條跨設(shè)備設(shè)計原則:

設(shè)計更靈活的方案

ScreenShapes_Invert

理想情況下,表盤的視覺設(shè)計應(yīng)在圓屏及方屏下同時適用。右側(cè)案例中,表盤的視覺設(shè)計能夠靈活地適配兩種屏幕,而無需額外調(diào)整。但在其他一些案例中,圓屏和方屏需要不同的設(shè)計方案。

采用統(tǒng)一的設(shè)計語言

ScreenShapes_Pyramids

嘗試使用統(tǒng)一的配色,線條粗細(xì),陰影以及其他設(shè)計元素來創(chuàng)建方屏和圓屏間的視覺關(guān)聯(lián)。通過采用統(tǒng)一的配色方案及視覺元素,既能夠合理地適配兩種屏幕,又不破壞視覺一致性。

調(diào)整指針表盤方案

ScreenShapes_Rift

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

考慮各種顯示模式

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

交互模式

Render_Interactive

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

省電模式

省電模式可延長設(shè)備使用時間。

Render_Ambient

你的設(shè)計應(yīng)明確告知用戶用戶當(dāng)前屏幕處于省電模式下。背景配色嚴(yán)格限制于黑白灰三種顏色。在屏幕支持的前提下,表盤可采用少量彩色元素,但不能混淆用戶對當(dāng)前模式的認(rèn)知??梢圆捎貌怀^總屏幕像素5%的面積展示彩色元素。該模式下,屏幕每分鐘刷新一次,所以在省電模式下僅顯示小時和分鐘,不要顯示秒鐘。設(shè)備切換為省電模式時,表盤也會相應(yīng)變化,在設(shè)計時,請仔細(xì)考慮這一點。

為特殊屏幕優(yōu)化

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

減少色彩空間

Render_LowBit

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

屏幕防老化技術(shù)

Render_1Bit

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

兼容系統(tǒng)UI元素

你的表盤設(shè)計應(yīng)兼容Android手表UI元素。這些元素能夠告知用戶設(shè)備的當(dāng)前狀態(tài),并且能夠同步顯示關(guān)聯(lián)手機(jī)上的通知消息。盡量保持表盤設(shè)計中的關(guān)鍵元素不被系統(tǒng)UI原色遮擋。

卡片

CardsRender_Build

卡片通知系統(tǒng)是連接手表和手機(jī)間的信息橋梁??ㄆ瑯右彩谴蟛糠謶?yīng)用與用戶溝通的主要手段。用戶會在手表上收到郵件、消息等通知。表盤開發(fā)工程師需要同時兼容大小兩種尺寸的卡片。表盤可以指定一種卡片尺寸作為首選項,但用戶也可以自行設(shè)置偏好,同時,用戶也能夠向下滑動來暫時隱藏卡片。

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

狀態(tài)指示

Indicators_Cropped

狀態(tài)指示能夠告知用戶手表的當(dāng)前狀態(tài),如充電狀態(tài)和飛行模式狀態(tài)。設(shè)計表盤時,也應(yīng)考慮狀態(tài)指示的顯示。

狀態(tài)指示可顯示在屏幕的幾個固定位置。采用較高提示卡時,狀態(tài)指示應(yīng)顯示在屏幕上方或居中區(qū)域。如果你將狀態(tài)指示或語音熱詞置于屏幕底部時,系統(tǒng)會強(qiáng)制使用高度較小的提示卡片。若表盤邊緣包含較強(qiáng)視覺元素,如數(shù)字或秒數(shù)跳動元素時,請將狀態(tài)指示放置在屏幕中央。

語音熱詞

Hotword_Cropped

語音熱詞指的是“OK Google”,這句話告訴用戶可以通過語音命令與手表交互。每當(dāng)用戶開啟手表設(shè)備時,熱詞都會在屏幕上顯示幾秒。用戶說完5次“OK Google”后,語音熱詞便不再繼續(xù)顯示。所以語音熱詞顯示的位置不是那么重要。但仍需注意避免遮擋表盤中其他元素。最后,應(yīng)為語音熱詞及狀態(tài)指示設(shè)置背景保護(hù),除非你在表盤設(shè)計中已經(jīng)為這些元素定制好了背景,比如使用暗色無圖案的背景。

系統(tǒng)UI元素位置標(biāo)注信息請參考規(guī)格和資源部分。

設(shè)計融入數(shù)據(jù)的表盤

Render_Saturn

表盤可向用戶展示與情境相關(guān)的數(shù)據(jù),并通過顏色或風(fēng)格的變化來體現(xiàn)不同數(shù)據(jù)。

你想傳達(dá)給用戶什么信息?

設(shè)計融入數(shù)據(jù)表盤的第一步是要基于現(xiàn)有數(shù)據(jù),設(shè)想預(yù)期達(dá)到的效果。首先,基于真實用戶需求,設(shè)想你認(rèn)為可能出現(xiàn)的結(jié)果。你希望用戶在輕瞥表盤后得知哪些信息?一旦設(shè)定了預(yù)期達(dá)到的效果,你就需要思考如何獲取相關(guān)數(shù)據(jù)以達(dá)成這一結(jié)果。

表盤是條時間軸,合理為其添加數(shù)據(jù)

Render_Episode

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

保持信息高度整合

Render_Albumem

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

始于洞察 不斷驗證

確保你的方案源自對用戶需求及預(yù)期的洞察。并通過用戶,持續(xù)驗證設(shè)計方案中的假設(shè)是否成立??梢栽囍仍诩埳袭嫵龃笾碌牟輬D,問問朋友是否明白它代表什么?通過不同的場景和數(shù)據(jù)類型來驗證你的想法。在最終編碼之前,先在實際的手表屏幕上測試一下設(shè)計方案。

設(shè)計可交互的表盤

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

  • 改變表盤的設(shè)計,例如調(diào)整配色方案。
  • 在當(dāng)前界面展現(xiàn)更多信息,例如顯示詳細(xì)的步數(shù)。
  • 在當(dāng)前界面或后臺完成某項動作,例如開始計時器。
  • 發(fā)起某項活動,例如在消息應(yīng)用中發(fā)起聊天。

可用手勢

只允許使用單擊手勢。這種限制有利于保持系統(tǒng)整體手勢的清晰一致性,并能保持表盤交互盡量簡潔。無論你或用戶都不應(yīng)把表盤當(dāng)做一款功能齊備的應(yīng)用來看。圖1總結(jié)了各種手勢的類型及用途。

遵循以下原則:表盤交互應(yīng)該是輕量的,用戶只需一兩次操作即可完成預(yù)期動作。

1451373054_4_w755_h269

點擊對象

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

點擊區(qū)域

你可以設(shè)定不同的點擊區(qū)域來觸發(fā)不同的表盤變化。例如:點擊整個表盤可以切換表盤狀態(tài),點擊某個具體對象則在當(dāng)前界面展示與之相關(guān)的信息,再次點擊該對象之外的區(qū)域則回到表盤初始狀態(tài)。

視覺反饋

visual_feedback

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

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

設(shè)計示例

下面給出一些可交互表盤的設(shè)計示例:

改變表盤外觀

aesthetic

切換表盤狀態(tài)

111

改變具體界面元素

changing-target

在當(dāng)前界面展示信息

revealing-info

單擊觸發(fā)事件

1-tap-launch

雙擊觸發(fā)事件

2-tap-launch

支持Android Wear 應(yīng)用

用戶可通過手機(jī)端Android Wear應(yīng)用安裝及設(shè)置表盤。

QQ截圖20160106181345

不要設(shè)置單獨的表盤圖標(biāo)

所有可用表盤均可通過手機(jī)端Android Wear應(yīng)用或手表的第三方應(yīng)用啟動,沒有必要為表盤設(shè)置一款單獨的啟動圖標(biāo)。

設(shè)置

每款支持用戶定制的表盤都有對應(yīng)的設(shè)置面板,可以通過手表或手機(jī)端應(yīng)用進(jìn)入。標(biāo)準(zhǔn)界面可以滿足大多數(shù)情況需要,但在該基礎(chǔ)上也可探索其他創(chuàng)新方向。

手表端的設(shè)置界面應(yīng)僅限使用開關(guān)及滾動列表控件。手機(jī)端設(shè)置界面可包含其他較為復(fù)雜的設(shè)置項目。

規(guī)格及資源

表盤設(shè)計范例及詳細(xì)系統(tǒng)界面 元素尺寸可參見?Andorid手表設(shè)計資源下載。

原文鏈接:http://developer.android.com/design/wear/index.html

 

翻譯@Tsongli ? ? 文章來源@騰訊MXD

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!