Google Android Wear 設計規范學習心得
寫在正文前的幾句話
隨著Apple Watch明年開始發售,可穿戴設備市場會逐漸火起來,這里的主因不是因為Apple Watch會像當年的iPhone 4一樣開啟了智能手機時代,更主要的原因是智能手機越做越大,便攜性越來越差。用戶需要一個更為便攜的設備來滿足一些需要快速完成的任務。筆者購買了iphone 6 Plus后就遇到了這樣的問題,個頭太大不好放進衣服的兜里,只好放在包里,當需要時還要停下腳步或正在做的事情從包里拿出手機。這個過程每天都要重復好幾十次甚至有時會上百次。觀察下你身邊的人是不是也有類似的情景發生?
智能穿戴設備,無論是手表還是眼鏡就會解決這個問題,不因為別的,貼身性就是最大的優勢,這些設備與手機互聯,在不方便使用手機的時候完成簡單的任務,當拿起手機時能無縫的延續之前在穿戴設備上的進度。智能手機會徹底變為個人隨身終端,穿戴設備擔負起部分智能手機的工作,這才是未來移動互聯網的寫照。
關于Google Android Wear Design?
Google在發布第一款Android Wear的時候就同步推出了設計規范,從設計規范開篇Google就希望所有的開發者可以嚴格按照規范來設計Android Wear上的應用。另外需要提及的是Android Wear的設計規范與Material Design風格上有很高的相似度,為了保證設計的一致性建議手機APP的設計風格最好采用Material Design,這也是Google現在提倡的統一平臺和各個交互間的用戶體驗。
? Android Wear設計基本原則
卡片流
與手機和平板一樣,Android Wear的通知信息也采用了垂直排列的卡片流形式,區別在于Android Wear每次只會顯示一張卡片以及一個背景圖組成的簡短信息。這種設計的意義在于讓用戶抬起手腕掃一眼就能掌握信息,想要更進一步時滑動下卡片就能獲取隱藏起來的更多信息或打開應用。
自然交互
得益于Google的語音識別和語義分析技術,可以將應用與系統設定的口令關聯使用戶可以用最自然的語音輸入方式達到目的。
設計規范文檔相當詳細,就不全部翻譯了,下邊的圖片是筆者總結的要點摘要,僅供大家參考:
關于2D Picker
2D Picker是Android Wear獨有的信息架構,2D Picker里的“D”可以理解為軸向,只能在水平軸向選取選項的為“1D Picker”,例如音樂播放應用中在一個音樂專輯中切換音樂。如下圖:
已經有水平軸向后再加上一個垂直軸向就是2D Picker,還是用音樂播放應用舉例來說就是從當前播放的專輯切換到另一個專輯,如下圖:
語音命令
Android Wear支持系統層級和應用層級兩種類型的語音命令,前者是控制系統功能模塊,例如“設置幾點的鬧鐘”、“開始計時”。后者是控制已安裝的應用,用戶需要先說出“開始(Start)”作為激活命令,之后再說出具體的命令。
注意:目前Android Wear不支持中文命令。
下面這個表格是Android Wear支持的語音命令:
目的 | 口令例句 |
call a car/taxi叫輛車/出租車 | “OK Google,get me a taxi”“OK,Google call me a car” |
Take a note記筆記 | “OK Google,take a note”“OK Google,note to self” |
Set alarm設定鬧鐘 | “OK Google,set an alarm for 8 AM”“OK Google,wake me up at 6 tomorrow” |
Set timer設定計時 | “OK Google,set a timer for 10 minutes” |
Star/Stop a bike ride開始/停止騎自行車 | “OK Google,start cycling”“OK Google,start my bike ride”
“OK Google,stop cycling” |
Start/Stop a run開始/停止跑步 | “OK Google,track my run”“OK Google,start running”
“OK Google,stop running” |
Start/Stop a workout開始/停止鍛煉 | “OK Google,start a workout”“OK Google,track my workout”
“OK Goolge stop workout” |
Show heart rate顯示心率 | “OK Google,what’s my heart rate?”“OK Google,what’s my bpm?” |
Show step count顯示步數 | “OK Google,how many steps have I taken?”“OK Google,what’s my step count?” |
Android Wear 設計模式
交互方式
Android Wear支持點擊、長按、滑動、語音、手掌這5種交互形式。
1、通知卡片、可操作、確認動畫
你在某天的晚上你戴著Android Wear來到了一個餐廳,這時手腕感到了微微的震動后抬起手腕掃了一眼,發現你的好基友也來過這個餐廳并且還很喜歡這里。
通知卡,最基本的信息通知展示形式
既然好基友來過這里,那為了證明你和他的友誼那就簽個到吧,順便表示下我來這里不是因為你……
?? 通知出現—滑動卡片—頁面出現簽到按鍵—點擊—操作確認動畫(包含結果)—結束
接下來換成基友視角,幾天前還是相同的時間,你的基友第一次來到這家店……
?????? 通知出現——點擊簽到——操作確認動畫(包含結果)——結束
接下來修改下劇本,在某日你陪女友去購物中心購物,到了晚飯時間打算在購物中心里找家餐廳解決下肚子問題,你帶著女友進入了一家店,這時手腕傳來震感后抬手一看,發現推送來的通知里的店名不是這家店,心里一邊嘀咕著“什么破室內定位,一點兒都不準“一邊準備修改下位置……
通知出現——滑動當前卡片——點擊修改位置——垂直切換選項——點擊選項——操作確認動畫(包含結果)——結束
以上三個范例是非常具有代表性的,從中可以看出通知卡片分為僅包含信息和帶有可操作特性兩種,前者適用于大多數情況,后者需要取決于產品形態。不管是哪種模式都有簽到的操作確認動畫和結果,這里強調動畫的原因是簽到這個功能一方面是非高頻操作,其次是需要向服務器返回結果,而返回數據期間需要用動畫來告訴用戶應用運行正常。
2、1D picker、2D picker
你走在上班路上聽著音樂,走到十字路口等紅燈時想換首音樂……
滑動當前卡片——點擊切換歌曲——垂直切換選擇歌曲——點擊卡片——播放選中的歌曲
到了公司坐到椅子上,想換個適合工作時候聽的專輯……
?? 滑動當前卡片—點擊切換專輯—垂直切換專輯—左右選擇歌曲—播放選中的歌曲
這兩個范例是典型的1D Picker和2D Picker,關于這兩者區別在文中已做了說明就不再重復了,這里要強調的是如果產品的某個功能符合用戶高頻使用或要求快速響應特點的,不要加入確認動畫。
3、語音
涉及到語音的使用時有個細節要注意下,涉及到與其他人之間溝通的時候,語音輸入的內容直到發送完成前是可以“反悔”的,發送中狀態會用倒計時的方式來給用戶最后幾秒鐘來決定是否發送,但是如果用系統預設的快捷回復則不需要用戶最后確認。
在聽音樂的時候總會遇到一些自己非常喜歡的歌曲,為了不想錯過會想辦法創建一個只有自己摯愛歌曲的專輯……
滑動當前卡片—點擊創建專輯—說出專輯名稱—語音識別—創建專輯—當前歌曲保存到創建的專輯中
來了個短信,但手機放在包里或不在手邊而又懶得去拿……這種情況比較多見,這時如果佩戴著Android Wear就可以快速回復短信,還不用敲鍵盤打字。
???? ?滑動卡片—點擊回復—說出短信內容—語音識別—發送中—發送完成
在有些場景下不太方便使用語音回復,例如在電影院、圖書館、學校上課和會議中等,這個時候可以用預先設定好的回復來解決問題。
?????? 滑動卡片—點擊回復—點擊google圖標—選擇快捷回復句—發送完成
4、全屏化、退出
Android Wear對應用全屏顯示有限制條件,只在卡片無法承載內容時可以全屏化,之后要可以立即退出全屏化。做出這些限制的目的是避免應用侵占Android Wear作為手表的主要用處——全屏顯示時鐘。
接下來舉例來說明進入和退出全屏化的設計:
某天你要去赴個約會,約會地點是你不熟悉的地方,最保險的做法是打個車過去,你利用Android Wear上的打車應用成功叫到車到達目的地后想對司機的服務打個分……
??? 點擊卡片上的星星圖標—全屏化進入打分界面—打分—退出全屏化回到卡片
有的應用特別是發送信息后不能自動退出需要等待另一方應答,按之前看到的短信回復的范例來看,發送信息成功后要不是退出或停留在發送成功頁。這兩個設計都不是符合要求的,退出應用不符合業務需求,停留在發送成功頁看著還能接受,但不符合設計規范的全屏化后迅速退出全屏的要求。關于這部分的設計可以參考下面這個叫車應用范例:
叫車請求發布成功后頁面從全屏化退出進入了等待應答卡片頁
在Android Wear上的退出方式有以下幾種:設備上的返回主頁按鍵、應用內含有退出功能、長按屏幕、用手掌捂住屏幕、滑屏退出(僅限全屏化下)。下面看看范例:
???????????? ???????????????應用內含有退出功能
????????????? 長按屏幕后出現退出按鍵
?????????????????????? 手掌捂住屏幕后應用退出
?????????????????? 應用全屏化后滑動屏幕快速退出
本文為作者量產型(微信號:Lostman_D)投稿發布,轉載請注明出處并附帶本文鏈接
第一張圖片壓根看不清,求清楚圖片。。 ?
額,點擊就好啊