背景

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

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

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

用戶

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

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

場(chǎng)景

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

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

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

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

方法

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

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

“簡(jiǎn)”為減法，“飾”為加法

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

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

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

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

簡(jiǎn)形–減少冗繁

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

結(jié)構(gòu)

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

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

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

元素

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

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

層次

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

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

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

飾意—添加變化

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

節(jié)奏

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

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

場(chǎng)景

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

點(diǎn)綴

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

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

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

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

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

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

改版成績(jī)

未來(lái)計(jì)劃

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