品牌設(shè)計(jì)
Hi,are you ready?

準(zhǔn)備好開始了嗎?
那就與我們?nèi)〉寐?lián)系吧

有一個(gè)品牌項(xiàng)目想和我們談?wù)剢?您可以填寫右邊的表格,讓我們了解您的項(xiàng)目需求,這是一個(gè)良好的開始,我們將會(huì)盡快與你取得聯(lián)系。當(dāng)然也歡迎您給我們寫信或是打電話,讓我們聽到你的聲音!

PID派點(diǎn)互動(dòng)

地 址:廣州市天河區(qū)金慧路88號(hào)11棟138單元(華南農(nóng)業(yè)大學(xué)內(nèi))

電 話:+020- 3855 0205 3855 0745

傳 真:+020-3855 0745

E-mail:925774558@qq.com

填寫您的項(xiàng)目信息

captcha

Google智能電視設(shè)計(jì)規(guī)范

標(biāo)簽:派點(diǎn)互動(dòng)|手機(jī)網(wǎng)站|網(wǎng)站策劃|廣州網(wǎng)站策劃

這是為運(yùn)行在Google TV 上的Android應(yīng)用程序所作的用戶界面開發(fā)準(zhǔn)則。雖然運(yùn)行在手機(jī)和Google TV上的安卓應(yīng)用程序幾乎沒有不同,但在用戶界面上,兩者還是有區(qū)別。

4ceed6765ff9d12a8e1af8f5c6dc13ef.jpg

電視的觀看環(huán)境通常被描述為“10英尺環(huán)境”,電視屏幕也被描述為“10英尺的用戶界面”。當(dāng)你為10英尺環(huán)境創(chuàng)建應(yīng)用程序時(shí),請(qǐng)記住以下基礎(chǔ)概念:

派點(diǎn)互動(dòng) 品牌網(wǎng)站建設(shè) 網(wǎng)頁設(shè)計(jì)制作 建站公司 設(shè)計(jì)公司 廣州網(wǎng)站建設(shè) 網(wǎng)站制作 高端設(shè)計(jì)

從傳統(tǒng)上意義來說,10英尺環(huán)境適合消費(fèi)內(nèi)容

10英尺環(huán)境是娛樂環(huán)境,不是工作環(huán)境。

10英尺環(huán)境通常是一個(gè)社會(huì)環(huán)境,不是單用戶環(huán)境。

10英尺用戶界面的觀看體驗(yàn)是電腦和電視的結(jié)合

電視屏幕兼有電腦和電視的特點(diǎn)。

顯示分辨率類似電腦,但受到電視特點(diǎn)的影響。

在TV屏幕上的色彩是不同的。

電視設(shè)備擁有高品質(zhì)的聲音

電視設(shè)備通常連接到最好的音響系統(tǒng)。

不像電腦,用戶期望電視設(shè)備發(fā)音,并且希望不會(huì)被打擾。

10英尺用戶界面需要簡單和可見的導(dǎo)航

建立從左到右、從上到下的導(dǎo)航。

降低對(duì)鼠標(biāo)的要求。

提供可視反饋。

基于內(nèi)容區(qū)域的用戶界面模式,最適合于10英尺用戶界面

區(qū)域本身與設(shè)備類型無關(guān)。

不同的設(shè)備類型有特定的區(qū)域安排。

許多不同的用戶界面可以基于區(qū)域的概念。

1.十英尺的環(huán)境

當(dāng)你為十英尺環(huán)境創(chuàng)建Android應(yīng)用程序時(shí),你應(yīng)該牢記一些基本理念。這些基本理念將“十英尺環(huán)境”與電腦和移動(dòng)設(shè)備區(qū)別開來。

