為電視而設(shè)計:開始思考電視的界面

0 評論 17796 瀏覽 82 收藏 13 分鐘

一篇關(guān)于電視UI基本組成部分的介紹。

歡迎來到電視機的新黃金時代。不僅僅因為出現(xiàn)了更多比從前更棒的產(chǎn)品,我們在自己觀看和喜愛的節(jié)目上也有了更多選擇。雖然我們可以隨時隨地通過電腦、手機和平板觀看,但電視在多數(shù)人家中仍然占據(jù)著一個特殊角色。

但我們對電視的控制,不再只局限于遙控和分線盒;我們開始使用智能電視,或者觀看機頂盒的節(jié)目,例如Roku和Apple TV,或者使用電視游戲設(shè)備,例如Xbox和Playstation。這每一種設(shè)備的用戶界面,都比老式的屏幕引導(dǎo)要強大百倍。

與電腦、甚至手機相比,為電視設(shè)計界面仍然是相對新的領(lǐng)域。它也是一個完全不同的平臺。為TV設(shè)計需要完全不同的思考,包括屏幕尺寸和距離、技術(shù)局限、還有使用場景。

這是本系列的上篇,專注于開始思考電視的界面。我們也會特別關(guān)注游戲手柄,把它視作一種輸入設(shè)備,還有手柄API的基本使用。在下篇中,我們會向你展示,如何構(gòu)建TV界面原型與控件。

顯示器

這就是電視不同于電腦、手機和平板的地方。

市場上第一臺電視是由陰極射線管制成(CRT),一種在電視上顯示不連續(xù)畫面的粗糙技術(shù)。在屏幕邊緣處問題尤其明顯,為了補償,CRT電視只好運用過掃描。有了過掃描,圖像自身稍微放大了,所以邊緣超出屏幕可視區(qū)域的外延。

圖片來源:Netflix

由于廣播電視公司預(yù)先裁切掉了部分畫面,他們想要避免任何重要信息過于靠近屏幕邊緣。歷史上,曾經(jīng)有過標題安全區(qū),文字在此處不會失真,還有畫面安全區(qū),圖片再此區(qū)域內(nèi)可以安全展示。

出于一些復(fù)雜且可笑的原因,過掃描在HDTV上仍然存在。現(xiàn)如今建議保留至少5%的外邊距,作為通用的安全區(qū),讓所有界面保持在區(qū)域內(nèi)。但是,這個百分比可以調(diào)整;Google的安全區(qū)更窄,而Apple的安全區(qū)則更寬厚。我們發(fā)現(xiàn),建立布局柵格時往往要調(diào)節(jié)安全區(qū)。

以此開頭,我們將畫布設(shè)置為標準的HDTV分辨率:1920 x 1080px,上下60px外邊距左右90px外邊距。后面我們會介紹4K。

導(dǎo)航

導(dǎo)航輸入方式?jīng)Q定了電視的界面。

硬件往往決定了設(shè)計模式。在移動端,標簽欄作為一種導(dǎo)航的模式,兼顧了又小又高的屏幕尺寸。在電視上,扁寬的屏幕產(chǎn)生了橫向排列、最大化展示信息量的布局方式。就像移動端的標簽欄,這種模式在多數(shù)電視界面上非常普遍。

從左上圖開始順時針依次為:Netflix電視應(yīng)用、Playstation上的Hulu Plus、Apple TV上的iTunes Store、Apple TV上的AMC。

類似地,主流電視界面(除了超級萌、卻也令人抓狂的LG Bean Bird),都由D面板控制,D是方向的英文首字母。無論是遙控或是游戲手柄,D面板把導(dǎo)航限制在四個方向上:上下左右。這使得網(wǎng)格成為電視應(yīng)用最自然的界面結(jié)構(gòu)。

Apple TV(上)用了陰影和z軸位置表現(xiàn)鼠標指針,而HBO GO(下)使用了藍色的邊框

電視界面另一個至關(guān)重要的元素是指針。沒有觸摸和鼠標,用戶必須轉(zhuǎn)到他們想要選擇的元素上。指針高亮顯示了當前選中的元素,隨著D面板的輸入變化而移動。應(yīng)用通常使用邊框、投影、z軸或幾種混合來呈現(xiàn)選中狀態(tài)。屏幕上的每個元素都可以被指針選中,也要清晰表明指針可以向哪邊移動。

在我們的原型中,我們重建了一套典型的電視界面布局,只有一行內(nèi)容。我們在第一項上增加了指針狀態(tài)。

輸入

除了遙控器之外,人們還會如何控制電視。

從左到右:Logitech Harmony、Samsung Smart TV、Apple TV、Roku、Amazon Fire TV。

多數(shù)電視和流媒體設(shè)備都依賴某種形式的遙控器。有些平臺在實驗語音輸入,而其他一些,例如新的Apple TV則在嘗試觸摸輸入。無論如何,隨著更多流媒體設(shè)備將他們的應(yīng)用延伸到游戲平臺,更多人開始使用游戲手柄操作電視界面。電視游戲設(shè)備非常強大,設(shè)備多功能,在我們的工作室,我們非常熱衷于通過這種硬件來創(chuàng)造最佳的設(shè)計與原型。

