TV 端 APP 界面設計：原則、模式與實用指南（上）

UX · 設計 · 電視 · 靈感 電視界面設計是個獨特、有趣卻常被忽視的領域。幾十年來，它在演進與創新中不斷髮展，卻始終受限於自身的傳統遺產。讓我們跟隨米蘭（Milan）的視角，探索那些決定電視操控邏輯的歷史、獨特屬性與不可撼動的規則。

電視已佔據我們的客廳數十年。我們觀看、交互、操控它，卻很少有人專門為它做設計。此前，電視設計也一直不在我的關注範圍內，直到某天我深入其中，開始設計電視專屬的用户界面。如今，積累了不少相關經驗後，我想和大家分享這個相對冷門領域的知識。如果你對電視的用户體驗（UX）與用户界面（UI）感興趣，這篇文章會是個不錯的起點。

和其他設備或使用場景一樣，電視也有其獨特屬性、細節要點與指導原則。在深入實踐前，先理解核心邏輯會大有裨益。本文（上篇）將從歷史講起，詳解電視設計的基礎原理，並回顧電視的演進歷程；下篇則會聚焦電視設計的實踐層面，包括核心原則與常用模式。

首先，我們先來了解主導電視界面設計的兩大核心範式。

一、關注"距離差"：10 英尺體驗

第一個核心範式是所謂的"10 英尺體驗"（10-foot experience）------指用户與電視的交互和內容消費，通常發生在約 3 米及以上的距離。這與手機、電腦的近距交互截然不同，也決定了電視界面設計需要特殊思路。

比如，為了抵消遠距離帶來的視覺衰減，電視上的文字和 UI 元素必須設計得更大；其次，我們要格外注重對比度標準，且大多采用深色界面------因為淺色界面在昏暗環境（如夜晚的客廳）中會過於刺眼；最後，考慮到電視"休閒放鬆"的使用場景，交互邏輯也需要儘量簡化。

與手機、電腦不同，電視的使用距離更遠，這種交互範式被稱為"10 英尺體驗"。

但"10 英尺體驗"只是等式的一半。如果沒有"用户與設備之間的中介"，沒有能實現遠距離交互的工具，"10 英尺體驗"根本無從談起。

而這個中介，就是遙控器。

二、交互中介：遙控器的進化與不變核心

遙控器作為等式的另一半，讓用户能舒服地窩在沙發裏操控電視。它的操作速度較慢、需要刻意精準，但別小看這個滿是按鈕的設備------它雖沒有鼠標的流暢移動，也沒有觸屏的靈活觸控，卻承載着現代電視日益複雜的交互需求。

七十年來，遙控器經歷了多次革新：外形更符合人體工學，功能不斷優化，但有一個延續了 40 年的模式，早已深植其核心，從未被改變。

你可能想不到：用 1980 年代的基礎遙控器，和用最新的蘋果電視遙控器，操控電視界面與應用的體驗竟然相差不大。更關鍵的是：只要基於遙控器的 6 個核心按鈕設計，體驗就能跨系統兼容，輕鬆適配不同平台。

這正是本文接下來要重點探討的核心------電視交互的"常青模式"。

三、模式的誕生：從"手動調節"到"按鈕革命"

1950 年代，電視逐漸走進千家萬户，廠商開始思考如何優化用户體驗。當時，用户需要起身走到電視前手動調節設置，這一痛點被率先盯上------於是，第一代電視遙控器應運而生。

1. 早期探索：獨特卻零散的設計

早期遙控器的設計五花八門，直到後來才逐漸統一為"長方形機身+表面按鈕"的形態。

以 Zenith Flash-Matic（增你智閃光遙控器） 為例，這款 1950 年代中期的產品堪稱"異類"：它只有一個按鈕，通過觸發定向光束，用户將光束對準電視屏幕的特定角落，就能實現換台、調音量等功能。

Zenith Flash-Matic 遙控器，現代電視遙控器的早期雛形之一。

雖然與現代遙控器相去甚遠，但 Flash-Matic 這類設備為後續發展奠定了基礎，開啓了電視交互的革新之路。

隨着設計演進，遙控器的核心功能逐漸固化：它不再只是簡單的"換台器"，而是慢慢變成了家庭娛樂領域的"控制中心"。

注：本文不會深入探討完整歷史，僅聚焦與核心主題相關的關鍵節點。如果有時間，你可以自行了解電視與遙控器的發展歷程------這是個非常有趣的話題。

經過 20 年迭代，Zenith Space Command（增你智太空指令遙控器） 的外形已與現代遙控器十分接近，機身更緊湊，按鈕佈局也更合理。