最基本的理念是,在傳統(tǒng)意義上,電視設(shè)備是用來展示消費(fèi)性內(nèi)容的。在很長的一段歷史中,電視都作為一種被動(dòng)接收廣播信息的系統(tǒng)。Google TV 將電視從廣播系統(tǒng)變?yōu)殡p向交互系統(tǒng),這對(duì)許多觀眾來說是一個(gè)巨大的改變。對(duì)老年觀眾,特別是認(rèn)為自己是“電腦盲”的人來說,這一改變就有些棘手了。另一方面,與互聯(lián)網(wǎng)一同成長的年輕觀眾對(duì)這一改變就沒有那么大反應(yīng),甚至渴望著接觸它。

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

另外,Google TV 旨在提升傳統(tǒng)的電視觀看體驗(yàn)的目標(biāo)——可以更輕松,可以一起觀看和分享的體驗(yàn)。從這個(gè)更傳統(tǒng)的方法開始,你能夠?qū)⒛愕膽?yīng)用程序與電視屏幕上展示的其他系統(tǒng)區(qū)別開。

2.電視顯示

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

以下是一些UI設(shè)計(jì)準(zhǔn)則:

使用手機(jī)作為UI模型?,F(xiàn)代電視的尺寸具有欺騙性。盡管現(xiàn)代電視的屏幕對(duì)角線通常大于40英寸,成比例地,觀眾坐在電視前比坐在電腦顯示屏前要遠(yuǎn)。觀眾感受到的是,電視屏幕尺寸比電腦顯示器要小。當(dāng)你在設(shè)計(jì)UI時(shí),你可以使用手機(jī)作為 “模型”來模擬這種體驗(yàn)。

在頁面上的元素之間應(yīng)該留出更多的空白空間,避免屏幕上雜亂的外觀。要做到這一點(diǎn),需要綜合使用更大的外邊距和內(nèi)邊距。這對(duì)“觸屏”UI也同樣是一個(gè)好建議。

電視總是橫屏的。在電視上,水平方向的可用空間比垂直方向上的可用空間要多。將屏幕上的導(dǎo)航控件水平放置,為內(nèi)容部分節(jié)省下垂直空間。

2.1 高清顯示分辨率

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

2.1.1 電腦和移動(dòng)設(shè)備的顯示分辨率

電腦顯示器有一個(gè)最大的顯示分辨率,這個(gè)分辨率通常小于或等于顯卡分辨率。顯卡決定最大分辨率,顯示器決定像素密度(每英寸的像素?cái)?shù)量)。移動(dòng)設(shè)備的分辨率和像素密度往往是固定的。

因?yàn)閷?duì)電腦的顯示分辨率很簡單,根據(jù)用戶的偏好設(shè)置,電腦操作系統(tǒng)能自動(dòng)處理分辨率和像素密度的問題。

Android系統(tǒng)使用同一套應(yīng)用程序來運(yùn)行多種移動(dòng)設(shè)備。為了做到這一點(diǎn),Android系統(tǒng)根據(jù)設(shè)備屏幕大小和像素密度來按比例縮放UI。此外,你可以提供可替換的UI資源,為不同設(shè)備準(zhǔn)備最好的UI體驗(yàn)。

2.1.2 電視顯示分辨率

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

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

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

Google TV Android 應(yīng)用程序得益于Android的縮放技術(shù)??傊?,你應(yīng)該為1080p的規(guī)格來設(shè)計(jì)UI,允許Android系統(tǒng)將你的UI縮小到720p的規(guī)格,因?yàn)榭s小圖形的效果通常要優(yōu)于放大的效果。為了得到最好的圖片縮放效果,如果可能的話,給他們提供9-patch格式的圖片。Android為Google TV 提供的縮放設(shè)置如下表所示。

8.png

注注釋:

可尋址的屏幕尺寸是可見的像素?cái)?shù)目。

密度定義是Android 根據(jù)dp來定義的。在 “設(shè)計(jì)與開發(fā)”一章中的“可選資源”一節(jié)中有相關(guān)描述。要了解更多關(guān)于可選資源的信息,可以閱讀“Android開發(fā)準(zhǔn)則”中的“支持多種屏幕”一章。

