DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> TV App的設計借鑒游戲界面設計的經驗
TV App的設計借鑒游戲界面設計的經驗
編輯:關於網頁技巧     

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內容所固有的特色。

wow

經驗二:操作區域內容的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欄(前景)和主要內容(背景)的關系還可以優化,這兩部分內容的融合看起來非常的生硬。

google tv

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

游戲是為普通用戶設計的,也是為新手和專家設計的,正因為如此,游戲的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本身的特性,我們對字體、字號、字色的設計上有了更多的自主性,可以更多的在上面做文章,那麼,作為這方面先驅的游戲設計,當然也是我們可以借鑒的了。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved