Zi 字媒體

教學主題: 超詳細的Google Glass界面設計指南 大家好!! 小編今天來和大家分享關於 其他教程中的平面理論教程教學 今天的這個教學主題是: 超詳細的Google Glass界面設計指南 這教學的重點為這幾點 [ 指南,詳細,卡片,Glass,用戶,時間,使用,應用,指令, ] 希望你可以從這幾點中領悟到修圖的精華 本文重點 這篇文章絕對值得收藏，Google Glass界面設計指南由用戶界面、設計原則、設計模式和視覺風格4方面組成，說是一篇手把手的設計教程也不為過，特別是百度同學的專業翻譯，保證了文章質量的原汁原味。向未來看齊的設計師們感受一下吧。 這篇文章絕對值得收藏，Google Glass界面設計指南由用戶界面、設計原則、設計模式和視覺風格4方面組成，說是一篇手把手的設計教程也不為過，特別是百度同學的專業翻譯，保證了文章質量的原汁原味。向未來看齊的設計師們感受一下吧。 一、用戶界面 本章將介紹Glass的主要UI組件、它們的使用場景，以及用戶如何與它們進行交互操作。 1.1 時間軸概念是 Glass 用戶體驗的主體 Google Glass的主要用戶界面是由分辨率為640x360px的卡片組成的時間軸。它提供了諸多功能，如呈現動態和靜態卡片的標準模式，系統級語音指令以及Glass應用的通用啟動方式。 用戶通過滾動時間軸切換不同區域顯示歷史、當前和未來的卡片。新近產生的卡片會在最接近主頁卡片的地方出現，而主頁卡片是用戶喚醒Glass時默認展現的第一界面。 時間軸除用以管理卡片之外，還能處理用戶輸入，例如通過觸控區定位時間軸，以及通過語音啟動Glass應用等。大多數卡片有允許用戶進行操作的菜單項，如，回復文字消息或分享照片。 1.2 時間軸按照區域進行組織 時間軸中的卡片根據其臨時程度和類型出現在以下幾個區域： 主頁區 默認的主頁卡片是 Glass時鐘，處於時間軸的中間位置。用戶喚醒Glass的多數時候都展現該界面。 它為用戶啟動其他的Glass應用提供了系統級的語音和觸控命令。Glass時鐘卡片為整個Glass系統提供了入口，因此它將一直處於時間軸的主頁位置 。 歷史區 Glass 時鐘的右側是歷史區，這裡僅顯示靜態卡片。因為動態卡片總被認為是當前正在進行的，所以不會出現在這裡。 靜態卡片在歷史區中自然“衰減”。當新卡片進入歷史區時，處在離時鐘最近的位置。越早的卡片用戶越少使用，因此會被Glass系統依次向右推，Glass 會將用戶7天內沒使用過的卡片，或者超出200張上限部分的卡片自動清除掉。 當前和未來區 Glass時鐘的左側是當前和未來的區域，這裡會展現靜態、動態兩種卡片。 動態卡片展示和用戶當前時刻有關的信息，並且此卡片一直處於此區域。如果焦點在動態卡片上時系統進入休眠，當Glass再次被喚醒時這張動態卡片將會作為默認卡片顯示。 擁有未來時間戳或被固定位置的靜態卡片也會顯示在當前和未來區。基於地理位置、狀態、或者其他類型用戶信息的Google Now卡片就是一個被固定位置的例子。 設置區 時間軸最左側是Glass系統級設置，在這裡你能夠設置諸如音量和Wi-Fi網絡等系統選項。 1.3 動態卡片包含豐富、實時的內容 動態卡片能夠通過頻繁更新自定義圖像來給用戶展示實時信息。這項功能非常適合那些需要基於用戶數據不斷更新的用戶界面。 動態卡片還能夠訪問Glass的底層硬件傳感器數據，比如加速計和GPS，這些都是靜態卡片所不能實現的新形式交互和功能。 另外，動態卡片在時間軸內運行時，用戶能夠左右滑動查看其他卡片並與之進行交互。這允許用戶執行多任務且無縫地保持動態卡片在後台實時運行。 1.4 靜態卡片顯示文字、圖像和視頻內容 靜態卡片是一組簡單的使用HTML、文本、圖像和視頻來構建的信息。它們不能實時刷新，而是被用來展示快速通知。 1.5 通過Glass應用(Glassware)將內容分享給聯繫人 靜態卡片有分享功能，允許用戶將當前卡片內容分享給其他人或Glass應用 (Glassware)。可將你的應用(Glassware)時間軸卡片設置成共享的，同時為你的Glass應用(Glassware)定義聯繫人，這樣他就能夠接受你分享的時間軸條目。 1.6 沉浸模式提供了一種完全自定義的體驗 當需要完全把控用戶體驗時，你可以利用沉浸模式，它能夠在時間軸之外運行。 沉浸模式允許渲染你自己的界面並且處理所有的用戶輸入。沉浸模式非常適合於那些在時間軸的限制下無法正常工作的Glass應用(Glassware)。 1.7 菜單項允許用戶執行操作 卡片和沉浸模式都能承載諸如分享、回復、移除等操作(不限於此)的菜單項。 二、原則 Glass與現有的移動平台在設計與使用中有着根本的不同。開發Glass應用時遵循以下原則將為用戶帶來最佳的體驗。 2.1 為Glass而設計 貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以 使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit／Undo )命令使 用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。 在不同的使用場景下，用戶會使用不同的設備來存儲和顯示信息。Glass最適合簡單、實時、與場景緊密相關的信息。 不要嘗試把為智能手機、平板或者桌上電腦設計的獨特功能移植到Glass上，也不要嘗試用Glass代替它們。相反，要關注Glass以及你的服務與上述設備如何互補，向用戶傳達獨一無二的體驗。 貼心提醒: 使用選框工具( Marquee Tools )的時候，按住Shift鍵可以劃出 正方形和正圓 的選區；按住Alt鍵將從起始點為中心勾劃選區。 2.2 不要妨礙用戶 Glass被設計成這樣：需要時就出現，不需要時則消失。設計Glass應用也要採用同樣的理念——為用戶提供愉悅的功能補充用戶的生活，而不是讓他們脫離生活。 Glass顯示屏恰好在自然視線的上方，用戶既可以感受世界，又能在需要的時候訪問Glass。Google搜索會幫助你在當前情景下找到特定信息。 2.3 與用戶場景緊密相關 要在合適的時間和地點為用戶推送信息。場景越相關用戶越感到神奇，從而增加用戶的使用時長和滿意度。 當用戶到達喜歡的雜貨店時推送購物清單，是與用戶場景緊密相關的體驗，在Glass上運用的很好。 2.4 避免“驚喜” 由於非常貼近用戶感官，Glass上不符合用戶預期的功能或者不好的體驗會比在其他設備上更加令用戶感到糟糕。 別太頻繁也別不合時宜地發送內容給用戶。讓用戶明確地知道Glass應用的意圖，不要偽裝成不是你的東西。 在用戶不想看到提示的時候發送通知是一種不好的體驗。 注意推送信息的時間、頻率和地點。 2.5 圍繞人來設計 設計圖形化的、能夠利用語音和自然手勢交互的界面。專註於即用即拋的使用模式，讓用戶可以快速行動並繼續完成他們正在做的事情。 Glass上顯示的信息以人像優先，讓用戶以平時說話的方式回復，說話結束後會自動發送。 三、設計模式 使用通用的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後台服務來將通知推送到時間軸中。 3.2.2 持續性任務 持續性任務指的是長時間運行的動態卡片，並且用戶可能頻繁切換進出這些卡片。 比如說，秒錶應用(Stopwatch)通過語音指令“ok glass”來啟動計時。 用戶可以在秒錶應用中停留一段時間，然後通過時間軸切換到其他卡片，再返回到秒錶應用。當顯示屏從休眠狀態被喚起時，秒錶應用會是默認展現的卡片(前提：只要當顯示器進入休眠時，秒錶處於聚焦狀態)。用戶能通過點擊菜單項中的“停止”來停止計時。 注意：所有動態卡片都必須有“停止”或類似功能來移除卡片。 再舉一個持續性任務的例子——Strava。Strava應用為當前的跑步或騎車任務增 加一張帶有倒計時的動態卡片。點擊卡片展現有大量選項的菜單。當用戶結束跑步或騎行時，能夠通過菜單項中的“完成”將卡片從時間軸中移除。 3.2.3 沉浸模式 沉浸模式以Android activity的形式來呈現沉浸體驗。沉浸模式能夠暫時性地替代時間軸模式，用戶能通過下滑手勢返回到時間軸模式。 四、視覺風格 Glass有其獨特的視覺風格,所以我們提供了標準的卡片模板、顏色、字體，以及文案方面的指南以便使用。 4.1 度量和網格 Glass的用戶界面有標準的布局和邊距尺寸指南,用於不同類型的時間軸卡片。 卡片區域通常如下所示，我們還為你列出了一些用於通用卡片設計的指南。 4.1.1 卡片區域 Glass定義了一組常見區域的尺寸,以便於保證不同卡片的設計和顯示的一致性。 主體內容 卡片的主要文本內容使用Roboto Thin字體，並且在邊界需要留出內頁邊距。Glass會根據內容的量來動態調整字體尺寸。 全出血圖像 圖像全出血時的顯示效果最好，而且不必像文本排版那樣需要留出內容與邊框的 40px間隙。 頁腳 頁腳顯示有關卡片的補充信息,例如卡片的來源或者時間戳。頁腳文本通常為 26px、Roboto Light字體,白色(#ffffff),居中顯示。 狀態欄 狀態欄有三個部分：滾動條，顯示了在一組卡片中當前所處的位置;進度和時限，顯示了可以取消操作的進度和時限;條紋進度條，會在進程中會進行循環動畫。 左對齊圖片或欄目 左對齊圖片或欄目需要調整內頁邊距和文本內容。請參見4.2.4章節。 內頁邊距 時間軸卡片的文本內容與四周有40px的間隙。這樣保證大多數用戶能清晰的看見 內容。 4.2 布局模板 下面的布局會向你展示一些常用的布局網格和卡片。實現細節請參見 Mirror API playground。 4.2.1 主要布局 4.2.2 帶文字的全出血圖片 4.2.3 作者和內容 4.2.4 左對齊圖片或欄目 4.2.5 列表 4.3 顏色 Glass用白色顯示大多數文字，並使用以下標準色顯示緊急或重要內容。你也可以在時間軸卡片中使用這些顏色： 白色：#ffffff 灰色：#808080 藍色：#34a7ff 紅色：#cc3333 綠色：#99cc33 黃色：#ddbb11 注意：如果你在HTML時間軸卡片中使用了CSS樣式，Glass會自動使用標準顏色呈現它們。Glass使用base_style.css 樣式表呈現HTML卡片。 以下示例表現了如何使用顏色表現重要信息，比如火車路線和航班狀態。 4.4 字體 Glass顯示文本時，默認使用Roboto Thin(首選)或Roboto Light(輔助)字體，這取決於字體大小。在設計動態卡片或沉浸模式時，也可以選擇適合你品牌形象的字體。 首選字體 – Roboto Thin，此字體用於顯示大部分文字 輔助字體 – Roboto Light，此字體用於顯示26px的文字 4.4.1 可動態縮放的文本 Glass在顯示大多數時間軸卡片時，儘可能使用最大字號。以下卡片是根據文本量進行調縮放的示例。 4.5 文案 文字的顯示空間有限，所以在為Glass應用(Glassware)撰寫文案時，請遵守以下規則： 保持簡短 簡潔、簡單並準確。尋找長文本的替代品，比如朗讀內容、用圖片或視頻呈現、或者刪除功能。 保持簡單 假裝你正在與一個聰明能幹的人對話，但他不了解技術術語，英文不是很好。使用短語句，主動動詞及常見名詞。 保持友好 使用縮寫，直接使用第二人稱(你)與用戶交流。如果你的表述不是日常對話會使用的語句，那麼它不適用於此處。 先放最重要的 前兩個單詞(包括空格在內約11個字符)，應該至少包括此句的一個最重要的信息。如果不是這樣，請重新開始。只描述最重要的信息即可，別再試圖解釋細微的差別，因為這些解釋文字會被大部分用戶忽略。 避免重複 如果一個重要詞語在某個界面或某段文本內多次重複，想辦法只用一次。 看完小編分享的教學之後 是不是對平面理論教程中的其他教程教學更熟悉了呢? 希望我們所介紹的 超詳細的Google Glass界面設計指南 這教學會喜歡 文章標題: 骨子愛創意- 超詳細的Google Glass界面設計指南–轉載請註明來源處 本教學分類為平面理論教程中的 其他教程相關教學 文章相關關鍵字為: 指南,詳細,卡片,Glass,用戶,時間,使用,應用,指令, 本文永久連結 :超詳細的Google Glass界面設計指南 本文轉載自 :VIA