<sub id="jfr3d"><dfn id="jfr3d"><ins id="jfr3d"></ins></dfn></sub>

<thead id="jfr3d"><dfn id="jfr3d"><mark id="jfr3d"></mark></dfn></thead>

<sub id="jfr3d"><dfn id="jfr3d"></dfn></sub>
<address id="jfr3d"><listing id="jfr3d"></listing></address>

<form id="jfr3d"><listing id="jfr3d"></listing></form>

    <sub id="jfr3d"><var id="jfr3d"></var></sub>
    <thead id="jfr3d"><var id="jfr3d"><output id="jfr3d"></output></var></thead>
    <sub id="jfr3d"><listing id="jfr3d"><ins id="jfr3d"></ins></listing></sub>

      <thead id="jfr3d"><var id="jfr3d"><ins id="jfr3d"></ins></var></thead>
        <thead id="jfr3d"></thead>

      <address id="jfr3d"><var id="jfr3d"><ins id="jfr3d"></ins></var></address>

      <sub id="jfr3d"><dfn id="jfr3d"><mark id="jfr3d"></mark></dfn></sub>
      <address id="jfr3d"><dfn id="jfr3d"></dfn></address>

      <address id="jfr3d"><var id="jfr3d"></var></address>

      <address id="jfr3d"><dfn id="jfr3d"></dfn></address>

          <sub id="jfr3d"><dfn id="jfr3d"></dfn></sub>

          廣州網站建設-PID派點互動公司

          派點互動提供創新品牌設計服務
          創造有價值的互動營銷體驗
          微博 QQ

          Google智能電視設計規范

          2014-03-18 Insights 洞察

          這是為運行在Google TV 上的Android應用程序所作的用戶界面開發準則。雖然運行在手機和Google TV上的安卓應用程序幾乎沒有不同,但在用戶界面上,兩者還是有區別。

          google tv

          電視的觀看環境通常被描述為“10英尺環境”,電視屏幕也被描述為“10英尺的用戶界面”。當你為10英尺環境創建應用程序時,請記住以下基礎概念:
          派點互動 品牌網站建設 網頁設計制作 建站公司 設計公司 廣州網站建設 網站制作 高端設計

          從傳統上意義來說,10英尺環境適合消費內容

          10英尺用戶界面的觀看體驗是電腦和電視的結合

          電視設備擁有高品質的聲音

          10英尺用戶界面需要簡單和可見的導航

          基于內容區域的用戶界面模式,最適合于10英尺用戶界面

           

          1.十英尺的環境

          當你為十英尺環境創建Android應用程序時,你應該牢記一些基本理念。這些基本理念將“十英尺環境”與電腦和移動設備區別開來。

          最基本的理念是,在傳統意義上,電視設備是用來展示消費性內容的。在很長的一段歷史中,電視都作為一種被動接收廣播信息的系統。Google TV 將電視從廣播系統變為雙向交互系統,這對許多觀眾來說是一個巨大的改變。對老年觀眾,特別是認為自己是“電腦盲”的人來說,這一改變就有些棘手了。另一方面,與互聯網一同成長的年輕觀眾對這一改變就沒有那么大反應,甚至渴望著接觸它。

          電視在本質上是被動接受,這通常被稱為“后仰”體驗。即使是愿意與電視互動的觀眾也不愿意互動得太多。他們想后仰靠在沙發上并享受著互動過程,而不是像用電腦或手機一樣要高度集中注意力。

          另外,Google TV 旨在提升傳統的電視觀看體驗的目標——可以更輕松,可以一起觀看和分享的體驗。從這個更傳統的方法開始,你能夠將你的應用程序與電視屏幕上展示的其他系統區別開。

          2.電視顯示

          當你設計你的應用程序時,牢記Google TV 的顯示在根本上是與電腦或移動設備不同的。除開它的尺寸大小因素,電視顯示出的信息總量比電腦或移動設備的要少。你應該提供更少的UI,可能需要自動化處理某些任務,而不是要求用戶去互動。

          以下是一些UI設計準則:

          1. 使用手機作為UI模型。現代電視的尺寸具有欺騙性。盡管現代電視的屏幕對角線通常大于40英寸,成比例地,觀眾坐在電視前比坐在電腦顯示屏前要遠。觀眾感受到的是,電視屏幕尺寸比電腦顯示器要小。當你在設計UI時,你可以使用手機作為 “模型”來模擬這種體驗。
          2. 在頁面上的元素之間應該留出更多的空白空間,避免屏幕上雜亂的外觀。要做到這一點,需要綜合使用更大的外邊距和內邊距。這對“觸屏”UI也同樣是一個好建議。
          3. 電視總是橫屏的。在電視上,水平方向的可用空間比垂直方向上的可用空間要多。將屏幕上的導航控件水平放置,為內容部分節省下垂直空間。

          2.1 高清顯示分辨率

          電視屏幕在根本上與電腦顯示器與移動設備屏幕不同。顯示器和移動設備屏幕直接使用(大體上)可尋址的像素。相較之下,電視使用的是落后十年的顯示圖像的模擬方式。了解這一不同點,再與Google TV 協同合作是非常重要的。

          2.1.1 電腦和移動設備的顯示分辨率

          電腦顯示器有一個最大的顯示分辨率,這個分辨率通常小于或等于顯卡分辨率。顯卡決定最大分辨率,顯示器決定像素密度(每英寸的像素數量)。移動設備的分辨率和像素密度往往是固定的。

          因為對電腦的顯示分辨率很簡單,根據用戶的偏好設置,電腦操作系統能自動處理分辨率和像素密度的問題。

          Android系統使用同一套應用程序來運行多種移動設備。為了做到這一點,Android系統根據設備屏幕大小和像素密度來按比例縮放UI。此外,你可以提供可替換的UI資源,為不同設備準備最好的UI體驗。

          2.1.2 電視顯示分辨率

          電視(即使是最現代化的那些電腦)有基于掃描線的顯示分辨率。Google TV 支持3種掃描線值的高清電視:720p,1080i和1080p,這代表720逐行掃描線,1080隔行掃描線和1080逐行掃描線(Android將后兩者視作等同)。720值意味著電視可以在屏幕的垂直方向上“尋址”720條不同的線;1080值則意味著電視可以在垂直方向上“尋址”1080條線。

          水平分辨率由電視的長寬比來決定。目前幾乎所有的電視都使用16:9的長寬比(16個水平像素對應9個垂直像素),所以1080的電視機的分辨率是1920 x 1080。

          這些線有多高,每條線之間的“寬”是多少?也就是說電視的實際像素密度是多少?這取決于不同的制造商,但是Android將這些數值抽象顯示為與密度無關的像素單位(縮寫 dp)。

          Google TV Android 應用程序得益于Android的縮放技術。總之,你應該為1080p的規格來設計UI,允許Android系統將你的UI縮小到720p的規格,因為縮小圖形的效果通常要優于放大的效果。為了得到最好的圖片縮放效果,如果可能的話,給他們提供9-patch格式的圖片。Android為Google TV 提供的縮放設置如下表所示。

          screen

          注釋:

          2.1.3 過掃描

          另一個難題是過掃描。由于歷史原因,電視制造商必須在正常屏幕尺寸的外側預留出空白邊,能夠被電路尋址,但是不被用來顯示電視信號。這些空白區域就是過掃描區域(或者就簡稱為“過掃描”)。Android應用程序不能在過掃描區域顯示。

          不幸地是,過掃描也因為制造商的不同而不同。所以圍繞你的UI的空白邊也多種多樣。如果你為一部有顯示過掃描的電視設計UI,你也許在不經意間將過掃描區域當作UI和電視邊框之間的空白邊使用了。如果之后你在一部幾乎沒有過掃描的電視上運行你的應用程序,UI將幾乎沒有空白邊,這些元素可能很難識別。

          為了處理這個問題,為你的UI提供額外的10%的空白邊,并使用一個非絕對定位的布局。如圖1所示。

          image1

          圖1 屏幕分辨率和尺寸

          2.2 色彩

          與電腦顯示器相比,電視屏幕有更高的對比度和飽和度。考慮到這點,在使用純色的時候要考慮一下準則:

          1. 謹慎地使用純白色(#FFFFFF)。純白色在電視屏幕上會引起振動或圖像重影。用#F1F1F1(hex)或者240/240/240(RGB)來代替使用純白色。
          2. 避免使用明亮的白色系,紅色系和橙色系,因為這些顏色在電視上顯示會特別嚴重的失真。
          3. 了解不同的電視顯示模式,包括標準、銳利、電影/劇場,游戲等等。確保你的應用能適應這些全部的電視模式。
          4. 避免使用大面積的色彩漸變,因為它們可能會導致色帶。
          5. 如果可能,在低質量的顯示器上測試你的應用程序。這些設備可能有較差的伽馬值和顏色設置。

          2.3 文本

          對電視來說,避免纖細字體或者有過寬、過窄筆畫的字體。使用簡單無襯線字體并選用抗鋸齒功能來增加易讀性。目前,Google TV只支持Droid Serif 字體族,但是你可以使用嵌入字體來創建一個更個性化的外觀。然而,牢記嵌入字體會拖慢系統運行。

          以下是一些提高文本易讀性的方法:

          1. 每個段落限制90個單詞。
          2. 將長句改為幾個短句,讓用戶可以快速瀏覽。
          3. 在每行保持5-7個單詞,不要少于3個單詞,也不要多于12個單詞。
          4. 在電視上,在深色背景上的淺色文字比在淺色背景上的深色文字更容易閱讀。
          5. 使用Android的標準字體尺寸。例如,標準的小字體字號為14sp,在1080p的屏幕上,這相當于28點的字號。
          6. 為屏幕文本設置比印刷文本更大的行間距。

          3.聲音和UI

          使用Google TV的電視往往連接著最好的家用揚聲系統。不像在電腦上那樣,在電視上,聲音不被認為是干擾因素,所以設法在你的UI中使用聲音。牢記以下幾點:

          1. 使用適宜起居室環境的聲音。
          2. 默認一個低的初始值。
          3. 假設你的用戶在使用你的應用時,他們將會觀看電視或聽音樂。提供一個簡單的方式將你的應用靜音。不要完全依賴音頻信號來完成交互,而要適量使用。
          4. Android 有聲音焦點的概念,允許應用程序排外地請求音頻的播放。所以,如果你的應用程序中的主要功能依賴于聲音(如媒體播放器),你應該請求排外的聲音焦點。如果應用程序在后臺播放媒體,你應該建立一個聲音焦點改變監聽器,并且尊重其他應用程序對聲音焦點的請求。更多的信息可以在這里可以找到。

          4.導航設計

          Google TV 設備通常包含一個鍵盤和用來控制光標的定位設備。許多用戶在觀看電視時,將會把這些設備放在手邊。這兩種方式可能會組合在一個單獨的物理設備里,這個設備還可能包含鼠標。鍵盤顯然是用來輸入文本的。指示設備是導航板(D-pad)的一個變體,觀眾可以用來定位光標或者焦距在某個UI元素上。在鍵盤或指示設備(或兩者兼有)上的附加按鈕也許會提供更多的傳統遙控功能,如控制開關、回放等等。

          如果有鼠標的話,可以通過鼠標在屏幕控制鼠標,點擊鼠標下的UI按鈕。再次提醒,在傳統上,電視是一種廣播系統而不是對話系統。用戶也許不會有使用方向導航鍵或者鼠標的經驗。即使是有經驗的電腦用戶也會發現在電視上使用鼠標的困難。

          以下是幾條在Google TV 的應用中的設計UI 導航的準則:

          1. 用方向鍵導航而不是鼠標導航。用戶可能對使用電視遙控器的這種導航方式更加熟悉。
          2. 如果你選擇使用鼠標導航,要為鼠標提供超大的選擇界面。將可點擊的按鈕做得大大的,這樣用戶可以更容易地將光標定位在它們上面。
          3. 避免復雜或者靜謐的鼠標導航。不要使用拖放和下拉菜單。這些在電視環境中很難控制。
          4. 為導航提供高度明顯的UI反饋。當光標轉移到選項界面上,展開或高亮顯示導航。使用過渡和移動,為繼續或倒退操作提供視覺提示。例如,如果用戶選擇一項操作后,一個新的頁面從右側滑入,用戶也許憑直覺明白,按下方向鍵盤的左鍵將會返回到前一頁。

          你的目標是提供一個導航機制,用戶可以通過它很快地知道自己將要去到哪里。

          再次提醒各位,電視既不是電腦也不是移動設備。沒有觸屏,它的鼠標(如果有的話)很難控制。為了模擬用戶在使用TV導航時的思維模式,嘗試在不使用鼠標的情況下,在運行Android應用的模擬器中使用導航。界面有多直觀?做些什么能讓它們表現得更好?

          4.1 方向鍵導航

          方向鍵控制器將運動限制在上、下、左、右。使用方向鍵中間的Enter或OK鍵觸發光標所在的操作。

          用戶需要方向導航鍵快速簡單的交互。牢記用戶是在一定距離之外導航,也許還可能是在黑暗中!

          當你為方向鍵導航進行設計時,遵循以下準則:

          1. 確保方向箭頭按鈕可以導航至屏幕上所有可見的控件。
          2. 如果你使用某個方向鍵來滾動一個列表,確保用戶能選擇在列表中的某個元素,而且某個元素被選擇后,這個列表仍然能夠滾動。
          3. 如果有多個項目在應用程序中被選擇,確保用戶能清楚得知道自己現在選擇的是哪一項。
          4. 確保在你的應用程序的任何可以使用方向鍵盤的UI項目中,提供了全部的“選中”、“聚焦”和“選中并聚集”的狀態

          了解更多關于方向鍵導航的信息,請閱讀“Google TV Android開發準則”中的“UI 控件準則”一章。

          4.2 鼠標導航

          在電視屏幕上,鼠標移動的是一個小而遠的光標箭頭。因為鼠標控制器本身是觸板或軌跡球而不是傳統有滑球的鼠標,所以鼠標控制是比較困難的。幫助你的用戶使用鼠標:

          1. 放大每一個光標可以訪問的UI控件(比如鏈接或按鈕),并在控件周圍留出足夠的空白。
          2. 增加一個“hover”狀態,當光標經過控件的時候,這個控件外觀會發生變化。
          3. 使用箭頭指示讓用戶知道在屏幕外有可訪問的內容。使用箭頭作為控件,點擊后轉到頁面外。

          4.3 導航幫助

          對大多數的用戶來說,十英尺環境里的導航是新鮮的。使用幫助按鈕或操作欄按鈕觸發對話框,給他們提供文本幫助。內容覆蓋以下這些:

          1. 方向導航鍵:它們可以切換頁面嗎?他們能打開上下文或導航菜單嗎?
          2. 返回按鈕:它能返回前一頁嗎?可以撤銷上一個動作嗎?它可以關閉一個彈出窗口嗎?
          3. 媒體按鍵:按下播放/暫停鍵會如何?按下快進/快退呢?
          4. 其它按鍵:是取消或關閉彈出窗口的按鍵嗎?例如,ESC鍵能關閉一個彈出窗口嗎?

          你也許希望在用戶第一次使用你的應用時,自動顯示幫助對話框。

          4.4 垂直滾動

          垂直頁面滾動對于桌面瀏覽器來說是基本的,這種方式在電視中可能就不是那么好用了。滾動可能生澀緩慢,重要的信息可能被隱藏在屏幕之外。因為用戶不理解這種滾動是可以持續的。

          相反的,使用水平布局,并且提供頁面間的視覺過渡。如果要使用垂直滾動,將其范圍限制在頁面中的細節區域。保持左側導航欄固定。除此之外,保持上下文易于理解,這將會更好得易于用戶理解。

          4.5 類別導航

          將類別(你將會放進菜單或標簽中的項目)放在屏幕的左側。在電視上,水平方向的空間比較充裕,但垂直方向上則是有限的。在屏幕上盡量一直保持類別選擇,為此你也許不得不去減少類別的數目。如果你要將手機應用移到電視上,考慮重新設計或者至少測試復雜嵌套的、有許多子目錄的導航。

          4.6 選擇

          在電視屏幕上,不容易將光標定位在選項上,為了幫助用戶做選擇,遵循以下準則:

          1. 當光標停留在控件上時(即hover狀態),高亮顯示選擇的控件。
          2. 確保可選的控件足夠大,并為文本標簽留出足夠的額外空白邊。
          3. 不要使用傳統的小控件,例如在窗口角落使用“關閉”按鈕。這樣既可能很難發現,又可能很不容易選擇,甚至兩者兼有。
          4. 避免使用鼠標關閉彈出窗口,舉個例子,用戶點擊窗口之外的地方,PC應用程序就會關閉。這種方式在十英尺環境中是不明顯的。相反的,為關閉對話框提供一個清楚明確的控件,并確保方向鍵盤能訪問到它。
          5. 不需要用戶選擇首要控件來激活它,而是要讓首要或默認的控件處在激活狀態(聚焦其上),并且高亮顯示。
          6. 如果窗口或對話框的一部分需要滾動,那么自動聚焦其上,或者允許它在沒有聚焦的時候可以滾動。讓用戶在滾動元素之前先點擊它是強人所難的做法。

          4.7 上下文、選擇和焦點

          應用程序的通行狀態包括上下文、選擇和焦點。上下文通常是一套分類,而選擇是用戶已經選中的分類。焦點是在光標下的控件或元素。這些控件或元素都應該有與眾不同的高亮狀態,而且高亮的機制在整個應用程序中應該保持一致。

          舉個例子,如果是一個都是影片的屏幕上,應用程序提供一行顯示不同類別的上下文標簽。例如“全部電影”、“最新發行”、“流行”、“編輯推薦”等等。如果用戶選擇了其中的一個標簽,“選中”狀態應該在視覺上與正在變動的“聚焦”狀態不同,以此來指出當前屏幕導航所在的位置。如圖2所示:

          image2

          圖2 選擇與焦點

          對Google TV應用程序來說,方向鍵聚焦狀態等同與鼠標hover狀態。這是用戶理解應用程序狀態的主要方式,它可以幫助用戶預測出如何移動焦點或進行選擇。

          4.8 焦點與焦點預期

          就像踩著石頭跨過小溪一樣,用戶考慮如何在那些可以接受聚焦的UI元素間移動,并避開那些不能聚焦的。用與眾不同的視覺特征來幫助用戶,像在可以聚焦的元素上加上輪廓。區別可聚焦和不可聚焦元素,可以幫助用戶了解你的UI。將元素用網格形式排列是幫助用戶的另一個方式(如圖3)。

          image3

          圖3 UI導航的網格模式

          對于方向鍵盤的上、下、左、右控制方式來說,網格是最顯而易見的映射。如果不使用網格,元素可能會傾斜,在不同基線上,或在不同的垂直中心線上。這會強迫用戶從上到下、從左到右重復切換,或者會讓用戶感到困惑,不知道如何去移動焦點。

          某些元素,像可滾動列表,可能會與網格排列相矛盾(見圖4),在這種情況下,你應該盡可能將默認狀態下的焦點放在離網格近的地方。

          image4

          圖4 可滾動排列與網格布局

          4.9 視覺指示

          為界面中可選擇、可導航的項目添加指示或高亮狀態,是一個好做法。這種做可以啟示用戶。期望用戶探索界面,自己摸索什么是可選擇,什么是不可選擇的做法是不可取的。假設UI是直覺上就可以知道的想法也同樣不可接受。應該仔細標注、解析UI來獲得用戶的認可與忠誠。

          4.10 過渡

          應用程序中使用過渡能啟發用戶,但也可能會把他們搞糊涂。確保過渡能夠傳達某種含義,而不僅僅是提供視覺愉悅。以下是一些準則:

          1. 避免重載整個頁面,因為這會引起最強烈的延遲感受。
          2. 對于只影響一個片段的任何操作,過渡應該處于這個片段內。
          3. 確保進度信息是有意義和明確的,動畫圖像應該能指示出完成了多少進度,還有多少工作未完成。
          4. 不要為網格中的每一個元素顯示loading動畫。在網格中的12個項目都在加載動畫,雜亂的界面會讓用戶難以瀏覽。

          5.用戶界面設計

          當你設計用戶界面,牢記以下準則:

          1. 保持設計的一致性。
          2. 保持元素行為的一致性。
          3. 保持所有重要的操作和選項可見,包括搜索、設置、返回等等。在十英尺環境中,不可見的元素容易被記住,即便它們是在屏幕以外或者在遙控器上。

          5.1 跨設備的UI

          你有一個移動設備上的應用程序,并且你想將它轉移到10英尺環境中。如何將1英尺的UI 轉換為10英尺的UI?記住,最重要的是,更大未必是更好的。平板比智能手機好,電腦比平板好,但是電視要比電腦好嗎?

          image5

          圖5 屏幕尺寸比較

          你可能認為42”屏幕是最強大的,但是情況并非如此。智能手機通常比電視有更強的處理能力。電視中的高清視頻和音頻是預先渲染的,所以電視所需要的只是與廣播源中的高寬帶連接。換句話說,大多數電視的信息處理工作是由廣播源完成的,而不是電視本身。

          掃描二維碼,信息隨身看
          日本三级片大全在线观看 - 视频 - 在线观看 - 影视资讯 - 新赏网