QQ網購2.0規劃改版經驗分享

　　背景與情景決定的事兒 - 兩種導航設計

　　項目中的某天，項目相關人集體會議，就一些設計風格和傳達出的含義做深入探討。 核心爭論點是：如果某個地方，我們不用某種顏色，會破壞網站模式的對應關系。 大家列舉用會帶來的困難，及不用會帶來的問題，互不相讓，直到其中有一位GM說，我覺得大家都太入戲了， 其實用戶根本搞不清楚我們的結構與模式。

　　佐籐可士和也在他的《超整理術》一書中提到過類似的現象：客戶總是覺得顧客已經了解他們的產品了，也覺得顧客一定 會關注他們的廣告，希望基於這個前提做產品的廣告，但其實顧客根本就不了解，或者說沒興趣了解。 其實在日常生活中，每個人都會遇到這種，自己覺得顯而易見，大家都應該明白，但其實很多人不明白的事兒。這來自於大家過去的 經歷體驗不同，對具體事件深入了解不同，以及主動探索的意願不同。

　　就比如：QQ網購是一個什麼都賣的，綜合性商城，這件事情。 項目的任何參與者都會覺得，這是一個顯而易見的事情。當然，如果從首頁進入，用戶從首頁各種類別商品的展示中，也會快速學習到這件事情。但對於直接進入到某個頻道、列表、或商品的用戶呢?不要說，現在大部分的電子商務平台都是什麼都賣的啊，我們針對的不是大多數平台，而是就這個QQ網購平台。在初步方案的用戶測試中，這個問題暴露出來。我們直接打開QQ網購電器頻道頁面，讓用戶開始浏覽，然後給用戶一個購買一罐可樂的任務。不少用戶疑惑了，他們問：這裡不是只賣數碼家電的麼?還賣可樂?

　　按照大多數網站的做法，我們本來是在除了首頁後的其他頁面，都將豎向類目導航收起，留有一個“全部商品分類”的提示。但明顯這個提示並不足夠，很多人覺得，這個應該只是電器城的商品分類。用戶對於事物的理解，相對於從宏觀框架上入手，更多偏向從局部，當前情景下的進行判斷。

　　故事的背景和當前的情景會影響用戶的理解，因此，我們決定為了首頁和內頁，設計不同的導航。

　　信息獲取有效性最大化 - 寬窄版

　　我們以前常常會說，在無限的互聯網世界中。但其實一切都是有限的。比如帶寬，比如顯示屏大小，比如首屏的位置。比如用戶停留在你網站的時間，比如他們滾動滑鼠的次數。

　　而相對於推動用戶改變設備，或研究出革命性技術革新等方式，在原本有限的空間中，通過擴大內容顯示寬度，來擴大有限空間下的信息數量，明顯是一件相對靠譜的事兒。這個靠譜，包含了可行及可達到這兩個層面。

　　回頭想想，現在QQ網購65%以上的用戶使用的屏幕達到了1280及以上的分辨率，而V1版的網購寬度才985pix。算上15pix的滾動條，這 65%的用戶頁面兩邊一共起碼有280pix的空白。這些空白留著干什麼?游泳還是跑馬?這麼奢侈的事兒，暫時還是不合適做的。

　　當然，我們又不能犧牲另外35%喜歡小巧的用戶的使用體驗。那麼，我們起碼就應該有2個或者以上的頁面寬度尺寸，來滿足不同的用戶。並且，鑒於我們做多個尺寸的核心目標，是為了更多的信息內容展示，我們的版本必須是寬版後有內容補充，而非單純的相同數量的信息平鋪(相同數量信息間距加寬)。

　　既然我們說要做多寬度版本，那要多少個版本呢?

　　從技術層面來說，我們有兩種解決方案。一是做固定寬度的幾個版本;二是根據屏幕大小設置寬度下限，而後通過補充內容和調整間距來完全自適應。從技術層面來說，第一種方式明顯簡單很多。

　　我們最終也采取的第一種方式，但下面我想說一些和技術實現無關的問題和理由。 越寬越好麼?

　　我們想要在一屏內，展示更多的信息，從數量角度來說，當然是內容區域越寬，展示的越多。但回歸展示信息的目標，是為了讓用戶有效接收。妨礙用戶接收信息的主要原因，有自主意願和能力范圍。而過寬，將會超出用戶接收信息的視角能力范圍。

　　那大概多寬合適呢?這裡，我們借用一個傳統行業的比例16：9。這個比例被廣泛應用在電影、電視機等影像播放中。它反映出，這個比例是讓人感到舒適而最大程度適合人眼視線范圍的。因此，在設計頁面寬度的時候，我們決定參考這個比例。

　　而既然是16：9的比例，那現在所有的顯示器的寬度都在這個比例內，是否意味著我們可以盡量放東西來充滿每個屏幕呢?也就意味著，我們選擇了一個會出現適合1024、1280、1440、1360、1680……等等尺寸的多版本寬度方案?

