基于縮放界面和ＶＲ的大型商場網(wǎng)站概念設(shè)計

[摘要]本文通過介紹筆者所設(shè)計開發(fā)的一個大型商場網(wǎng)站設(shè)計模型，提出了一種結(jié)合3維和2維的界面風(fēng)格，網(wǎng)絡(luò)VR技術(shù)，來統(tǒng)一現(xiàn)實商場和網(wǎng)絡(luò)商場兩個概念模型的方法。

[關(guān)鍵詞] 文字層級結(jié)構(gòu) 概念模型 搜索機制 逛商場模式

一、引言

在《大型商場網(wǎng)站設(shè)計的主要矛盾與新思路》一文中，筆者提出大型商場的網(wǎng)站可以從以下方向?qū)で笤O(shè)計創(chuàng)新:利用縮放界面避免分級頁面，強調(diào)整體感；對商品進行符合現(xiàn)實的模糊分類;轉(zhuǎn)化搜索機制，將顧客從當(dāng)前的搜索購買模式拉回到傳統(tǒng)購買模式，避免“直進直出”模式，強化“逛商場”模式；結(jié)合3D和2D的界面風(fēng)格，利用網(wǎng)絡(luò)VR技術(shù)，來統(tǒng)一現(xiàn)實商場和網(wǎng)絡(luò)商場兩個概念模型。

這意味著完全不同的用戶界面，筆者所設(shè)計開發(fā)的一個大型商場網(wǎng)站設(shè)計模型就是一種可能的實現(xiàn)形式。

二、顧客界面風(fēng)格：2D、3D，或者2.5D

首先，本系統(tǒng)建立的是盡可能與現(xiàn)實生活相同的視覺模型，但是要針對技術(shù)實現(xiàn)和盈利模式進行一定的抽象。真實的視覺模型對顧客至少有兩個顯而易見的好處:有助于用戶利用自身的主動記憶能力進行檢索，充分利用了人的模糊思維和記憶能力；商場的網(wǎng)站和現(xiàn)實中的商場具有同樣的模型，能夠極大地提升消費者信任度。

其次，本系統(tǒng)基于縮放界面。也就是說沒有層級頁面，通過縮放來決定瀏覽的范圍和內(nèi)容。傳統(tǒng)的基于分層頁面的商務(wù)網(wǎng)站結(jié)構(gòu)的主要問題是:顧客很難對網(wǎng)站（商場）的規(guī)模和范圍形成清晰的認識;容易在樹結(jié)構(gòu)中選擇錯誤和迷失方向;很難對內(nèi)容模糊分類;搜索時從底層“直進直出”，無法像現(xiàn)實的商場形成連帶消費，而且廣告失效。縮放界面網(wǎng)站的優(yōu)點是容易使顧客形成整體心理模型，并且容易產(chǎn)生連帶消費。

界面風(fēng)格上，采用2D、3D，還是2.5D是個問題。3D界面顯然對顧客更具吸引力，更重要的是，3D場景界面更有利于進行全方位展示和碰撞計算。同時，由于本系統(tǒng)要建立實時交互的顧客（其實也包括商場員工）社區(qū)，所以實際上采用的是2D與3D結(jié)合的風(fēng)格，如附圖所示：

1.大場景采用3D模型來表現(xiàn)，但是柜臺等模型是通過預(yù)先制定的帶有UV坐標(biāo)參數(shù)的模塊來組合實現(xiàn)，這樣的設(shè)計具有以下好處:(1)極大的減少制作時間和成本;(2)有利于后臺對模型和貼圖的數(shù)據(jù)庫管理，減少后期維護成本;(3)關(guān)聯(lián)模型能夠減少需下載的模型數(shù)據(jù)量，并充分利用客戶端的能力來計算場景;(4)保留了必要的真實性和可擴展性。

2.雖然場景是3D風(fēng)格的，但是視角只采用固定于ID形象的4個角度，而不是任意角度，這樣便于用戶使用簡單的鍵盤和鼠標(biāo)操作而幾乎不需要學(xué)習(xí)復(fù)雜的視圖控制。這樣做的另外一個好處是，訪客的ID形象可以采用只有4個角度的2D形象，簡化了數(shù)據(jù)。

3.3D模型只做到柜臺級，產(chǎn)品展示仍然使用2D界面，在彈出窗口中，以圖像列表的形式展示。

4.各功能模塊的界面，例如ID間的對話等，也是采用2D風(fēng)格。大部分功能模塊以泊塢窗的形式隱藏在屏幕邊緣，在必要時可以彈出，或者采用浮動窗口的形式。

5.ID形象采用只有4個角度的2D風(fēng)格形象，可以帶有圖形和文字說明，這一點很像游戲風(fēng)格。

6.盡可能采用直接操作風(fēng)格，例如樓層不用文字菜單，而是Flash動畫來選擇，雖然這在技術(shù)本質(zhì)上區(qū)別不大，但是更直觀且更具有方位感。

三、顧客界面功能模塊

由于本系統(tǒng)采用的是縮放界面，并且用到了社區(qū)和VIP的概念，所以它和傳統(tǒng)商務(wù)網(wǎng)站不同，除了基本瀏覽和購物功能以外，至少還應(yīng)該具有以下特殊的功能模塊:

