文章對(duì)比電視界面，從主屏幕和應(yīng)用程序兩個(gè)方面對(duì)Android TV的用戶界面設(shè)計(jì)進(jìn)行了詳細(xì)梳理，與大家分享。

與移動(dòng)端設(shè)備不同，用戶一般在3米外使用電視。因此電視界面設(shè)計(jì)上需要大而漂亮，要有合適的布局、高質(zhì)量的圖片，可辨別的文本、流暢的切換和簡(jiǎn)捷的操作。

01??主屏幕

主屏幕提供對(duì)內(nèi)容推薦、應(yīng)用程序和全局搜索的訪問(wèn)。

Android O TV 主屏幕

1. 全局搜索

Android電視提供強(qiáng)大的搜索功能來(lái)搜索所有已安裝應(yīng)用程序的內(nèi)容，此外用戶可以設(shè)置搜索應(yīng)用的范圍。語(yǔ)音搜索更便捷，因此它的入口特別明顯。

2. 內(nèi)容推薦行

內(nèi)容推薦是主屏幕上的非常顯眼的區(qū)域，用戶可以在其中找到新內(nèi)容，這是用戶無(wú)需啟動(dòng)應(yīng)用程序即可訪問(wèn)內(nèi)容的最簡(jiǎn)單方法。推薦的內(nèi)容一般是應(yīng)用提供的新內(nèi)容和用戶偏好容，如此便可吸引用戶注意。

做一個(gè)簡(jiǎn)單比喻，安卓電視就像一個(gè)超市，里面有很多商家（應(yīng)用），商家把自己最好的商品擺放在入口處吸引用戶購(gòu)買(mǎi)。

推薦內(nèi)容有3種類(lèi)型，新內(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)題多樣化，比如作者，推薦理由，類(lèi)型等。

當(dāng)焦點(diǎn)在推薦內(nèi)容時(shí)，會(huì)出現(xiàn)背景圖片，它應(yīng)該與推薦內(nèi)容相關(guān)，但是和推薦卡片上圖片不同。

背景圖片

3. Now Playing Card

對(duì)比國(guó)內(nèi)，NowPlaying Card就是歷史記錄。如果沒(méi)有播放記錄時(shí)是不展示這個(gè)的，用戶有播放行為后，系統(tǒng)自動(dòng)出現(xiàn)。用戶可以手動(dòng)移除播放記錄，如果全部移除播放記錄，該行就會(huì)消失。

Now Playing Card

02?應(yīng)用程序

Android電視應(yīng)用程序通常有以下4個(gè)部分：瀏覽頁(yè)、詳情頁(yè) 、播放頁(yè)、應(yīng)用內(nèi)搜索。

1. 瀏覽頁(yè)

瀏覽視圖是Android電視應(yīng)用程序的常用入口。為了獲得最佳的瀏覽體驗(yàn)，請(qǐng)根據(jù)用戶的使用目的來(lái)制定應(yīng)用程序的層次結(jié)構(gòu)。

欄目行

它是按分類(lèi)組織內(nèi)容。每個(gè)分類(lèi)里，內(nèi)容以水平列表的形式顯示。默認(rèn)情況下，向下移動(dòng)只能滾動(dòng)一行。

欄目行

豎列表

垂直列表中的項(xiàng)目對(duì)應(yīng)欄目行類(lèi)別名稱(chēng)。在豎列表中滾動(dòng)同時(shí)將相應(yīng)的行滾動(dòng)到視圖中。垂直列表中的項(xiàng)目?jī)H用于瀏覽，本身不可操作。

如果超過(guò)五行，建議使用豎列表。打開(kāi)豎列表，定位到第一個(gè)項(xiàng)目，若要退出豎列表，請(qǐng)選擇右側(cè)的某一行或使用導(dǎo)航退出。

豎列表

這個(gè)豎列表和國(guó)內(nèi)的側(cè)導(dǎo)航不一樣，豎列表的每一項(xiàng)只對(duì)應(yīng)一行，側(cè)導(dǎo)航對(duì)應(yīng)的整個(gè)頁(yè)面即二級(jí)頁(yè)，它其實(shí)是網(wǎng)格視圖。下面將說(shuō)一下網(wǎng)格視圖。

網(wǎng)格視圖

網(wǎng)格視圖顯示所有相關(guān)的內(nèi)容單元。它是最底層的視圖。國(guó)內(nèi)的專(zhuān)題、專(zhuān)區(qū)、二級(jí)頁(yè)對(duì)應(yīng)屬于網(wǎng)格視圖。

網(wǎng)格視圖

2. 詳情頁(yè)

詳情頁(yè)信息

詳細(xì)頁(yè)顯示單個(gè)內(nèi)容實(shí)體的信息和操作，可能包括播放狀態(tài)、內(nèi)容分級(jí)、出版年份和適合人群等。

詳情視圖里的信息按照相關(guān)程度由高到低的順序排列。例如，電影詳情頁(yè)視圖應(yīng)優(yōu)先考慮與該電影最相關(guān)的視覺(jué)和文本，包括海報(bào)、收視率和”購(gòu)買(mǎi)”或”查看預(yù)告片”等動(dòng)作。擴(kuò)展信息則通過(guò)向下垂直滾動(dòng)顯示，可以包括演員信息、評(píng)論和相關(guān)的觀看建議。

詳情頁(yè)里的動(dòng)作

只列出最重要的功能，比如購(gòu)買(mǎi)、租賃、播放和添加到愿望清單等操作。

建議使用大尺寸沉浸式高質(zhì)量海報(bào)圖像。

3. 播放頁(yè)

播放頁(yè)

播放頁(yè)是用戶觀看內(nèi)容的地方，用戶將在這里花費(fèi)大部分時(shí)間。如何進(jìn)入播放頁(yè)，有3種方式：推薦行、全局搜索、應(yīng)用內(nèi)搜索。

播放控制包括主控區(qū)和輔助控區(qū)，主控區(qū)最多有7個(gè)動(dòng)作，動(dòng)作由傳統(tǒng)可識(shí)別的圖標(biāo)表示，輔助控區(qū)在主控區(qū)下面，非必要功能比如字幕，縱橫比等，建議最多放5個(gè)功能。

播放控制區(qū)

播放頁(yè)的拓展信息

在播放過(guò)程中，可以向用戶展示拓展信息，比如音視頻的相關(guān)演員或相關(guān)類(lèi)型作品等。

播放拓展信息

在播放結(jié)束后，可向用戶提供繼續(xù)播放下一集或進(jìn)入類(lèi)似影片播放或?qū)τ捌M(jìn)行評(píng)價(jià)等后續(xù)操作，國(guó)內(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. 對(duì)話框

在Android電視上，對(duì)話框可以覆蓋整個(gè)屏幕。盡量少使用對(duì)話框，因?yàn)樗鼈儠?huì)打斷用戶的突然出現(xiàn)，迫使用戶停止當(dāng)前任務(wù)并關(guān)注對(duì)話框內(nèi)容。對(duì)話框的樣式如下圖

對(duì)話框

5. 向?qū)?/h3>

比較常見(jiàn)的向?qū)в行率忠龑?dǎo)和購(gòu)買(mǎi)引導(dǎo)。

新手引導(dǎo)

購(gòu)買(mǎi)引導(dǎo)

6. 通知

所有類(lèi)型的應(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)載。

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議。