感受未來(lái)設(shè)計(jì)！超詳?shù)腉oogle Glass界面設(shè)計(jì)指南

編者按：這篇文章絕對(duì)值得收藏，Google Glass界面設(shè)計(jì)指南由用戶界面、設(shè)計(jì)原則、設(shè)計(jì)模式和視覺風(fēng)格4方面組成，說是一篇手把手的設(shè)計(jì)教程也不為過，特別是百度同學(xué)的專業(yè)翻譯，保證了文章質(zhì)量的原汁原味。向未來(lái)看齊的設(shè)計(jì)師們感受一下吧！

指南類好文大合集！

《超贊！設(shè)計(jì)師完全自學(xué)指南》
《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
《交互設(shè)計(jì)師修煉指南！教你從零開始成為優(yōu)秀交互設(shè)計(jì)師》

一、用戶界面

本章將介紹Glass的主要UI組件、它們的使用場(chǎng)景，以及用戶如何與它們進(jìn)行交互操作。

1.1 時(shí)間軸概念是 Glass 用戶體驗(yàn)的主體

Google Glass的主要用戶界面是由分辨率為640x360px的卡片組成的時(shí)間軸。它提供了諸多功能，如呈現(xiàn)動(dòng)態(tài)和靜態(tài)卡片的標(biāo)準(zhǔn)模式，系統(tǒng)級(jí)語(yǔ)音指令以及Glass應(yīng)用的通用啟動(dòng)方式。

用戶通過滾動(dòng)時(shí)間軸切換不同區(qū)域顯示歷史、當(dāng)前和未來(lái)的卡片。新近產(chǎn)生的卡片會(huì)在最接近主頁(yè)卡片的地方出現(xiàn)，而主頁(yè)卡片是用戶喚醒Glass時(shí)默認(rèn)展現(xiàn)的第一界面。

時(shí)間軸除用以管理卡片之外，還能處理用戶輸入，例如通過觸控區(qū)定位時(shí)間軸，以及通過語(yǔ)音啟動(dòng)Glass應(yīng)用等。大多數(shù)卡片有允許用戶進(jìn)行操作的菜單項(xiàng)，如，回復(fù)文字消息或分享照片。

1.2 時(shí)間軸按照區(qū)域進(jìn)行組織

時(shí)間軸中的卡片根據(jù)其臨時(shí)程度和類型出現(xiàn)在以下幾個(gè)區(qū)域：

主頁(yè)區(qū)

默認(rèn)的主頁(yè)卡片是 Glass時(shí)鐘，處于時(shí)間軸的中間位置。用戶喚醒Glass的多數(shù)時(shí)候都展現(xiàn)該界面。

它為用戶啟動(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í)鐘最近的位置。越早的卡片用戶越少使用，因此會(huì)被Glass系統(tǒng)依次向右推，Glass 會(huì)將用戶7天內(nèi)沒使用過的卡片，或者超出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)卡片展示和用戶當(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)、或者其他類型用戶信息的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)卡片能夠通過頻繁更新自定義圖像來(lái)給用戶展示實(shí)時(shí)信息。這項(xiàng)功能非常適合那些需要基于用戶數(shù)據(jù)不斷更新的用戶界面。

動(dòng)態(tài)卡片還能夠訪問Glass的底層硬件傳感器數(shù)據(jù)，比如加速計(jì)和GPS，這些都是靜態(tài)卡片所不能實(shí)現(xiàn)的新形式交互和功能。

