APPLE TV 介面設計原則:連結,清晰,以及融入

Chris Chen
6 min readFeb 26, 2016

--

Image Source: https://developer.apple.com/tvos/human-interface-guidelines/images/overview-home-screen.png

前幾天,Apple 公開了 Apple TV Tech Talks 的影片。剛好小弟專案關係,需要開始研究 Apple TV 的設計規範,在此分享一些心得給大家。

這次的 Apple TV 介面設計,主要有三個設計原則,連結,清晰,以及融入 (Connected, Clear and Immersive)。

連結

透過 Apple TV 遙控器上方的觸控面板 (Touch Surface) ,使用者可以進行Swipe (滑動),Tap (觸碰),以及 Click (點擊)來與電視上的物件互動。

當物件 (例如 APP Icon ) 被選擇時,可以輕微的在觸控面板上滑動,該物件會隨著滑動方向進行旋轉,彷彿好像真的觸摸著螢幕上的物件,而這樣的互動,讓使用者與物件之間產生情感上的連結。

Image source: http://assets.materialup.com/uploads/c06e32f5-44e8-4d19-a782-7ac471562282/medium_new_appletv_optimized.gif

如果沒有 Apple TV 的朋友,可以透過 Robert van Klinken 使用 Framer 所製作的原型,實際體驗看看:Apple TV Icon

清晰

在這麼大的畫面上,要讓使用者隨時保持清晰他的所在位置,不是一件簡單的事。為了解決此問題,Apple TV 設計了ㄧ套 Focus Model 的系統。 只要是被使用者所選擇的物件,都必須給它明顯的視覺變化,使得專注物件在視覺上一目了然。

因為 Focus Model 的設計關係,所有的按鈕多了一個 Focused 狀態,也就是類似被選取中的一種狀態。由上面提到一樣,這個狀態是利用加深陰影以及按鈕變大來辨別,而不是使用顏色或是邊匡線來強調,藉此維持版面的乾淨。

Screenshot form: https://developer.apple.com/videos/play/techtalks-apple-tv/2/

融入

當使用者開啟電視時,期待是即時娛樂,即時內容,所以設計師應該盡量減少在畫面上的 UI 元件,讓內容突出。假使你是在設計一個新的電視頻道 APP,盡可能使用大版面的圖片,減少文字的描述,像是影片海報等等。

瞭解上面的 Apple TV的設計原則後,接下來,我們需要能夠分辨設計 Apple TV 與 iPhone 上一些差異要點。

建議使用點擊(Click) 多過於觸碰(Tap)

Apple 提醒各位設計師,要記得使用者在拿遙控器時,與手機是不太一樣,特別是拇指的位置。使用者習慣性的會把拇指依靠在觸控面板上,會造成誤觸的機率變高,如果是很重要的操作,盡量使用點擊 (就是把觸控面板往下壓會有物理回饋)。

Screenshot form: https://developer.apple.com/videos/play/techtalks-apple-tv/2/

不同介面下進行滑動(Swipe),物件互動方式會改變

在前面了解 Focus Model 的運作後,你會發現在 Apple TV 進行 Swipe 時,物件移動的方式,會與 iPhone 有些微的不同。我們在觸控面板上左右滑動時,畫面上被選取的物件,會依據我們所滑動的方向進行切換,例如,往左滑動,左邊的物件會切換成 Focused,這樣的互動看起來就是移動我們的專注點。然而,當我們在導覽滿版圖片時,往左滑動,則是切向右邊的照片,這感覺像是把圖片往左移開,而這個行為就與 iPhone 上一模一樣。

各位有機會可以下載 Airbnb 的 Apple TV APP,當他在選擇旅遊地點時就是切換物件之間的 Focused 狀態,選擇好後,點擊進入滿版的導覽租屋資訊,這時就會回到 iPhone 般的移開圖片操作。

橫向滑動

很多時候,我們會有很多的物件要顯示在畫面上,列表難免會過長超出螢幕 ,如果是在手機上,大多數都會設計,讓使用者上下滑動去導覽這些物件。但是,這樣的操作在 TV 上並不適合,建議大家盡可能考慮使用橫軸移動,減少垂直移動,因為 TV 不像手機一般,可以隨時切換回到主選單,也就是說當你滑到最下方時,你要用同樣的時間回到最上方。

最好的案例就是 Apple TV 上的 Music,如果有訂閱 Apple Music 朋友,你可以比較 為您推薦 以及 最新精選 這兩個項目的操作,前者就是垂直移動,後者則是橫向移動。

減少輸入文字的頻率

目前在 Apple TV 上的文字輸入不是很理想,千萬不要讓使用者在電視上進行攏長的文字輸入,例如,註冊流程。有非常高的機率使用者會跳出你服務。 目前大多數服務的解決方式,都是把這些手續轉跳到手機或是 PC 上。

非常感謝大家的閱讀,未來有更多心得會再分享給大家 :)

資料來源:

APPLE TV Tech Talks Designing for Apple TV: https://developer.apple.com/videos/play/techtalks-apple-tv/2/

Designing Zumper for tvOS: https://medium.com/@rawrjustin/designing-zumper-for-tvos-8488b7335126#.hmyumw95i

--

--