妄想or未來?界面的虛擬現(xiàn)實化

0 評論 2882 瀏覽 0 收藏 12 分鐘

當(dāng)1980年Three Rivers公司第一次推出圖形用戶界面Perq,產(chǎn)生GUI這個概念的時候,不知道他們有沒有想過今天圖形界面設(shè)計竟然會發(fā)展到這個地步。而那之前,所謂計算機界面,展示在我們眼前的還只是一大堆令人抓狂的代碼。

最初的圖形界面,目的是省去用戶記憶命令列界面(CLI)里繁復(fù)的操作命令,簡化操作,但是經(jīng)過了近30年的進化,圖形界面早就不再以單純的方便操作為目的而存在。從1984年初代Macintosh出現(xiàn)到現(xiàn)在的微軟的Win7,界面視覺的細(xì)節(jié)和表現(xiàn)力不斷被強化著。

就圖形用戶界面而言,自從它的出現(xiàn)就帶著一個特點,即在虛擬世界中的現(xiàn)實化。無論是圖標(biāo),按鈕,桌面或者窗口,在現(xiàn)實中都可以找到與這些元素對應(yīng)的概念;而界面的視覺設(shè)計更是與現(xiàn)實中的色彩感,質(zhì)感和體量感有密切的關(guān)系。

這個特點不能不讓人對界面的視覺究竟能發(fā)展到什么程度浮想聯(lián)翩。既然界面是虛擬世界現(xiàn)實化的產(chǎn)物,那么這個“現(xiàn)實化”到底能會把圖形界面變成什么樣呢?

除了在二維界面中加強細(xì)節(jié)的表現(xiàn),還有一種趨勢正在漸漸變得常見:圖形界面中元素的三維化。以下是筆者就這個趨勢寫的一些妄言,有不足之處請各位多多指正吧。

三維化使界面或網(wǎng)頁中的某些部分,或是幾個界面之間,變得像真實世界中的物體一樣可以從不角度觀察,可以被翻轉(zhuǎn),甚至互相作用。界面中的這些部分因此會獲得很強的表現(xiàn)力,有些效果也是二維界面無法達到的。

以下是 WHITEvoid公司的三維化作品展示頁面。

詳細(xì)的效果大家可以去這里體會:http://www.whitevoid.com/portfolio.html

其實這個操作過程其實就是:打開文件夾-> 選擇里面的某個文件夾繼續(xù)打開-> 再打開…直到最后一個層級。而經(jīng)過三維化后這些簡單的操作就變得豐滿而妙趣橫生起來。

三維化帶來的表現(xiàn)力是個好東西。但萬事有度。如果在設(shè)計時使用過度,三維化也會給使用者造成困擾。下圖是TiltViewer 的照片預(yù)覽器,它的展示方法和 WHITEvoid 如出一轍,并且沒有這么多的文件操作層級。

地址:http://www.simpleviewer.net/tiltviewer/app/

類似 WHITEvoid 和 TiltViewer 兩個例子的三維化界面,有不少都是采用“被動即時變化視角”的。也就是說,在鼠標(biāo)/手指移動在界面區(qū)域的過程中,用戶的視角會隨之發(fā)生改變。以下是 WHITEvoid 和 TiltViewer 在視角活動區(qū)域上的區(qū)別。

由于在操作過程中視角變化始終存在,因此過于強烈的視覺體驗就可能引起不適,在 TiltViewer 例子中,鏡頭的焦距接近20mm,產(chǎn)生了強烈的廣角效果,其運動范圍也非常寬闊,因此輕微的移動都會造成巨大的透視變化和視角變化,而在照片放大后這種效果更加明顯。這也是過分強調(diào)表現(xiàn)力導(dǎo)致的副作用之一。

不過 TiltViewer 也給我們帶來了有意思的想法,比如每張照片都是可以翻轉(zhuǎn)的,背面顯示的是照片的具體信息。拜維度的增加所賜,類似這樣對界面本身三維結(jié)構(gòu)的設(shè)計,使界面變得值得琢磨和把玩起來。

由上述的例子可以知道,三維化應(yīng)用中使視覺設(shè)計和交互設(shè)計的變得更加緊密,維度的增加給設(shè)計師帶來了更多想象的空間,同時也增加了設(shè)計師需要考慮的方面。

上文提到的是兩個網(wǎng)頁展示三維化的例子,而目前的三維化在軟件界面中最常扮演的角色,則對部分信息的視覺優(yōu)化。與網(wǎng)頁不同,在軟件中使用三維化需要更加謹(jǐn)慎。很少有一個三維化界面,會毫無保留的將每個組件,每個信息徹底的三維化。