用游戲手柄操作有許多優(yōu)勢。相對D面板,游戲手柄帶有搖桿,提供了標準的四個方向移動,同時也能更加微妙的斜角移動。相比D面板,搖桿更快,更易響應(yīng),尤其對于電視游戲玩家。

Xbox One控制器(左)和Playstation 4控制器(右)

有些各個平臺通用的慣例,例如選擇和返回按鈕,在不同控制器里位置相同。每個平臺也有自己的慣例。在Xbox中,trigger提供了“上一頁”和“下一頁”功能,bumper則用來切換不同內(nèi)容視圖。各平臺還有許多“高級用戶”按鈕,經(jīng)驗豐富的玩家都很熟悉。

但是,為客廳設(shè)計時,場景很重要。雖然許多玩視頻游戲的核心用戶非常熟悉這些控制器,但客廳設(shè)備終究是分享設(shè)備。我們希望其他不太熟悉游戲手柄的用戶,也用它們進行娛樂。為了核心功能,最好還是堅持標準的按鈕慣例。

在下篇中,我們會通過Gamepad API,深入研究如何將游戲手柄控制器加入到界面中。

文字

從10英尺開外瀏覽界面。

想象你坐在沙發(fā)上,看著一場電視節(jié)目。很容易看清畫面的運動,但是開始播放演員表時會發(fā)生什么?或者彈出一個菜單呢?

電視應(yīng)用通常都被稱為10英尺的體驗,這個術(shù)語表示你與電視間的通常距離。有了這個距離,我們對待界面的方式,要與網(wǎng)頁和移動端稍有不同。界面要更加稀疏,設(shè)計元素要加大,才能從房間的另一頭閱讀。

在10英尺的體驗中,文字的處理尤其棘手。毫無疑問,要放大。字號與字重都要增加。我們發(fā)現(xiàn)18px是可閱讀的最小字號,只適合不重要的標簽,例如頁面頂部標簽。在我們的設(shè)計中,我們把標題設(shè)為92px,而正文設(shè)置成24px。

優(yōu)秀的電視文字設(shè)計,關(guān)鍵在于不斷檢驗。纖細的小字體在顯示器上看起來似乎干凈清晰,但是一旦到了電視上,可能就被淹沒或者無法理解。我們在電視屏幕上建立了一套測試模型,在流程早期就定義了字號。

顏色

了解電視屏幕的局限。

HDTV的色彩范圍比你的電腦顯示器更局限。這意味著設(shè)計時,你就要使用更廣的色彩范圍,才能在電視上正常顯示。在亮度、顯示和其他設(shè)置方面,不同制造商和模型的電視千差萬別。顏色應(yīng)該盡早且經(jīng)常在電視上測試

開始設(shè)計前有些規(guī)范可以遵循:避免純白,明亮的光線對眼睛有害。還要留意漸變和深度模糊,有限的顏色范圍會導(dǎo)致色條出現(xiàn)。為了完成原型的設(shè)計,我們把背景色設(shè)置為#EEE,隱藏了安全區(qū)和參考線。

4K的未來

準備進入新時代。

不像手機,多數(shù)消費者不會定期升級電視。越來越多4K電視正在出現(xiàn),但我們的設(shè)計,仍在為一個基本局限于1080p的市場服務(wù)。

最終這些都會改變,就像移動端設(shè)計中的不同屏幕尺寸,設(shè)計師很快也要把電視設(shè)計做成2倍。除了更棒的畫質(zhì),更高的像素密度意味著文字和界面更加清晰易辨識。

可能4K時代的界面設(shè)計,最有前途的會是色彩范圍與深度的提升。如今的HDTV使用的是名為Rec. 709的色彩配置,色彩范圍相當有限。有一種新的色彩配置,Rec. 2020,就是為4K電視而生,提供了更大的色彩范圍。

圖片來源

但是,色彩深度比范圍更加重要。如今多數(shù)HDTV提供8位色彩。這就意味著每個RGB色彩通道只有256種顏色,總共可能的色彩只有1.678千萬種。新的4K電視有10位甚至更高的色彩,每個通道能提供至少1024種色彩,總共可以產(chǎn)生10億種色彩。有更大的色彩深度,漸變和模糊區(qū)域的條紋就不見了,設(shè)計師們得以有更多機會運用色彩和處理照片素材。

原型

一切設(shè)計最重要的部分。

現(xiàn)在我們有了基本的設(shè)計,準備開始制作原型了。下周,我們會通過Gamepad API和一些基本的HTML/CSS/JS操縱手柄控制器,演示基本的導(dǎo)航原型。

同時,這里有些資源,幫你開始設(shè)計自己的界面:

下載案例(PSD)

tvOS人機界面指南

為Android TV而設(shè)計

Amazon Fire TV設(shè)計與用戶體驗指南

 

原文作者:Molly Lafferty

原文鏈接:https://medium.com/this-also/designing-for-television-part-1-54508432830f#.6vj0fdnsf

#專欄作家#

可樂橙,微信公眾號:可樂橙(colachangreen)。人人都是產(chǎn)品經(jīng)理專欄作家,UI/UX設(shè)計師,關(guān)注互聯(lián)網(wǎng),關(guān)注科技?,F(xiàn)居杭州,與小伙伴們正在創(chuàng)業(yè)途中?;蛟S不是一名優(yōu)秀的設(shè)計師,至少是個快樂的設(shè)計師。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,不得轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!