1.登錄界面。本系統(tǒng)的登陸界面主要有兩個作用。一方面是ID的識別，以便于顧客在社區(qū)中交流，同時也代表VIP的身份，享受VIP的待遇，這是大型商場網(wǎng)站和小型商戶網(wǎng)站的主要區(qū)別之一;另一方面，在登錄的過程中，網(wǎng)站可以對客戶端的硬件水平進行檢測，自動尋求最佳的3D顯示性能設(shè)置，包括模型、貼圖精度，特效的開啟等。

2.ID編輯功能。顧客在登錄以后可以對自己的ID形象和參數(shù)進行自定義。

3.搜索與過濾機制。由于采用的是縮放界面，沒有了層級頁面，因此，搜索機制在此變成了“過濾”。即當(dāng)顧客輸入過濾條件以后，符合條件的對象將在界面中被突出來，其他對象可以被看到，但是呈現(xiàn)灰色而且不可被激活。如果顧客是通過搜索引擎進入此網(wǎng)站，那么他將看到處于過濾狀態(tài)的主頁面。這樣做的目的是避免顧客的注意力只集中在產(chǎn)品本身而無視整個網(wǎng)站，或者從底層頁面直進直出。

4.ID間的交流。在社區(qū)里，ID間的交流界面當(dāng)然是不可少的。除了任意可見ID間的點對點即時通訊以外，這個模塊還應(yīng)該有一些特殊功能，例如允許顧客臨時組建靈活的群，以便一群顧客“一起”逛商場。

5.標(biāo)記點。顧客可以在網(wǎng)站縮放界面上設(shè)立標(biāo)記點，類似于書簽，以便下次進入時快速查找。反過來，這也有利于商場掌握消費者的興趣點，從而做出有針對性的銷售策略。標(biāo)記點也許可以作為留言板來使用，顧客甚至可以定義哪些顧客ID有權(quán)訪問這些標(biāo)記點。

6.顯示控制。除了前文所述在登錄時自動進行3D顯示性能設(shè)置以外，還要允許用戶自行控制界面的顯示設(shè)置，類似于電子地圖的分層顯示控制。

7.廣告界面。由于采用了與現(xiàn)實場景一致的縮放界面，所以廣告的表現(xiàn)形式會發(fā)生變化，而且會同時存在很多形式。例如模型上的貼圖，浮動窗口，滾動字幕即時廣告等。

四、商場員工界面設(shè)想

商場的員工在使用這個系統(tǒng)的時候所面臨的任務(wù)和顧客是不同的，而且具有不同職務(wù)的員工其任務(wù)也不相同。但是，商場的員工和顧客一樣，在網(wǎng)站技術(shù)方面都是非專業(yè)的，因此同樣要盡量降低操作難度，筆者的設(shè)想是與顧客界面盡可能保持一致。

員工在登錄以后，所看到的界面應(yīng)該與顧客界面相同。不過，由于任務(wù)不同，所以在功能模塊上有一些差異，主要表現(xiàn)在：

1.員工在登錄的時候使用的ID和消費者是一樣的，只不過員工和消費者的ID權(quán)限不同，不同職務(wù)的員工其ID權(quán)限也不相同。另一方面，員工本身也可能以消費者身份訪問網(wǎng)站，因此在登錄界面上會多出一個“員工／顧客”的選擇。

2.以員工身份登錄以后，也可以和其他ID進行交流，但是ID形象是不能自定義的，以示和顧客的區(qū)別。

3.員工可以訪問顧客留在自己權(quán)限范圍內(nèi)的標(biāo)記點，并在標(biāo)記點上留言。

4.員工看到的產(chǎn)品展示界面和顧客看到的相同，但是可以看到一些被隱藏的信息。員工同時有一定的編輯權(quán)限，而且是直接在產(chǎn)品展示界面上編輯，入口即出口，所見即所得，而不是在另外的后臺程序里面編輯。

5.某些員工ID具有廣告發(fā)布能力，除了模型貼圖里的廣告可以采用上面的“入口即出口”的方法進行編輯以外，還要有一個單獨的廣告發(fā)布界面用于控制其他形式的廣告，如浮動窗口廣告。

五、網(wǎng)站后臺的其他問題

除了顧客界面和員工界面以外，此系統(tǒng)應(yīng)該還具有一個場景修改后臺界面，用于在數(shù)據(jù)庫中管理和修改場景模型和貼圖坐標(biāo)等元素。另外，此界面形式下的VIP機制也是很值得深入研究的課題。例如:后臺自動管理VIP積分，VIP消費習(xí)慣跟蹤等。

參考文獻：

[1]Jef Raskin:人本界面[M].北京:機械工業(yè)出版社，2004.1

[2]David Lewis:新消費者理念[M].北京:機械工業(yè)出版社，2002.1

[3]Alan Cooper:軟件觀念革命[M].北京:電子工業(yè)出版社，2005.6

[4]Richard Rouse III:戲設(shè)計原理與實踐[M].北京:電子工業(yè)出版社，2003.10

[5]Don A Norman:設(shè)計心理學(xué)[M].北京:中信出版社，2003.10

[6]Terry Winograd:軟件設(shè)計的藝術(shù)[M].北京：機械工業(yè)出版社，2005.1

“本文中所涉及到的圖表、注解、公式等內(nèi)容請以PDF格式閱讀原文”