富互聯(lián)網(wǎng)應(yīng)用中的3D網(wǎng)頁界面研究

張騁

摘 要 互聯(lián)網(wǎng)硬件設(shè)施的拓展，富互聯(lián)網(wǎng)應(yīng)用將被運(yùn)用于更多的平臺與應(yīng)用項(xiàng)目。在3D技術(shù)進(jìn)入之前，圖形人機(jī)界面設(shè)計(jì)邏輯，是“窗像單點(diǎn)界面”形式。而當(dāng)3D技術(shù)引入GUI設(shè)計(jì)后，從三方面都打破了傳統(tǒng)平面構(gòu)成的習(xí)慣：Z軸帶來的景深，觀測角度的非單一性，網(wǎng)頁GUI設(shè)計(jì)中的尺寸特殊性。靈活使用各類元素布局組成，是3D時期GUI設(shè)計(jì)尋求理念革新的路線。

關(guān)鍵詞 富互聯(lián)網(wǎng)應(yīng)用；人機(jī)交互；界面設(shè)計(jì)

中圖分類號 TP37 文獻(xiàn)標(biāo)識碼 A 文章編號 2096-0360（2018）19-0031-02

自從中國電信在北京啟動“寬帶中國·光網(wǎng)城市”工程，標(biāo)志著中國互聯(lián)網(wǎng)進(jìn)入一個新的時期。伴隨著基礎(chǔ)互聯(lián)網(wǎng)硬件設(shè)施的拓展，富互聯(lián)網(wǎng)應(yīng)用（下文簡稱RIA，Rich Internet Applications）將被運(yùn)用于更多的互聯(lián)網(wǎng)平臺與應(yīng)用項(xiàng)目。

傳統(tǒng)互聯(lián)網(wǎng)內(nèi)容基于圖片與文字混排的HTML規(guī)范。它在互聯(lián)網(wǎng)高速發(fā)展的過去十幾年中被證明已經(jīng)越來越不能滿足互聯(lián)網(wǎng)用戶日益成長的體驗(yàn)需求。這一矛盾被美國 Macromedia公司稱之為“體驗(yàn)問題”（Experience Matter）。其應(yīng)對方式，則是以Macromedia Flash（2008年因被收購更名為Adobe Flash）平臺為代表的RIA。

1 RIA的現(xiàn)狀

作為RIA領(lǐng)跑人的Flash分別于1996年、1999年和2003年引入了視頻、音頻、畫布標(biāo)簽（2D繪圖和動畫）三項(xiàng)主要功能，在互聯(lián)網(wǎng)上通過Flash Player插件可以為用戶方便快捷地提供在線影視、音樂和動畫等多媒體內(nèi)容。建立于2005年的美國YouTube網(wǎng)站依靠Flash技術(shù)為用戶提供在線視頻，在短短2年中月訪客人數(shù)突破3 000萬。數(shù)據(jù)表明，RIA有著明確且廣泛的市場需求和長遠(yuǎn)的發(fā)展空間，它的出現(xiàn)為互聯(lián)網(wǎng)進(jìn)入寬帶時代的內(nèi)容展示與用戶體驗(yàn)，以及多媒體內(nèi)容需求提供了良好的解決途徑。

2 RIA中的3D技術(shù)

隨著RIA市場的開拓，越來越多互聯(lián)網(wǎng)影音技術(shù)平臺進(jìn)入這一領(lǐng)域。如美國微軟公司的Silverlight，SUN公司的Java以及HTML5規(guī)范等。面對競爭，各種RIA平臺將目光投向新技術(shù)與新展現(xiàn)形式。其中網(wǎng)頁3D內(nèi)容則是近幾年來RIA的重要拓展點(diǎn)，也被視為未來RIA的核心組成部分。

2011年7月，美國Adobe公司發(fā)布旗下RIA瀏覽器插件Flash Player 11版本，開始支持GPU（Graphic Processing Unit，圖形處理器）渲染加速，為互聯(lián)網(wǎng)平臺上實(shí)現(xiàn)3D內(nèi)容展示降低了技術(shù)實(shí)現(xiàn)成本并提供了軟件支持環(huán)境。

在RIA中，網(wǎng)頁瀏覽器環(huán)境的互聯(lián)網(wǎng)內(nèi)容，可以使用3D技術(shù)提供以圍繞Z軸延展的、具有景深的、更為豐富的視覺內(nèi)容。與目前互聯(lián)網(wǎng)已有的2D多媒體內(nèi)容相比，3D技術(shù)不僅僅可以讓諸如3D游戲等內(nèi)容產(chǎn)品無縫登陸互聯(lián)網(wǎng)，還可以改變并優(yōu)化如傳統(tǒng)圖片文字等內(nèi)容的展現(xiàn)形式與交互方式，從內(nèi)容提供和人機(jī)交互兩方面提升用戶的互聯(lián)網(wǎng)體驗(yàn)。