另外，動(dòng)態(tài)卡片在時(shí)間軸內(nèi)運(yùn)行時(shí)，用戶能夠左右滑動(dòng)查看其他卡片并與之進(jìn)行交互。這允許用戶執(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 通過Glass應(yīng)用(Glassware)將內(nèi)容分享給聯(lián)系人

靜態(tài)卡片有分享功能，允許用戶將當(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)需要完全把控用戶體驗(yàn)時(shí)，你可以利用沉浸模式，它能夠在時(shí)間軸之外運(yùn)行。 沉浸模式允許渲染你自己的界面并且處理所有的用戶輸入。沉浸模式非常適合于那些在時(shí)間軸的限制下無(wú)法正常工作的Glass應(yīng)用(Glassware)。

 

1.7 菜單項(xiàng)允許用戶執(zhí)行操作

卡片和沉浸模式都能承載諸如分享、回復(fù)、移除等操作（不限于此）的菜單項(xiàng)。

二、原則

Glass與現(xiàn)有的移動(dòng)平臺(tái)在設(shè)計(jì)與使用中有著根本的不同。開發(fā)Glass應(yīng)用時(shí)遵循以下原則將為用戶帶來(lái)最佳的體驗(yàn)。

2.1 為Glass而設(shè)計(jì)

在不同的使用場(chǎng)景下，用戶會(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ǔ)，向用戶傳達(dá)獨(dú)一無(wú)二的體驗(yàn)。

2.2 不要妨礙用戶

Glass被設(shè)計(jì)成這樣：需要時(shí)就出現(xiàn)，不需要時(shí)則消失。設(shè)計(jì)Glass應(yīng)用也要采用同樣的理念——為用戶提供愉悅的功能補(bǔ)充用戶的生活，而不是讓他們脫離生活。

Glass顯示屏恰好在自然視線的上方，用戶既可以感受世界，又能在需要的時(shí)候訪問Glass。Google搜索會(huì)幫助你在當(dāng)前情景下找到特定信息。

2.3 與用戶場(chǎng)景緊密相關(guān)

要在合適的時(shí)間和地點(diǎn)為用戶推送信息。場(chǎng)景越相關(guān)用戶越感到神奇，從而增加用戶的使用時(shí)長(zhǎng)和滿意度。

當(dāng)用戶到達(dá)喜歡的雜貨店時(shí)推送購(gòu)物清單，是與用戶場(chǎng)景緊密相關(guān)的體驗(yàn)，在Glass上運(yùn)用的很好。

2.4 避免“驚喜”

由于非常貼近用戶感官，Glass上不符合用戶預(yù)期的功能或者不好的體驗(yàn)會(huì)比在其他設(shè)備上更加令用戶感到糟糕。

別太頻繁也別不合時(shí)宜地發(fā)送內(nèi)容給用戶。讓用戶明確地知道Glass應(yīng)用的意圖，不要偽裝成不是你的東西。

在用戶不想看到提示的時(shí)候發(fā)送通知是一種不好的體驗(yàn)。 注意推送信息的時(shí)間、頻率和地點(diǎn)。

2.5 圍繞人來(lái)設(shè)計(jì)

設(shè)計(jì)圖形化的、能夠利用語(yǔ)音和自然手勢(shì)交互的界面。專注于即用即拋的使用模式，讓用戶可以快速行動(dòng)并繼續(xù)完成他們正在做的事情。

Glass上顯示的信息以人像優(yōu)先，讓用戶以平時(shí)說話的方式回復(fù)，說話結(jié)束后會(huì)自動(dòng)發(fā)送。

三、設(shè)計(jì)模式

使用通用的UX設(shè)計(jì)模式，讓用戶在所有的Glass應(yīng)用中獲得一致的體驗(yàn)。

在本章，通過一些體驗(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)用模式

用戶與Glass的交互中，語(yǔ)音指令扮演著重要的角色，它能釋放用戶的雙手，讓用戶快速、自然地處理事情。語(yǔ)音指令與用戶交流的方式，是Glass應(yīng)用體驗(yàn)中的一個(gè)主要部分。

在OK Glass 菜單中，我們基于一套標(biāo)準(zhǔn)精心挑選了語(yǔ)音指令。你可以查看voice command checklist，里邊詳細(xì)描述了什么樣才是好的語(yǔ)音指令。通常來(lái)說，在 Glass中語(yǔ)音指令會(huì)采用以下指導(dǎo)原則：

專注于動(dòng)作，而非機(jī)器指令

語(yǔ)音指令應(yīng)該基于用戶想要做什么而不是Glass應(yīng)用正在實(shí)現(xiàn)的行為。

例如“ok glass，快拍下來(lái)”的指令要優(yōu)于“ok glass，開啟相機(jī)”。專注于行動(dòng)對(duì)于用戶交互是一種更自然的方式，主要的語(yǔ)音指令都要遵循這條準(zhǔn)則。

縮短從目的到行動(dòng)的時(shí)間

語(yǔ)音指令應(yīng)該是盡可能快的實(shí)施指令。

例如，“ok glass，聽Led Zeppelin的歌”指令一下達(dá)就應(yīng)該開始播放音樂，而不是在播放之前強(qiáng)迫用戶去選擇任何選項(xiàng)。

口語(yǔ)化,容易說

語(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ù)用戶定義的設(shè)置來(lái)發(fā)送通知，比如說，每小時(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)卡片，并且用戶可能頻繁切換進(jìn)出這些卡片。

比如說，秒表應(yīng)用(Stopwatch)通過語(yǔ)音指令“ok glass”來(lái)啟動(dòng)計(jì)時(shí)。

用戶可以在秒表應(yīng)用中停留一段時(shí)間，然后通過時(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))。用戶能通過點(diǎn)擊菜單項(xiàng)中的“停止”來(lái)停止計(jì)時(shí)。

