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

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

　　就圖形用戶界面而言，自從它的出現就帶著一個特點，即在虛擬世界中的現實化。無論是圖標，按鈕，桌面或者窗口，在現實中都可以找到與這些元素對應的概念；而界面的視覺設計更是與現實中的色彩感，質感和體量感有密切的關系。

　　這個特點不能不讓人對界面的視覺究竟能發展到什么程度浮想聯翩。既然界面是虛擬世界現實化的產物，那么這個“現實化”到底能會把圖形界面變成什么樣呢？

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

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

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

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

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

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

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

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

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

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

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

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

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

　　第三個原因是：對于一個應用了三維化界面來說，使用了多少技術不是關鍵，而是如何使用。以下是鉆研 WPF 和 Silverlight 的 thirteen23 公司出品的blu的截圖。

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

　　網址：http://www.thirteen23.com/index.html

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

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

　　網址：http://bumptop.com/

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

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

　　下面是一些和三維化有關的實例：

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

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

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

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

　　當T臺被無數全息幻象占據時，我不得不感嘆，原來不知不覺間虛擬和現實已經接近到可以同臺演出的程度了。

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

　　Parnav 的發明告訴我們，也許我們在幻想著的東西離我們并不遠，有一天圖形界面甚至可以離開屏幕。而這位印度老兄已經準備將這個技術開源提供給大眾了。或許有一天，界面的概念會因此從根本上發生改變。

it知識庫：妄想or未來？界面的虛擬現實化，轉載需保留來源！

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。