旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實(shí)習(xí)/?A計(jì)劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 熱門文章 > UI設(shè)計(jì) > UI設(shè)計(jì)中智能電視設(shè)計(jì)指南

UI設(shè)計(jì)中智能電視設(shè)計(jì)指南

時(shí)間:2020-10-08來源:m.lb577.com點(diǎn)擊量:作者:Gella
時(shí)間:2020-10-08點(diǎn)擊量:作者:Gella

  最近有小伙伴私信我關(guān)于電視端的設(shè)計(jì)問題,整理了一些個(gè)人最近在TV端應(yīng)用的一些設(shè)計(jì)經(jīng)驗(yàn),供大家交流學(xué)習(xí)。以下就是AAA教育郭老師在TV設(shè)計(jì)的過程中整理的一些方法,結(jié)合自己有限的經(jīng)驗(yàn)后總結(jié)的一些針對(duì)TV設(shè)計(jì)的方法規(guī)范,以及一些需要注意的問題。
 

  一、使用場景
 

  在開始接到需求之前,我們首先需要了解使用場景和環(huán)境,了解這些這些特性設(shè)計(jì)更符合場景的界面,符合良好的用戶體驗(yàn)。
 

  因此在TV的界面設(shè)計(jì)上最好讓用戶通過方向鍵和OK能夠進(jìn)行操作,并提供返回鍵,避免用戶低頭看遙控器尋找按鍵而打斷操作的任務(wù)流。TV標(biāo)配音響系(音量是默認(rèn)開啟的)。所以在app設(shè)計(jì)中,可以使用聲音作為幫助提示和操作反饋提示。
 

  二、智能電視的特性

 

UI設(shè)計(jì)中智能電視設(shè)計(jì)指南

 

  智能電視液晶屏區(qū)別于電腦顯示設(shè)備和手機(jī)顯示設(shè)備,當(dāng)你設(shè)計(jì)你的APP ui界面時(shí),你要知道根本上智能電視與電腦或移動(dòng)設(shè)備(手機(jī))是不同的。除開它的尺寸大小因素,電視顯示出的信息總量比電腦或移動(dòng)設(shè)備的要少,你應(yīng)該提供更少的UI,盡可能的自動(dòng)化處理某些任務(wù),而不是要求用戶去互動(dòng)。
 

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

  三、顯示器和移動(dòng)設(shè)備的顯示分辨率
 

  電腦顯示器最大分辨率,通常小于或等于顯卡分辨率。顯卡決定最大分辨率,顯示器決定像素密度。移動(dòng)設(shè)備的分辨率和像素密度往往是固定的,電腦操作系統(tǒng)能自動(dòng)處理分辨率和像素密度的問題。
 

  Android系統(tǒng)根據(jù)設(shè)備屏幕大小和像素密度來按比例縮放UI。此外,你可以提供可替換的UI資源,為不同設(shè)備準(zhǔn)備最好的UI體驗(yàn)。
 

  電視顯示分辨率
 

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

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

  Android 應(yīng)用程序得益于Android的縮放技術(shù)??傊?,你應(yīng)該為1080p的規(guī)格來設(shè)計(jì)UI,允許Android系統(tǒng)將你的UI縮小到720p的規(guī)格,因?yàn)榭s小圖形的效果通常要優(yōu)于放大的效果。為了得到最好的圖片縮放效果,可以給開發(fā)提供.9.png切圖。
 

  智能電視的設(shè)計(jì)尺寸

 

UI設(shè)計(jì)中智能電視設(shè)計(jì)指南

 

  所以建議以1080P作為視覺設(shè)計(jì)稿尺寸,切圖可以使用android 9-patch切圖進(jìn)行低分辨率適配 ,在測試的時(shí)候選擇用低分辨率測試可以更好的發(fā)現(xiàn)問題;確保在TV所有顯示模式下經(jīng)過測試,都不會(huì)產(chǎn)生問題。

 

UI設(shè)計(jì)中智能電視設(shè)計(jì)指南

UI設(shè)計(jì)中智能電視設(shè)計(jì)指南

 

  拿上面的圖為例,設(shè)計(jì)尺寸為1920X1080,因?yàn)樯厦嬷v到的電視屏幕顯示特性,不同廠家甚至還不一樣,那么為了避免這些問題的出現(xiàn),在設(shè)計(jì)界面的時(shí)候,如上圖給邊緣留10%或以上的外邊距,所有內(nèi)容放在這個(gè)容器內(nèi)去設(shè)。
 

  我習(xí)慣給上下邊距留90個(gè)像素,左右邊距留120個(gè)像素,不一定要按我的數(shù)值去設(shè)計(jì),具體數(shù)值可以自己根據(jù)實(shí)際情況去協(xié)調(diào)。
 

  智能電視的交互

 

