原文作者：Michael Flarup
原文地址：Designing for the Apple TV
我們發(fā)現(xiàn)自己身處在一個(gè)為大屏做UI設(shè)計(jì)的有趣時(shí)代。伴隨著2015年末推出的第四代Apple TV，大多數(shù)的主要參與者已經(jīng)拋棄了對現(xiàn)代TV“應(yīng)該如何觀看體驗(yàn)”的舊觀念。迷霧逐漸消散并且結(jié)果會(huì)混雜著比你想的更多的原因。這是一個(gè)勇敢的新世界，但是在這篇文章中，我會(huì)分享一些我們?yōu)榈溩畲蟮膬?nèi)容提供商構(gòu)建apps的經(jīng)驗(yàn)，一些我們至今學(xué)到的東西和一些能夠幫你入門的資源。
背景解讀
主要的參與者像Netflix,Youtube,HBO,Hulu和Plex都有一個(gè)版本在tvOS應(yīng)用商城。然而，他們中的大多數(shù)都存在在系統(tǒng)的以前版本或者其它平臺像是FireTV,SamsungTV或者其它HbbTV［混合型廣播寬帶TV(Hybrid Broadcast Broadband Tv)］。因此，在多數(shù)情況下，我們現(xiàn)在獲取的tvOS應(yīng)用
是一個(gè)傳統(tǒng)設(shè)計(jì)和Apple新設(shè)計(jì)規(guī)范的奇怪組合產(chǎn)物。在很多方面，我們都處在一個(gè)人人都想如何去做好它的初級階段。決策者目前平衡它們用來做什么，保證和其它平臺的一致性，嘗試推動(dòng)apple允許他們通過tvOS來做的變動(dòng)。你可以很容易地發(fā)現(xiàn)決策穿過了當(dāng)前你能在TV上獲取的全部方案。
但是更大的一個(gè)群體，內(nèi)容創(chuàng)建者正在決定他們是否應(yīng)該參與這個(gè)平臺，如果參與進(jìn)來了，他們該怎么做？他們中的很多人并沒有足夠的apps粘性在其它平臺上，通過觀看這些平臺來作為一種，體驗(yàn)趣味性服務(wù)于內(nèi)容的方式。這篇文章非常適合這群人，以及為他們提供解決方案的開發(fā)者。如果你打算為Apple TV做一些什么，那么可以繼續(xù)讀下去。
開始很簡單
因?yàn)榉e累了很多的其它設(shè)備和移動(dòng)解決方案，為AppleTV做設(shè)計(jì)和開發(fā)是一件輕而易舉的事情。它是一種方案，一種設(shè)備。事實(shí)上就是單一的1920*1080像素，并在單一的硬件設(shè)備上調(diào)試，這真是一種要被遺忘的奢侈。我就像上面說的那樣打開photoshop新建一個(gè)畫布，導(dǎo)出@1x非retina，非9-patch。在外接設(shè)備下我能很輕松的在屏幕上100%觀看。
遇見你的新朋友，focus engine
當(dāng)在Apple TV上設(shè)計(jì)超贊體驗(yàn)時(shí)，你需要熟悉的主要導(dǎo)航規(guī)范之一就是focous engine和一個(gè)東西如何“總處于焦點(diǎn)”。不同于IOS或者桌面端，你主要的操作內(nèi)容是tapping，clicking和scrolling；在TV上，刷過內(nèi)容然后控制一個(gè)被選中的對象。事實(shí)上你并不是刷過界面直接控制你所看見的東西，而是通過控制一系列預(yù)設(shè)的區(qū)域焦點(diǎn)在布局上的不同來實(shí)現(xiàn)工作的。本篇文章中大部分知識直接或間接的聯(lián)系到了解fouce engine的優(yōu)勢和局限。
梳理屏幕外的內(nèi)容
溢出屏幕的行和列的內(nèi)容應(yīng)該保持對齊，并且顯示至少10%～20%的內(nèi)容，讓用戶清楚的了解到這里還有更多內(nèi)容。
水平很簡單，垂直卻很難
水平滑動(dòng)會(huì)比垂直滑動(dòng)更加順暢，不僅是在硬件上的實(shí)際手勢，從屏幕上的一側(cè)滑動(dòng)到另一側(cè)也會(huì)感覺到更輕松。對你的拇指而言，側(cè)向滑動(dòng)更為簡單，結(jié)果是你的屏幕上也會(huì)映射對應(yīng)的微妙關(guān)系。讓你的拇指上下移動(dòng)來移動(dòng)屏幕上的所有對象會(huì)更困難，因此這是一個(gè)更難的交互動(dòng)作。充分利用這些知識，并保留垂直滾動(dòng)這一交互動(dòng)作給更有意義的動(dòng)作，例如切換類別。
區(qū)別按鈕和內(nèi)容
讓按鈕和內(nèi)容清楚地傳達(dá)出它們表述的含義是非常重要。你不會(huì)想讓用戶進(jìn)入下一步的時(shí)候感到“驚訝”，所以請確保按鈕看起來像按鈕，內(nèi)容看起來像內(nèi)容。
嚴(yán)謹(jǐn)?shù)牟贾每丶瑸榱俗屇愕挠脩舾杏X更佳舒適，控件和內(nèi)容的布局非常重要。一長串垂直你不會(huì)選擇的內(nèi)容，比如一長段文字，不會(huì)起到什么作用?？紤]到你可能不會(huì)去滾動(dòng)它，然后布置一個(gè)可選的元素在它的底部會(huì)讓導(dǎo)航變得跳躍。在某種意義上，tvOS的用戶就像是Tarzan(那位人猿泰山)－從一棵樹蕩到另外一棵樹上；從一個(gè)聚焦項(xiàng)目到另外一個(gè)。請確保Tarzan可以清楚地看到下一棵樹和預(yù)期到下一次的搖蕩。不要藏起來，沒有人希望Tarzan從樹上掉下來。
網(wǎng)格很棒，當(dāng)你在遙控器上，上下左右滑動(dòng)的時(shí)候，你不會(huì)去懷疑焦點(diǎn)是否運(yùn)動(dòng)正確。當(dāng)你打破了網(wǎng)格或偏離了元素，請確定有個(gè)很好的理由讓它是值得的，不要讓導(dǎo)航跳到一個(gè)用戶不希望它在的地方。
顯而易見
確保聚焦的東西看起來就像聚焦。不要模棱兩可。使目標(biāo)擴(kuò)展，發(fā)光或者是改變顏色?？鋸埖谋憩F(xiàn)方法在大屏幕上或者其他需要體現(xiàn)出層級的平臺上表現(xiàn)的很好。
為距離而設(shè)計(jì)
為你的TV構(gòu)建的界面在幾米之外可能會(huì)被喜歡或者厭惡。這與移動(dòng)端和桌面端形成對比，因?yàn)槲覀冊谧烂婧鸵苿?dòng)端都快把臉塞進(jìn)屏幕里去了。當(dāng)為TV設(shè)計(jì)時(shí)，移動(dòng)端或桌面界面設(shè)計(jì)的親密性與生俱來。不僅是因?yàn)樗h(yuǎn)離我們的身體，基于遙控器（即便是觸控）的控制也會(huì)削弱感覺。所以請確保內(nèi)容和控件在房間的另一端也能操作。這基本上意味著更大的文字和更清晰的定義控件，同樣意味著有意義的網(wǎng)格布局和有指導(dǎo)意義的動(dòng)畫。
減少文本輸入
在TV上輸入文本依然很糟糕，當(dāng)用戶不得不去使用的時(shí)候盡量限制次數(shù)?？紤]代替方式例如其他設(shè)備登錄。
讓它生動(dòng)起來
我們目前看到很多標(biāo)準(zhǔn)化的UI元素被應(yīng)用在Apple TV apps上，也正如這個(gè)時(shí)間所愿。但是我希望開發(fā)者能夠作出更多的嘗試，添加他們自己的想法。這里有很多事可以做來讓使用產(chǎn)品的體驗(yàn)豐富起來。小動(dòng)畫，圖片微位移，顯而易見的內(nèi)容視差。這有一些我們成功的小技巧。
呼吸數(shù)據(jù)
第一次打開屏幕時(shí)進(jìn)度條會(huì)有一個(gè)加載到值的動(dòng)畫，它加載了一個(gè)動(dòng)畫層，并讓數(shù)據(jù)不在那么乏味，更加生動(dòng)。
圖片移動(dòng)
Ken burns背景圖片，伴隨著聚焦元素的上升，和用戶的帶入，使屏幕畫面緩緩移動(dòng)是一個(gè)處理沉浸式的不錯(cuò)手法。
內(nèi)容顯示
在聚焦的控件內(nèi)流動(dòng)的內(nèi)容（在這種情況下來自直播渠道），讓用戶能夠?qū)π畔⒆鞒鲞x擇，無論什么場合盡可能地提高透明度來導(dǎo)向預(yù)期。
資源
為了能夠更方便地設(shè)計(jì)Apple TV界面，我做了可用的模板發(fā)布在appicontemplate.com上。在tvOS UI模板PSD下，你可以很容易構(gòu)建當(dāng)前標(biāo)準(zhǔn)的界面平臺。模板包括dark和light兩種狀態(tài)，以及一些常見控件尺寸基于tvOS的1920X1080px畫布。
建立一個(gè)更好的居住空間體驗(yàn)
為了得到想要的未來居住空間，我們要為之而努力。為TV設(shè)計(jì)偉大的體驗(yàn)并不簡單，即便是平庸的設(shè)計(jì)也不容易。我們中的大多數(shù)僅僅只是走出了第一步，學(xué)習(xí)哪些可以或者應(yīng)該是穿越房間的屏幕，我們無需學(xué)習(xí)便對移動(dòng)設(shè)備和桌面親近并且適應(yīng)新模式。我們需要嘗試和挑戰(zhàn)TV可以做什么。這令人激動(dòng)不已。我們打開一個(gè)被塵封已久的盒子，并且塑造下一代消費(fèi)內(nèi)容的體驗(yàn)。我們不應(yīng)該輕視這一個(gè)任務(wù)。我們引導(dǎo)我們的文化遺產(chǎn)和重塑了一個(gè)幾十年沒變的媒介。讓我們看看，是否能改變些什么。
原文作者：Michael Flarup