一個原因在于有些內(nèi)容不適合使用三維化;另外一個原因則是全三維界面資源消耗過大。

第三個原因是:對于一個應(yīng)用了三維化界面來說,使用了多少技術(shù)不是關(guān)鍵,而是如何使用。以下是鉆研 WPF 和 Silverlight 的 thirteen23 公司出品的blu的截圖。

blu 的三維化效果只出現(xiàn)在兩類地方:一個是主界面和setting界面的轉(zhuǎn)換處;另一個是接入Twitter后對Twitter里內(nèi)容卡片做出編輯時一個小翻轉(zhuǎn)效果。但是這兩個效果制作的都非常精致,運行也相對流暢(尤其是在Vista和Win7系統(tǒng)上)。正是這些三維特效使得blu有別于一般IM或SNS軟件脫穎而出。

網(wǎng)址:http://www.thirteen23.com/index.html

第四個原因就是:受到操作習(xí)慣限制。這一點非常關(guān)鍵,因為一般來說,界面的三維化程度越高,就越可能需要依賴新的操作方法。但是問題是有多少人愿意在使用界面前,先費時間習(xí)慣一大堆新的操作方法呢?Bumptop就是個例子:

Bumptop最初在2007年底發(fā)布,絕對是一款超高程度三維化的桌面體驗程序了,從操作上,視覺上,都是與一般界面截然不同。就新鮮感來說,Bumptop算是首屈一指的。但是它的設(shè)定與常規(guī)的界面認(rèn)知有許多的不同,要把這個軟件作為日常桌面使用得需要一定學(xué)習(xí)成本。

網(wǎng)址:http://bumptop.com/

當(dāng)然,Bumptop也提出了一些很有意思的概念,比方說自由繪制熱區(qū)代替選框,比如真實世界一般的重力、碰撞效果,比如Bumptop還有4面墻也可以用來做輔助桌面(類似多屏幕)。這些創(chuàng)意點,任何一條都稱得上精彩,但是集合在一起出現(xiàn)卻多少叫人有點消化不良了。

因此,雖然知道三維化界面蘊含著巨大的力量和可能性,但是在運用時還得循序漸進的慢慢讓人們接受。畢竟,無論是這個趨勢,還是支持它的技術(shù)都還不那么成熟。

下面是一些和三維化有關(guān)的實例:

攝影師Nicola Roman Walbeck的作品網(wǎng)站:http://www.nicolawalbeck.com/#/villa_brissago
MSNBC.com的新聞?wù)故卷摚篽ttp://msnbcmedia.msn.com/i/msnbc/components/spectra/spectra.html
The Economist設(shè)計師介紹的網(wǎng)站,頁面采用了三維解構(gòu):http://thinkingspace.economist.com/#/explore
信息展示網(wǎng)站Bestiario,這個的效果有點令人抓狂:http://bestiario.org/
THE ECO ZOO,非常可愛的高度三維化網(wǎng)頁:http://ecodazoo.com/
嚴(yán)格來說,這個是模仿三維效果,但是效果看起來很誘人:http://webdev.stephband.info/parallax.html
美國空軍對公眾展示網(wǎng)站,原來政府官網(wǎng)也能做成這樣:http://www.airforce.com/

對界面的虛擬現(xiàn)實化而言,三維化圖形界面的出現(xiàn)只是眾多趨勢中的一個而已,圖形界面的視覺未來會發(fā)展成什么樣,現(xiàn)在我們也只能憑自己的想象猜測了。

最后跑一下題,上兩個視頻:2008年在佛羅倫撒舉行的Diesel Liquid Space時裝秀和麻省理工學(xué)院媒體實驗室(MIT Media Lab)的Parnav Mistry的發(fā)明。這兩個例子說不定是未來展示在我們眼前的一線端倪吧?

1. 迪索液體空間時裝展:http://v.youku.com/v_show/id_XOTAzOTQ1Ng==.html

當(dāng)T臺被無數(shù)全息幻象占據(jù)時,我不得不感嘆,原來不知不覺間虛擬和現(xiàn)實已經(jīng)接近到可以同臺演出的程度了。

2. Parnav Mistry的發(fā)明:http://v.youku.com/v_show/id_XMTQ0MTM5Njg0.html

Parnav 的發(fā)明告訴我們,也許我們在幻想著的東西離我們并不遠(yuǎn),有一天圖形界面甚至可以離開屏幕。而這位印度老兄已經(jīng)準(zhǔn)備將這個技術(shù)開源提供給大眾了?;蛟S有一天,界面的概念會因此從根本上發(fā)生改變。

來源:http://cdc.tencent.com/?p=2277

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!