超詳?shù)腉oogle Glass界面設(shè)計(jì)指南

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

4.5 文案 文字的顯示空間有限,所以在為Glass應(yīng)用(Glassware)撰寫(xiě)文案時(shí),請(qǐng)遵守以下規(guī)則:
保持簡(jiǎn)短 簡(jiǎn)潔、簡(jiǎn)單并準(zhǔn)確。尋找長(zhǎng)文本的替代品,比如朗讀內(nèi)容、用圖片或視頻呈現(xiàn)、或者刪除功能。
保持簡(jiǎn)單 假裝你正在與一個(gè)聰明能干的人對(duì)話(huà),但他不了解技術(shù)術(shù)語(yǔ),英文不是很好。使用短語(yǔ)句,主動(dòng)動(dòng)詞及常見(jiàn)名詞。
保持友好 使用縮寫(xiě),直接使用第二人稱(chēng)(你)與用戶(hù)交流。如果你的表述不是日常對(duì)話(huà)會(huì)使用的語(yǔ)句,那么它不適用于此處。
先放最重要的 前兩個(gè)單詞(包括空格在內(nèi)約11個(gè)字符),應(yīng)該至少包括此句的一個(gè)最重要的信息。如果不是這樣,請(qǐng)重新開(kāi)始。只描述最重要的信息即可,別再試圖解釋細(xì)微的差別,因?yàn)檫@些解釋文字會(huì)被大部分用戶(hù)忽略。
避免重復(fù) 如果一個(gè)重要詞語(yǔ)在某個(gè)界面或某段文本內(nèi)多次重復(fù),想辦法只用一次。 
30
評(píng)論區(qū)(0)
正在加載評(píng)論...