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

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

改版背景

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

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

改版方向

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

2. 缺乏傳承

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

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

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

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

6. 方案總結(jié)

改版細節(jié)

1. 首頁效果

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

歌曲Tab欄

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

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

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

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

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

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

電臺Tab欄

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

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

彈窗與引導

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

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

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

3. 音樂播放頁

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

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

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

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

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

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

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

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

4. 搜索結(jié)果

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

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

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

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

搜索在APP中是置于標題欄位置，那么在小程序中，

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

播放按鈕

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

5. 登錄頁

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

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

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

總結(jié)

1. 符合小程序的平臺屬性+用戶使用場景

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

在盡可能的「裁剪」不必要的不符合的功能的同時，也要考慮到用戶的體驗和使用場景及感受。

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

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

3. 保持與時俱進的用戶體驗

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