UI設(shè)計(jì)中智能電視設(shè)計(jì)指南

 

  四、焦點(diǎn)
 

  不管是為哪個(gè)廠商的電視盒子或者 TV OS做,你都需要理解一個(gè)叫Focus Engine的設(shè)計(jì)概念,你要時(shí)刻記得在電視UI上應(yīng)該始終有一個(gè)東西是處在Focus的狀態(tài) 也就是焦點(diǎn)狀態(tài)。
 

  舉個(gè)栗子:如上圖中有很多個(gè)磁貼排布,而在移動(dòng)設(shè)備上,你需要選擇哪個(gè)就直接點(diǎn)擊哪個(gè)磁貼即可。而在電視上,默認(rèn)狀態(tài)就應(yīng)該是選中了一排照片中的某一個(gè),而你需要點(diǎn)擊某一個(gè),就需要先移動(dòng)焦點(diǎn)到對(duì)應(yīng)的磁貼上,點(diǎn)擊OK來完成選擇,這是由遙控器這種獨(dú)特的交互方式?jīng)Q定的。

 

UI設(shè)計(jì)中智能電視設(shè)計(jì)指南

 

  焦點(diǎn)在整個(gè)TV APP中尤為重要,因此設(shè)計(jì)這塊交互時(shí),無論是卡片還是按鈕,選中的效果,需要足夠明顯夸張一些,當(dāng)然,除了放大+投影效果,放大+外發(fā)光效果,還有放大加描邊的效果,早起樂視在這一塊做的挺出色的,但現(xiàn)在風(fēng)格上已經(jīng)顯得很老舊了。
 

  然后放大的倍率,如果沒有太大感覺得話,我在這里推薦,放大 1.1倍-1.5倍之間,而我經(jīng)常用的是1.2倍太小不明顯,太大容易遮擋其他信息,具體可以自己逐個(gè)去嘗試不同的效果,再根據(jù)自己的界面風(fēng)格,選擇一個(gè)最合適的作為規(guī)范。

 

UI設(shè)計(jì)中智能電視設(shè)計(jì)指南

 

  基于遙控器的操作限制,盡可能的讓用戶通過上下左右和OK鍵來進(jìn)行操作。
 

  盡可能的減少文字輸入的操作,因?yàn)樵赥V上在沒有鍵盤輔助輸入的情況下,通過光標(biāo)在虛擬鍵盤上輸入文字是一個(gè)非常蛋疼的事情,必要的情況下,為用、戶提供語音輸入方式。
 

  在布局上盡量讓布局如圖下右,不要有層疊的交互控件出現(xiàn),會(huì)增加選擇困難。這部分交互方式在下文我會(huì)再拿出、來講。
 

  五、導(dǎo)航與狀態(tài)
 

  在TV端中,導(dǎo)航遵循簡單,易用,且為了遙控機(jī)方向鍵上,下,左,右,加OK鍵的操作,常見的導(dǎo)航方式為橫向?qū)Ш綑?,縱向?qū)Ш綑凇?br />
 

UI設(shè)計(jì)中智能電視設(shè)計(jì)指南

 

  應(yīng)用程序中常用的狀態(tài),包括縱向?qū)Ш狡鳎瑱M向列表導(dǎo)航,選擇以及焦點(diǎn),導(dǎo)航一般為一套分類,焦點(diǎn)和選中為一個(gè)分類,這些狀態(tài)中,盡可能的做到足夠的突出明顯甚至是夸張,且這些狀態(tài)要在應(yīng)用中保持統(tǒng)一。

 

UI設(shè)計(jì)中智能電視設(shè)計(jì)指南

 

  對(duì)于TV遙控器導(dǎo)航按鍵,上、下、左、右的交互方式而言,網(wǎng)格是最顯而易見的反映頁面元素,以及交互空間的方式,而界面元素傾斜排練活不在垂直中心,會(huì)讓用戶產(chǎn)生疑惑不知該如何去移動(dòng)焦點(diǎn)到對(duì)應(yīng)的內(nèi)容,這種交互,我們統(tǒng)稱為十字交互。

 

UI設(shè)計(jì)中智能電視設(shè)計(jì)指南

 

  如果你的導(dǎo)航方式為橫向的時(shí)候,內(nèi)容也要跟著橫向滾動(dòng),以防止出現(xiàn)焦點(diǎn)無法快速回到導(dǎo)航位置,例如:當(dāng)我焦點(diǎn)在內(nèi)容上時(shí),如果內(nèi)容有100行,如果我要將焦點(diǎn)回到頂部導(dǎo)航,就需要往上移動(dòng)100次,這種設(shè)計(jì)是非常叫人抓狂的一種體驗(yàn)。當(dāng)導(dǎo)航為縱向的時(shí)候,相應(yīng)的,內(nèi)容也要縱向滾動(dòng)。
 

  六、菜單

 