確定當(dāng)前顯示器的屏幕尺寸和分辨率,使用“顯示單位”中的dpi與屏幕分辨率。

2.1.3 過掃描

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

不幸地是,過掃描也因?yàn)橹圃焐痰牟煌煌K試@你的UI的空白邊也多種多樣。如果你為一部有顯示過掃描的電視設(shè)計(jì)UI,你也許在不經(jīng)意間將過掃描區(qū)域當(dāng)作UI和電視邊框之間的空白邊使用了。如果之后你在一部幾乎沒有過掃描的電視上運(yùn)行你的應(yīng)用程序,UI將幾乎沒有空白邊,這些元素可能很難識(shí)別。

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

8.png

圖1 屏幕分辨率和尺寸

2.2 色彩

與電腦顯示器相比,電視屏幕有更高的對(duì)比度和飽和度??紤]到這點(diǎn),在使用純色的時(shí)候要考慮一下準(zhǔn)則:

謹(jǐn)慎地使用純白色(#FFFFFF)。純白色在電視屏幕上會(huì)引起振動(dòng)或圖像重影。用#F1F1F1(hex)或者240/240/240(RGB)來代替使用純白色。

避免使用明亮的白色系,紅色系和橙色系,因?yàn)檫@些顏色在電視上顯示會(huì)特別嚴(yán)重的失真。

了解不同的電視顯示模式,包括標(biāo)準(zhǔn)、銳利、電影/劇場,游戲等等。確保你的應(yīng)用能適應(yīng)這些全部的電視模式。

避免使用大面積的色彩漸變,因?yàn)樗鼈兛赡軙?huì)導(dǎo)致色帶。

如果可能,在低質(zhì)量的顯示器上測試你的應(yīng)用程序。這些設(shè)備可能有較差的伽馬值和顏色設(shè)置。

2.3 文本

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

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

每個(gè)段落限制90個(gè)單詞。

將長句改為幾個(gè)短句,讓用戶可以快速瀏覽。

在每行保持5-7個(gè)單詞,不要少于3個(gè)單詞,也不要多于12個(gè)單詞。

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

使用Android的標(biāo)準(zhǔn)字體尺寸。例如,標(biāo)準(zhǔn)的小字體字號(hào)為14sp,在1080p的屏幕上,這相當(dāng)于28點(diǎn)的字號(hào)。

為屏幕文本設(shè)置比印刷文本更大的行間距。

3.聲音和UI

使用Google TV的電視往往連接著最好的家用揚(yáng)聲系統(tǒng)。不像在電腦上那樣,在電視上,聲音不被認(rèn)為是干擾因素,所以設(shè)法在你的UI中使用聲音。牢記以下幾點(diǎn):

使用適宜起居室環(huán)境的聲音。

默認(rèn)一個(gè)低的初始值。

假設(shè)你的用戶在使用你的應(yīng)用時(shí),他們將會(huì)觀看電視或聽音樂。提供一個(gè)簡單的方式將你的應(yīng)用靜音。不要完全依賴音頻信號(hào)來完成交互,而要適量使用。

Android 有聲音焦點(diǎn)的概念,允許應(yīng)用程序排外地請(qǐng)求音頻的播放。所以,如果你的應(yīng)用程序中的主要功能依賴于聲音(如媒體播放器),你應(yīng)該請(qǐng)求排外的聲音焦點(diǎn)。如果應(yīng)用程序在后臺(tái)播放媒體,你應(yīng)該建立一個(gè)聲音焦點(diǎn)改變監(jiān)聽器,并且尊重其他應(yīng)用程序?qū)β曇艚裹c(diǎn)的請(qǐng)求。更多的信息可以在這里可以找到。

4.導(dǎo)航設(shè)計(jì)

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