　　我們當然不會選擇一個，算柵格和內容對齊方式把交互算死;做多版本大廣告把視覺做死;寫多版本頁面把重構寫死的方案。最終我們只有985pix和1225pix兩個尺寸。

　　這不關乎工作量，我們的焦點再一次聚焦在人的視線范圍。購買電視機的時候，會有客廳的寬度與電視機尺寸的對照參考;去看電影的時候我們也都不喜歡坐在第一排。因為與屏幕的直線距離，直接影響到信息傳遞的有效面積。

　　盡力展現各自的魅力點 - 類目內容差異化

　　首頁作為一個分發器的作用，將不同需求的用戶運送到不同的地方。在首頁上，我們需要展現全站都有哪些內容，以便用戶知道要搭乘哪個鏈接去到相應的地方。理論上，首頁只需要展現各個清晰的入口即可，但就如同人們在現實生活中旅游一樣。只看到一個入口名稱，很多時候不足以讓每個人判斷自己是否想要去這裡，這個時候，需要適當流露一些目的地的美麗風景，才能吸引用戶前去探索。

　　因此，我們多半除了明確的類目導航分類外，還會在首頁使用大量篇幅來展示類目中的精品內容。也就形成了，我們所謂的類目樓層。說到類目樓層的內容，我們通常會想到什麼?相似的結構、熱門關鍵詞、廣告、熱賣、排行榜?這些元素的組合，形成了類目樓層。

　　過去，我們常常使用相同的處理方式來對待這些樓層們。每個樓層都有相同的結構，並且單元模塊放置相同的元素形式。左邊都是熱門關鍵詞、中間都是廣告，右邊都是排行榜，對了下面還都要一排LOGO。如果有哪個樓層的點擊不夠好，就一定是運營經理的問題，別人的點擊都那麼好，怎麼就你負責的類目差呢?

　　在這樣設計後，我們發現，樓層中廣告的指向漸漸變得不同，有的到賣場、有的到列表、有的到店鋪、有的到單品。這個體驗不好，因為相同形式的內容，最終點擊的結果不同，使得操作前，操作不可預知。違法了起碼的交互規則。於是，我們應該怎麼辦? 要求大家統一?當然不是!

　　存在就會有其道理，為什麼都是廣告，會被配置到指向層級、形式完全不同的頁面?再回歸到現實世界，大家都是如何談論起商品的呢?我們會發現，手機都是一款一款的，iphone5還是 GALAXY SIII ;空調都是一個系列的，美的變頻空調;談論衣服，多半會說到某中元素，今年流行蕾絲;而說起化妝品，我們會說，冬季保濕最好的產品。

　　根據人們對於商品的需求不同，大家對於商品的關注角度也不相同。成點、成線、成面。因此我們怎麼能妄想用同樣的元素形式，滿足這麼豐富的需求呢?

　　而另一面，過分不同的框架，會導致頁面混亂，用戶無法歸納規律，而浏覽視線變化過快的問題。

　　於是，我們決定采取基於大體一致的框架下，改變單元模塊中元素形式的方式。整理過去版本模塊的點擊情況及線下用戶的調研後，運動戶外是LOGO，服裝是流行元素，圖書音像則是暢銷排行榜。 盡力展示各個類目的魅力點，以吸引用戶。

　　視覺風格定位 - 大品牌的唯一性

　　通過1.0版本的用研和數據，得出為了讓新用戶對平台快速建立記憶，我們的視覺應該符合以下幾點定位：

　　塑造獨特唯一的品牌印象，避免和國內各大電商一片紅的品牌形象撞車，保留彩色的視覺元素，營造琳琅滿目的豐富運營氛圍，深色的top奠定B商城的品質感，給用戶信賴感。

　　用研結果顯示，潮流型用戶覺得大面積彩色豐富多彩，而品質型用戶對過多的彩色產生不信任感，估在2.0版本保留彩色元素，但大大減少色彩面積，在滿足品質型用戶信賴度的基礎上，保證潮流型用戶的審美需求。

　　根據這樣的確切定位，進行了一場設計風暴，統一的大方向，欄目劃分更加輕盈，質感更加扁平。在色彩定位上，我們通過數據發現70%左右的用戶會通過搜索和豎導航來尋找商品，由此推斷這部分的用戶是有目的購物的用戶， 所以我們無須把這部分已經成為用戶習慣的內容在視覺方面做得過於突出，已經深入人心的固化操作，我們用深色來奠定。搶眼的彩色部分給到運營位，吸引住 30%無明確目的購物或者有目的購物卻被突出色彩廣告所吸引的用戶。

　　每個類目保留獨特的彩色屬性，使用戶更清晰類目定位，並且營造活潑輕松的購物環境。