3 RIA中3D展示內(nèi)容的界面設(shè)計(jì)變化

在3D技術(shù)進(jìn)入互聯(lián)網(wǎng)應(yīng)用之前，互聯(lián)網(wǎng)產(chǎn)品（如基于HTML規(guī)范的網(wǎng)站、信箱、社區(qū)等）的圖形人機(jī)界面（下文簡稱GUI，Graphic User Interface）設(shè)計(jì)基于傳統(tǒng)計(jì)算機(jī)軟件的設(shè)計(jì)邏輯，即“窗像單點(diǎn)界面”（下文簡稱WIMP，Windows，Icons，Menus，and a Pointer）。WIMP中的GUI設(shè)計(jì)邏輯符合平面設(shè)計(jì)中構(gòu)成規(guī)律，即點(diǎn)、線與面等視覺符號在一個由X軸和Y軸定位的平面中，其疏密、面積、位置和相互關(guān)系通過形成的布局。視覺符號的面積與位置，由于都集中于一個平面上的緣故，只能在X軸與Y軸兩個維度上發(fā)生變化。在3D技術(shù)進(jìn)入GUI設(shè)計(jì)前，設(shè)計(jì)師通常通過調(diào)節(jié)元素面積大小變化、增添陰影及半透明效果、調(diào)整色彩中的色相或飽和度變化等藝術(shù)手段，來表現(xiàn)網(wǎng)頁布局中視覺元素的層次關(guān)系。這種層次關(guān)系在平面構(gòu)成中，通過模擬現(xiàn)實(shí)中的人眼對于世界的空間認(rèn)知，用于劃分不同權(quán)重視覺元素的主次關(guān)系，同時豐富視覺體驗(yàn)。而當(dāng)3D技術(shù)引入GUI設(shè)計(jì)后，從三方面都打破了傳統(tǒng)平面構(gòu)成的習(xí)慣。

1）Z軸帶來的景深。由于在3D場景中存在著Z軸，平面構(gòu)成中用于模擬Z軸延展的視覺表現(xiàn)工作機(jī)制被打破。內(nèi)容和視覺符號部署在3D場景中后，用戶的觀看視角只需要在模擬場景中的Z軸上發(fā)生縱深變化，所有元素都將產(chǎn)生可識別的視覺差異。因此無需通過復(fù)雜的設(shè)計(jì)即可實(shí)現(xiàn)等同甚至超越傳統(tǒng)層次關(guān)系表現(xiàn)的視覺效果。

2）觀測角度的非單一性。在平面構(gòu)成中，用戶的觀看角度呈單一性，展示內(nèi)容只存在唯一的最佳觀看角度（通常為最佳觀看距離的正前方）。而在3D場景中，用戶可以自由選擇觀看角度。因而GUI如不能與場景一并發(fā)生變化，則無法高度契合地與展示內(nèi)容匹配。

在3D軟件Autodesk Maya中，3D場景中菜單可以依據(jù)鼠標(biāo)右鍵在不同區(qū)域點(diǎn)擊，從而觸發(fā)不同的功能子項(xiàng)。這一設(shè)計(jì)可以讓軟件使用者在平面顯示器上通過2D交互形式在復(fù)雜3D場景環(huán)境中進(jìn)行操作。同時也是一個良好的3D GUI實(shí)現(xiàn)形式。但是行業(yè)軟件的操作高學(xué)習(xí)成本，使得這一GUI設(shè)計(jì)并不能直接應(yīng)用于一般的內(nèi)容展示。

3）網(wǎng)頁GUI設(shè)計(jì)中的尺寸特殊性。與其他3D技術(shù)使用領(lǐng)域相比，網(wǎng)頁GUI設(shè)計(jì)在布局尺寸上也有其特殊之處。HTML網(wǎng)頁的布局基于左上角0點(diǎn)坐標(biāo)和中軸線對齊兩種形式。而使用其中任何一種對齊方式，網(wǎng)頁在不同分辨率環(huán)境下，總寬度都無法被確定；在內(nèi)容多寡不同的頁面中，總長度無法確定。而且在RIA環(huán)境中，由于目前的多媒體信息需要依靠各類網(wǎng)頁瀏覽器外掛插件來實(shí)現(xiàn)其功能。這類插件作為網(wǎng)頁瀏覽器的一個功能組件，其最終視覺尺寸受限于HTML語法下相關(guān)參數(shù)的可定義范圍。加之美術(shù)成本等因素，RIA中3D內(nèi)容的GUI往往較不易與網(wǎng)頁其他布局元素契合。

