基于縮放界面和ＶＲ的大型商場網站概念設計

[摘要]本文通過介紹筆者所設計開發的一個大型商場網站設計模型，提出了一種結合3維和2維的界面風格，網絡VR技術，來統一現實商場和網絡商場兩個概念模型的方法。

[關鍵詞] 文字層級結構 概念模型 搜索機制 逛商場模式

一、引言

在《大型商場網站設計的主要矛盾與新思路》一文中，筆者提出大型商場的網站可以從以下方向尋求設計創新:利用縮放界面避免分級頁面，強調整體感；對商品進行符合現實的模糊分類;轉化搜索機制，將顧客從當前的搜索購買模式拉回到傳統購買模式，避免“直進直出”模式，強化“逛商場”模式；結合3D和2D的界面風格，利用網絡VR技術，來統一現實商場和網絡商場兩個概念模型。

這意味著完全不同的用戶界面，筆者所設計開發的一個大型商場網站設計模型就是一種可能的實現形式。

二、顧客界面風格：2D、3D，或者2.5D

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

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

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

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

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

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

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

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

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

三、顧客界面功能模塊

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

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

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

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

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

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

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

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

四、商場員工界面設想

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

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

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

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

3.員工可以訪問顧客留在自己權限范圍內的標記點，并在標記點上留言。

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

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

五、網站后臺的其他問題

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

參考文獻：

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

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

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

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

[5]Don A Norman:設計心理學[M].北京:中信出版社，2003.10

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

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