1 用戶界面
本章將介紹Glass的主要UI組件、它們的使用場景,以及用戶如何與它們進行交互操作。
1.1 時間軸概念是 Glass 用戶體驗的主體
Google Glass的主要用戶界面是由分辨率為640x360px的卡片組成的時間軸。它提供了諸多功能,如呈現(xiàn)動態(tài)和靜態(tài)卡片的標(biāo)準(zhǔn)模式,系統(tǒng)級語音指令以及Glass應(yīng)用的通用啟動方式。
用戶通過滾動時間軸切換不同區(qū)域顯示歷史、當(dāng)前和未來的卡片。新近產(chǎn)生的卡片會在最接近主頁卡片的地方出現(xiàn),而主頁卡片是用戶喚醒Glass時默認展現(xiàn)的第一界面。
時間軸除用以管理卡片之外,還能處理用戶輸入,例如通過觸控區(qū)定位時間軸,以及通過語音啟動Glass應(yīng)用等。大多數(shù)卡片有允許用戶進行操作的菜單項,如,回復(fù)文字消息或分享照片。
1.2 時間軸按照區(qū)域進行組織
時間軸中的卡片根據(jù)其臨時程度和類型出現(xiàn)在以下幾個區(qū)域:
主頁區(qū)
默認的主頁卡片是 Glass時鐘,處于時間軸的中間位置。用戶喚醒Glass的多數(shù)時候都展現(xiàn)該界面。
它為用戶啟動其他的Glass應(yīng)用提供了系統(tǒng)級的語音和觸控命令。Glass時鐘卡片為整個Glass系統(tǒng)提供了入口,因此它將一直處于時間軸的主頁位置 。
歷史區(qū)
Glass 時鐘的右側(cè)是歷史區(qū),這里僅顯示靜態(tài)卡片。因為動態(tài)卡片總被認為是當(dāng)前正在進行的,所以不會出現(xiàn)在這里。
靜態(tài)卡片在歷史區(qū)中自然“衰減”。當(dāng)新卡片進入歷史區(qū)時,處在離時鐘最近的位置。越早的卡片用戶越少使用,因此會被Glass系統(tǒng)依次向右推,Glass 會將用戶7天內(nèi)沒使用過的卡片,或者超出200張上限部分的卡片自動清除掉。
當(dāng)前和未來區(qū)
Glass時鐘的左側(cè)是當(dāng)前和未來的區(qū)域,這里會展現(xiàn)靜態(tài)、動態(tài)兩種卡片。
動態(tài)卡片展示和用戶當(dāng)前時刻有關(guān)的信息,并且此卡片一直處于此區(qū)域。如果焦點在動態(tài)卡片上時系統(tǒng)進入休眠,當(dāng)Glass再次被喚醒時這張動態(tài)卡片將會作為默認卡片顯示。
擁有未來時間戳或被固定位置的靜態(tài)卡片也會顯示在當(dāng)前和未來區(qū)?;诘乩砦恢谩顟B(tài)、或者其他類型用戶信息的Google Now卡片就是一個被固定位置的例子。
設(shè)置區(qū)
時間軸最左側(cè)是Glass系統(tǒng)級設(shè)置,在這里你能夠設(shè)置諸如音量和Wi-Fi網(wǎng)絡(luò)等系統(tǒng)選項。
1.3 動態(tài)卡片包含豐富、實時的內(nèi)容
動態(tài)卡片能夠通過頻繁更新自定義圖像來給用戶展示實時信息。這項功能非常適合那些需要基于用戶數(shù)據(jù)不斷更新的用戶界面。
動態(tài)卡片還能夠訪問Glass的底層硬件傳感器數(shù)據(jù),比如加速計和GPS,這些都是靜態(tài)卡片所不能實現(xiàn)的新形式交互和功能。
另外,動態(tài)卡片在時間軸內(nèi)運行時,用戶能夠左右滑動查看其他卡片并與之進行交互。這允許用戶執(zhí)行多任務(wù)且無縫地保持動態(tài)卡片在后臺實時運行。
1.4 靜態(tài)卡片顯示文字、圖像和視頻內(nèi)容
靜態(tài)卡片是一組簡單的使用HTML、文本、圖像和視頻來構(gòu)建的信息。它們不能實時刷新,而是被用來展示快速通知。
1.5 通過Glass應(yīng)用(Glassware)將內(nèi)容分享給聯(lián)系人
靜態(tài)卡片有分享功能,允許用戶將當(dāng)前卡片內(nèi)容分享給其他人或Glass應(yīng)用 (Glassware)。可將你的應(yīng)用(Glassware)時間軸卡片設(shè)置成共享的,同時為你的Glass應(yīng)用(Glassware)定義聯(lián)系人,這樣他就能夠接受你分享的時間軸條目。
1.6 沉浸模式提供了一種完全自定義的體驗
當(dāng)需要完全把控用戶體驗時,你可以利用沉浸模式,它能夠在時間軸之外運行。 沉浸模式允許渲染你自己的界面并且處理所有的用戶輸入。沉浸模式非常適合于那些在時間軸的限制下無法正常工作的Glass應(yīng)用(Glassware)。
1.7 菜單項允許用戶執(zhí)行操作
卡片和沉浸模式都能承載諸如分享、回復(fù)、移除等操作(不限于此)的菜單項。
2 原則
Glass與現(xiàn)有的移動平臺在設(shè)計與使用中有著根本的不同。開發(fā)Glass應(yīng)用時遵循以下原則將為用戶帶來最佳的體驗。
2.1 為Glass而設(shè)計
在不同的使用場景下,用戶會使用不同的設(shè)備來存儲和顯示信息。Glass最適合簡單、實時、與場景緊密相關(guān)的信息。
不要嘗試把為智能手機、平板或者桌上電腦設(shè)計的獨特功能移植到Glass上,也不要嘗試用Glass代替它們。相反,要關(guān)注Glass以及你的服務(wù)與上述設(shè)備如何互補,向用戶傳達獨一無二的體驗。
2.2 不要妨礙用戶
Glass被設(shè)計成這樣:需要時就出現(xiàn),不需要時則消失。設(shè)計Glass應(yīng)用也要采用同樣的理念——為用戶提供愉悅的功能補充用戶的生活,而不是讓他們脫離生活。
Glass顯示屏恰好在自然視線的上方,用戶既可以感受世界,又能在需要的時候訪問Glass。Google搜索會幫助你在當(dāng)前情景下找到特定信息。
2.3 與用戶場景緊密相關(guān)
要在合適的時間和地點為用戶推送信息。場景越相關(guān)用戶越感到神奇,從而增加用戶的使用時長和滿意度。
當(dāng)用戶到達喜歡的雜貨店時推送購物清單,是與用戶場景緊密相關(guān)的體驗,在Glass上運用的很好。
2.4 避免“驚喜”
由于非常貼近用戶感官,Glass上不符合用戶預(yù)期的功能或者不好的體驗會比在其他設(shè)備上更加令用戶感到糟糕。
別太頻繁也別不合時宜地發(fā)送內(nèi)容給用戶。讓用戶明確地知道Glass應(yīng)用的意圖,不要偽裝成不是你的東西。
在用戶不想看到提示的時候發(fā)送通知是一種不好的體驗。 注意推送信息的時間、頻率和地點。
2.5 圍繞人來設(shè)計
設(shè)計圖形化的、能夠利用語音和自然手勢交互的界面。專注于即用即拋的使用模式,讓用戶可以快速行動并繼續(xù)完成他們正在做的事情。
Glass上顯示的信息以人像優(yōu)先,讓用戶以平時說話的方式回復(fù),說話結(jié)束后會自動發(fā)送。
3 設(shè)計模式
使用通用的UX設(shè)計模式,讓用戶在所有的Glass應(yīng)用中獲得一致的體驗。
在本章,通過一些體驗良好的Glass設(shè)計模式的案例,你將了解到如何用基本構(gòu)件來構(gòu)建這些模式。
3.1 設(shè)計模式構(gòu)件
利用主要UI元素和調(diào)用方法,你可以在Glass上構(gòu)建各種運作良好的使用模式。 你還可以根據(jù)需要,將多個模式有機整合在你的Glass應(yīng)用上。
UI元素
1. 靜態(tài)卡片:顯示文本、HTML、圖像和視頻。靜態(tài)卡片可以調(diào)用動態(tài)卡片或者沉浸模式。
2. 動態(tài)卡片:顯示當(dāng)前重要信息的卡片,通常會高頻更新。
3. 沉浸模式:顯示暫時替代時間軸體驗的Android activities
調(diào)用方法
1. “OK glass”語音或觸控指令
2. 時間軸卡片中的語音或觸控指令
3.1.1 語音調(diào)用模式
用戶與Glass的交互中,語音指令扮演著重要的角色,它能釋放用戶的雙手,讓用戶快速、自然地處理事情。語音指令與用戶交流的方式,是Glass應(yīng)用體驗中的一個主要部分。
在OK Glass 菜單中,我們基于一套標(biāo)準(zhǔn)精心挑選了語音指令。你可以查看voice command checklist,里邊詳細描述了什么樣才是好的語音指令。通常來說,在 Glass中語音指令會采用以下指導(dǎo)原則:
專注于動作,而非機器指令
語音指令應(yīng)該基于用戶想要做什么而不是Glass應(yīng)用正在實現(xiàn)的行為。
例如“ok glass,快拍下來”的指令要優(yōu)于“ok glass,開啟相機”。專注于行動對于用戶交互是一種更自然的方式,主要的語音指令都要遵循這條準(zhǔn)則。
縮短從目的到行動的時間
語音指令應(yīng)該是盡可能快的實施指令。
例如,“ok glass,聽Led Zeppelin的歌”指令一下達就應(yīng)該開始播放音樂,而不是在播放之前強迫用戶去選擇任何選項。
口語化,容易說
語音指令是自然的聲音、與通常的指令非常不同、至少是兩個詞,這些特質(zhì)讓我們調(diào)整語音識別來適應(yīng)各種各樣的指令。
足夠通用,能適用于多個Glass應(yīng)用
為避免ok glass指令沖突,必要時語音指令應(yīng)該可以用于多個Glass應(yīng)用。在這 些情況下,Glass會自動彈出能夠完成指令的應(yīng)用列表。
例如,“ok glass, play a game, spellista”的指令要優(yōu)于 “ok glass, play spellista”。
3.2 設(shè)計模式
3.2.1 周期性通知
周期性通知指的是,不需調(diào)用模型而將靜態(tài)卡片插入時間軸。你的服務(wù)將根據(jù)用戶定義的設(shè)置來發(fā)送通知,比如說,每小時發(fā)送熱點新聞,或是一來郵件就通知。
這一模式調(diào)用Mirror API網(wǎng)絡(luò)服務(wù)或Glass上的Android后臺服務(wù)來將通知推送到時間軸中。
3.2.2 持續(xù)性任務(wù)
持續(xù)性任務(wù)指的是長時間運行的動態(tài)卡片,并且用戶可能頻繁切換進出這些卡片。
比如說,秒表應(yīng)用(Stopwatch)通過語音指令“ok glass”來啟動計時。
用戶可以在秒表應(yīng)用中停留一段時間,然后通過時間軸切換到其他卡片,再返回到秒表應(yīng)用。當(dāng)顯示屏從休眠狀態(tài)被喚起時,秒表應(yīng)用會是默認展現(xiàn)的卡片(前提:只要當(dāng)顯示器進入休眠時,秒表處于聚焦?fàn)顟B(tài))。用戶能通過點擊菜單項中的“停止”來停止計時。
注意:所有動態(tài)卡片都必須有“停止”或類似功能來移除卡片。
再舉一個持續(xù)性任務(wù)的例子——Strava。Strava應(yīng)用為當(dāng)前的跑步或騎車任務(wù)增 加一張帶有倒計時的動態(tài)卡片。點擊卡片展現(xiàn)有大量選項的菜單。當(dāng)用戶結(jié)束跑步或騎行時,能夠通過菜單項中的“完成”將卡片從時間軸中移除。
3.2.3 沉浸模式
沉浸模式以Android activity的形式來呈現(xiàn)沉浸體驗。沉浸模式能夠暫時性地替代時間軸模式,用戶能通過下滑手勢返回到時間軸模式。
4 視覺風(fēng)格
Glass有其獨特的視覺風(fēng)格,所以我們提供了標(biāo)準(zhǔn)的卡片模板、顏色、字體,以及文案方面的指南以便使用。
4.1 度量和網(wǎng)格
Glass的用戶界面有標(biāo)準(zhǔn)的布局和邊距尺寸指南,用于不同類型的時間軸卡片。 卡片區(qū)域通常如下所示,我們還為你列出了一些用于通用卡片設(shè)計的指南。
4.1.1 卡片區(qū)域
Glass定義了一組常見區(qū)域的尺寸,以便于保證不同卡片的設(shè)計和顯示的一致性。
主體內(nèi)容
卡片的主要文本內(nèi)容使用Roboto Thin字體,并且在邊界需要留出內(nèi)頁邊距。Glass會根據(jù)內(nèi)容的量來動態(tài)調(diào)整字體尺寸。
全出血圖像
圖像全出血時的顯示效果最好,而且不必像文本排版那樣需要留出內(nèi)容與邊框的 40px間隙。
頁腳
頁腳顯示有關(guān)卡片的補充信息,例如卡片的來源或者時間戳。頁腳文本通常為 26px、Roboto Light字體,白色(#ffffff),居中顯示。
狀態(tài)欄
狀態(tài)欄有三個部分:滾動條,顯示了在一組卡片中當(dāng)前所處的位置;進度和時限,顯示了可以取消操作的進度和時限;條紋進度條,會在進程中會進行循環(huán)動畫。
左對齊圖片或欄目
左對齊圖片或欄目需要調(diào)整內(nèi)頁邊距和文本內(nèi)容。請參見4.2.4章節(jié)。
內(nèi)頁邊距
時間軸卡片的文本內(nèi)容與四周有40px的間隙。這樣保證大多數(shù)用戶能清晰的看見 內(nèi)容。
4.2 布局模板
下面的布局會向你展示一些常用的布局網(wǎng)格和卡片。實現(xiàn)細節(jié)請參見?Mirror API playground。
4.2.1 主要布局
4.2.2 帶文字的全出血圖片
4.2.3 作者和內(nèi)容
4.2.4 左對齊圖片或欄目
4.2.5 列表
4.3 顏色
Glass用白色顯示大多數(shù)文字,并使用以下標(biāo)準(zhǔn)色顯示緊急或重要內(nèi)容。你也可以在時間軸卡片中使用這些顏色:
白色 |
#ffffff |
灰色 |
#808080 |
藍色 |
#34a7ff |
紅色 |
#cc3333 |
綠色 |
#99cc33 |
黃色 |
#ddbb11 |
注意:如果你在HTML時間軸卡片中使用了CSS樣式,Glass會自動使用標(biāo)準(zhǔn)顏色呈現(xiàn)它們。Glass使用base_style.css?樣式表呈現(xiàn)HTML卡片。
以下示例表現(xiàn)了如何使用顏色表現(xiàn)重要信息,比如火車路線和航班狀態(tài)。
4.4 字體
Glass顯示文本時,默認使用Roboto Thin(首選)或Roboto Light(輔助)字體,這取決于字體大小。在設(shè)計動態(tài)卡片或沉浸模式時,也可以選擇適合你品牌形象的字體。
首選字體 – Roboto Thin,此字體用于顯示大部分文字
輔助字體 – Roboto Light,此字體用于顯示26px的文字
4.4.1 可動態(tài)縮放的文本
Glass在顯示大多數(shù)時間軸卡片時,盡可能使用最大字號。以下卡片是根據(jù)文本量進行調(diào)縮放的示例。
4.5 文案
文字的顯示空間有限,所以在為Glass應(yīng)用(Glassware)撰寫文案時,請遵守以下規(guī)則:
保持簡短
簡潔、簡單并準(zhǔn)確。尋找長文本的替代品,比如朗讀內(nèi)容、用圖片或視頻呈現(xiàn)、或者刪除功能。
保持簡單
假裝你正在與一個聰明能干的人對話,但他不了解技術(shù)術(shù)語,英文不是很好。使用短語句,主動動詞及常見名詞。
保持友好
使用縮寫,直接使用第二人稱(你)與用戶交流。如果你的表述不是日常對話會使用的語句,那么它不適用于此處。
先放最重要的
前兩個單詞(包括空格在內(nèi)約11個字符),應(yīng)該至少包括此句的一個最重要的信息。如果不是這樣,請重新開始。只描述最重要的信息即可,別再試圖解釋細微的差別,因為這些解釋文字會被大部分用戶忽略。
避免重復(fù)
如果一個重要詞語在某個界面或某段文本內(nèi)多次重復(fù),想辦法只用一次。
—————————————————————————————————–
文章來源:百度MUX
原文地址:https://developers.google.com/glass/design/
原文版本:2014年5月13日版本