品牌設計
Hi,are you ready?

準備好開始了嗎?
那就與我們取得聯絡吧

有一個品牌專案想和我們談談嗎?您可以填寫右邊的表格✘☁••,讓我們瞭解您的專案需求✘☁••,這是一個良好的開始✘☁••,我們將會盡快與你取得聯絡↟▩↟。當然也歡迎您給我們寫信或是打電話✘☁••,讓我們聽到你的聲音!

PID派點互動

地 址▩↟◕↟:廣州市天河區金慧路88號11棟138單元(華南農業大學內)

電 話▩↟◕↟:+020- 3855 0205 3855 0745

傳 真▩↟◕↟:+020-3855 0745

E-mail▩↟◕↟:925774558@qq.com

填寫您的專案資訊

Google智慧電視設計規範

標籤▩↟◕↟:派點互動|手機網站|網站策劃|廣州網站策劃

這是為執行在Google TV 上的Android應用程式所作的使用者介面開發準則↟▩↟。雖然執行在手機和Google TV上的安卓應用程式幾乎沒有不同✘☁••,但在使用者介面上✘☁••,兩者還是有區別↟▩↟。

4ceed6765ff9d12a8e1af8f5c6dc13ef.jpg

電視的觀看環境通常被描述為“10英尺環境”✘☁••,電視螢幕也被描述為“10英尺的使用者介面”↟▩↟。當你為10英尺環境建立應用程式時✘☁••,請記住以下基礎概念▩↟◕↟:

派點互動 品牌網站建設 網頁設計製作 建站公司 設計公司 廣州網站建設 網站製作 高階設計

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

10英尺環境是娛樂環境✘☁••,不是工作環境↟▩↟。

10英尺環境通常是一個社會環境✘☁••,不是單使用者環境↟▩↟。

10英尺使用者介面的觀看體驗是電腦和電視的結合

電視螢幕兼有電腦和電視的特點↟▩↟。

顯示解析度類似電腦✘☁••,但受到電視特點的影響↟▩↟。

在TV螢幕上的色彩是不同的↟▩↟。

電視裝置擁有高品質的聲音

電視裝置通常連線到最好的音響系統↟▩↟。

不像電腦✘☁••,使用者期望電視裝置發音✘☁••,並且希望不會被打擾↟▩↟。

10英尺使用者介面需要簡單和可見的導航

建立從左到右▩▩↟、從上到下的導航↟▩↟。

降低對滑鼠的要求↟▩↟。

提供可視反饋↟▩↟。

基於內容區域的使用者介面模式✘☁••,最適合於10英尺使用者介面

區域本身與裝置型別無關↟▩↟。

不同的裝置型別有特定的區域安排↟▩↟。

許多不同的使用者介面可以基於區域的概念↟▩↟。

1.十英尺的環境

當你為十英尺環境建立Android應用程式時✘☁••,你應該牢記一些基本理念↟▩↟。這些基本理念將“十英尺環境”與電腦和移動裝置區別開來↟▩↟。

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

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

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

2.電視顯示

當你設計你的應用程式時✘☁••,牢記Google TV 的顯示在根本上是與電腦或移動裝置不同的↟▩↟。除開它的尺寸大小因素✘☁••,電視顯示出的資訊總量比電腦或移動裝置的要少↟▩↟。你應該提供更少的UI✘☁••,可能需要自動化處理某些任務✘☁••,而不是要求使用者去互動↟▩↟。

以下是一些UI設計準則▩↟◕↟:

使用手機作為UI模型↟▩↟。現代電視的尺寸具有欺騙性↟▩↟。儘管現代電視的螢幕對角線通常大於40英寸✘☁••,成比例地✘☁••,觀眾坐在電視前比坐在電腦顯示屏前要遠↟▩↟。觀眾感受到的是✘☁••,電視螢幕尺寸比電腦顯示器要小↟▩↟。當你在設計UI時✘☁••,你可以使用手機作為 “模型”來模擬這種體驗↟▩↟。

在頁面上的元素之間應該留出更多的空白空間✘☁••,避免螢幕上雜亂的外觀↟▩↟。要做到這一點✘☁••,需要綜合使用更大的外邊距和內邊距↟▩↟。這對“觸屏”UI也同樣是一個好建議↟▩↟。

電視總是橫屏的↟▩↟。在電視上✘☁••,水平方向的可用空間比垂直方向上的可用空間要多↟▩↟。將螢幕上的導航控制元件水平放置✘☁••,為內容部分節省下垂直空間↟▩↟。

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 提供的縮放設定如下表所示↟▩↟。

8.png

注註釋▩↟◕↟:

