2016-3-9 用心設(shè)計
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點(diǎn)這里
來源:ui.cn
【背景與挑戰(zhàn)】
2015 年Google、Apple、阿里、華為均推出了智能手表或其操作系統(tǒng),同時來自研究公司Strategy Analytics的數(shù)據(jù)顯示,Apple Watch 2015年的全球出貨量達(dá)到1500萬支,可以說2015年是智能手表的元年。由于早期Android Wear 的部分服務(wù)無法在國內(nèi)使用,各大互聯(lián)網(wǎng)公司設(shè)計的智能手表操作系統(tǒng)更是風(fēng)起云涌,如出門問問、YunOS、TencentOS等等。但是由于業(yè)內(nèi)對智能手 表的形態(tài)尚處于探索階段,多數(shù)產(chǎn)品對于手表平臺所要承載的任務(wù)和信息并沒有進(jìn)行清晰的定義。百度MUX智能硬件團(tuán)隊(duì)從去年年初開始接手百度智能手表OS的 設(shè)計工作,認(rèn)為相對于智能手機(jī)的“碎片化”場景,智能手表在信息和任務(wù)維度更加輕量,呈現(xiàn)“微?;钡狞c(diǎn)狀用戶體驗(yàn)。需要重新設(shè)計承載他們的容器。本文希 望從智能手表系統(tǒng)的設(shè)計思路和方法層面與設(shè)計師們分享“微?;痹O(shè)計的經(jīng)驗(yàn)。
【為“微?;睍r間而生 - 智能手表的屬性定義】
定義新操作系統(tǒng)的第一步是定義設(shè)備屬性,我們分別從智能手表適合執(zhí)行的任務(wù)和適合顯示的信息兩個維度進(jìn)行定義。
智能手表有著極佳的便攜性和極低的輸入效率(輸入效率由精準(zhǔn)度和速率兩方面決定),因此它只適合執(zhí)行輕量的任務(wù),比如收到一個推送后簡單執(zhí)行附帶的操 作,P圖這類需要長時間連續(xù)操作的任務(wù)顯然不適合在手表上進(jìn)行。在信息維度,經(jīng)測試智能手表一次使用舒適時長為15秒左右(從抬起手腕到手臂有疲勞感,看 文章的你請可以自行測試),屏幕展現(xiàn)尺寸極小所以智能手表必須在繁雜信息中做出抉擇,把重點(diǎn)放在高頻的短信息上。
綜上分析我們將目前技術(shù)所能實(shí)現(xiàn)的智能手表屬性定義為“輕任務(wù),短信息”的承載設(shè)備。如果說手機(jī)讓我們利用生活中的碎片化時間執(zhí)任務(wù)和查看信息,那么智能手表就是利用我們的“微?;睍r間執(zhí)行更輕的任務(wù)和查看更短的信息。
【分析 - 細(xì)分手表承載的信息和任務(wù)】
智能手表展現(xiàn)尺寸十分有限,因此有必要將短信息和任務(wù)按使用頻率細(xì)分,以便設(shè)計不同的“容器”承載它們。
將長線任務(wù)集成為輕輕一點(diǎn)
適合放在手表上執(zhí)行的任務(wù)應(yīng)該是能在很短時間內(nèi)完成的,這意味手表的使用場景被限制!我們怎樣解決這一問題?我們發(fā)現(xiàn)將一些在手機(jī)上總是被重復(fù)的長線任務(wù) 進(jìn)行自動化處理后放在手表上能有效加快效率和擴(kuò)展使用場景。比如打車這個任務(wù)我們用手機(jī)時的操作是“拿出手機(jī) – 解鎖 – 打開App – 輸入地址 – 發(fā)出訂單”,在設(shè)計手表時我們把這個流程內(nèi)最常用的一些任務(wù)(比如從家到公司)提取出來,利用智能手表用戶可以一鍵發(fā)出從家到公司的訂單,而不是單純的把 手機(jī)的操作照搬一遍。
【交互模型】
承載任務(wù)和信息的“容器”
如前文所述我們將手表定義為“輕任務(wù),短信息”的承載設(shè)備,由于手表屏幕展現(xiàn)尺寸的限制我們不得不將信息和任務(wù)分級以便用不同容器承載,那么我們設(shè)計什么樣的容器來承載這些短信息和輕任務(wù)呢?
表盤
智能手表首先應(yīng)該是手表,因此表盤是用戶最常使用的頁面,除了顯示時間之外,我們用它承載最高頻的任務(wù)和信息。
快捷卡片
表盤的空間畢竟有限,而一些中任務(wù)和信息常常需要更大的空間,因此我們設(shè)計了快捷卡片,類似于安卓系統(tǒng)的Widght。
Laucher -是App集合,即長尾的信息和任務(wù)
不同于手機(jī)的App Laucher,手表的Lancher不是被最常使用的模塊,但是卻要承載大量的Icon,且由于手表屏幕尺寸的限制,給如何設(shè)計出足夠啟動器帶來很大的挑戰(zhàn)(后文將會講述設(shè)計和驗(yàn)證的方法)。
Notification
智能手表作為用戶抬手既得的屏幕,可以主動推動一些任務(wù)和信息,可以在不打斷當(dāng)前任務(wù)的情況下讓用戶利用微?;瘯r間快速處理,而Notification適合承載這些被動任務(wù)和即時信息。
從“容器”到立體的交互框架
如果容器是承載著信息和任務(wù)一個個的房間,那下一步要做的就是將這些房間建立起聯(lián)系,以此建立Duwaer系統(tǒng)的骨骼-交互架構(gòu)。
在Duwear的交互框架內(nèi)將操作分為兩種:橫向操作和縱向操作,確??臻g的秩序性,易于理解和記憶。配合新的輸入方式,借此創(chuàng)造適合手表單手操作的全新交互模型(輸入方式部分在下文詳述)
橫向操作與縱向操作構(gòu)成立體模型
新的交互架構(gòu)配合新的輸入方式
怎樣讓手表在執(zhí)行輕任務(wù)和查看短信息時效率進(jìn)一步提高?僅僅在交互架構(gòu)層面做改進(jìn)遠(yuǎn)遠(yuǎn)不夠,我們在交互架構(gòu)更新的基礎(chǔ)上加入了新的輸入方式 - 轉(zhuǎn)動手腕和甩動手腕。經(jīng)過用戶體驗(yàn)測試,新輸入方式的加入使高頻信息的查看和雙手被占用的場景效率明顯提高。
加入新的輸入維度
實(shí)現(xiàn)單手查看信息
對新交互模型進(jìn)行用戶測試
為了對新的交互模型進(jìn)行驗(yàn)證、迭代、調(diào)整。我們利用Form制作高保真原型進(jìn)行用戶測試。
利用Form 可以制作調(diào)用陀螺儀的高保真原型
我們通過設(shè)置任務(wù)讓用戶打分的方式來量化交互模型體驗(yàn)
測試后我們發(fā)現(xiàn),加入新的動作輸入后,明顯加快高頻信息的查看效率,以及在非佩戴手被限制為用戶提供極大的便利。
測試后也發(fā)現(xiàn)了一些問題 - 轉(zhuǎn)動手腕和擺動手腕只適合做執(zhí)行任務(wù)的步長較短的操作,比在用戶想查看第3個快捷卡片后的信息時這種操作方式并不具備效率優(yōu)勢。因此我們對交互模型進(jìn)行了微調(diào),加入了快速切換快捷視圖和消息的方式,用以補(bǔ)足新的交互模型短板。
【通知】
通知-現(xiàn)在就需要和以后再看
Duwear 的通知處理里將通知區(qū)分為即時通知-即現(xiàn)在就要顯示的,在這種場景下用戶的需求是“讓我的閱讀信息”,因此不同于Android Wear半屏顯示,我們將信息全屏化。另一種場景是錯過或歷史的信息,這種場景下用戶的需求是幫我快速找到信息,我們將消息橫向List化加快查找效率。
即時消息全屏顯示提高閱讀效率 歷史消息關(guān)注查找效率
化繁為簡-將信息卡片化
短信已經(jīng)成為日常收納信息的工具,將繁雜的信息卡片花,并且你可以將卡片添加到快捷卡片,當(dāng)你想用時只需要抬起手腕
將特殊短信提取關(guān)鍵信息并做卡片化處理
當(dāng)你收到影票兌換碼 你可以將卡片添加為快捷卡片 到影院后快速查看
【laucher】
小屏幕內(nèi)的App Laucher怎樣設(shè)計?
我們對App Laucher的定義是承載長尾功能和信息的入口,即承載Watch App 的容器,不同于手機(jī),手表App Laucher不會被經(jīng)常使用,但它會承載大量的App,所以在設(shè)計時我們確定幾個體驗(yàn)評估的維度:
1.每屏展示App Icon的個數(shù)
2.記憶與理解難度
3.操作的準(zhǔn)確性
App Icon的個數(shù): 9 操作的準(zhǔn)確性: 較高 記憶與理解難度:容易
App Icon的個數(shù):6 操作的準(zhǔn)確性:高 記憶與理解難度:容易
App Icon的個數(shù):3 操作的準(zhǔn)確性:很高 記憶與理解難度:容易
App Laucher作為長尾功能和信息的入口,會承載大量的App,他的查找效率必須高,這意味這沒屏承載的App Icon個數(shù)要足夠多-我們首先排除了第三個。接下來我們要確定的是,方案1和方案2綜合來看那個更好?我們進(jìn)行了新一輪的用戶測試。
用戶測試
通過與工程師合作我們實(shí)現(xiàn)了兩種方案的Dome, 并且可以輸出點(diǎn)擊的行為數(shù)據(jù)。測試環(huán)節(jié)我們關(guān)注如下三組數(shù)據(jù),以此對比兩方案優(yōu)略:
A.連續(xù)點(diǎn)擊12個Icon的時間(點(diǎn)擊精準(zhǔn)度)
B.連續(xù)點(diǎn)擊3個最常用Icon的時間(常用App 點(diǎn)擊精準(zhǔn)度)
C.查找特定圖標(biāo)并點(diǎn)擊的時間 (查找效率)
我們將兩組方案的輸出數(shù)據(jù)并進(jìn)行對比,對比測試我們發(fā)現(xiàn),方案1并沒有由于沒屏顯示圖標(biāo)數(shù)量的增多而明顯降低精準(zhǔn)度,方案1(綠色線)的數(shù)據(jù)優(yōu)于方案2(紅色線)。最終我們確定的方案1為最佳方案。
【快捷卡片】
如前文所述,表盤承載最高頻的信息和任務(wù),Laucher承載低頻的信息和任務(wù)。那么用什么承載中頻的信息和人任務(wù)呢?為了解決這一問題,我們設(shè)計了“快捷卡片”,快捷卡片像安卓的桌面Weight一樣可以承載信息和操作,用戶也可以對快捷卡片進(jìn)行“增刪改”等操作。
用戶可以通過在定位符上滑動快速切換卡片
【總結(jié)-關(guān)于操作系統(tǒng)的設(shè)計】
設(shè)計一個操作系統(tǒng)與設(shè)計一款A(yù)pp是完全不同的,當(dāng)我們設(shè)計個新設(shè)備的操作系統(tǒng)時我們率先考慮的是---這種新的設(shè)備用來顯示什么信息和執(zhí)行哪類任務(wù),我 們借由“輸入效率”“舒適時長”“便攜性”“展現(xiàn)尺寸”來定義智能手表的設(shè)備屬性,智能手表并不會像手機(jī)一樣承載所有的任務(wù),而是像Pad從PC中拆分出 打游戲和看視頻一樣,Watch要做的是從手機(jī)中拆分出部分任務(wù),并使其效率更高。
其次當(dāng)我們清晰的定義了設(shè)計的屬性,我們必須對這些信息和任務(wù)進(jìn)行分析,是不同使用頻率的信息和任務(wù)存在于不同的層級,是高頻的信息和任務(wù)抬手即得。
設(shè)計操作系統(tǒng)很像建筑一所房子(而App是房子里的擺件),我們必須清晰的設(shè)計房間的結(jié)構(gòu),劃分功能區(qū)域,由一個房間到另一個房間的路線。這也是操作系統(tǒng)設(shè)計中接下來要做的---存儲信息和任務(wù)的容器以及他們之間跳轉(zhuǎn)的路徑,即系統(tǒng)的交互架構(gòu)。
當(dāng)我們設(shè)計新的設(shè)備,在設(shè)計的新的交互架構(gòu)以后我們應(yīng)該考慮是否需要加入新的輸入方式以進(jìn)一步提率。
總結(jié)以上系統(tǒng)設(shè)計的步驟為:
1. 從信息和任務(wù)維度定義設(shè)備屬性
2. 分析信息和任務(wù)的層級
3. 設(shè)計系統(tǒng)的交互架構(gòu):承載信息和任務(wù)的容器,以及這些容器間跳轉(zhuǎn)的路徑
4. 檢視是否需要加入新的輸入方式(必須與交互架構(gòu)協(xié)調(diào))
5. 用高保真Dome檢視設(shè)計,并進(jìn)行持續(xù)改進(jìn)。
設(shè)計統(tǒng)一的控件/統(tǒng)一的通知機(jī)制
藍(lán)藍(lán)設(shè)計( tweetduck.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
關(guān)于 百度MUX
百 度移動用戶體驗(yàn)部(Baidu Mobile User Experience Department)成立于2009年,簡稱百度MUX,是百度移動服務(wù)事業(yè)群組核心部門之一。自成立以來,一直堅(jiān)持以用戶為中心并持續(xù)提升產(chǎn)品體驗(yàn)為 終極使命。始終追求著“簡單”的設(shè)計理念,負(fù)責(zé)百度所有移動產(chǎn)品的視覺、交互和用戶研究方面的工作,致力于設(shè)計行業(yè)內(nèi)最優(yōu)秀、體驗(yàn)最好的移動產(chǎn)品。
藍(lán)藍(lán)設(shè)計的小編 http://tweetduck.com