QQ應用中心改版優化全過程

 

　　編者按：都說思路最值錢，那麼在設計項目中，哪樣的思路是黃金之路呢?今天分享騰訊同學的一篇好文，總結了QQ應用中心改版的整個過程，解決問題的思路非常清晰，最後效果也有顯著改善，推薦苦苦鑽研技術的同學借鑒一下，將這麼好的東西變成自己的。

　　背景

　　舊版的應用中心已經歷了兩年線上運營，這個龐大的運營類平台就像久經微調卻缺乏統一整理的超市，顯現出了種種問題。

　　資源位暴力挖掘，樣式缺乏統一，加上舊版設計已不符合當前日臻主流的扁平化設計趨勢，我們於上半年醞釀並完成了本次應用中心的改版。

　　受限於資源緊張、時間要求高的客觀情況，我們化身為商場陳列師，芟繁就簡、構築氛圍，希望能給用戶帶來一種全新的、如同在精品超市購物般舒適貼心的應用尋找和使用體驗。

　　用戶

　　根據用戶調研、眼動測試、體驗地圖等前期沉澱，我們可以分析出應用中心首頁的主要用戶類型與核心場景特點：他們擁有較為顯著的個人偏好，卻往往沒有具體的目標，傾向於隨性浏覽。此前的用研沉澱表明我們的主流用戶既是有偏好的(主要關注好友在玩和應用分類)，同時又是無目標的(隨便逛逛，看到感興趣的就試試)。

　　用研數據來源 《應用中心首頁活躍與流失用戶調研報告》 by jolinjin

　　場景

　　整個首頁場景的核心，可以劃分為“浏覽應用”與“選擇應用”兩個部分，同時在浏覽和選擇的過程中，感受應用中心的整體氛圍，形成完整的浏覽體驗。

　　關於“浏覽”：讓用戶更快速找到商品;

　　關於“選擇”：讓用戶更容易做出選擇;

　　關於“體驗”：讓用戶的購物體驗更專注，更愉悅;

　　方法

　　我們追求清晰、高效與友好，化繁為簡，打造專注愉悅的體驗。相應地，我們的設計方法，可以提煉為簡形、飾意。通過簡形以建立條理，清晰結構，讓用戶可以快速定位;打磨信息元素，讓用戶對商品的特點一目了然，順利做出選擇;通過飾意，打造沉浸感和代入感，提升整體的購物愉悅度。

　　如同商場陳列師，我們梳理結構，搭配商品，組合分類，裝飾櫥窗，將整理與修飾工作寓於改版之中，用心雕飾。

　　“簡”為減法，“飾”為加法

　　“形”為外在，“意”為內涵

　　——尋求加與減、形與意之間的完美平衡

　　簡形是建立條理的過程，而飾意則是添加風格理念、突出重點。兩者是反復交叉、相輔相成、不可分割的平衡關系。

　　—————我們從用戶、場景推導出設計目的和設計方法，下面來說說怎麼實施————

　　簡形：減少冗繁

　　陳列師改造商場的第一步，建立信息條理，整理結構，減少多余的冗繁，把顧客從迷宮般的復雜結構中解放出來。

　　結構

　　問題：頁面中充斥的各式各樣的“假想線”使結構變得凌亂。

　　解決：我們將原來的4+1結構調整為均等的4等份，強化條理分明、整體清晰的視覺感受。在應用槽位不改變的情況下，減少縱向列數，能讓各個應用信息的展示區域更為寬松透氣，就像貨架間距變寬會讓購物環境更松泛舒適，顯著減少用戶浏覽時的心理壓力。

　　成果：新版柵格讓首頁首屏的安裝量躍升了17%.

　　元素

　　問題：在版面裡編排的圖形元素或文字越多，越容易顯得雜亂無章，降低閱讀效率。

　　解決：我們梳理各個視覺元素之間的關系，按照一定規律去編排要素。歸類，整理，統一，讓每一個貨架、每一個元素都烙上相同的氣息。

　　層次

　　問題：猜你喜歡模塊，過去將推薦理由包覆到推薦結果之內，與用戶先閱讀原因、再閱讀結果的認知順序不符。

　　解決：對信息層次的組織好比疏導交通，巧妙處理可以使信息順暢表達，但失敗的話則會引起堵塞，增加理解成本。新版中我們改變了這種布局，提取出推薦理由，同時也將空間釋放給了推薦應用的更多信息。

　　成果：調整後的猜你喜歡模塊安裝率提升了50%

　　飾意：添加變化

　　應用中心以游戲用戶為主，且收入基本來源於游戲應用，太過於追求簡化與輕量，將無法滿足平台所需求的娛樂、沉浸、帶入等特點。為此我們給頁面添加了諸多變化，並加入更多游戲化的裝飾元素，以中和框架扁平帶來的氛圍不足，增加頁面節奏感與趣味性。猶如在一成不變的陳列架上貼心地飾以點綴，使原本單薄的應用元素鮮活起來，提高應用的整體吸引力。

　　節奏

　　問題：版式毫無節奏的長頁面使得用戶閱讀產生疲憊。

　　解決：在應用中心舊版的左右結構中插入通欄的版式，適當打斷用戶浏覽的視線，產生閱讀的節奏感。

　　場景

　　保證協調性和條理性的基礎上，將版塊的含義和概念可視化，引入場景的概念。通過這種視覺的手段微妙地啟發用戶的感覺及情緒。以精品推薦模塊為例，引入櫥窗的場景，將精品輔以道具和裝飾、撒上細碎彩帶，置於精致的櫥窗之中。

　　點綴

　　解決：設計出符合排行榜功能的象征性圖形,使得版塊得到點綴，進而產生節奏感、動感和視線引導上的變化。在信息量比較大的頁面設計中，有時不需要破壞頁面的版式和柵格，只是在設計中通過重復排列點綴的方法，小元素也能影響整體的氛圍。並且，後期和重構同學討論，又加入了一些動態效果增添趣味性。

　　成果：上線後，top20排行榜安裝量提升14%，日安裝提升1萬。

　　動態效果：http://m.isux.us/open_proj/demo/sisi/demo1.html

　　關於改版理念簡形飾意的感悟：

　　由減而簡，添之以飾;自內而外，顯之以形。

　　在設計過程中，過於追求條理會使整體顯得平淡，為打破這種平淡，則需要為其添加變化。

　　而添加變化後，原有的條理被打破，因此又需要重新整理。如此往復，細細雕琢。設計正是這樣一個反復進行加與減、保持條理與添加變化的過程。

　　改版成績

　　未來計劃

　　未來應用中心的設計優化之旅還很長，下半年對整體項目的品牌宣傳、虛擬形象及用戶成長值的概念設計還會有更深 入的探索和嘗試。結合項目本身，我們在設計實踐過程中挖掘機遇、累積經驗以及收獲成長。同時，也感謝大家在設 計過程中為我們提出寶貴建議，我們將來後續的版本中持續迭代，達到產品設計與體驗，更純粹的“簡形飾意”。