經過 20 年迭代，Zenith Space Command 遙控器的外形已與現代遙控器高度相似。

不過，早期遙控器仍是"奢侈品"------配備遙控器的電視價格顯著更高。到 1970 年代末，美國僅有約 17%的家庭擁有電視遙控器。但進入 1980 年代後，情況發生了鉅變。

2. 1980 年代：按鈕氾濫與"反套路"創新

1980 年代是個充滿變革的年代：蘋果 Macintosh 電腦、MTV 音樂頻道、《星球大戰》系列電影相繼出現，文化與科技都在快速迭代。錄像機（VCR）等消費電子產品開始與電視一同進入家庭客廳。

這些新設備雖豐富了媒體體驗，卻帶來了新的設計難題：原本只需一個遙控器，現在卻要面對多個設備的多個遙控器，管理成本陡增。

於是，萬能遙控器（universal remotes）應運而生。

索尼萬能遙控器，可編程控制最多 3 台不同設備。

為了"一物控多設備"，萬能遙控器成了當時的最優解------但代價是"笨拙"。它雖解決了多設備操控問題，卻用"複雜"換"兼容"：原本簡潔的遙控器變成了"按鈕蜂窩"，設計上優先保證兼容性，而非優雅易用。

不過，幾乎是作為對"萬能遙控器不便"的迴應，1980 年代還誕生了另一種完全不同的控制器：它佈局極簡、按鈕數量少，卻深刻影響了電視的交互方式與遙控器設計------這就是 NES 控制器（任天堂娛樂系統控制器），它無意間催生了至今未被打破的導航模式。

3. D-pad 的統治：從遊戲到電視的交互革命

1985 年推出的任天堂娛樂系統（NES）一經上市便大獲成功，全球銷量達 6000 萬台，在遊戲主機領域留下了不可磨滅的印記。

NES 控制器，以標誌性的 D-pad 和兩個動作鍵聞名。

NES 控制器（嚴格來説它不是"遙控器"，因為需要用線纜連接主機）帶來了一套看似簡單卻極具巧思的操控方案：它包含 6 個核心操作單元------十字方向鍵（D-pad）和兩個動作鍵（A、B）。

當時，傳統操縱桿體積大、操作笨重，NES 的十字形按鍵組恰好解決了這一問題，能輕鬆實現上下左右兩個軸的精準移動。

這套導航模式不僅帶來了無數小時的遊戲樂趣，更重要的是，它的極簡設計逐漸滲透到整個行業------D-pad 與兩個動作鍵，成了後續電視遙控器設計的基石。

時代繼續發展，曾經的"奢侈品"遙控器逐漸普及。到 1980 年代末，遙控器已成為電視體驗的核心組成部分，超過三分之二的美國家庭擁有電視遙控器。

進入 1990 年代，技術進一步升級：電視功能更強大，可調節的設置更精細，這就需要專門的界面來實現這些操作，遙控器也隨之更新。

1980 年代那種"大塊頭長方形遙控器"逐漸被淘汰，取而代之的是符合人體工學的弧形機身------更貼合手掌，握持更舒適。曾經密密麻麻、大小統一的按鈕，變成了"不同形狀、不同尺寸"的設計，用户僅憑觸摸就能識別；按鈕按功能聚類排列在機身各處，而在這些按鈕組中，一個熟悉的形狀開始浮現------D-pad。

1990 年代的遙控器，已出現類似 D-pad 的標誌性按鈕組。

漸漸地，D-pad 在電視遙控器上找到了固定位置。隨着設備演進，它在交互核心中的地位愈發穩固。

2000 年代的遙控器，D-pad 按鈕組已清晰可見。

2000 至 2010 年代，機頂盒與智能功能興起，電視技術持續進步，各種新功能層出不窮：屏幕更大、亮度更高、機身更薄......但電視的核心交互邏輯始終未變。

幾十年來，遙控器雖不斷創新，但所有改進都圍繞 NES 控制器的核心原則展開。後續的嘗試從未取代這套模式，只是在其基礎上做增強與補充。

四、常青模式：40 年未變的交互核心

2013 年，LG 推出了魔法遙控器（Magic Remote），宣傳語稱"簡單到連孩子都能教你用"。這款造型獨特的設備支持運動控制，用户可像用電腦鼠標一樣"指向點擊"。屏幕上的指針讓操作更靈活、響應更快，它也因此被評為"最佳智能電視遙控器"之一，廣受好評。

LG 魔法遙控器：雖引入創新交互方式，卻仍將 D-pad 作為核心元素。

