TV App設計 10個可向游戲界面設計學習的地

　　TV App的設計，相對來說是一個全新的領域，有哪些領域可供我們借鑒?

　　游戲主界面有2種形式，全屏的和窗口的，全屏的獨占式游戲主界面曾經是唯一的形式，也是玩家游戲時關注的重點，游戲內的其他模塊，比如個人信息、物品欄、地圖、公告、技能等，都在固定位置以懸浮的方式，占據屏幕的邊角，並且這些模塊是可以縮小和隱藏的;而需要及時處理的通知，以及一些需要復雜操作的模塊，如物品的交易，技能的升級等，則以彈出窗口的形式出現，他們通常占據屏幕不到1/3的空間，並且可以立即關閉。

　　大家熟悉的TV也一樣，畫中畫之類的玩意兒雖然新鮮，但是使用場景少，使用頻率低，用戶在使用TV的時候，也是用獨占式的全屏，而電視台標、頻道號、字幕、滾動廣告等，通常也是在TV屏幕的邊角，在TV本身的設置中，頻道號也是可以隱藏的;另一方面，因為內容提供商——電視台的盈利模式緣故，這些滾動廣告不可隱藏或縮小，甚至用戶需要忍受他們TV的全屏，都被廣告所占據，當然，用戶也可以選擇——換台。

　　與TV不同，電腦APP天生就不是獨占式全屏的，天生就是為多任務設計的;而手機、Pad上的App，卻是天生獨占式全屏的，但是它與TV App的不同之處在於，它們的屏幕要小得多，在家用電視屏幕開始不斷增加到40寸及以上時，3.5寸、7寸、10寸的手機屏和Pad屏，大約就是足球和雞蛋的關系。而相對來說，游戲在電腦、TV上，已經有了至少十多年的經驗，不管是曾經的《傳奇》，還是曾經的小霸王游戲機，抑或是Wii或者X-box 360，在大屏幕的獨占式界面設計上，顯然游戲更有經驗，所以，TV App的設計，個人認為，可以更多的借鑒游戲界面設計的經驗。

　　經驗一：游戲主界面最大化

　　對玩家來說，當他們游戲時，注意的重心在畫面的背景，也就是游戲內容本身上，它們是持續的，動態的Flow，而諸如個人信息、物品欄等游戲組件，雖然是界面的前景，卻是斷續的，可隱藏的、輔助的;游戲畫面風格很大程度上影響了玩家的游戲選擇，而游戲畫面風格更大程度上是由游戲主界面的背景——游戲內容決定的;對於TV App來說，它同樣應該具有游戲主界面背景所具有的特征：全屏、動態、持續，而這些特征，恰恰是TV內容所固有的特色。

　　經驗二：操作區域內容的Global，Context和Customizable

　　在游戲的不同場景，這些位於游戲主界面前景的內容並不相同，比如玩家在游戲內閒逛時，以及在游戲中戰斗時，他所希望看到的信息和他想要進行的操作是不一樣的，比如說，在閒逛時，Social的部分可以范圍大一些(通常在屏幕左下角以及玩家游戲角色頭頂上)，而在戰斗時，玩家戰斗狀態相關的信息就更重要了，這時Social的內容應該以自動和不打擾為主，否則玩家就該罵娘了。

　　此外，就像上文中提到的，以及上圖中《魔獸世界》所示的，這些游戲組件在內容、顯示區域、顯示大小上應該是可定制的，從而最大的發揮它的“輔助”價值。

　　在TV App的設計中，我們對TV App用戶的使用期望仍然是“沉浸”(也是“Flow”)，在游戲中，通過游戲劇情、游戲角色之間的關系、游戲角色與場景之間的關系、游戲角色與游戲 NPC之間的關系等等，來實現使用戶“沉浸”;而在TV App中，尤其是電商TV App中，引發用戶沉浸的肯定不是迷宮一樣的導航，機器人一樣的搜索，而是用戶與商品之間的關系，用戶與用戶之間的關系等等，這也就決定了我們的信息架構，我們的Home，Category，Search，Product Detail， Shopping Cart，Check out等等，他們的內容、結構和關系要打散了重新組合，並且千萬要理清自己的“輔助”位置。

　　經驗三：圖標式操作

　　圖形化是一個顯而易見的趨勢，並不止是游戲如此，只是游戲圖形化的更徹底一些，對於大屏幕的TV App來說，這個不用多說。

　　經驗四：分屏展示(沒有全屏幕的上下滑動)

