最近寫了一篇關(guān)于小程序的文章，得到了很多同學(xué)的認(rèn)可，非常感謝。

在此基礎(chǔ)上，運(yùn)用理論邏輯推理，對(duì)網(wǎng)易云音樂的小程序進(jìn)行了重設(shè)計(jì)，期待大家的交流。

改版背景

1. 結(jié)構(gòu)層與表現(xiàn)層

改版的原因主要有2個(gè)，第一是我最近在研究小程序的設(shè)計(jì)規(guī)范以及設(shè)計(jì)方法，第二是平時(shí)使用的「網(wǎng)易云音樂」小程序在使用過程中發(fā)現(xiàn)了一些「問題點(diǎn)」，從用戶的角度以及從行業(yè)調(diào)研反饋，和商業(yè)角度出發(fā)，發(fā)現(xiàn)還是有可以改進(jìn)的方面，所以從不同方面進(jìn)行了優(yōu)化：

改版方向

1. 調(diào)整樓層模塊的結(jié)構(gòu)

2. 缺乏傳承

現(xiàn)有網(wǎng)易云音樂小程序的界面缺乏網(wǎng)易云音樂的品牌傳承，如果不是從幾個(gè)很小的LOGO位置識(shí)別這是網(wǎng)易云音樂的小程序，很難識(shí)別出這是哪家的音樂平臺(tái)。

3. 用戶視角分析網(wǎng)易云音樂的核心產(chǎn)品線

4. 從商業(yè)的角度考慮是否能獲取到微信的流量紅利

5. 適應(yīng)平臺(tái)特征

6. 方案總結(jié)

改版細(xì)節(jié)

1. 首頁效果

去掉了一些「非必要存在的功能」，希望實(shí)現(xiàn)符合小程序特點(diǎn)的應(yīng)用，達(dá)到更加扁平化的，輕量化的的特點(diǎn)，把最核心的業(yè)務(wù)模塊進(jìn)行體現(xiàn)和露出。

歌曲Tab欄

保留了「歌曲推薦」「最新音樂」「精品歌單」「排行榜」4個(gè)模式，

• 第一：很多人聽歌習(xí)慣智能推薦（計(jì)算機(jī)算法實(shí)現(xiàn)）從這個(gè)角度滿足用戶喜好

• 第二：滿足打新的用戶喜好，最新的音樂都能夠及時(shí)在小程序中進(jìn)行收聽

• 第三：滿足「榜單」喜好群體的訴求，最輕松的播放體驗(yàn)，隨心聽避免選擇

• 第四：從商業(yè)角度出發(fā)，當(dāng)用戶能夠觸發(fā)到精品音樂時(shí)，觸發(fā)「購買流程」增加付費(fèi)轉(zhuǎn)化

在首頁的交互設(shè)計(jì)中，保留原有App中，一鍵播放按鈕引導(dǎo)的交互體驗(yàn)；在搜索部分沒有和APP的位置保持一致，因?yàn)闃?biāo)題欄被小程序的固定操作按鈕「占用」，希望露出品牌標(biāo)題，所以進(jìn)行了下移。

電臺(tái)Tab欄

在電臺(tái)Tab下保留了「電臺(tái)推薦」「精品內(nèi)容」「創(chuàng)作翻唱」，首先是從推薦的角度出發(fā)，幫助用戶「無壓力的體驗(yàn)」不需要讓用戶在去花時(shí)間找尋電臺(tái)。

第二是保留了付費(fèi)相關(guān)的內(nèi)容，我們不僅要用戶在小程序中體驗(yàn)免費(fèi)電臺(tái)，也需要引導(dǎo)用戶在APP中購買付費(fèi)產(chǎn)品，獲得更好的付費(fèi)體驗(yàn)第三就是保留「創(chuàng)作和翻唱」的原創(chuàng)模塊，迎合年輕群體或者說對(duì)原創(chuàng)有「癖好」的用戶群體。

