QQ應用中心改版最佳化全過程

來源:互聯網
上載者:User

 

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

  背景

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

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

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

  使用者

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

  用研資料來源 《應用中心首頁活躍與流失使用者調研報告》 by jolinjin

  情境

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

  關於“瀏覽”:讓使用者更快速找到商品;

  關於“選擇”:讓使用者更容易做出選擇;

  關於“體驗”:讓使用者的購物體驗更專註,更愉悅;

  方法

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

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

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

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

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

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

  —————我們從使用者、情境推匯出設計目的和設計方法,下面來說說怎麼實施————

  簡形:減少冗繁

  陳列師改造商場的第一步,建立資訊條理,整理結構,減少多餘的冗繁,把顧客從迷宮般的複雜結構中解放出來。

  結構

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

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

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

  元素

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

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

  層次

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

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

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

  飾意:添加變化

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

  節奏

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

  解決:在應用中心舊版的左右結構中插入通欄的版式,適當打斷使用者瀏覽的視線,產生閱讀的節奏感。

  情境

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

  點綴

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

  成果:上線後,top20熱門排行榜安裝量提升14%,日安裝提升1萬。

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

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

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

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

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

  改版成績

  未來計劃

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

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。