張騁

摘 要 互聯(lián)網(wǎng)硬件設(shè)施的拓展，富互聯(lián)網(wǎng)應(yīng)用將被運(yùn)用于更多的平臺(tái)與應(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軸帶來(lái)的景深，觀測(cè)角度的非單一性，網(wǎng)頁(yè)GUI設(shè)計(jì)中的尺寸特殊性。靈活使用各類元素布局組成，是3D時(shí)期GUI設(shè)計(jì)尋求理念革新的路線。

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

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

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

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

1 RIA的現(xiàn)狀

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

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

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

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

在RIA中，網(wǎng)頁(yè)瀏覽器環(huán)境的互聯(lián)網(wǎng)內(nèi)容，可以使用3D技術(shù)提供以圍繞Z軸延展的、具有景深的、更為豐富的視覺(jué)內(nèi)容。與目前互聯(lián)網(wǎng)已有的2D多媒體內(nèi)容相比，3D技術(shù)不僅僅可以讓諸如3D游戲等內(nèi)容產(chǎn)品無(wú)縫登陸互聯(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ī)界面（下文簡(jiǎn)稱GUI，Graphic User Interface）設(shè)計(jì)基于傳統(tǒng)計(jì)算機(jī)軟件的設(shè)計(jì)邏輯，即“窗像單點(diǎn)界面”（下文簡(jiǎn)稱WIMP，Windows，Icons，Menus，and a Pointer）。WIMP中的GUI設(shè)計(jì)邏輯符合平面設(shè)計(jì)中構(gòu)成規(guī)律，即點(diǎn)、線與面等視覺(jué)符號(hào)在一個(gè)由X軸和Y軸定位的平面中，其疏密、面積、位置和相互關(guān)系通過(guò)形成的布局。視覺(jué)符號(hào)的面積與位置，由于都集中于一個(gè)平面上的緣故，只能在X軸與Y軸兩個(gè)維度上發(fā)生變化。在3D技術(shù)進(jìn)入GUI設(shè)計(jì)前，設(shè)計(jì)師通常通過(guò)調(diào)節(jié)元素面積大小變化、增添陰影及半透明效果、調(diào)整色彩中的色相或飽和度變化等藝術(shù)手段，來(lái)表現(xiàn)網(wǎng)頁(yè)布局中視覺(jué)元素的層次關(guān)系。這種層次關(guān)系在平面構(gòu)成中，通過(guò)模擬現(xiàn)實(shí)中的人眼對(duì)于世界的空間認(rèn)知，用于劃分不同權(quán)重視覺(jué)元素的主次關(guān)系，同時(shí)豐富視覺(jué)體驗(yàn)。而當(dāng)3D技術(shù)引入GUI設(shè)計(jì)后，從三方面都打破了傳統(tǒng)平面構(gòu)成的習(xí)慣。

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

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

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

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

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

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

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

模塊化GUI還允許視覺(jué)符號(hào)脫離布局框架結(jié)構(gòu)，與展示內(nèi)容進(jìn)一步結(jié)合。在3D環(huán)境中，由于活動(dòng)攝影機(jī)位的存在，可隨觀看視角位置變化而變化的GUI符號(hào)元素可以在用戶調(diào)整觀看角度時(shí)改變位置，形成美感的構(gòu)圖形式。與展示內(nèi)容結(jié)合的活動(dòng)式GUI布局元素可以重建內(nèi)容之間的聯(lián)系。如網(wǎng)頁(yè)設(shè)計(jì)中被大量使用的鼠標(biāo)懸浮窗口，可以在不同視角下維持“鼠標(biāo)懸浮——提示信息浮現(xiàn)”，保持懸浮窗口不會(huì)遮蔽下層內(nèi)容，可以解決2D GUI布局在同一平面無(wú)法相互覆蓋，必須縮減尺寸或是減少內(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，改為用各種警示物顏色變化來(lái)告知玩家當(dāng)前生命值變化。另外用立體眼鏡帶來(lái)立體視野環(huán)境，將影視作品的字幕投射在觀眾的立體視野中，而不覆蓋影視作品本身。靈活使用各類元素作為布局組成形式，是3D時(shí)期GUI設(shè)計(jì)尋求理念革新的路線。

5 結(jié)束語(yǔ)

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

參考文獻(xiàn)

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

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

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

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

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