4 依據(jù)展示內(nèi)容與用戶視角而變化的RIA 3D內(nèi)容GUI設(shè)計(jì)

基于以上三點(diǎn)RIA中的3D GUI設(shè)計(jì)與平面GUI的差異性，前端設(shè)計(jì)師需在保持GUI工作機(jī)制和效果的前提下，有針對地調(diào)整和重構(gòu)適用于網(wǎng)頁環(huán)境下的3D GUI布局方式。

網(wǎng)頁3D GUI由于視覺尺寸的不確定性，傳統(tǒng)WIMP布局下的，基于用戶“由上至下，由左至右”的信息權(quán)重布局實(shí)行應(yīng)被適當(dāng)打破。GUI布局應(yīng)形成模塊化，沿著用戶視角焦點(diǎn)分散分布，以適應(yīng)不同尺寸網(wǎng)頁瀏覽器下的用戶視覺體驗(yàn)。

模塊化GUI還允許視覺符號脫離布局框架結(jié)構(gòu)，與展示內(nèi)容進(jìn)一步結(jié)合。在3D環(huán)境中，由于活動攝影機(jī)位的存在，可隨觀看視角位置變化而變化的GUI符號元素可以在用戶調(diào)整觀看角度時改變位置，形成美感的構(gòu)圖形式。與展示內(nèi)容結(jié)合的活動式GUI布局元素可以重建內(nèi)容之間的聯(lián)系。如網(wǎng)頁設(shè)計(jì)中被大量使用的鼠標(biāo)懸浮窗口，可以在不同視角下維持“鼠標(biāo)懸浮——提示信息浮現(xiàn)”，保持懸浮窗口不會遮蔽下層內(nèi)容，可以解決2D GUI布局在同一平面無法相互覆蓋，必須縮減尺寸或是減少內(nèi)容的矛盾。

3D技術(shù)能優(yōu)化展示內(nèi)容，改變傳統(tǒng)GUI設(shè)計(jì)邏輯。在3D環(huán)境中，可以使用立體圖形作為圖標(biāo)。立體圖標(biāo)的使用，可以相較于2D圖標(biāo)更為具象地為GUI設(shè)計(jì)意圖所服務(wù)。

在不同的3D RIA運(yùn)用中，GUI還可以有差異地使用任何可借助的元素。如Unity3D公司的3D射擊游戲《Angry Robots》中，取消了玩家生命值提示條的GUI，改為用各種警示物顏色變化來告知玩家當(dāng)前生命值變化。另外用立體眼鏡帶來立體視野環(huán)境，將影視作品的字幕投射在觀眾的立體視野中，而不覆蓋影視作品本身。靈活使用各類元素作為布局組成形式，是3D時期GUI設(shè)計(jì)尋求理念革新的路線。

5 結(jié)束語

RIA的3D化作為互聯(lián)網(wǎng)的又一次內(nèi)容革命，與之相匹配的GUI作為重要因素，更好地直觀有效的傳達(dá)內(nèi)容。順應(yīng)新時期新內(nèi)容新交互關(guān)系新展現(xiàn)形式的GUI設(shè)計(jì)，需以打破常規(guī)平面構(gòu)成思路為手段，重新構(gòu)架符合具有空間感和立體感的，模擬用戶真實(shí)視角的GUI樣式。

參考文獻(xiàn)

[1]王潔.Flash無客戶端網(wǎng)絡(luò)游戲的設(shè)計(jì)與實(shí)現(xiàn)[D].廈門：廈門大學(xué)，2008.

[2]李曉蕙.網(wǎng)頁游戲中界面設(shè)計(jì)的研究和應(yīng)用[D].上海：上海交通大學(xué)，2008.

[3]陳實(shí).基于web-3D的網(wǎng)絡(luò)虛擬現(xiàn)實(shí)中的交互設(shè)計(jì)[C]//中國自然科學(xué)博物館協(xié)會、浙江省現(xiàn)代設(shè)計(jì)法研究會.全國首屆數(shù)字（虛擬）科技館技術(shù)與應(yīng)用學(xué)術(shù)研討會論文集.中國自然科學(xué)博物館協(xié)會、浙江省現(xiàn)代設(shè)計(jì)法研究會：2007：6.

[4]王倩.基于Flash網(wǎng)頁游戲的研究與設(shè)計(jì)[D].北京：北京交通大學(xué)，2010.

[5]趙靜.互聯(lián)網(wǎng)3D技術(shù)的實(shí)現(xiàn)方式[J].信息與電腦（理論版），2010（1）：108.