　　這個是從游戲中獲得的經驗，但是它不符合在TV上使用Google搜索、浏覽網頁的場景(雖然不知道多少人會在TV上這麼用)，部分內容的上下滑動(注意：不是全部內容)是可以接受的，比如說一些TV App的Global/Context Menu的設計是通過遙控器上的五向鍵的一些操作從底部滑上來的，個人認為，屏幕底部用類似前景的方式呈現一些可操作的內容，跟游戲中的可隱藏的物品欄和公告欄等是異曲同工的，另外，如下圖所示，下圖的App欄(前景)和主要內容(背景)的關系還可以優化，這兩部分內容的融合看起來非常的生硬。

　　經驗五：定義快捷鍵並用可見的方式展示

　　游戲是為普通用戶設計的，也是為新手和專家設計的，正因為如此，游戲的Settings裡面有一堆的快捷鍵並且這些快捷鍵大多數都是可以自定義的，那些游戲專家，除了敏捷性等生理機能外，更多的是熟能生巧(僅限於勁舞團之類的休閒游戲);對於TV App來說，定義快捷鍵並用可見的方式展示的優勢在於，它能兼顧新手、普通和專家用戶，另一方面，它減少了鍵盤/遙控器操作的復雜性。

　　經驗六：2D vs. 3D

　　游戲的發展歷程是從文本到圖像，從2D到3D，我相信，軟件，硬件的發展都是服從於這個規律，並且為之服務的，而由於TV本身的大屏幕優勢，以及 3D電視的出現，並且相信會逐漸普及，3D的TV App相信會成為主流，而游戲領域在3D引擎技術的領先使用，決定了游戲在3D的界面設計領域有更多的經驗可以供我們借鑒，比如說《魔獸世界》如何去吸引那麼多中國的女玩家，去克服3D帶來的方向迷失以及眩暈感，使她們同男性玩家一樣，能夠很好的享受這個游戲的。

　　經驗七：用地圖來導航

　　游戲的信息架構同樣復雜，但是在游戲設計中，使用了地圖這樣一種圖形化的方式來實現導航的目的，而在Web中，我們看到的站點導航是什麼呢?大多是一堆樹形結構。在TV App設計時，我們是否也可以借鑒游戲的這種導航方式，用圖形化的方式來達到導航的目的，當然，地圖只是一種形式。

　　經驗八：多賬號、多角色、多關系

　　對游戲來說，一個玩家通常會有一個主要角色，多個小號，多個輔助角色，而對於一個游戲角色，也有多種不同的關系，比如好友、師徒、夫妻、幫派、國家、主人和寵物等等，在游戲中，這個游戲角色更多的是一個Public的角色，而游戲也是為了Public，為了Social的目的而設計的，而在Web 上，在SNS出現之前，我們看到的更多的賬號是非常Personal的，它們很少去處理這些Account之間的關系。另一方面，對於Mobile，對於 Pad來說，更多的時候也是一個非常Personal，非常private的設備，而TV，確是服務於Home和Family的，它也需要處理不同的角色，不同的關系，這同樣也決定了，TV App的設計需要從游戲設計中取經，借鑒他們處理多賬號、多角色、多關系的經驗。

　　經驗九：文字簡潔

　　這個不言而喻，在Web上，在Mobile和Pad上，我們可能看到滿屏的文字，它尤其適合閱讀場景，但是在TV上，如果看到滿屏的文字，這絕對是一個災難，喬布斯式的Presentation為大眾所喜歡，原因之一也是因為，它言簡意赅;TV App的設計要想達到文字簡潔的效果，需要學習借鑒的，不能僅僅是喬布斯式的Presentation，因為不管是PPT，還是Keynote，雖然演講人試圖把Presentation變成一個或者一個個連續的故事，但是這依賴於演講人本身的努力，但是從PPT和Keynote本身來說，雖然它可以自動播放，但是它仍然是非連續的，甚至是靜態的;而相對來說，游戲設計在這方面又更有經驗了，我們可以學習它如何在有限的空間裡，呈現不同類型的，多種多樣的信息。

　　經驗十：用字體、字號、字色的設計來表現信息架構

　　仍然是以上面的《魔獸世界》的圖為例，或者是上面《泡泡戰士》的圖，我們都可以看到，它們用字體、字號、字色的設計，對不同類型的信息進行了區分。在Web上，由於技術、兼容性等原因，字體、字號、字色的設計等應用得相對較少，所以我們在浏覽網站時，看到的經常是千遍一律的宋體，黑色字，但是在TV App領域，因為App本身的特性，我們對字體、字號、字色的設計上有了更多的自主性，可以更多的在上面做文章，那麼，作為這方面先驅的游戲設計，當然也是我們可以借鑒的了。

　　作者：徽徽

　　文章來源：徽徽的UX世界