重新學習!為Apple TV進行UI設計需要了解哪些基本規則?

發表於2016-03-04

仔細想想,你會發現我們正處於大屏UI設計的一個有趣的階段。2015年推出的Apple TV 已經是第四代產品了,但是其他的同型別產品尚且處於第一代或者說早期階段。釋出會上吹出的牛逼最終還是要經過市場驗證,而實際狀況比起大家預期的結果,更加複雜。到底要如何給Apple TV設計APP呢?今天的文章,我將為大家分享一下我們為丹麥最大的內容供應商設計APP的經驗和相關的資源,也許能幫大家一窺究竟。

基本情況

諸如Netflix、Youtube、HBO、Hulu和Plex 等主要的媒體平臺,在tvOS 的App Store 中都只有1.0的版本。它們絕大多數都同FireTV、SmartTV等電視中所提供的解決方案非常類似,這些客戶端看起來像是老版本的客戶端和新系統規範的揉合體。在很大程度上,我們正處於初級階段,現在沒人確知在tvOS上應當如何設計APP。決策者們正在力圖保持他們各自平臺的特性的同時,兼顧tvOS上的設計規則。

相比之下,內容創作者是更大的群體,他們現在並不知道是否要參與到平臺的設計中來,但是如何決定參與的話,他們需要知道怎麼去做。他們對於已經固化的平臺並沒有決策權,同時他們會將新平臺視作為嘗試新手法和新思路的重要渠道,一個新的試驗田。如果你打算在Apple TV的基礎上搭建新的東西,尋求新的方案,那麼你有必要讀下去。

輕鬆入門

1-jHRMdU6Fx1FB0NQJmZl2_g

相比於在其他的裝置開發其他平臺的系統而言,在Apple TV上進行設計和開發是一件簡單的事情。因為只有一個解析度,單一裝置。你所需要設計的介面解析度統一為1920×1080,並且只需要為唯一的終端除錯程式。對於今天的設計師和開發者而言,這無疑是一件奢侈的事情。如果你是設計師,開啟Photoshop新建一個標準1080P的畫布就是你需要做的全部,沒有視網膜,不需要考慮其他的比例。一個23英寸的外接顯示器可以顯示你所設計的全部內容。

焦點引擎

如果你想在 Apple TV 上創造優秀的使用者體驗的話,你手下你需要適應焦點引擎這個新概念,並且明白為什麼會“始終保持聚焦”。不同於在iOS和桌面端上常見的點選、觸控的操作方式,Apple TV上你需要通過滑動不同的內容區塊,並且始終有區塊是被選中的。所以你並不能直接控制整個介面或者直接選取你想要的,而是需要通過先選定某個特定的預設定區塊,然後進行更細緻的操作。下面的許多設計和概念都是基於這一基本設定來進行推斷和發展的。

露出屏外內容

1-xImKMHHH7Da6zEXyfXsqiA

你需要螢幕外內容的10%~20%的部分,讓使用者明白還有更多的內容可供瀏覽。

水平導航更輕鬆

1-CU7fjDl6oe60mMKx1jiRRg

在Apple TV上,水平滾動給人的感覺比垂直導航更加輕鬆順暢,從硬體和實際手勢操作上,水平操作都有著先天的便捷性和和諧性,在遙控器上進行水平掃動比上下滑動要方便得多。而螢幕上介面的變動無疑需要同遙控器上的手勢對應起來,所以使用水平導航是更直覺有效的設計。

將按鈕和內容清晰地區分開

1-_NUZZ2Rv-ekXJ-RW3Wd0Iw

將內容和可導航可互動的操作控制元件區分開來是使用者同介面溝通的重要基礎,想必你也不喜歡使用者“驚喜地發現”某個元素居然是可互動的控制元件。

謹慎安放控制元件

1-f7Ygu9EFfX1Xj4_IPTV3sg

只有當內容可控制元件都被正確安置,使用者才會感到舒適。比如很長的一個文欄位落,而文欄位落使用者又不能直接選取,可互動的按鈕又在段落底部,這樣的設計就是相當失敗的。從某種程度上而言,tvOS中,使用者就像樹林中的人猿泰山,需要從一棵樹上跳到另外一棵樹上前進,但是跳到下一棵樹的前提是他必須看到下一棵樹。所以,使用者可操作的按鈕,不要隱藏在使用者開始就不可見的段落底部,這樣太容易讓人感到迷惑了。

保持明顯

1-_NUZZ2Rv-ekXJ-RW3Wd0Iw

確保那些被聚焦的區塊看起來真的像是被放到聚光燈下一樣。那些微妙的設計在此處並不適用,你應當讓被聚焦的地方看起來閃亮、變大、誇張,這個時候不應該讓這些內容“保持沉默”。

為遠距離瀏覽而設計

1-3X02vi06nNztO8Y3S1v6yg

和我們日常熟悉的手機、電腦的使用場景不一樣,電視的螢幕並不在我們觸手可及的地方,通常它都是遠在幾米之外。物理層面上的遠離只是一方面,它同時意味著我們無法觸控,不再具備掌控感。所以,請確保電視中的內容和控制元件是可以在整個空間內,都可以被清晰閱讀和操作的。這基本上就意味著,字型要更大,更容易操控,這樣意味著佈局要更加規整,動效更加明顯清晰,並且更具有引導性。

減少文字輸入

在電視上進行文字輸入無疑是低效的,使用者操作也極其費勁。最好是考慮到使用其他的硬體裝置來進行登入、輸入等複雜的輸入操作。

讓應用更生動

下面的圖片中所展示的是標準的Apple TV中的UI元素,並且此刻整套UI介面還在不斷被完善。不過,我更想在這個基礎上加入更多的個人風格。並不需要複雜的設計,想要讓應用更加生動,小動效,互動反饋,視差等設計都能達成目的。下面是我的一些成功經驗。

讓資料呼吸

1-Nq0SkgfLjJlKjwWIOtKGwA

剛剛開啟某個介面的時候,讓進度條逐步填滿直到接近某個特定的值,這樣的設計只需要在原有介面基礎上加一層就可以搞定,看起來很簡單,但是很有效。

讓圖片動起來

tvOS focus 1

讓之前靜態的圖片,以緩慢載入的動畫的形式動起來,這樣使用者的視覺會更好地聚焦到這些聚焦元素之上,起到引導操作的作用。

直接呈現內容

tvOS focus

讓聚焦區域內的流媒體內容展現在使用者面前,這樣可以增加資訊的透明度,從而讓使用者更好的選擇。

資源

為了能能更好的設計Apple TV的UI介面,我製作了一個設計模板,並上傳到了appicontemplate.com 供大家下載使用。

1-9gbBAOUV-zOA_VjkG-vsvg

當然,你還需要了解蘋果官方對於tvOS的介面設計有著怎樣的要求,戳這裡看蘋果官方的HIG

更好的客廳瀏覽體驗

未來的客廳娛樂體驗,應該就落在電視上了,我們也需要為此而設計和開發。想讓電視擁有好的體驗並不是一件簡單的事情,想必大家已經從諸多“電視盒子”上體驗到了這一點。我們曾經熟悉的電視已經發生改變,而我們適應的手機、平板和電腦和新的電視還有著巨大的差別,我們需要忘掉之前熟悉的模式,從頭開始。塑造下一代的電視體驗,是我們需要做的事情,這很重要。

 

相關文章