[ 平面理論教程 ] 蘋果TV進行UI設計需要了解的基本規則- 設計教程 - 骨子愛創意

教學主題: 蘋果TV進行UI設計需要了解的基本規則

大家好!! 小編今天來和大家分享關於 設計教程中的平面理論教程教學

今天的這個教學主題是: 蘋果TV進行UI設計需要了解的基本規則

這教學的重點為這幾點 [ 了解,基本,規則,需要,設計,進行,蘋果,內容,用戶,我們, ]

希望你可以從這幾點中領悟到修圖的精華

本文重點

仔細想想，你會發現我們正處於大屏UI設計的一個有趣的階段。2015年推出的Apple TV 已經是第四代產品了，但是其他的同類型產品尚且處於第一代或者說早期階段。發布會上吹出的牛逼最終還是要經過市場驗證，而實際狀況比起大家預期的結果，更加複雜。到底要如何

仔細想想，你會發現我們正處於大屏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的基礎上搭建新的東西，尋求新的方案，那麼你有必要讀下去。

輕鬆入門

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

焦點引擎

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

露出屏外內容

你需要顯示屏外內容的10%~20%的部分，讓用戶明白還有更多的內容可供瀏覽。

水平導航更輕鬆

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

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

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

謹慎安放控件

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

保持明顯

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

為遠距離瀏覽而設計

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

減少文字輸入

在電視上進行文字輸入無疑是低效的，用戶操作也極其費勁。最好是考慮到使用其他的硬件設備來進行登錄、輸入等複雜的輸入操作。

讓應用更生動

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

讓數據呼吸

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

讓圖片動起來

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

直接呈現內容

讓聚焦區域內的流媒體內容展現在用戶面前，這樣可以增加信息的透明度，從而讓用戶更好的選擇。

資源

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

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

更好的客廳瀏覽體驗

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

看完小編分享的教學之後 是不是對平面理論教程中的設計教程教學更熟悉了呢?

希望我們所介紹的 蘋果TV進行UI設計需要了解的基本規則 這教學會喜歡

文章標題: 骨子愛創意- 蘋果TV進行UI設計需要了解的基本規則–轉載請註明來源處

本教學分類為平面理論教程中的 設計教程相關教學

文章相關關鍵字為: 了解,基本,規則,需要,設計,進行,蘋果,內容,用戶,我們,

本文永久連結 :蘋果TV進行UI設計需要了解的基本規則

本文轉載自 :VIA