為APPLE TV進行UI設計需要了解哪些基本規則?

      作者:
      分類: 觀點/經驗
      2016-03-03
      1851

      仔細想想,你會發現我們正處于大屏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。

      更好的客廳瀏覽體驗

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


      0
      5
      分享到:

      0

      喜歡他,就推薦他上首頁吧^_^

      推薦閱讀

      ×

      賽事服務聯系方式

      0371-86068866

      4008887269

      cndesign@163.com

      好的,我知道了

      官方微信

      聯系我們

      • QQ:33143335 QQ:1904200230
      • 電話:18569912460
      • 投稿:cndesign@163.com
      • 地址:鄭州市國家大學科技園東區9號樓2層

      版權信息

        移動 Android 版 豫 ICP 備16038122號-2 豫公網安備 41019702002261號

      主站蜘蛛池模板: 日本一区频道在线视频| 狠狠综合久久AV一区二区三区| 一夲道无码人妻精品一区二区| 国产91大片精品一区在线观看| 国产福利电影一区二区三区,日韩伦理电影在线福 | 九九久久99综合一区二区| 国产精品综合一区二区| 亚洲一区二区三区国产精华液| 无人码一区二区三区视频| 国产裸体舞一区二区三区| 香蕉久久一区二区不卡无毒影院 | 国产在线精品一区二区在线看| 中文字幕一区二区三区精彩视频| 国产成人无码一区二区在线播放| 国产美女视频一区| 午夜精品一区二区三区在线视| 最新中文字幕一区| 精品免费国产一区二区| 国产综合视频在线观看一区| 无码中文字幕人妻在线一区二区三区| 国产AV一区二区三区传媒| 无码人妻一区二区三区免费n鬼沢 无码人妻一区二区三区免费看 | 国产精品亚洲一区二区三区在线| 国产不卡视频一区二区三区| 国产精品一区二区av不卡| www一区二区www免费| 免费萌白酱国产一区二区三区| 人妻少妇一区二区三区| 国产乱码精品一区二区三区中文| 久久久久久综合一区中文字幕| 久久精品一区二区三区资源网| 国产自产在线视频一区| 久久久一区二区三区| 日本免费一区二区在线观看 | 国产在线精品一区二区夜色| 久久国产午夜精品一区二区三区| 中文字幕人妻丝袜乱一区三区| 无码人妻精品一区二区三18禁| 国产精品一区二区不卡| 日韩在线一区视频| 精品国产一区二区三区在线观看|