文章對比電視界面，從主屏幕和應用程序兩個方面對Android TV的用戶界面設計進行了詳細梳理，與大家分享。

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

01??主屏幕

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

Android O TV 主屏幕

1. 全局搜索

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

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

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

做一個簡單比喻，安卓電視就像一個超市，里面有很多商家（應用），商家把自己最好的商品擺放在入口處吸引用戶購買。

推薦內(nèi)容有3種類型，新內(nèi)容，繼續(xù)播放和相關推薦。

新內(nèi)容

繼續(xù)播放

相關推薦

推薦內(nèi)容包括圖片、標題、副標題和應用圖標。標題和圖片高度相關，一般是音視頻的名字，副標題多樣化，比如作者，推薦理由，類型等。

當焦點在推薦內(nèi)容時，會出現(xiàn)背景圖片，它應該與推薦內(nèi)容相關，但是和推薦卡片上圖片不同。

背景圖片

3. Now Playing Card

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

Now Playing Card

02?應用程序

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

1. 瀏覽頁

瀏覽視圖是Android電視應用程序的常用入口。為了獲得最佳的瀏覽體驗，請根據(jù)用戶的使用目的來制定應用程序的層次結構。

欄目行

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

欄目行

豎列表

垂直列表中的項目對應欄目行類別名稱。在豎列表中滾動同時將相應的行滾動到視圖中。垂直列表中的項目僅用于瀏覽，本身不可操作。

如果超過五行，建議使用豎列表。打開豎列表，定位到第一個項目，若要退出豎列表，請選擇右側的某一行或使用導航退出。

豎列表

這個豎列表和國內(nèi)的側導航不一樣，豎列表的每一項只對應一行，側導航對應的整個頁面即二級頁，它其實是網(wǎng)格視圖。下面將說一下網(wǎng)格視圖。

網(wǎng)格視圖

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

網(wǎng)格視圖

2. 詳情頁

詳情頁信息

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

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

詳情頁里的動作

只列出最重要的功能，比如購買、租賃、播放和添加到愿望清單等操作。

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

3. 播放頁

播放頁

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

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

播放控制區(qū)

播放頁的拓展信息

在播放過程中，可以向用戶展示拓展信息，比如音視頻的相關演員或相關類型作品等。

播放拓展信息

在播放結束后，可向用戶提供繼續(xù)播放下一集或進入類似影片播放或對影片進行評價等后續(xù)操作，國內(nèi)一般叫為后聯(lián)播。

后聯(lián)播

當用戶因為各種原因暫停播放后，要讓用戶很容易的繼續(xù)播放。一般有2種做法，在應用內(nèi)將暫停播放的內(nèi)容置頂或者自動添加到Now Playing Card。

4. 對話框

在Android電視上，對話框可以覆蓋整個屏幕。盡量少使用對話框，因為它們會打斷用戶的突然出現(xiàn)，迫使用戶停止當前任務并關注對話框內(nèi)容。對話框的樣式如下圖

對話框

5. 向導

比較常見的向導有新手引導和購買引導。

新手引導

購買引導

6. 通知

所有類型的應用通知在電視上都是不收歡迎的。系統(tǒng)通知會在不打擾用戶的情況下顯示重要信息。

7. 顏色

純白（#FFFFF）在明亮的電視屏幕上可能非常刺眼。在深色背景下，建議使用淺灰色（#eeeee）作為默認文本顏色。不能用太淺的顏色用作強調(diào)的背景色，要用較深的顏色。

8. 字體

以下字體樣式和大小通常用于電視用戶界面。

• 內(nèi)容標題 Light 34sp 、Light 24sp
• 豎列表標題：Condensed 20sp
• 副標題：Regular 16sp
• 按鈕標：Condensed 16sp
• 正文：Regular 14sp
• 列表項/卡片主文本：Condensed Regular 14sp
• 次要文本：Condensed Regular 12sp

最后奉上安卓電視產(chǎn)品的結構圖：

本文由 @Vector 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉載。

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