背景

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

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

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

用戶

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

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

場景

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

關(guān)于“瀏覽”：讓用戶更快速找到商品；

關(guān)于“選擇”：讓用戶更容易做出選擇；

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

方法

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

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

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

“形”為外在，“意”為內(nèi)涵

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

簡形是建立條理的過程，而飾意則是添加風(fēng)格理念、突出重點(diǎn)。兩者是反復(fù)交叉、相輔相成、不可分割的平衡關(guān)系。

—————我們從用戶、場景推導(dǎo)出設(shè)計目的和設(shè)計方法，下面來說說怎么實(shí)施————

簡形–減少冗繁

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

結(jié)構(gòu)

問題：頁面中充斥的各式各樣的“假想線”使結(jié)構(gòu)變得凌亂。

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

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

元素

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

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

層次

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

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

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

飾意—添加變化

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

節(jié)奏

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

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

場景

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

點(diǎn)綴

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

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

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

關(guān)于改版理念簡形飾意的感悟

由減而簡，添之以飾；自內(nèi)而外，顯之以形。

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

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

改版成績

未來計劃

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