UI設(shè)計(jì)中智能電視設(shè)計(jì)指南

 

  十字交互和磁貼是TV端應(yīng)用主流的交互方式,但實(shí)際應(yīng)用中,十字交互在安卓平臺(tái)開發(fā)難度相對(duì)較大,且最多只能展示兩級(jí)菜單,當(dāng)遇到三級(jí)菜單需求,在設(shè)計(jì)和開發(fā)時(shí)就會(huì)顯得很吃力。
 

  磁貼風(fēng)格,開發(fā)難度相對(duì)小,但下級(jí)菜單只能反復(fù)套用磁貼進(jìn)行展示,當(dāng)進(jìn)入二級(jí)菜單時(shí)候,一級(jí)菜單名已經(jīng)被替換,且一級(jí)菜單不夠醒目,容易使用戶丟失當(dāng)前位置,新手操作起來就顯得混亂了。
 

  考慮這些因素,我們?cè)谠O(shè)計(jì)菜單的時(shí)候,就要優(yōu)先考慮一級(jí)菜單足夠醒目,讓用戶即使有三級(jí)或者四級(jí)菜單,也能讓用戶隨時(shí)知道界面的當(dāng)前位置,而磁貼因?yàn)槟苷故矩S富的內(nèi)容,也符合扁平化趨勢,如果可以借鑒一下設(shè)計(jì)方式。

 

UI設(shè)計(jì)中智能電視設(shè)計(jì)指南

 

  TV端一般頁面層級(jí)不會(huì)很深,應(yīng)該說越少越好,盡量扁平,用戶在體驗(yàn)式不容易迷失當(dāng)前位置,在遙控器操作上也會(huì)方便很多。我的經(jīng)驗(yàn)里常規(guī)應(yīng)用很少超過4個(gè)層級(jí),更多信息也是通過彈層,或者設(shè)計(jì)在側(cè)邊小工具欄里,不會(huì)再開頁面,這樣設(shè)計(jì)層級(jí)就清晰很多。
 

  七、狀態(tài)

 

UI設(shè)計(jì)中智能電視設(shè)計(jì)指南

UI設(shè)計(jì)中智能電視設(shè)計(jì)指南

UI設(shè)計(jì)中智能電視設(shè)計(jì)指南

 

  因?yàn)門V是通過移動(dòng)焦點(diǎn)來進(jìn)行選擇和操作,因此,在狀態(tài)上比常規(guī)會(huì)多一個(gè)半選中狀態(tài),也就是焦點(diǎn)移動(dòng)到空間上但未按下OK鍵的狀態(tài)。常用用列表頁,左邊的縱向?qū)Ш綑凇?br />
 

UI設(shè)計(jì)中智能電視設(shè)計(jì)指南

 

  其實(shí)總結(jié)起來,TV端在常規(guī)的狀態(tài)中,多了一個(gè)半選中狀態(tài),這個(gè)交互其實(shí)在早時(shí)候,按鍵手機(jī)時(shí)代,經(jīng)常用到。我的經(jīng)驗(yàn)建議是,盡可能的通過程序自動(dòng)處理,去簡化個(gè)交互,減少用戶的操作步驟。
 

  八、顏色

 

UI設(shè)計(jì)中智能電視設(shè)計(jì)指南

UI設(shè)計(jì)中智能電視設(shè)計(jì)指南

 

  在上文中提到的,電視屏幕有更高的對(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è)置。
 

  背景盡可能使用暗色背景。
 

  九、字體

 

UI設(shè)計(jì)中智能電視設(shè)計(jì)指南

 

  在使用字體時(shí),避免纖細(xì)字體或者有過寬、過窄筆畫的字體。使用簡單無襯線字體并選用抗鋸齒功能來增加易讀性。
 

  目前,TVOS幾乎大多是安卓系統(tǒng),字體使用思源黑體,在你需求需要時(shí),你可以考慮嵌入以獲得授權(quán)的字體包。但你需要記住一點(diǎn),嵌入字體包必定會(huì)拖慢系統(tǒng)的運(yùn)行速度,應(yīng)用的性能會(huì)下降,做好應(yīng)用的內(nèi)存管理是很有必要,當(dāng)然這是開發(fā)的事情,你只需要了解。
 

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

  盡可能的減少大量文字的出現(xiàn)。
 

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

  雖然尺寸是,算是3X圖,但字體的大小不是移動(dòng)端規(guī)范的3X,而是為觀看距離設(shè)計(jì)的,相對(duì)會(huì)大很多。
 

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

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

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

  十、個(gè)人建議
 

  最后說一句,TV端設(shè)計(jì)因?yàn)獒槍?duì)用戶群都是偏大齡,大部分情況并沒有像APP那樣顯得高大上,潮流,好看的界面未必是合適的,但是合適的界面,一定是最好的設(shè)計(jì)。因此,您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息,請(qǐng)?jiān)L問AAA教育,包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。



 

預(yù)約申請(qǐng)免費(fèi)試聽課

填寫下面表單即可預(yù)約申請(qǐng)免費(fèi)試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會(huì)?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動(dòng)者教育科技有限公司版權(quán)所有
備案號(hào):京ICP備12034770號(hào)

?2007-2022/ m.lb577.com 北京漫動(dòng)者數(shù)字科技有限公司 備案號(hào): 京ICP備12034770號(hào) 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號(hào)

網(wǎng)站地圖