天天看點

Google Glass界面設計指南1 使用者界面2 原則3 設計模式4 視覺風格4.5 文案

Google Glass界面設計指南1 使用者界面2 原則3 設計模式4 視覺風格4.5 文案

1 使用者界面

本章将介紹Glass的主要UI元件、它們的使用場景,以及使用者如何與它們進行互動操作。

1.1 時間軸概念是 Glass 使用者體驗的主體

Google Glass的主要使用者界面是由分辨率為640x360px的卡片組成的時間軸。它提供了諸多功能,如呈現動态和靜态卡片的标準模式,系統級語音指令以及Glass應用的通用啟動方式。

使用者通過滾動時間軸切換不同區域顯示曆史、目前和未來的卡片。新近産生的卡片會在最接近首頁卡片的地方出現,而首頁卡片是使用者喚醒Glass時預設展現的第一界面。

Google Glass界面設計指南1 使用者界面2 原則3 設計模式4 視覺風格4.5 文案

時間軸除用以管理卡片之外,還能處理使用者輸入,例如通過觸控區定位時間軸,以及通過語音啟動Glass應用等。大多數卡片有允許使用者進行操作的菜單項,如,回複文字消息或分享照片。

1.2 時間軸按照區域進行組織

時間軸中的卡片根據其臨時程度和類型出現在以下幾個區域:

首頁區

預設的首頁卡片是 Glass時鐘,處于時間軸的中間位置。使用者喚醒Glass的多數時候都展現該界面。

它為使用者啟動其他的Glass應用提供了系統級的語音和觸控指令。Glass時鐘卡片為整個Glass系統提供了入口,是以它将一直處于時間軸的首頁位置 。

Google Glass界面設計指南1 使用者界面2 原則3 設計模式4 視覺風格4.5 文案

曆史區

Glass 時鐘的右側是曆史區,這裡僅顯示靜态卡片。因為動态卡片總被認為是目前正在進行的,是以不會出現在這裡。

靜态卡片在曆史區中自然“衰減”。當新卡片進入曆史區時,處在離時鐘最近的位置。越早的卡片使用者越少使用,是以會被Glass系統依次向右推,Glass 會将使用者7天内沒使用過的卡片,或者超出200張上限部分的卡片自動清除掉。

Google Glass界面設計指南1 使用者界面2 原則3 設計模式4 視覺風格4.5 文案

目前和未來區

Glass時鐘的左側是目前和未來的區域,這裡會展現靜态、動态兩種卡片。

動态卡片展示和使用者目前時刻有關的資訊,并且此卡片一直處于此區域。如果焦點在動态卡片上時系統進入休眠,當Glass再次被喚醒時這張動态卡片将會作為預設卡片顯示。

擁有未來時間戳或被固定位置的靜态卡片也會顯示在目前和未來區。基于地理位置、狀态、或者其他類型使用者資訊的Google Now卡片就是一個被固定位置的例子。

Google Glass界面設計指南1 使用者界面2 原則3 設計模式4 視覺風格4.5 文案

設定區

時間軸最左側是Glass系統級設定,在這裡你能夠設定諸如音量和Wi-Fi網絡等系統選項。

Google Glass界面設計指南1 使用者界面2 原則3 設計模式4 視覺風格4.5 文案

1.3 動态卡片包含豐富、實時的内容

動态卡片能夠通過頻繁更新自定義圖像來給使用者展示實時資訊。這項功能非常适合那些需要基于使用者資料不斷更新的使用者界面。

動态卡片還能夠通路Glass的底層硬體傳感器資料,比如加速計和GPS,這些都是靜态卡片所不能實作的新形式互動和功能。

Google Glass界面設計指南1 使用者界面2 原則3 設計模式4 視覺風格4.5 文案

另外,動态卡片在時間軸内運作時,使用者能夠左右滑動檢視其他卡片并與之進行互動。這允許使用者執行多任務且無縫地保持動态卡片在背景實時運作。

Google Glass界面設計指南1 使用者界面2 原則3 設計模式4 視覺風格4.5 文案

1.4 靜态卡片顯示文字、圖像和視訊内容

靜态卡片是一組簡單的使用HTML、文本、圖像和視訊來建構的資訊。它們不能實時重新整理,而是被用來展示快速通知。

Google Glass界面設計指南1 使用者界面2 原則3 設計模式4 視覺風格4.5 文案

1.5 通過Glass應用(Glassware)将内容分享給聯系人