注意：所有動(dòng)態(tài)卡片都必須有“停止”或類似功能來(lái)移除卡片。

再舉一個(gè)持續(xù)性任務(wù)的例子——Strava。Strava應(yīng)用為當(dāng)前的跑步或騎車任務(wù)增 加一張帶有倒計(jì)時(shí)的動(dòng)態(tài)卡片。點(diǎn)擊卡片展現(xiàn)有大量選項(xiàng)的菜單。當(dāng)用戶結(jié)束跑步或騎行時(shí)，能夠通過菜單項(xiàng)中的“完成”將卡片從時(shí)間軸中移除。

3.2.3 沉浸模式

沉浸模式以Android activity的形式來(lái)呈現(xiàn)沉浸體驗(yàn)。沉浸模式能夠暫時(shí)性地替代時(shí)間軸模式，用戶能通過下滑手勢(shì)返回到時(shí)間軸模式。

四、視覺風(fēng)格

Glass有其獨(dú)特的視覺風(fēng)格,所以我們提供了標(biāo)準(zhǔn)的卡片模板、顏色、字體，以及文案方面的指南以便使用。

4.1 度量和網(wǎng)格

Glass的用戶界面有標(biāo)準(zhǔn)的布局和邊距尺寸指南,用于不同類型的時(shí)間軸卡片。 卡片區(qū)域通常如下所示，我們還為你列出了一些用于通用卡片設(shè)計(jì)的指南。

4.1.1 卡片區(qū)域

Glass定義了一組常見區(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)畫。

左對(duì)齊圖片或欄目

左對(duì)齊圖片或欄目需要調(diào)整內(nèi)頁(yè)邊距和文本內(nèi)容。請(qǐng)參見4.2.4章節(jié)。

內(nèi)頁(yè)邊距

時(shí)間軸卡片的文本內(nèi)容與四周有40px的間隙。這樣保證大多數(shù)用戶能清晰的看見 內(nèi)容。

4.2 布局模板

下面的布局會(huì)向你展示一些常用的布局網(wǎng)格和卡片。實(shí)現(xiàn)細(xì)節(jié)請(qǐng)參見 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)重要信息，比如火車路線和航班狀態(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)撰寫文案時(shí)，請(qǐng)遵守以下規(guī)則：

保持簡(jiǎn)短

簡(jiǎn)潔、簡(jiǎn)單并準(zhǔn)確。尋找長(zhǎng)文本的替代品，比如朗讀內(nèi)容、用圖片或視頻呈現(xiàn)、或者刪除功能。

保持簡(jiǎn)單

假裝你正在與一個(gè)聰明能干的人對(duì)話，但他不了解技術(shù)術(shù)語(yǔ)，英文不是很好。使用短語(yǔ)句，主動(dòng)動(dòng)詞及常見名詞。

保持友好

使用縮寫，直接使用第二人稱(你)與用戶交流。如果你的表述不是日常對(duì)話會(huì)使用的語(yǔ)句，那么它不適用于此處。

先放最重要的

前兩個(gè)單詞(包括空格在內(nèi)約11個(gè)字符)，應(yīng)該至少包括此句的一個(gè)最重要的信息。如果不是這樣，請(qǐng)重新開始。只描述最重要的信息即可，別再試圖解釋細(xì)微的差別，因?yàn)檫@些解釋文字會(huì)被大部分用戶忽略。

避免重復(fù)

如果一個(gè)重要詞語(yǔ)在某個(gè)界面或某段文本內(nèi)多次重復(fù)，想辦法只用一次。

原文地址：developers.google
譯文地址：mux.baidu

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量70萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：