可定址的螢幕尺寸是可見的畫素數目↟▩↟。

密度定義是Android 根據dp來定義的↟▩↟。在 “設計與開發”一章中的“可選資源”一節中有相關描述↟▩↟。要了解更多關於可選資源的資訊✘☁••,可以閱讀“Android開發準則”中的“支援多種螢幕”一章↟▩↟。

確定當前顯示器的螢幕尺寸和解析度✘☁••,使用“顯示單位”中的dpi與螢幕解析度↟▩↟。

2.1.3 過掃描

另一個難題是過掃描↟▩↟。由於歷史原因✘☁••,電視製造商必須在正常螢幕尺寸的外側預留出空白邊✘☁••,能夠被電路定址✘☁••,但是不被用來顯示電視訊號↟▩↟。這些空白區域就是過掃描區域(或者就簡稱為“過掃描”)↟▩↟。Android應用程式不能在過掃描區域顯示↟▩↟。

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

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

8.png

圖1 螢幕解析度和尺寸

2.2 色彩

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

謹慎地使用純白色(#FFFFFF)↟▩↟。純白色在電視螢幕上會引起振動或影象重影↟▩↟。用#F1F1F1(hex)或者240/240/240(RGB)來代替使用純白色↟▩↟。

避免使用明亮的白色系✘☁••,紅色系和橙色系✘☁••,因為這些顏色在電視上顯示會特別嚴重的失真↟▩↟。

瞭解不同的電視顯示模式✘☁••,包括標準▩▩↟、銳利▩▩↟、電影/劇場✘☁••,遊戲等等↟▩↟。確保你的應用能適應這些全部的電視模式↟▩↟。

避免使用大面積的色彩漸變✘☁••,因為它們可能會導致色帶↟▩↟。

如果可能✘☁••,在低質量的顯示器上測試你的應用程式↟▩↟。這些裝置可能有較差的伽馬值和顏色設定↟▩↟。

2.3 文字

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

以下是一些提高文字易讀性的方法▩↟◕↟:

每個段落限制90個單詞↟▩↟。

將長句改為幾個短句✘☁••,讓使用者可以快速瀏覽↟▩↟。

在每行保持5-7個單詞✘☁••,不要少於3個單詞✘☁••,也不要多於12個單詞↟▩↟。

在電視上✘☁••,在深色背景上的淺色文字比在淺色背景上的深色文字更容易閱讀↟▩↟。

使用Android的標準字型尺寸↟▩↟。例如✘☁••,標準的小字型字號為14sp✘☁••,在1080p的螢幕上✘☁••,這相當於28點的字號↟▩↟。

為螢幕文字設定比印刷文字更大的行間距↟▩↟。

3.聲音和UI

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

使用適宜起居室環境的聲音↟▩↟。

預設一個低的初始值↟▩↟。

假設你的使用者在使用你的應用時✘☁••,他們將會觀看電視或聽音樂↟▩↟。提供一個簡單的方式將你的應用靜音↟▩↟。不要完全依賴音訊訊號來完成互動✘☁••,而要適量使用↟▩↟。

Android 有聲音焦點的概念✘☁••,允許應用程式排外地請求音訊的播放↟▩↟。所以✘☁••,如果你的應用程式中的主要功能依賴於聲音(如媒體播放器)✘☁••,你應該請求排外的聲音焦點↟▩↟。如果應用程式在後臺播放媒體✘☁••,你應該建立一個聲音焦點改變監聽器✘☁••,並且尊重其他應用程式對聲音焦點的請求↟▩↟。更多的資訊可以在這裡可以找到↟▩↟。

4.導航設計

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

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

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

用方向鍵導航而不是滑鼠導航↟▩↟。使用者可能對使用電視遙控器的這種導航方式更加熟悉↟▩↟。

如果你選擇使用滑鼠導航✘☁••,要為滑鼠提供超大的選擇介面↟▩↟。將可點選的按鈕做得大大的✘☁••,這樣使用者可以更容易地將游標定位在它們上面↟▩↟。

避免複雜或者靜謐的滑鼠導航↟▩↟。不要使用拖放和下拉選單↟▩↟。這些在電視環境中很難控制↟▩↟。

為導航提供高度明顯的UI反饋↟▩↟。當游標轉移到選項介面上✘☁••,展開或高亮顯示導航↟▩↟。使用過渡和移動✘☁••,為繼續或倒退操作提供視覺提示↟▩↟。例如✘☁••,如果使用者選擇一項操作後✘☁••,一個新的頁面從右側滑入✘☁••,使用者也許憑直覺明白✘☁••,按下方向鍵盤的左鍵將會返回到前一頁↟▩↟。

你的目標是提供一個導航機制✘☁••,使用者可以透過它很快地知道自己將要去到哪裡↟▩↟。

再次提醒各位✘☁••,電視既不是電腦也不是移動裝置↟▩↟。沒有觸屏✘☁••,它的滑鼠(如果有的話)很難控制↟▩↟。為了模擬使用者在使用TV導航時的思維模式✘☁••,嘗試在不使用滑鼠的情況下✘☁••,在執行Android應用的模擬器中使用導航↟▩↟。介面有多直觀│↟·◕?做些什麼能讓它們表現得更好│↟·◕?

4.1 方向鍵導航

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

使用者需要方向導航鍵快速簡單的互動↟▩↟。牢記使用者是在一定距離之外導航✘☁••,也許還可能是在黑暗中││!

當你為方向鍵導航進行設計時✘☁••,遵循以下準則▩↟◕↟:

確保方向箭頭按鈕可以導航至螢幕上所有可見的控制元件↟▩↟。

如果你使用某個方向鍵來滾動一個列表✘☁••,確保使用者能選擇在列表中的某個元素✘☁••,而且某個元素被選擇後✘☁••,這個列表仍然能夠滾動↟▩↟。

如果有多個專案在應用程式中被選擇✘☁••,確保使用者能清楚得知道自己現在選擇的是哪一項↟▩↟。

確保在你的應用程式的任何可以使用方向鍵盤的UI專案中✘☁••,提供了全部的“選中”▩▩↟、“聚焦”和“選中並聚集”的狀態

瞭解更多關於方向鍵導航的資訊✘☁••,請閱讀“Google TV Android開發準則”中的“UI 控制元件準則”一章↟▩↟。

4.2 滑鼠導航

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

放大每一個游標可以訪問的UI控制元件(比如連結或按鈕)✘☁••,並在控制元件周圍留出足夠的空白↟▩↟。

增加一個“hover”狀態✘☁••,當游標經過控制元件的時候✘☁••,這個控制元件外觀會發生變化↟▩↟。

使用箭頭指示讓使用者知道在螢幕外有可訪問的內容↟▩↟。使用箭頭作為控制元件✘☁••,點選後轉到頁面外↟▩↟。

4.3 導航幫助

對大多數的使用者來說✘☁••,十英尺環境裡的導航是新鮮的↟▩↟。使用幫助按鈕或操作欄按鈕觸發對話方塊✘☁••,給他們提供文字幫助↟▩↟。內容覆蓋以下這些▩↟◕↟:

方向導航鍵▩↟◕↟:它們可以切換頁面嗎│↟·◕?他們能開啟上下文或導航選單嗎│↟·◕?

返回按鈕▩↟◕↟:它能返回前一頁嗎│↟·◕?可以撤銷上一個動作嗎│↟·◕?它可以關閉一個彈出視窗嗎│↟·◕?

媒體按鍵▩↟◕↟:按下播放/暫停鍵會如何│↟·◕?按下快進/快退呢│↟·◕?

其它按鍵▩↟◕↟:是取消或關閉彈出視窗的按鍵嗎│↟·◕?例如✘☁••,ESC鍵能關閉一個彈出視窗嗎│↟·◕?

你也許希望在使用者第一次使用你的應用時✘☁••,自動顯示幫助對話方塊↟▩↟。

4.4 垂直滾動

垂直頁面滾動對於桌面瀏覽器來說是基本的✘☁••,這種方式在電視中可能就不是那麼好用了↟▩↟。滾動可能生澀緩慢✘☁••,重要的資訊可能被隱藏在螢幕之外↟▩↟。因為使用者不理解這種滾動是可以持續的↟▩↟。

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

4.5 類別導航

將類別(你將會放進選單或標籤中的專案)放在螢幕的左側↟▩↟。在電視上✘☁••,水平方向的空間比較充裕✘☁••,但垂直方向上則是有限的↟▩↟。在螢幕上儘量一直保持類別選擇✘☁••,為此你也許不得不去減少類別的數目↟▩↟。如果你要將手機應用移到電視上✘☁••,考慮重新設計或者至少測試複雜巢狀的▩▩↟、有許多子目錄的導航↟▩↟。

4.6 選擇

在電視螢幕上✘☁••,不容易將游標定位在選項上✘☁••,為了幫助使用者做選擇✘☁••,遵循以下準則▩↟◕↟:

當游標停留在控制元件上時(即hover狀態)✘☁••,高亮顯示選擇的控制元件↟▩↟。

確保可選的控制元件足夠大✘☁••,併為文字標籤留出足夠的額外空白邊↟▩↟。

不要使用傳統的小控制元件✘☁••,例如在視窗角落使用“關閉”按鈕↟▩↟。這樣既可能很難發現✘☁••,又可能很不容易選擇✘☁••,甚至兩者兼有↟▩↟。

避免使用滑鼠關閉彈出視窗✘☁••,舉個例子✘☁••,使用者點選視窗之外的地方✘☁••,PC應用程式就會關閉↟▩↟。這種方式在十英尺環境中是不明顯的↟▩↟。相反的✘☁••,為關閉對話方塊提供一個清楚明確的控制元件✘☁••,並確保方向鍵盤能訪問到它↟▩↟。

不需要使用者選擇首要控制元件來啟用它✘☁••,而是要讓首要或預設的控制元件處在啟用狀態(聚焦其上)✘☁••,並且高亮顯示↟▩↟。

如果視窗或對話方塊的一部分需要滾動✘☁••,那麼自動聚焦其上✘☁••,或者允許它在沒有聚焦的時候可以滾動↟▩↟。讓使用者在滾動元素之前先點選它是強人所難的做法↟▩↟。

4.7 上下文▩▩↟、選擇和焦點

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

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

8.png

圖2 選擇與焦點

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

4.8 焦點與焦點預期

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

8.png

圖3 UI導航的網格模式

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

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

8.png

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

4.9 視覺指示

為介面中可選擇▩▩↟、可導航的專案新增指示或高亮狀態✘☁••,是一個好做法↟▩↟。這種做可以啟示使用者↟▩↟。期望使用者探索介面✘☁••,自己摸索什麼是可選擇✘☁••,什麼是不可選擇的做法是不可取的↟▩↟。假設UI是直覺上就可以知道的想法也同樣不可接受↟▩↟。應該仔細標註▩▩↟、解析UI來獲得使用者的認可與忠誠↟▩↟。

4.10 過渡

應用程式中使用過渡能啟發使用者✘☁••,但也可能會把他們搞糊塗↟▩↟。確保過渡能夠傳達某種含義✘☁••,而不僅僅是提供視覺愉悅↟▩↟。以下是一些準則▩↟◕↟:

避免過載整個頁面✘☁••,因為這會引起最強烈的延遲感受↟▩↟。

對於隻影響一個片段的任何操作✘☁••,過渡應該處於這個片段內↟▩↟。

確保進度資訊是有意義和明確的✘☁••,動畫影象應該能指示出完成了多少進度✘☁••,還有多少工作未完成↟▩↟。

不要為網格中的每一個元素顯示loading動畫↟▩↟。在網格中的12個專案都在載入動畫✘☁••,雜亂的介面會讓使用者難以瀏覽↟▩↟。

5.使用者介面設計

當你設計使用者介面✘☁••,牢記以下準則▩↟◕↟:

保持設計的一致性↟▩↟。

保持元素行為的一致性↟▩↟。

保持所有重要的操作和選項可見✘☁••,包括搜尋▩▩↟、設定▩▩↟、返回等等↟▩↟。在十英尺環境中✘☁••,不可見的元素容易被記住✘☁••,即便它們是在螢幕以外或者在遙控器上↟▩↟。

5.1 跨裝置的UI

你有一個移動裝置上的應用程式✘☁••,並且你想將它轉移到10英尺環境中↟▩↟。如何將1英尺的UI 轉換為10英尺的UI│↟·◕?記住✘☁••,最重要的是✘☁••,更大未必是更好的↟▩↟。平板比智慧手機好✘☁••,電腦比平板好✘☁••,但是電視要比電腦好嗎│↟·◕?

8.png

圖5 螢幕尺寸比較

你可能認為42”螢幕是最強大的✘☁••,但是情況並非如此↟▩↟。智慧手機通常比電視有更強的處理能力↟▩↟。電視中的高畫質影片和音訊是預先渲染的✘☁••,所以電視所需要的只是與廣播源中的高寬頻連線↟▩↟。換句話說✘☁••,大多數電視的資訊處理工作是由廣播源完成的✘☁••,而不是電視本身↟▩↟。


返回列表
線上溝通

Are you interested in ?

感興趣嗎│↟·◕?

有關我們服務的更多資訊,請聯絡

135 7039 2915 李先生

與我們合作

與派點合作✘☁••,您將會得到更成熟的網站建設服務↟▩↟。我們以客戶至上✘☁••,同時也相互挑戰✘☁••,力求呈現最好的網站建設成果↟▩↟。

品牌顧問熱線(李生):

+135 7039 2915

TOP

QQ客服

免費電話

亚洲精品无码你懂的,日韩无码电影,啊太粗太硬了快拔出来啊,天堂网av