如果有鼠標(biāo)的話,可以通過鼠標(biāo)在屏幕控制鼠標(biāo),點(diǎn)擊鼠標(biāo)下的UI按鈕。再次提醒,在傳統(tǒng)上,電視是一種廣播系統(tǒng)而不是對(duì)話系統(tǒng)。用戶也許不會(huì)有使用方向?qū)Ш芥I或者鼠標(biāo)的經(jīng)驗(yàn)。即使是有經(jīng)驗(yàn)的電腦用戶也會(huì)發(fā)現(xiàn)在電視上使用鼠標(biāo)的困難。

以下是幾條在Google TV 的應(yīng)用中的設(shè)計(jì)UI 導(dǎo)航的準(zhǔn)則:

用方向鍵導(dǎo)航而不是鼠標(biāo)導(dǎo)航。用戶可能對(duì)使用電視遙控器的這種導(dǎo)航方式更加熟悉。

如果你選擇使用鼠標(biāo)導(dǎo)航,要為鼠標(biāo)提供超大的選擇界面。將可點(diǎn)擊的按鈕做得大大的,這樣用戶可以更容易地將光標(biāo)定位在它們上面。

避免復(fù)雜或者靜謐的鼠標(biāo)導(dǎo)航。不要使用拖放和下拉菜單。這些在電視環(huán)境中很難控制。

為導(dǎo)航提供高度明顯的UI反饋。當(dāng)光標(biāo)轉(zhuǎn)移到選項(xiàng)界面上,展開或高亮顯示導(dǎo)航。使用過渡和移動(dòng),為繼續(xù)或倒退操作提供視覺提示。例如,如果用戶選擇一項(xiàng)操作后,一個(gè)新的頁面從右側(cè)滑入,用戶也許憑直覺明白,按下方向鍵盤的左鍵將會(huì)返回到前一頁。

你的目標(biāo)是提供一個(gè)導(dǎo)航機(jī)制,用戶可以通過它很快地知道自己將要去到哪里。

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

4.1 方向鍵導(dǎo)航

方向鍵控制器將運(yùn)動(dòng)限制在上、下、左、右。使用方向鍵中間的Enter或OK鍵觸發(fā)光標(biāo)所在的操作。

用戶需要方向?qū)Ш芥I快速簡單的交互。牢記用戶是在一定距離之外導(dǎo)航,也許還可能是在黑暗中!

當(dāng)你為方向鍵導(dǎo)航進(jìn)行設(shè)計(jì)時(shí),遵循以下準(zhǔn)則:

確保方向箭頭按鈕可以導(dǎo)航至屏幕上所有可見的控件。

如果你使用某個(gè)方向鍵來滾動(dòng)一個(gè)列表,確保用戶能選擇在列表中的某個(gè)元素,而且某個(gè)元素被選擇后,這個(gè)列表仍然能夠滾動(dòng)。

如果有多個(gè)項(xiàng)目在應(yīng)用程序中被選擇,確保用戶能清楚得知道自己現(xiàn)在選擇的是哪一項(xiàng)。

確保在你的應(yīng)用程序的任何可以使用方向鍵盤的UI項(xiàng)目中,提供了全部的“選中”、“聚焦”和“選中并聚集”的狀態(tài)

了解更多關(guān)于方向鍵導(dǎo)航的信息,請(qǐng)閱讀“Google TV Android開發(fā)準(zhǔn)則”中的“UI 控件準(zhǔn)則”一章。

4.2 鼠標(biāo)導(dǎo)航

在電視屏幕上,鼠標(biāo)移動(dòng)的是一個(gè)小而遠(yuǎn)的光標(biāo)箭頭。因?yàn)槭髽?biāo)控制器本身是觸板或軌跡球而不是傳統(tǒng)有滑球的鼠標(biāo),所以鼠標(biāo)控制是比較困難的。幫助你的用戶使用鼠標(biāo):