彈窗與引導(dǎo)

在小程序中彈窗盡量避免遮擋底部Tab bar，這個(gè)我在上篇文章中也提到了，所以在適配程序彈窗的時(shí)候可以像以下的方式來設(shè)計(jì)；還有就是引導(dǎo)「 添加到我的小程序」的小氣泡，我們可以對(duì)其進(jìn)行一些品牌元素的露出會(huì)，突出品牌基因。

2. 精品內(nèi)容-核心入口引流

在頁面的購買核心功能區(qū)，在APP中能夠直接購買和充值的「非實(shí)體」性質(zhì)的網(wǎng)絡(luò)課程，通俗點(diǎn)講就是網(wǎng)絡(luò)課程類的在微信中是無法進(jìn)行交易的，所以很多產(chǎn)品都在小程序核心的場(chǎng)景中使用了引導(dǎo)文字，引導(dǎo)打開APP來進(jìn)行深度很全面的體驗(yàn)。

3. 音樂播放頁

音樂播放頁是很重要的頁面，小程序的播放頁應(yīng)該更純粹簡(jiǎn)單一些的交互，當(dāng)然現(xiàn)在的網(wǎng)易云音樂的小程序播放頁已經(jīng)很純粹了，但是在實(shí)際運(yùn)用中還是發(fā)現(xiàn)了一些功能的「缺失」，以及交互的問題，比如無法滿足播放音樂的序列瀏覽、無法進(jìn)行收藏等。

功能不是越少越好，而是要「剛剛好」，意思就是要滿足用戶基本的用戶訴求和基本功能；在重設(shè)計(jì)中綜合對(duì)現(xiàn)有小程序交互和APP的交互功能進(jìn)行了提取和精簡(jiǎn)。

第一：收藏喜歡歌曲（頁面中的小桃心入口），此功能的目的是收集用戶在小程序中的收藏習(xí)慣，同時(shí)也可以同步到APP中。

第二：傳播喜歡歌曲的目的就是利用微信紅利流量池分享音樂吸引大量現(xiàn)有或者潛在音樂用戶、所以在這里特別把「分享到微信」的入口進(jìn)行了突出強(qiáng)調(diào)（強(qiáng)引導(dǎo)）；同時(shí)保留點(diǎn)擊屏幕切換歌詞的交互，方便用戶查看歌詞的體驗(yàn)。

第三：APP引流，在評(píng)論部分，不可能把APP中所有的評(píng)論都進(jìn)行體現(xiàn)，而是精選了部分進(jìn)行展現(xiàn)，如果想瀏覽更多則需要進(jìn)入APP。

而當(dāng)用戶觸發(fā)付費(fèi)音樂單曲后，則出現(xiàn)提示彈窗，引導(dǎo)用戶打開APP聽歌：

第四：保留了播放列表的入口，原因是當(dāng)你在使用小程序聽歌時(shí)不只是選擇歌曲單獨(dú)播放而是有一個(gè)心理預(yù)期，希望看到你播放的歌曲順序和下一首要播的是什么歌；因?yàn)椴シ帕斜淼牟僮骱推渌?個(gè)入口不是同一類型的操作，所以在設(shè)計(jì)上把該入口放在了頁面的右上角；小程序的播放列表功能在APP的基礎(chǔ)上進(jìn)行了「瘦身」，為的是讓我們的操作更加的輕量化，比如減少了全部和單獨(dú)歌曲刪除。

Tips：在這里我想說一下，現(xiàn)在很多APP進(jìn)入小程序后，都進(jìn)行了業(yè)務(wù)矩陣的功能細(xì)分，把能夠獨(dú)立支撐的功能獨(dú)立設(shè)計(jì)小程序，更加的專注和細(xì)分（我了解的某些APP如金山貼圖拆分了十幾個(gè)甚至幾十個(gè)小程序），那么在網(wǎng)易云音樂APP的首頁左上角的「聽歌識(shí)曲」功能和播放頁中的「音街」都很適合獨(dú)立做自己的小程序。