靜态卡片有分享功能,允許使用者将目前卡片内容分享給其他人或Glass應用 (Glassware)。可将你的應用(Glassware)時間軸卡片設定成共享的,同時為你的Glass應用(Glassware)定義聯系人,這樣他就能夠接受你分享的時間軸條目。

Google Glass界面設計指南1 使用者界面2 原則3 設計模式4 視覺風格4.5 文案

1.6 沉浸模式提供了一種完全自定義的體驗

當需要完全把控使用者體驗時,你可以利用沉浸模式,它能夠在時間軸之外運作。 沉浸模式允許渲染你自己的界面并且處理所有的使用者輸入。沉浸模式非常适合于那些在時間軸的限制下無法正常工作的Glass應用(Glassware)。

Google Glass界面設計指南1 使用者界面2 原則3 設計模式4 視覺風格4.5 文案

1.7 菜單項允許使用者執行操作

卡片和沉浸模式都能承載諸如分享、回複、移除等操作(不限于此)的菜單項。

Google Glass界面設計指南1 使用者界面2 原則3 設計模式4 視覺風格4.5 文案

2 原則

Glass與現有的移動平台在設計與使用中有着根本的不同。開發Glass應用時遵循以下原則将為使用者帶來最佳的體驗。

2.1 為Glass而設計

Google Glass界面設計指南1 使用者界面2 原則3 設計模式4 視覺風格4.5 文案

在不同的使用場景下,使用者會使用不同的裝置來存儲和顯示資訊。Glass最适合簡單、實時、與場景緊密相關的資訊。

不要嘗試把為智能手機、平闆或者桌上電腦設計的獨特功能移植到Glass上,也不要嘗試用Glass代替它們。相反,要關注Glass以及你的服務與上述裝置如何互補,向使用者傳達獨一無二的體驗。

Google Glass界面設計指南1 使用者界面2 原則3 設計模式4 視覺風格4.5 文案

2.2 不要妨礙使用者

Glass被設計成這樣:需要時就出現,不需要時則消失。設計Glass應用也要采用同樣的理念——為使用者提供愉悅的功能補充使用者的生活,而不是讓他們脫離生活。

Google Glass界面設計指南1 使用者界面2 原則3 設計模式4 視覺風格4.5 文案

Glass顯示屏恰好在自然視線的上方,使用者既可以感受世界,又能在需要的時候通路Glass。Google搜尋會幫助你在目前情景下找到特定資訊。

2.3 與使用者場景緊密相關

要在合适的時間和地點為使用者推送資訊。場景越相關使用者越感到神奇,進而增加使用者的使用時長和滿意度。

Google Glass界面設計指南1 使用者界面2 原則3 設計模式4 視覺風格4.5 文案

當使用者到達喜歡的雜貨店時推送購物清單,是與使用者場景緊密相關的體驗,在Glass上運用的很好。

2.4 避免“驚喜”

由于非常貼近使用者感官,Glass上不符合使用者預期的功能或者不好的體驗會比在其他裝置上更加令使用者感到糟糕。

别太頻繁也别不合時宜地發送内容給使用者。讓使用者明确地知道Glass應用的意圖,不要僞裝成不是你的東西。

Google Glass界面設計指南1 使用者界面2 原則3 設計模式4 視覺風格4.5 文案

在使用者不想看到提示的時候發送通知是一種不好的體驗。 注意推送資訊的時間、頻率和地點。

2.5 圍繞人來設計

設計圖形化的、能夠利用語音和自然手勢互動的界面。專注于即用即抛的使用模式,讓使用者可以快速行動并繼續完成他們正在做的事情。

Google Glass界面設計指南1 使用者界面2 原則3 設計模式4 視覺風格4.5 文案

Glass上顯示的資訊以人像優先,讓使用者以平時說話的方式回複,說話結束後會自動發送。

3 設計模式

使用通用的UX設計模式,讓使用者在所有的Glass應用中獲得一緻的體驗。

在本章,通過一些體驗良好的Glass設計模式的案例,你将了解到如何用基本構件來建構這些模式。

3.1 設計模式構件

利用主要UI元素和調用方法,你可以在Glass上建構各種運作良好的使用模式。 你還可以根據需要,将多個模式有機整合在你的Glass應用上。

