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

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

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

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

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

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

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

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

　　其實(shí)這個(gè)操作過(guò)程其實(shí)就是：打開(kāi)文件夾-> 選擇里面的某個(gè)文件夾繼續(xù)打開(kāi)-> 再打開(kāi)…直到最后一個(gè)層級(jí)。而經(jīng)過(guò)三維化后這些簡(jiǎn)單的操作就變得豐滿而妙趣橫生起來(lái)。

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

　　地址：http://www.simpleviewer.NET/tiltviewer/app/

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

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

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

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

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

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

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

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

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

　　第四個(gè)原因就是：受到操作習(xí)慣限制。這一點(diǎn)非常關(guān)鍵，因?yàn)橐话銇?lái)說(shuō)，界面的三維化程度越高，就越可能需要依賴新的操作方法。但是問(wèn)題是有多少人愿意在使用界面前，先費(fèi)時(shí)間習(xí)慣一大堆新的操作方法呢？Bumptop就是個(gè)例子：

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

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

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

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

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

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

　　對(duì)界面的虛擬現(xiàn)實(shí)化而言，三維化圖形界面的出現(xiàn)只是眾多趨勢(shì)中的一個(gè)而已，圖形界面的視覺(jué)未來(lái)會(huì)發(fā)展成什么樣，現(xiàn)在我們也只能憑自己的想象猜測(cè)了。

　　最后跑一下題，上兩個(gè)視頻：2008年在佛羅倫撒舉行的Diesel Liquid Space時(shí)裝秀和麻省理工學(xué)院媒體實(shí)驗(yàn)室（MIT Media Lab）的Parnav Mistry的發(fā)明。這兩個(gè)例子說(shuō)不定是未來(lái)展示在我們眼前的一線端倪吧？

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

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

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

　　Parnav 的發(fā)明告訴我們，也許我們?cè)诨孟胫臇|西離我們并不遠(yuǎn)，有一天圖形界面甚至可以離開(kāi)屏幕。而這位印度老兄已經(jīng)準(zhǔn)備將這個(gè)技術(shù)開(kāi)源提供給大眾了。或許有一天，界面的概念會(huì)因此從根本上發(fā)生改變。

it知識(shí)庫(kù)：妄想or未來(lái)？界面的虛擬現(xiàn)實(shí)化，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。