放大每一個(gè)光標(biāo)可以訪問的UI控件(比如鏈接或按鈕),并在控件周圍留出足夠的空白。

增加一個(gè)“hover”狀態(tài),當(dāng)光標(biāo)經(jīng)過控件的時(shí)候,這個(gè)控件外觀會(huì)發(fā)生變化。

使用箭頭指示讓用戶知道在屏幕外有可訪問的內(nèi)容。使用箭頭作為控件,點(diǎn)擊后轉(zhuǎn)到頁面外。

4.3 導(dǎo)航幫助

對(duì)大多數(shù)的用戶來說,十英尺環(huán)境里的導(dǎo)航是新鮮的。使用幫助按鈕或操作欄按鈕觸發(fā)對(duì)話框,給他們提供文本幫助。內(nèi)容覆蓋以下這些:

方向?qū)Ш芥I:它們可以切換頁面嗎?他們能打開上下文或?qū)Ш讲藛螁幔?/p>

返回按鈕:它能返回前一頁嗎?可以撤銷上一個(gè)動(dòng)作嗎?它可以關(guān)閉一個(gè)彈出窗口嗎?

媒體按鍵:按下播放/暫停鍵會(huì)如何?按下快進(jìn)/快退呢?

其它按鍵:是取消或關(guān)閉彈出窗口的按鍵嗎?例如,ESC鍵能關(guān)閉一個(gè)彈出窗口嗎?

你也許希望在用戶第一次使用你的應(yīng)用時(shí),自動(dòng)顯示幫助對(duì)話框。

4.4 垂直滾動(dòng)

垂直頁面滾動(dòng)對(duì)于桌面瀏覽器來說是基本的,這種方式在電視中可能就不是那么好用了。滾動(dòng)可能生澀緩慢,重要的信息可能被隱藏在屏幕之外。因?yàn)橛脩舨焕斫膺@種滾動(dòng)是可以持續(xù)的。

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

4.5 類別導(dǎo)航

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

4.6 選擇

在電視屏幕上,不容易將光標(biāo)定位在選項(xiàng)上,為了幫助用戶做選擇,遵循以下準(zhǔn)則:

當(dāng)光標(biāo)停留在控件上時(shí)(即hover狀態(tài)),高亮顯示選擇的控件。

確??蛇x的控件足夠大,并為文本標(biāo)簽留出足夠的額外空白邊。

不要使用傳統(tǒng)的小控件,例如在窗口角落使用“關(guān)閉”按鈕。這樣既可能很難發(fā)現(xiàn),又可能很不容易選擇,甚至兩者兼有。

避免使用鼠標(biāo)關(guān)閉彈出窗口,舉個(gè)例子,用戶點(diǎn)擊窗口之外的地方,PC應(yīng)用程序就會(huì)關(guān)閉。這種方式在十英尺環(huán)境中是不明顯的。相反的,為關(guān)閉對(duì)話框提供一個(gè)清楚明確的控件,并確保方向鍵盤能訪問到它。

不需要用戶選擇首要控件來激活它,而是要讓首要或默認(rèn)的控件處在激活狀態(tài)(聚焦其上),并且高亮顯示。

如果窗口或?qū)υ捒虻囊徊糠中枰獫L動(dòng),那么自動(dòng)聚焦其上,或者允許它在沒有聚焦的時(shí)候可以滾動(dòng)。讓用戶在滾動(dòng)元素之前先點(diǎn)擊它是強(qiáng)人所難的做法。

4.7 上下文、選擇和焦點(diǎn)

應(yīng)用程序的通行狀態(tài)包括上下文、選擇和焦點(diǎn)。上下文通常是一套分類,而選擇是用戶已經(jīng)選中的分類。焦點(diǎn)是在光標(biāo)下的控件或元素。這些控件或元素都應(yīng)該有與眾不同的高亮狀態(tài),而且高亮的機(jī)制在整個(gè)應(yīng)用程序中應(yīng)該保持一致。

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