UI元素

  1. 靜态卡片:顯示文本、HTML、圖像和視訊。靜态卡片可以調用動态卡片或者沉浸模式。
  2. 動态卡片:顯示目前重要資訊的卡片,通常會高頻更新。
  3. 沉浸模式:顯示暫時替代時間軸體驗的Android activities

調用方法

  1. “OK glass”語音或觸控指令
  2. 時間軸卡片中的語音或觸控指令

3.1.1 語音調用模式

使用者與Glass的互動中,語音指令扮演着重要的角色,它能釋放使用者的雙手,讓使用者快速、自然地處理事情。語音指令與使用者交流的方式,是Glass應用體驗中的一個主要部分。

在OK Glass 菜單中,我們基于一套标準精心挑選了語音指令。你可以檢視

voice command checklist

,裡邊較長的描述了什麼樣才是好的語音指令。通常來說,在 Glass中語音指令會采用以下指導原則:

專注于動作,而非機器指令

語音指令應該基于使用者想要做什麼而不是Glass應用正在實作的行為。

例如“ok glass,快拍下來”的指令要優于“ok glass,開啟相機”。專注于行動對于使用者互動是一種更自然的方式,主要的語音指令都要遵循這條準則。

縮短從目的到行動的時間

語音指令應該是盡可能快的實施指令。

例如,“ok glass,聽Led Zeppelin的歌”指令一下達就應該開始播放音樂,而不是在播放之前強迫使用者去選擇任何選項。

口語化,容易說

語音指令是自然的聲音、與通常的指令非常不同、至少是兩個詞,這些特質讓我們調整語音識别來适應各種各樣的指令。

足夠通用,能适用于多個Glass應用

為避免ok glass指令沖突,必要時語音指令應該可以用于多個Glass應用。在這 些情況下,Glass會自動彈出能夠完成指令的應用清單。

例如,“ok glass, play a game, spellista”的指令要優于 “ok glass, play spellista”。

3.2 設計模式

3.2.1 周期性通知

周期性通知指的是,不需調用模型而将靜态卡片插入時間軸。你的服務将根據使用者定義的設定來發送通知,比如說,每小時發送熱點新聞,或是一來郵件就通知。

這一模式調用Mirror API網絡服務或Glass上的Android背景服務來将通知推送到時間軸中。

Google Glass界面設計指南1 使用者界面2 原則3 設計模式4 視覺風格4.5 文案

3.2.2 持續性任務

持續性任務指的是長時間運作的動态卡片,并且使用者可能頻繁切換進出這些卡片。

比如說,秒表應用(Stopwatch)通過語音指令“ok glass”來啟動計時。

使用者可以在秒表應用中停留一段時間,然後通過時間軸切換到其他卡片,再傳回到秒表應用。當顯示屏從休眠狀态被喚起時,秒表應用會是預設展現的卡片(前提:隻要當顯示器進入休眠時,秒表處于聚焦狀态)。使用者能通過點選菜單項中的“停止”來停止計時。

注意:所有動态卡片都必須有“停止”或類似功能來移除卡片。

Google Glass界面設計指南1 使用者界面2 原則3 設計模式4 視覺風格4.5 文案

再舉一個持續性任務的例子——Strava。Strava應用為目前的跑步或騎車任務增 加一張帶有倒計時的動态卡片。點選卡片展現有大量選項的菜單。當使用者結束跑步或騎行時,能夠通過菜單項中的“完成”将卡片從時間軸中移除。

Google Glass界面設計指南1 使用者界面2 原則3 設計模式4 視覺風格4.5 文案

3.2.3 沉浸模式

沉浸模式以Android activity的形式來呈現沉浸體驗。沉浸模式能夠暫時性地替代時間軸模式,使用者能通過下滑手勢傳回到時間軸模式。

Google Glass界面設計指南1 使用者界面2 原則3 設計模式4 視覺風格4.5 文案

4 視覺風格

Glass有其獨特的視覺風格,是以我們提供了标準的卡片模闆、顔色、字型,以及文案方面的指南以便使用。

4.1 度量和網格

Glass的使用者界面有标準的布局和邊距尺寸指南,用于不同類型的時間軸卡片。 卡片區域通常如下所示,我們還為你列出了一些用于通用卡片設計的指南。

4.1.1 卡片區域

Glass定義了一組常見區域的尺寸,以便于保證不同卡片的設計和顯示的一緻性。

Google Glass界面設計指南1 使用者界面2 原則3 設計模式4 視覺風格4.5 文案

主體内容

