前言
前陣子剛結束一個從行動裝置到智慧電視的平台專案。在專案告一段落之時，想起關於UX設計師腦袋認知成本一文，心想也該替腦袋裡的專案經驗與知識做個整理了吧！於是想將這次專案碰到的眉角、讀的資料整理成文章，希望能給未來設計 TV app 的人帶來幫助。
📖目錄
1.智慧電視的操作
- 控制器的種類
- 有限的操控2.智慧電視的資訊架構
- 焦點(Focus）
- 導覽(Navigation)3.智慧電視的介面設計
- 尺寸
- 安全區域
- 掃描線
- 解析度
- 顏色
- 標註出圖4.各平台的 Design Guidelines
1. 智慧電視的操作
遙控器的種類
SmartTV 大致可以透過這幾種控制器進行操作：遊戲手把、遙控器
即使有些遙控器帶有一堆特殊功能按鈕，但請以所有遙控器共通的按鈕作為設計考量。而這些遙控器的共通按鍵有：方向鍵（D-Pad）、確定、返回、Home 鍵。
有限的操控模式
TV跟行動裝置在操作有個很大的差異，那就是行動裝置可以輕易的點擊螢幕任何地方，但在 SmartTV 上，我們只能透過遙控器間接來操縱螢幕上的選項，也因此使用者的操控卻是非常有限的。
如果你安排了太多層級和選項，使用者將會按著遙控器的上下左右鍵按到天荒地老。以輸入文字舉例，要輸入 TV這兩個文字，在手機上最快只要點兩下就可以完成。但想像一個在電視螢幕上的虛擬鍵盤，光是移動選項、從一個字母到另一個字母，以及每選一個字幕就要按下一次確定鍵。這一串行為下來，完成 TV這兩個字的輸入，你至少需要按⋯⋯9下！
於是，在設計智慧電視的應用程式時，畫面上的每一個按鈕、選單時，都得去思考一件事：到底「最遠」要按幾下才能抵達這個地方？
不少頁面也透過增加語音輸入按鈕，以彌補虛擬鍵盤輸入時的不方便。但語音輸入仍然無法減少輸入非單詞情況時（如輸入密碼、驗證碼等）造成的不便。
在決定要使用鍵盤時，不妨想想：現在要達成的目的一定要用鍵盤完成嗎？有沒有其他設計模式可以使用？或是該鍵盤設計是否能因應目前輸入的內容提供捷徑？例如：登入時提供已記憶的帳號讓使用者選擇、註冊時在鍵盤上提供 @gmail.com 之類的按鈕。
2. 智慧電視的資訊架構
焦點 (Focus)
智慧電視與行動裝置的關鍵差別是「焦點」這一項概念。行動裝置的畫面內都是可以觸及的，但 TV版我們只會停留在某一個選項上，並以該選項為中心進行移動，這便是焦點 (Focus)。
我們必須突出、強調這個焦點的存在，以防使用者迷失。畢竟你的使用者不一定會一直坐在電視螢幕前，設計師必須確保他再度專注到螢幕上時也知道自己身處何方。
導覽 (Navigation)
智慧電視的介面並不像手機版容易察覺頁面間的前後關係，一旦選單深入到第三層，就會容易使人迷失現在所在位置。於是，TV 版的選單盡量以淺而廣的設計為主，盡量透過滾動或者漸進式的展示訊息。
另外，透過水平移動的方式瀏覽內容，會比上下移動帶來更自然。
此外，在 TV 介面設計上請不要出現重疊的、懸浮的按鈕。基於 D-Pad 的特性，使用者只能透過上下左右移動，如果有重疊的物件，會使人難以理解該如何抵達該位置。
3.智慧電視的介面設計
我們先來看看 Apple TV、Android TV、Amazon TV的 Design Guidelines 裡提到的準則。
Apple TV
Connected, Clear, Immersive
Android TV
Involve easy setup
Do a few key things really well
Amazon TV
Clear, Simple, and Visual
他們指向了一個共同的觀點，那就是保持簡單、清晰。智慧電視的螢幕比行動裝置大的多，但這並不代表者我們可以在螢幕塞比行動裝置更多的資訊。
實際上，因為電視螢幕的距離、操作方式，我們反而更難處理螢幕上的資訊，所以智慧電視的設計必須更聚焦、更簡潔大方，幫助使用者完成最主要的任務，不去引起其他不必要的注意。
尺寸
我們會近距離凝視手機畫面，但卻不會在非常近的距離觀看電視螢幕。這使得我們要更加注意電視畫面的文字、元件大小，在一定距離下是否還能清晰。
智慧電視的介面設計有個設計準則，叫 10-foot user interface，你必須想像你在10英尺外注視著螢幕，電視上的字是否仍然清晰可讀。
解析度
電視螢幕有著不同的解析度。我目前的專案是先以目前最常見的HDTV 1080p（1920x1080）的解析度進行主要設計，但設計時同時也考量小螢幕（720p）以及4k螢幕看起來的效果。
安全區域
TV版的UI元件需放置在安全區域(Safe area)中，避免各家螢幕設定不一導致設計被裁切、隱藏。只是各家規範的安全區域稍有出入，一般建議預留離螢幕底邊5%左右的數值進行設計。
掃描線
什麼是掃描線？我們先來看看維基百科上的定義：
我們可以把電視上的畫面以水平方向分割成很多很多掃瞄線，分得越細，這些畫面就越清楚，而水平線數的掃瞄線數量也就越多。清晰度的單位是「電視行（TVLine）」也稱線。意思是從水平方向上看，相當於將每行掃瞄線豎立起來，然後乘上4：3或者16：9的寬高比，構成水平方向的總線數。維基百科：掃描線
電視的螢幕是由奇數掃描線與偶數掃描線不停交互渲染而成，所以圖稿設計要避免使用過細（小於1px）的邊框，避免造成視覺上的閃爍。同理，最好盡量將元件的長與寬保持偶數。
顏色
電視螢幕可能會比一般螢幕擁有更高的對比度、飽和度，因此：
- 明亮、鮮豔、飽和度高的顏色（如純紅色）不易呈現，請斟酌使用。
- 冷色會比暖色表現更佳。
- 使用深色可以打造更好的沈浸感，在光源不足的環境下，畫面也不會過度刺眼。
- 純白色(#FFFFFF）可能讓螢幕產生光暈，使用(#F1F1F1）代替純白色會達到更好的效果。
- 請謹慎使用漸層，因為漸層可能會導致螢幕出現斷階。
標註出圖
標註是在TV版我遇到的一個問題之一。目前業界常用的軟體，如 Zeplin，並沒有提供 Smart TV 的選項。當時我改用了sketch measure這個 sketch 的plugin 進行標註，他會將你所選取的頁面會出一整份可離線觀看的 html 檔案。
缺點是，每次更動都得出一份檔案然後再將檔案傳給別人，不像 zeplin 可以直接上傳到平台。如果有用工具進行版本管理，會減少許多麻煩。
4.Design Guidelines
閱讀官方文件是產品設計的基礎，本文不少知識亦從這些文件挖掘而來。遇到問題時不妨查查，說不定文件內已有解答。
- Apple TV Guidelines
- Design for Android TV
- Amazon TV Guidelines
如果對這篇文章有什麼想法歡迎留言給我！或是按下拍手👏給我鼓勵！謝謝 :)