這款設備在傳統基礎上創新，為電視交互帶來了新功能與新視角。但仔細觀察會發現：儘管設計不同，它仍保留了 D-pad 作為核心交互方式。或許 LG 從未想過取代方向鍵，而無論初衷如何，最終也只是在其基礎上做了增強。

更典型的例子是第二代 Apple TV 遙控器（第一代 Siri 遙控器）。作為行業顛覆者，蘋果在遙控器上半部分加入了觸控板------玻璃表面帶來了更敏捷、精準的體驗，支持多點觸控手勢、滑動導航與快速滾動。最明顯的優化是在橫向屏幕鍵盤輸入時：用户可更順滑地從 A 滑到 Z，大幅提升了輸入效率。

第二代 Apple TV 遙控器（第一代 Siri 遙控器）：移除了傳統 D-pad，用觸控板增強交互。

乍看之下，蘋果似乎去掉了方向鍵，但實際上，觸控板只是這套模式的"現代化改造"------它仍遵循傳統 D-pad 的四向移動邏輯，相當於給 D-pad 加了一層"花樣功能"。

然而，觸控板的用户反饋並不好，再加上遙控器的人體工學設計存在瑕疵，蘋果在第三代遙控器上徹底"掉頭"：重新引入了經典的 D-pad 按鈕組，同時保留了上一代的觸控功能（支持觸控的點擊板可用於選擇內容、滑動播放列表，還能通過外環的圓形手勢精準定位視頻片段）。

第三代 Apple TV 遙控器（第二代 Siri 遙控器）：保留上一代觸控功能，同時重新引入 D-pad。

看到這裏你可能會問：為什麼我們始終找不到更好的電視導航方式？難道不該繼續創新嗎？

從原理上來説，運動控制和手勢交互確實是電視交互的"明顯升級方向"，但現實是：這些功能不僅實現更復雜、成本更高，更關鍵的是------電視本質上是一個"傳統系統"（legacy system），其核心交互邏輯早已固化。

更重要的是：觸控雖已是當下主流交互方式，但如果未經深思熟慮就強加給遙控器，反而會降低易用性。

五、觸控控制的陷阱：別為"現代"犧牲實用性

如今，汽車儀表盤越來越多地被觸控屏佔據。它們在車展上或許亮眼，但實際使用中的便利性卻常打折扣。

駕駛需要持續專注，隨時應對路況變化------任何需要"視線離開路面超過一秒"的界面，都會增加事故風險。而觸控控制恰好在此處"掉鏈子"：對廠商來説，觸控屏可能更實用（甚至更便宜），但對用户而言，體驗往往更差。

與物理按鈕、旋鈕、撥杆不同，觸控界面沒有"觸覺標記"和"反饋感"，無法僅憑觸摸操作。即便是調節收音機音量、空調温度這樣的簡單操作，也需要在光滑的玻璃表面上做手勢、翻層級菜單------這必然要求用户盯着屏幕，尤其在需要精細調節時，分心風險更高。

幸運的是，2026 年即將實施的歐洲新車評估計劃（Euro NCAP）法規，將鼓勵車企為核心功能重新引入物理控制，以減少駕駛員分心，提升交互安全性。

電視遙控器的情況雖沒有汽車那麼關鍵，卻也有相似之處：設計簡潔、無實體按鈕的"現代遙控器"或許看着高級，卻給熟悉的操控邏輯加了不必要的"抽象層"。

具有獨特形狀和位置的物理按鈕，能讓用户僅憑記憶和觸摸操作------哪怕在黑暗中也能精準按到想要的鍵。這不是"過時"，而是更深層次的易用性，現代設計理應尊重，而非拋棄。

這也正是蘋果第三代 Apple TV 遙控器"改回 D-pad"的核心原因：上一代的頂部觸控區被取消，取而代之的是輪廓清晰的 D-pad 按鈕；同時，D-pad 還保留了觸控功能（而非被取代），兼顧了傳統習慣與現代需求。

六、電視的"遺產"：40 年不變的核心交互

我們先來看看早期的屏幕鍵盤。

1986 年《塞爾達傳説》的名字註冊界面與早期屏幕鍵盤。

1986 年推出的《塞爾達傳説》允許玩家在遊戲內註冊名字（更早的遊戲也有類似功能，但此處不展開）。玩家用 NES 控制器在鍵盤上移動，逐個字符輸入名字。現在，我們再看看現代的屏幕鍵盤。

![Android TV 的 Google GBoard：現代屏幕鍵盤，佈局更規整，標註"Welcome jtafeeoar"]（https://示例圖鏈接，原文標註：Image by Siddhartha Gudipati） Android TV 的 Google GBoard，現代屏幕鍵盤的代表。

