Tips：以下說的「網易雲音樂小程序」均為重設計嘗試版DEMO

前言

最近寫了一篇關於小程序的文章，得到了很多同學的認可，非常感謝。

在此基礎上，運用理論邏輯推理，對網易雲音樂的小程序進行了重設計，期待大家的交流。

前文回顧：

閱讀文章 >>

改版背景

1. 結構層與表現層

改版的原因主要有2個，第一是我最近在研究小程序的設計規範以及設計方法，第二是平時使用的「網易雲音樂」小程序在使用過程中發現了一些「問題點」，從用戶的角度以及從行業調研反饋，和商業角度出發，發現還是有可以改進的方面，所以從不同方面進行了優化：

改版方向

1. 調整樓層模塊的結構

2. 缺乏傳承

現有網易雲音樂小程序的界面缺乏網易雲音樂的品牌傳承，如果不是從幾個很小的LOGO位置識別這是網易雲音樂的小程序，很難識別出這是哪家的音樂平台。

3. 用戶視角分析網易雲音樂的核心產品線

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

5. 適應平台特徵

6. 方案總結

改版細節

1. 首頁效果

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

歌曲Tab欄

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

• 第一：很多人聽歌習慣智能推薦（計算機算法實現）從這個角度滿足用戶喜好
• 第二：滿足打新的用戶喜好，最新的音樂都能夠及時在小程序中進行收聽
• 第三：滿足「榜單」喜好群體的訴求，最輕鬆的播放體驗，隨心聽避免選擇
• 第四：從商業角度出發，當用戶能夠觸發到精品音樂時，觸發「購買流程」增加付費轉化

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

電台Tab欄

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

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

彈窗與引導

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

2. 精品內容-核心入口引流

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

3. 音樂播放頁

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

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

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

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

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

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

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

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

4. 搜索結果

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

為了方便用戶高效聽到喜歡歌星單曲的同時，又能暢快的聽到系列歌曲，那麼專輯的存在就很有必要，至於APP中的 綜合Tab、雲村、主播電台等等相對非必須存在的功能可以進行適當的刪減，盡量較少非小程序核心需要功能；保持小程序的輕量化的特徵，讓用戶更加專註的，簡單快捷的得到搜索歌曲的結果。

同時在APP中我們發現搜索結果頁保留了底部

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

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

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

播放按鈕

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

5. 登錄頁

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

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

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

總結

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

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

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

2. 市場及用戶調研+APP的自我分析

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

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

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

歡迎關注作者微信：

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 無極五登錄測速_音樂類小程序如何設計？來看網易雲音樂的重設計案例實戰