8.png

圖2 選擇與焦點(diǎn)

對(duì)Google TV應(yīng)用程序來說,方向鍵聚焦?fàn)顟B(tài)等同與鼠標(biāo)hover狀態(tài)。這是用戶理解應(yīng)用程序狀態(tài)的主要方式,它可以幫助用戶預(yù)測出如何移動(dòng)焦點(diǎn)或進(jìn)行選擇。

4.8 焦點(diǎn)與焦點(diǎn)預(yù)期

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

8.png

圖3 UI導(dǎo)航的網(wǎng)格模式

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

某些元素,像可滾動(dòng)列表,可能會(huì)與網(wǎng)格排列相矛盾(見圖4),在這種情況下,你應(yīng)該盡可能將默認(rèn)狀態(tài)下的焦點(diǎn)放在離網(wǎng)格近的地方。

8.png

圖4 可滾動(dòng)排列與網(wǎng)格布局

4.9 視覺指示

為界面中可選擇、可導(dǎo)航的項(xiàng)目添加指示或高亮狀態(tài),是一個(gè)好做法。這種做可以啟示用戶。期望用戶探索界面,自己摸索什么是可選擇,什么是不可選擇的做法是不可取的。假設(shè)UI是直覺上就可以知道的想法也同樣不可接受。應(yīng)該仔細(xì)標(biāo)注、解析UI來獲得用戶的認(rèn)可與忠誠。

4.10 過渡

應(yīng)用程序中使用過渡能啟發(fā)用戶,但也可能會(huì)把他們搞糊涂。確保過渡能夠傳達(dá)某種含義,而不僅僅是提供視覺愉悅。以下是一些準(zhǔn)則:

避免重載整個(gè)頁面,因?yàn)檫@會(huì)引起最強(qiáng)烈的延遲感受。

對(duì)于只影響一個(gè)片段的任何操作,過渡應(yīng)該處于這個(gè)片段內(nèi)。

確保進(jìn)度信息是有意義和明確的,動(dòng)畫圖像應(yīng)該能指示出完成了多少進(jìn)度,還有多少工作未完成。

不要為網(wǎng)格中的每一個(gè)元素顯示loading動(dòng)畫。在網(wǎng)格中的12個(gè)項(xiàng)目都在加載動(dòng)畫,雜亂的界面會(huì)讓用戶難以瀏覽。

5.用戶界面設(shè)計(jì)

當(dāng)你設(shè)計(jì)用戶界面,牢記以下準(zhǔn)則:

保持設(shè)計(jì)的一致性。

保持元素行為的一致性。

保持所有重要的操作和選項(xiàng)可見,包括搜索、設(shè)置、返回等等。在十英尺環(huán)境中,不可見的元素容易被記住,即便它們是在屏幕以外或者在遙控器上。

5.1 跨設(shè)備的UI

你有一個(gè)移動(dòng)設(shè)備上的應(yīng)用程序,并且你想將它轉(zhuǎn)移到10英尺環(huán)境中。如何將1英尺的UI 轉(zhuǎn)換為10英尺的UI?記住,最重要的是,更大未必是更好的。平板比智能手機(jī)好,電腦比平板好,但是電視要比電腦好嗎?

8.png

圖5 屏幕尺寸比較

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


返回列表
在線溝通

Are you interested in ?

感興趣嗎?

有關(guān)我們服務(wù)的更多信息,請(qǐng)聯(lián)系

135 7039 2915 李先生

與我們合作

與派點(diǎn)合作,您將會(huì)得到更成熟的網(wǎng)站建設(shè)服務(wù)。我們以客戶至上,同時(shí)也相互挑戰(zhàn),力求呈現(xiàn)最好的網(wǎng)站建設(shè)成果。

品牌顧問熱線(李生):

+135 7039 2915

TOP

QQ客服

免費(fèi)電話