你發現區別了嗎？或者説，你發現相似之處了嗎？幾十年來，我們雖做了不少"體驗優化"，但核心交互邏輯與 40 年前完全一致。

這並非因為缺乏創新，也不是遙控器設計太差------而是在當前條件下，這是"最優交互方式"。

七、電視佈局的底層邏輯：焦點與網格

和手機、電腦一樣，電視界面也基於網格系統，但電視的網格更直觀、更基礎。觀察標準電視界面會發現：它主要由橫向和縱向列表構成，也就是我們常説的"陳列欄"（shelves）。

YouTube TV 應用界面，典型的電視網格佈局。

這些網格中可能排列着卡片、字母或其他元素，但仔細觀察會發現，用户的移動受到三個關鍵限制：

1. 沒有電腦那樣的"鼠標指針"可供視線跟隨；
2. 無法像觸屏那樣"直接觸摸屏幕交互"；
3. 為了適配遙控器導航，界面必須引入"焦點狀態"（focus state）------始終有一個元素被高亮，作為用户視線的"錨點"，也是後續所有交互的起點。

簡化電視 UI：展示焦點狀態在縱向列表中的逐個移動。

此外，從焦點元素開始，用户的移動只能"逐個元素進行"，就像"打水漂"一樣。比如，要在列表中從第 1 個元素移動到第 5 個，需要按 4 次方向鍵。

簡化電視 UI：展示焦點狀態在橫向列表中的逐個移動。

要順暢導航這樣的界面，用户必須能實現"上下左右"四個方向的移動------這就需要 D-pad；找到目標元素後，需要有"確認選擇"的方式，出錯時也需要"返回"的功能------這就需要另外兩個鍵：OK 鍵和返回鍵，或者更抽象的 A 鍵和 B 鍵。

所以，要完整操控電視界面，我們只需要一個 NES 控制器就夠了。

當然，我們可以用觸控板、運動手勢做增強，用語音控制做補充，但這套交互的核心基礎，始終是電視界面"固有複雜度的最低閾值"。任何進一步的簡化，都會嚴重損害體驗------幾十年來，我們能做的，只是在這個基礎上不斷疊加功能。

D-pad 與 A、B 鍵，歷經數十年創新與技術變革，至今仍未被取代，未來也很可能繼續存在。理解並尊重這一原則，你就能設計出"跨系統兼容"的直觀體驗；知道這 6 個鍵是"最簡交互單元"，你就能輕鬆從基礎搭建起界面，並將任何平台相關的額外功能，附着在這套經過時間檢驗的核心之上。

當你掌握了這些範式，就能根據場景映射、重映射按鈕，探索電視設計的更多可能性------你可以創造新體驗、做實驗、挑戰現有模式。不過，這就是另一篇文章的主題了。

結語

過去幾年，我幾乎全身心投入電視設計工作，也常向項目相關方講解本文提到的這些原則。面對他們"不同遙控器操作差異"的擔憂，我發現用"NES 控制器的簡潔性"來類比，能讓大家輕鬆理解。後來，我深入研究了遙控器的發展歷史，驚訝地發現我的類比竟有歷史依據。

電視界面設計是個迷人的小眾領域，還有很多內容可以分享。很高興能以此為起點，與大家探討。

無論做什麼領域的設計，在實踐前理解其核心邏輯都至關重要，電視設計也不例外。現在，你已經掌握了基礎，接下來就可以深入探索、大膽嘗試了。

本文詳細講解了電視體驗的底層交互模式，接下來該進入實踐環節了。

下篇中，我們將探索"10 英尺體驗"的構建模塊，以及如何在設計中充分利用它們；還會回顧電視設計的基礎要素（屏幕、佈局、排版、色彩、焦點與焦點樣式）和常見 UI 組件（菜單、陳列欄、焦點高亮、搜索等）；同時，我也會分享如何突破基礎認知，在電視設計的約束下（或圍繞這些約束）開展工作。敬請期待！

翻譯及編譯引用註明

1. 原文基礎信息

   1. 原文標題：Designing For TV: The Evergreen Pattern That Shapes TV Experiences （Part 1）
   2. 發佈平台：Smashing Magazine（國際 Web 設計與開發領域權威媒體）
   3. 原文鏈接：https://www.smashingmagazine.com/2025/08/designing-tv-evergre...
   4. 核心貢獻者：Milan（原文作者，電視界面設計領域資深從業者），Smashing Magazine 編輯團隊整合發佈。