摘要：Android電視提供強大的搜索功能來搜索所有已安裝應用程序的內容，此外用戶可以設置搜索應用的範圍。Android電視應用程序通常有以下4個部分：瀏覽頁、詳情頁 、播放頁、應用內搜索。

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

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

01  主屏幕

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

Android O TV 主屏幕

1. 全局搜索

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

2. 內容推薦行

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

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

推薦內容有3種類型，新內容，繼續播放和相關推薦。

新內容

繼續播放

相關推薦

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

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

背景圖片

3. Now Playing Card

對比國內，NowPlaying Card就是歷史記錄。如果沒有播放記錄時是不展示這個的，用戶有播放行爲後，系統自動出現。用戶可以手動移除播放記錄，如果全部移除播放記錄，該行就會消失。

Now Playing Card

02 應用程序

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

1. 瀏覽頁

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

欄目行

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

欄目行

豎列表

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

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

豎列表

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

網格視圖

網格視圖顯示所有相關的內容單元。它是最底層的視圖。國內的專題、專區、二級頁對應屬於網格視圖。

網格視圖

2. 詳情頁

詳情頁信息

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

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

詳情頁裏的動作

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

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

3. 播放頁

播放頁

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

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

播放控制區

播放頁的拓展信息

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

播放拓展信息

在播放結束後，可向用戶提供繼續播放下一集或進入類似影片播放或對影片進行評價等後續操作，國內一般叫爲後聯播。

後聯播

當用戶因爲各種原因暫停播放後，要讓用戶很容易的繼續播放。一般有2種做法，在應用內將暫停播放的內容置頂或者自動添加到Now Playing Card。

4. 對話框

在Android電視上，對話框可以覆蓋整個屏幕。儘量少使用對話框，因爲它們會打斷用戶的突然出現，迫使用戶停止當前任務並關注對話框內容。對話框的樣式如下圖

對話框

5. 嚮導

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

新手引導

購買引導

6. 通知

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

7. 顏色

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

8. 字體

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

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

最後奉上安卓電視產品的結構圖：

本文由 @Vector 原創發佈於人人都是產品經理。未經許可，禁止轉載。

題圖來自 Unsplash，基於 CC0 協議。

相關文章