卡片的主要文本内容使用Roboto Thin字型,并且在邊界需要留出内頁邊距。Glass會根據内容的量來動态調整字型尺寸。

全出血圖像

圖像全出血時的顯示效果最好,而且不必像文本排版那樣需要留出内容與邊框的 40px間隙。

頁腳

頁腳顯示有關卡片的補充資訊,例如卡片的來源或者時間戳。頁腳文本通常為 26px、Roboto Light字型,白色(#ffffff),居中顯示。

狀态欄

狀态欄有三個部分:滾動條,顯示了在一組卡片中目前所處的位置;進度和時限,顯示了可以取消操作的進度和時限;條紋進度條,會在程序中會進行循環動畫。

左對齊圖檔或欄目

左對齊圖檔或欄目需要調整内頁邊距和文本内容。請參見4.2.4章節。

内頁邊距

時間軸卡片的文本内容與四周有40px的間隙。這樣保證大多數使用者能清晰的看見 内容。

4.2 布局模闆

下面的布局會向你展示一些常用的布局網格和卡片。實作細節請參見

Mirror API playground

4.2.1 主要布局

Google Glass界面設計指南1 使用者界面2 原則3 設計模式4 視覺風格4.5 文案

4.2.2 帶文字的全出血圖檔

Google Glass界面設計指南1 使用者界面2 原則3 設計模式4 視覺風格4.5 文案

4.2.3 作者和内容

Google Glass界面設計指南1 使用者界面2 原則3 設計模式4 視覺風格4.5 文案

4.2.4 左對齊圖檔或欄目

Google Glass界面設計指南1 使用者界面2 原則3 設計模式4 視覺風格4.5 文案
Google Glass界面設計指南1 使用者界面2 原則3 設計模式4 視覺風格4.5 文案

4.2.5 清單

Google Glass界面設計指南1 使用者界面2 原則3 設計模式4 視覺風格4.5 文案

4.3 顔色

Glass用白色顯示大多數文字,并使用以下标準色顯示緊急或重要内容。你也可以在時間軸卡片中使用這些顔色:

Google Glass界面設計指南1 使用者界面2 原則3 設計模式4 視覺風格4.5 文案
白色 #ffffff
灰色 #808080
藍色 #34a7ff
紅色 #cc3333
綠色 #99cc33
黃色 #ddbb11

注意:如果你在HTML時間軸卡片中使用了CSS樣式,Glass會自動使用标準顔色呈現它們。Glass使用

base_style.css

樣式表呈現HTML卡片。

以下示例表現了如何使用顔色表現重要資訊,比如火車路線和航班狀态。

Google Glass界面設計指南1 使用者界面2 原則3 設計模式4 視覺風格4.5 文案

4.4 字型

Glass顯示文本時,預設使用Roboto Thin(首選)或Roboto Light(輔助)字型,這取決于字型大小。在設計動态卡片或沉浸模式時,也可以選擇适合你品牌形象的字型。

首選字型 – Roboto Thin,此字型用于顯示大部分文字

Google Glass界面設計指南1 使用者界面2 原則3 設計模式4 視覺風格4.5 文案

輔助字型 – Roboto Light,此字型用于顯示26px的文字

4.4.1 可動态縮放的文本

Glass在顯示大多數時間軸卡片時,盡可能使用最大字号。以下卡片是根據文本量進行調縮放的示例。

Google Glass界面設計指南1 使用者界面2 原則3 設計模式4 視覺風格4.5 文案

4.5 文案

文字的顯示空間有限,是以在為Glass應用(Glassware)撰寫文案時,請遵守以下規則:

保持簡短

簡潔、簡單并準确。尋找長文本的替代品,比如朗讀内容、用圖檔或視訊呈現、或者删除功能。

保持簡單

假裝你正在與一個聰明能幹的人對話,但他不了解技術術語,英文不是很好。使用短語句,主動動詞及常見名詞。

保持友好

使用縮寫,直接使用第二人稱(你)與使用者交流。如果你的表述不是日常對話會使用的語句,那麼它不适用于此處。

先放最重要的

前兩個單詞(包括空格在内約11個字元),應該至少包括此句的一個最重要的資訊。如果不是這樣,請重新開始。隻描述最重要的資訊即可,别再試圖解釋細微的差别,因為這些解釋文字會被大部分使用者忽略。

避免重複

如果一個重要詞語在某個界面或某段文本内多次重複,想辦法隻用一次。

繼續閱讀