設(shè)計(jì)規(guī)范 | 詳解Android TV用戶界面設(shè)計(jì)
文章對比電視界面,從主屏幕和應(yīng)用程序兩個(gè)方面對Android TV的用戶界面設(shè)計(jì)進(jìn)行了詳細(xì)梳理,與大家分享。
與移動(dòng)端設(shè)備不同,用戶一般在3米外使用電視。因此電視界面設(shè)計(jì)上需要大而漂亮,要有合適的布局、高質(zhì)量的圖片,可辨別的文本、流暢的切換和簡捷的操作。
01??主屏幕
主屏幕提供對內(nèi)容推薦、應(yīng)用程序和全局搜索的訪問。
Android O TV 主屏幕
1. 全局搜索
Android電視提供強(qiáng)大的搜索功能來搜索所有已安裝應(yīng)用程序的內(nèi)容,此外用戶可以設(shè)置搜索應(yīng)用的范圍。語音搜索更便捷,因此它的入口特別明顯。
2. 內(nèi)容推薦行
內(nèi)容推薦是主屏幕上的非常顯眼的區(qū)域,用戶可以在其中找到新內(nèi)容,這是用戶無需啟動(dòng)應(yīng)用程序即可訪問內(nèi)容的最簡單方法。推薦的內(nèi)容一般是應(yīng)用提供的新內(nèi)容和用戶偏好容,如此便可吸引用戶注意。
做一個(gè)簡單比喻,安卓電視就像一個(gè)超市,里面有很多商家(應(yīng)用),商家把自己最好的商品擺放在入口處吸引用戶購買。
推薦內(nèi)容有3種類型,新內(nèi)容,繼續(xù)播放和相關(guān)推薦。
新內(nèi)容
繼續(xù)播放
相關(guān)推薦
推薦內(nèi)容包括圖片、標(biāo)題、副標(biāo)題和應(yīng)用圖標(biāo)。標(biāo)題和圖片高度相關(guān),一般是音視頻的名字,副標(biāo)題多樣化,比如作者,推薦理由,類型等。
當(dāng)焦點(diǎn)在推薦內(nèi)容時(shí),會(huì)出現(xiàn)背景圖片,它應(yīng)該與推薦內(nèi)容相關(guān),但是和推薦卡片上圖片不同。
背景圖片
3. Now Playing Card
對比國內(nèi),NowPlaying Card就是歷史記錄。如果沒有播放記錄時(shí)是不展示這個(gè)的,用戶有播放行為后,系統(tǒng)自動(dòng)出現(xiàn)。用戶可以手動(dòng)移除播放記錄,如果全部移除播放記錄,該行就會(huì)消失。
Now Playing Card
02?應(yīng)用程序
Android電視應(yīng)用程序通常有以下4個(gè)部分:瀏覽頁、詳情頁 、播放頁、應(yīng)用內(nèi)搜索。
1. 瀏覽頁
瀏覽視圖是Android電視應(yīng)用程序的常用入口。為了獲得最佳的瀏覽體驗(yàn),請根據(jù)用戶的使用目的來制定應(yīng)用程序的層次結(jié)構(gòu)。
欄目行
它是按分類組織內(nèi)容。每個(gè)分類里,內(nèi)容以水平列表的形式顯示。默認(rèn)情況下,向下移動(dòng)只能滾動(dòng)一行。
欄目行
豎列表
垂直列表中的項(xiàng)目對應(yīng)欄目行類別名稱。在豎列表中滾動(dòng)同時(shí)將相應(yīng)的行滾動(dòng)到視圖中。垂直列表中的項(xiàng)目僅用于瀏覽,本身不可操作。
如果超過五行,建議使用豎列表。打開豎列表,定位到第一個(gè)項(xiàng)目,若要退出豎列表,請選擇右側(cè)的某一行或使用導(dǎo)航退出。
豎列表
這個(gè)豎列表和國內(nèi)的側(cè)導(dǎo)航不一樣,豎列表的每一項(xiàng)只對應(yīng)一行,側(cè)導(dǎo)航對應(yīng)的整個(gè)頁面即二級(jí)頁,它其實(shí)是網(wǎng)格視圖。下面將說一下網(wǎng)格視圖。
網(wǎng)格視圖
網(wǎng)格視圖顯示所有相關(guān)的內(nèi)容單元。它是最底層的視圖。國內(nèi)的專題、專區(qū)、二級(jí)頁對應(yīng)屬于網(wǎng)格視圖。
網(wǎng)格視圖
2. 詳情頁
詳情頁信息
詳細(xì)頁顯示單個(gè)內(nèi)容實(shí)體的信息和操作,可能包括播放狀態(tài)、內(nèi)容分級(jí)、出版年份和適合人群等。
詳情視圖里的信息按照相關(guān)程度由高到低的順序排列。例如,電影詳情頁視圖應(yīng)優(yōu)先考慮與該電影最相關(guān)的視覺和文本,包括海報(bào)、收視率和”購買”或”查看預(yù)告片”等動(dòng)作。擴(kuò)展信息則通過向下垂直滾動(dòng)顯示,可以包括演員信息、評論和相關(guān)的觀看建議。
詳情頁里的動(dòng)作
只列出最重要的功能,比如購買、租賃、播放和添加到愿望清單等操作。
建議使用大尺寸沉浸式高質(zhì)量海報(bào)圖像。
3. 播放頁
播放頁
播放頁是用戶觀看內(nèi)容的地方,用戶將在這里花費(fèi)大部分時(shí)間。如何進(jìn)入播放頁,有3種方式:推薦行、全局搜索、應(yīng)用內(nèi)搜索。
播放控制包括主控區(qū)和輔助控區(qū),主控區(qū)最多有7個(gè)動(dòng)作,動(dòng)作由傳統(tǒng)可識(shí)別的圖標(biāo)表示,輔助控區(qū)在主控區(qū)下面,非必要功能比如字幕,縱橫比等,建議最多放5個(gè)功能。
播放控制區(qū)
播放頁的拓展信息
在播放過程中,可以向用戶展示拓展信息,比如音視頻的相關(guān)演員或相關(guān)類型作品等。
播放拓展信息
在播放結(jié)束后,可向用戶提供繼續(xù)播放下一集或進(jìn)入類似影片播放或?qū)τ捌M(jìn)行評價(jià)等后續(xù)操作,國內(nèi)一般叫為后聯(lián)播。
后聯(lián)播
當(dāng)用戶因?yàn)楦鞣N原因暫停播放后,要讓用戶很容易的繼續(xù)播放。一般有2種做法,在應(yīng)用內(nèi)將暫停播放的內(nèi)容置頂或者自動(dòng)添加到Now Playing Card。
4. 對話框
在Android電視上,對話框可以覆蓋整個(gè)屏幕。盡量少使用對話框,因?yàn)樗鼈儠?huì)打斷用戶的突然出現(xiàn),迫使用戶停止當(dāng)前任務(wù)并關(guān)注對話框內(nèi)容。對話框的樣式如下圖
對話框
5. 向?qū)?/h3>
比較常見的向?qū)в行率忠龑?dǎo)和購買引導(dǎo)。
新手引導(dǎo)
購買引導(dǎo)
6. 通知
所有類型的應(yīng)用通知在電視上都是不收歡迎的。系統(tǒng)通知會(huì)在不打擾用戶的情況下顯示重要信息。
7. 顏色
純白(#FFFFF)在明亮的電視屏幕上可能非常刺眼。在深色背景下,建議使用淺灰色(#eeeee)作為默認(rèn)文本顏色。不能用太淺的顏色用作強(qiáng)調(diào)的背景色,要用較深的顏色。
8. 字體
以下字體樣式和大小通常用于電視用戶界面。
- 內(nèi)容標(biāo)題 Light 34sp 、Light 24sp
- 豎列表標(biāo)題:Condensed 20sp
- 副標(biāo)題:Regular 16sp
- 按鈕標(biāo):Condensed 16sp
- 正文:Regular 14sp
- 列表項(xiàng)/卡片主文本:Condensed Regular 14sp
- 次要文本:Condensed Regular 12sp
最后奉上安卓電視產(chǎn)品的結(jié)構(gòu)圖:
本文由 @Vector 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自 Unsplash,基于 CC0 協(xié)議。
??
嗨
加個(gè)vx 多溝通一下唄
“純白(#FFFFF)在明亮的電視屏幕上可能非常刺耳?!?br /> 您是認(rèn)真的嗎?
??
筆誤
??