TV UI設計快速上手指南
來自專欄互聯網產品設計
前言
最近有小夥伴私信我關於電視端的設計問題,
遂整理了一些個人最近在TV端應用的一些設計經驗,
供大家交流學習,歡迎加我微信討論學習。
以下是我在起初接觸TV設計的過程中整理的一些方法,
結合自己有限的經驗後總結的一些針對TV設
計的方法規範,
以及一些需要注意的問題。
(僅代表個人經驗和觀點,
如果有什麼覺得不太對的地方,
歡關注我的公眾號 uefans 討論學習)
好,那我們開始正文
使用場景
在開始接到需求之前,我們首先需要了解使用場景和環境,了解這些這些特性設計更符合場景的界面,符合良好的用戶體驗。
因此在TV的界面設計上最好讓用戶通過方向鍵和OK能夠進行操作,並提供返回鍵,避免用戶低頭看遙控器尋找按鍵而打斷操作的任務流。TV標配音響系(音量是默認開啟的)。所以在app設計中,可以使用聲音作為幫助提示和操作反饋提示。
智能電視的特性
智能電視液晶屏區別於電腦顯示設備和手機顯示設備,當你設計你的APP ui界面時,你要知道根本上智能
電視與電腦或移動設備(手機)是不同的。除開它的尺寸大小因素,電視顯示出的信息總量比電腦或移動設備的
要少,你應該提供更少的UI,儘可能的自動化處理某些任務,而不是要求用戶去互動。
市面上大多電視的尺寸都具有一定欺騙性。儘管現代電視的屏幕對角線通常大於40英寸,成比例地,觀眾坐
在電視前比坐在電腦顯示屏前要遠。作為用戶的感受到的是,電視屏幕尺寸」似乎」比電腦顯示器要小。當你在設
計UI時,你可以用自己的手機連接 ps 來模擬這種體驗.
·顯示器和移動設備的顯示解析度
電腦顯示器最大解析度,通常小於或等於顯卡解析度。顯卡決定最大解析度,顯示器決定像素密度。移動設備的分
辨率和像素密度往往是固定的,電腦操作系統能自動處理解析度和像素密度的問題。
Android系統根據設備屏幕大小和像素密度來按比例縮放UI。此外,你可以提供可替換的UI資源,為不同設備準備最好的UI體驗。
·電視顯示解析度
電視(即使是最現代化的那些電腦)有基於掃描線的顯示解析度。Google TV 支持3種掃描線值的高清電視:720p,1080i和1080p,這代表720逐行掃描線,1080隔行掃描線和1080逐行掃描線(Android將後兩者視作等同)。720值意味著電視可以在屏幕的垂直方向上「定址」720條不同的線;1080值則意味著電視以在垂直方向上「定址」1080條線。
這些線有多高,每條線之間的「寬」是多少?也就是說電視的實際像素密度是多少?Android將這些數值抽象顯示為與密度無關的像素單位(縮寫 dp)。
Android 應用程序得益於Android的縮放技術。總之,你應該為1080p的規格來設計UI,允許Android系統將你的UI縮小到720p的規格,因為縮小圖形的效果通常要優於放大的效果。為了得到最好的圖片縮放效果,可以給開發
提供.9.png切圖。
智能電視的設計尺寸
所以建議以1080P作為視覺設計稿尺寸,切圖可以使用android 9-patch切圖進行低解析度適配 ,在測試的時候選擇用低解析度測試可以更好的發現問題;確保在TV所有顯示模式下經過測試,都不會產生問題。
拿上面的圖為例,設計尺寸為1920X1080,因為上面講到的電視屏幕顯示特性,不同廠家甚至還不一樣,那麼為了避免這些問題的出現,在設計界面的時候,如上圖給邊緣留10%或以上的外邊距,所有內容放在這個容器內去設計。我習慣給上下邊距留90個像素,左右邊距留120個像素,不一定要按我的數值去設計,具體數值可以自己根據實際情況去協調。
智能電視的交互
·焦點
不管是為哪個廠商的電視盒子或者 TV OS做,你都需要理解一個叫Focus Engine的設計概念,你要時刻記得在電視UI上應該始終有一個東西是處在Focus的狀態 也就是焦點狀態.
舉個栗子:如上圖中有很多個磁貼排布,而在移動設備上,你需要選擇哪個就直接點擊哪個磁貼即可。而在電視上,默認狀態就應該是選中了一排照片中的某一個,而你需要點擊某一個,就需要先移動焦點到對應的磁貼上,點擊OK來完成選擇,這是由遙控器這種獨特的交互方式決定的。
焦點在整個TV APP中尤為重要,因此設計這塊交互時,無論是卡片還是按鈕,選中的效果,需要足夠明顯誇張一些,當然,除了放大+投影效果,放大+外發光效果,還有放大加描邊的效果,早起樂視在這一塊做的挺出色的,但現在風格上已經顯得很老舊了。
然後放大的倍率,如果沒有太大感覺得話,我在這裡推薦,放大 1.1倍-1.5倍之間,而我經常用的是1.2倍太小不明顯,太大容易遮擋其他信息,具體可以自己逐個去嘗試不同的效果,再根據自己的界面風格,選擇一個最合適的作為規範。
基於遙控器的操作限制,儘可能的讓用戶通過上下左右和OK鍵來進行操作。
儘可能的減少文字輸入的操作,因為在TV上在沒有鍵盤輔助輸入的情況下,通過游標在虛擬鍵盤上輸入文字是一個非常蛋疼的事情,必要的情況下,為用、戶提供語音輸入方式。
在布局上盡量讓布局如圖下右,不要有層疊的交互控制項出現,會增加選擇困難。這部分交互方式在下文我會再拿出、來講。
·導航與狀態
在TV端中,導航遵循簡單,易用,且為了遙控機方向鍵上,下,左,右,加OK鍵的操作,常見的導航方式為橫嚮導航欄,縱嚮導航欄。
應用程序中常用的狀態,包括縱嚮導航器,橫向列表導航,選擇以及焦點,導航一般為一套分類,焦點和選中為一個分類,這些狀態中,儘可能的做到足夠的突出明顯甚至是誇張,且這些狀態要在應用中保持統一。
對於TV遙控器導航按鍵,上、下、左、右的交互方式而言,網格是最顯而易見的反映頁面元素,以及交互空間的方式,而界面元素傾斜排練活不在垂直中心,會讓用戶產生疑惑不知該如何去移動焦點到對應的內容,這種交互,我們統稱為十字交互。
如果你的導航方式為橫向的時候,內容也要跟著橫向滾動,以防止出現焦點無法快速回到導航位置,例如:當我焦點在內容上時,如果內容有100行,如果我要將焦點回到頂部導航,就需要往上移動100次,這種設計是非常叫人抓狂的一種體驗。當導航為縱向的時候,相應的,內容也要縱向滾動。
·菜單
十字交互和磁貼是TV端應用主流的交互方式,但實際應用中,十字交互在安卓平台開發難度相對較大,且最多只能展示兩級菜單,當遇到三級菜單需求,在設計和開發時就會顯得很吃力,磁貼風格,開發難度相對小,但下級菜單只能反覆套用磁貼進行展示,當進入二級菜單時候,一級菜單名已經被替換,且一級菜單不夠醒目,容易使用戶丟失當前位置,新手操作起來就顯得混亂了。
考慮這些因素,我們在設計菜單的時候,就要優先考慮一級菜單足夠醒目,讓用戶即使有三級或者四級菜單,也能讓用戶隨時知道界面的當前位置,而磁貼因為能展示豐富的內容,也符合扁平化趨勢,如果可以借鑒一下設計方式。
TV端一般頁面層級不會很深,應該說越少越好,盡量扁平,用戶在體驗式不容易迷失當前位置,在遙控器操作上也會方便很多。我的經驗里常規應用很少超過4個層級,更多信息也是通過彈層,或者設計在側邊小工具欄里,不會再開頁面,這樣設計層級就清晰很多。
·狀態
因為TV是通過移動焦點來進行選擇和操作,因此,在狀態上比常規會多一個半選中狀態,也就是焦點移動到空間上但未按下OK鍵的狀態。常用用列表頁,左邊的縱嚮導航欄。
其實總結起來,TV端在常規的狀態中,多了一個半選中狀態,這個交互其實在早時候,按鍵手機時代,經常用到。我的經驗建議是,儘可能的通過程序自動處理,去簡化個交互,減少用戶的操作步驟。
·顏色
在上文中提到的,電視屏幕有更高的對比度和飽和度。考慮到這點,在使用純色的時候要考慮一下準則:
1.謹慎地使用純白色(#FFFFFF)。純白色在電視屏幕上會引起振動或圖像重影。
用#F1F1F1(hex)或者240/240/240(RGB)來代替使用純白色。
2.避免使用明亮的白色系,紅色系和橙色系,因為這些顏色在電視上顯示會特別嚴重的真。
3.了解不同的電視顯示模式,包括標準、銳利、電影/劇場,遊戲等等。確保你的應用能適應這些全部的電視模式。
4.避免使用大面積的色彩漸變,因為它們可能會導致色帶。
5.如果可能,在低質量的顯示器上測試你的應用程序。這些設備可能有較差的伽馬值和顏色設置。
6.背景儘可能使用暗色背景。
·字體
在使用字體時,避免纖細字體或者有過寬、過窄筆畫的字體。使用簡單無襯線字體並選用抗鋸齒功能來增加易讀性。目前,然後TVOS幾乎大多是安卓系統,字體使用思源黑體,在你需求需要時,你可以考慮嵌入以獲得授權的字體包,但你需要記住一點,嵌入字體包必定會拖慢系統的運行速度,應用的性能會下降,做好應用的內存管理是很有必要,當然這是開發的事情,你只需要了解。
以下是一些提高文本易讀性的一些方法建議:
1.儘可能的減少大量文字的出現。
2.將長句改為幾個短句,讓用戶可以快速瀏覽。
3.雖然尺寸是,算是3X圖,但字體的大小不是移動端規範的3X,而是為觀看距離設計的,相對會大很多。
4.在電視上,在深色背景上的淺色文字比在淺色背景上的深色文字更容易閱讀。
5.使用Android的標準字體尺寸。例如,標準的小字體字型大小為14sp,在1080p的屏幕上,這相當於28點的字型大小。
6.為屏幕文本設置比印刷文本更大的行間距。
個人建議
接觸TV項目大概8個月,根據我這個階段的學習,和實際工作,我總結和歸納的這些基本知識和注意事項,這些大致能幫助剛接觸TV項目的朋友快速了解電視大屏的基本界面設計方法和交互知識,避免一些不必要的坑;但還遠遠不夠,但因為每個公司流程不一樣,各自製定的規範也有所不同,更多的是通過多實戰,多嘗試,去對比和總結,在根據自己的產品定位,去設計出最合適的方案。
最後說一句,TV端設計因為針對用戶群都是偏大齡,大部分情況並沒有像APP那樣顯得高大上,潮流,好看的界面未必是合適的,但是合適的界面,一定是最好的設計。
此次教程就到這裡,希望下次再與大家一同交流學習。
自己寫的經驗,雖然參考了之前學習做的筆記,但如果有需要轉載的朋友,資料加我微信先聯繫我。
推薦閱讀:
※優秀網頁UI設計深度解析
※ui設計師需要學習什麼 這5個字也要放在心上?
※合理復用組件,解鎖數據圖表設計新姿勢
※設計師看過來:怎樣讓你的UI作品集脫穎而出?
※一個合格的UI設計師必備的8項能力