圍觀實戰(zhàn)項目！QQ應用中心改版優(yōu)化全過程

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

背景

舊版的應用中心已經(jīng)歷了兩年線上運營，這個龐大的運營類平臺就像久經(jīng)微調卻缺乏統(tǒng)一整理的超市，顯現(xiàn)出了種種問題。

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

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

騰訊還有一篇超贊的實戰(zhàn)文，戳：《字體設計實戰(zhàn)！QQ音樂巔峰榜誕生記》

用戶

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

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

場景

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

關于“瀏覽”：讓用戶更快速找到商品；

關于“選擇”：讓用戶更容易做出選擇；

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

方法

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

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

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

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

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

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

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

簡形：減少冗繁

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

結構

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

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

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

元素

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

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

層次

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

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

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

飾意：添加變化

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

節(jié)奏

問題：版式毫無節(jié)奏的長頁面使得用戶閱讀產(chǎn)生疲憊。

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

場景

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

點綴

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

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

動態(tài)效果：http://m.isux.us/open_proj/demo/sisi/demo1.html

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

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

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

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

改版成績

未來計劃

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

既然說到思路，那么就來幾個奇特的思路：

外國的月亮圓是有道理的！
《設計師必看！為什么英文要比中文在設計中顯得高大上》

是廣場舞大媽還是百老匯劇院，關鍵看這個！
《漲姿勢！設計作品中的“廉價感”是如何產(chǎn)生的？》

10年+廣告人的最真實案例！
《設計師必讀！如何從甲方抽象的概念里提煉LOGO創(chuàng)意》

?原文地址：isux.tencent
作者：sissi

【優(yōu)設網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關于優(yōu)設網(wǎng)================
"優(yōu)設網(wǎng)uisdc.com"是國內人氣最高的網(wǎng)頁設計師學習平臺，專注分享網(wǎng)頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量76萬的人氣微博@優(yōu)秀網(wǎng)頁設計 ，歡迎關注獲取網(wǎng)頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網(wǎng)站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設計 微信號：【youshege】優(yōu)設哥的全拼
您也可以通過掃描下方二維碼快速添加：