4. 搜索結(jié)果

小程序瘦身-僅保留單曲和專輯

為了方便用戶高效聽到喜歡歌星單曲的同時(shí)，又能暢快的聽到系列歌曲，那么專輯的存在就很有必要，至于APP中的 綜合Tab、云村、主播電臺(tái)等等相對(duì)非必須存在的功能可以進(jìn)行適當(dāng)?shù)膭h減，盡量較少非小程序核心需要功能；保持小程序的輕量化的特征，讓用戶更加專注的，簡(jiǎn)單快捷的得到搜索歌曲的結(jié)果。

同時(shí)在APP中我們發(fā)現(xiàn)搜索結(jié)果頁保留了底部

Tab bar，在小程序中，為了保留更純粹更專注的用戶體驗(yàn)，隱藏了Tab bar：

搜索在APP中是置于標(biāo)題欄位置，那么在小程序中，

為了更大面積的體現(xiàn)搜索條，較少和小程序固定入口的干擾，增加標(biāo)題，對(duì)搜索跳進(jìn)行了下移。

播放按鈕

在現(xiàn)有網(wǎng)易云音樂的小程序中，是有單曲播放的引導(dǎo)圖標(biāo)，很好，但是如果我在搜索結(jié)果中想一鍵播放全部歌曲的場(chǎng)景，所以需要保留APP中的「播放全部」功能。

5. 登錄頁

登錄頁設(shè)計(jì)交互中，考慮到小程序的平臺(tái)特性，突出「微信登錄」的入口，去掉App中的其他登錄入口比如蘋果登錄、微博登錄等等；我的頁面如果在不登錄的情況下無法查看頁面中的信息和服務(wù)；同時(shí)去掉了APP中底部紋理的動(dòng)畫效果，目的是減少小程序開發(fā)中開發(fā)包的大小。

6. 我的頁面-我喜歡的音樂

可以同步APP中保存的歌單，當(dāng)你在網(wǎng)易云音樂APP中保存了喜歡的歌曲后，那么也是可以同步到微信小程序中，同時(shí)包括我的電臺(tái)的「訂閱」同時(shí)同步；小程序中的「我喜歡的音樂」頁面進(jìn)行了一些非必要功能的精簡(jiǎn)，只保留了基本的音樂播放及分享入口。在這里要特別說下，就是小程序暗黑模式的適配未來肯定是一個(gè)大面積適配的需求，可想而知當(dāng)你在使用微信暗黑模式下時(shí)，進(jìn)入一個(gè)小程序的Light模式讓人的體驗(yàn)很不友好。

總結(jié)

1. 符合小程序的平臺(tái)屬性+用戶使用場(chǎng)景

APP「移植」到微信小程序，要符合小程序輕量化的平臺(tái)特征，不是一味的減少就是最好。

在盡可能的「裁剪」不必要的不符合的功能的同時(shí)，也要考慮到用戶的體驗(yàn)和使用場(chǎng)景及感受。

2. 市場(chǎng)及用戶調(diào)研+APP的自我分析

在做本次網(wǎng)易云音樂小程序改版之前，我對(duì)主流的小程序和APP都進(jìn)行了大量的雙端調(diào)研，這樣的調(diào)研能夠足夠支撐你前行之路，不會(huì)「偏航」，同時(shí)也要結(jié)合網(wǎng)易云音樂本APP的獨(dú)特優(yōu)勢(shì)做出更加有特點(diǎn)的音樂小程序，保持品牌的一致性。

3. 保持與時(shí)俱進(jìn)的用戶體驗(yàn)

未來小程序還會(huì)不斷的演變和進(jìn)化，也還會(huì)有更好的用戶體驗(yàn)出現(xiàn)，保持ALways Day One的精神，與時(shí)俱進(jìn)就能夠得到更好的用戶體驗(yàn)。