周杰倫新歌刷屏上熱搜,音樂類小程序視覺設計怎麼做?

2020-12-21 優逸客教育

昨天零點我們期待已久的周董的新歌《Mojito》上線了,一早便立刻刷屏朋友圈,上線十小時售出超250萬張數字專輯。古巴、老爺車、Salsa舞,整首歌充滿了拉丁風情,節奏輕快,很適合夏天聽,還沒有聽的小夥伴可以先來欣賞一下吧~

周董的音樂可以說是所有80後、90後的童年回憶了,音樂作為傳遞情感的媒介,幾乎每個人的生活都離不開音樂,音樂能夠陪伴我們人生的任何一個階段,或喜或悲。

而說到音樂的影響力不得不說,如今人們獲取音樂的方式愈加便捷,音樂軟體也層出不窮,各類APP也為大家提供了不少方便,但即便如此,音樂小程序仍舊是不可或缺的,小程序更加便捷,且不需要佔取太多內存依然可以滿足用戶對於音樂獲取的需求。

之前發表過一篇關於如何設計小程序的文章(沒看過的同學,可以抽時間再看一下。連結在文末哦),在此基礎上,運用理論邏輯推理,對網易雲音樂的小程序進行了重設計,期待大家的交流。

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

01- 改版背景 -

結構層與表現層

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

02- 改版方向 -

1) 調整樓層模塊的結構

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

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

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

4) 適應平臺特徵

5) 方案總結

03- 改版細節 -

1、首頁效果

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

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

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

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

第三是滿足「榜單」喜好群體的訴求,最輕鬆的播放體驗,隨心聽避免選擇。

第四是從商業角度出發,當用戶能夠觸發到精品音樂時,觸發「購買流程」增加付費轉化。

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

電臺Tab欄在電臺Tab下保留了「電臺推薦」「精品內容」「創作翻唱」,

首先是從推薦的角度出發,幫助用戶「無壓力的體驗」不需要讓用戶在去花時間找尋電臺;

第二是保留了付費相關的內容,我們不僅要用戶在小程序中體驗免費電臺,也需要引導用戶在APP中購買付費產品,獲得更好的付費體驗;

第三就是保留「創作和翻唱」的原創模塊,迎合年輕群體或者說對原創有「癖好」的用戶群體。

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

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

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

3、音樂播放頁

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

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

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

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

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

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

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

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

4、搜索結果

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

同時在APP中我們發現搜索結果頁保留了底部Tabbar,在小程序中,為了保留更純粹更專注的用戶體驗,隱藏了Tabbar。

搜索在APP中是置於標題欄位置,那麼在小程序中,為了更大面積的體現搜索條,較少和小程序固定入口的幹擾,增加標題,對搜索跳進行了下移。

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

5、登錄頁

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

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

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

04- 總 結 -

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

APP「移植」到微信小程序,要符合小程序輕量化的平臺特徵,不是一味的減少就是最好在儘可能的「裁剪」不必要的不符合的功能的同時,也要考慮到用戶的體驗和使用場景及感受;

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

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

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

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

相關焦點

  • 周杰倫凌晨發新歌刷屏,又雙叒叕把伺服器搞崩了!
    在沒有微博熱搜的日子裡,這首歌依然在社交網絡刷屏,300多萬人提前預約,一小時內銷量破100萬,截至12日中午12:37,《Mojito》的銷量已突破258萬張……有網友調侃,如果「周杰倫新歌mojito是熱搜第一的話,QQ音樂崩了應該是第二個熱搜」。
  • 周杰倫新歌刷屏,又把QQ音樂搞崩了!
    來 源丨本文綜合自:每日經濟新聞、中國新聞網成都商報、齊魯晚報、Tech星球、盒飯財經等今天,相信很多人的朋友圈都被周杰倫新歌刷屏——沒錯,年更博主周杰倫又發新歌了!——《Mojito》。那麼,周杰倫這次單曲的銷量如何?截至今日上午11點分,《Mojito》在QQ音樂上共售出2372489張,在酷狗音樂共售出247329張,在酷我音樂共售出22744張,三大平臺共售出2642562張,按照每張3元計算,銷售額共計7927686元。雖然銷量依舊客觀,但這首《Mojito》評論卻兩極化。
  • 周杰倫新歌刷屏 又把QQ音樂搞崩了!有人說好聽 有...
    今天,相信很多人的朋友圈都被周杰倫新歌刷屏——沒錯,年更博主周杰倫又發新歌了!——《Mojito》。   有人說周杰倫發新歌就像「過年」,所以稱之為「過周年」;QQ音樂買歌叫「買年貨」,發朋友圈叫「周年慶」。
  • 聽完周杰倫新歌,我更想你了
    6月6日凌晨2點,周杰倫在社交平臺上曬出與愛車的合影,並配文稱「下禮拜有新歌聽了」。這次周杰倫沒有鴿大家,今天凌晨00:00,周杰倫發布最新單曲《Mojito》。即使微博熱搜停更,這首單曲仍然刷屏了你我的朋友圈。新歌發布之後,QQ音樂也不負眾望地,崩了。
  • 聽完周杰倫新歌,我更想你了|周杰倫|華語樂壇|mojito|昆凌
    啊,我可真箇「平平無奇」的《可愛女人》~1.這杯mojito帶來的快樂,與酒精無關有人說,世界上最漫長的等待,莫過於等周杰倫發新歌出新專輯。6月6日凌晨2點,周杰倫在社交平臺上曬出與愛車的合影,並配文稱「下禮拜有新歌聽了」。
  • 周杰倫發新歌伺服器崩了,網友:歌詞清楚了青春模糊了……
    在沒有微博熱搜的日子裡,這首歌依然在社交網絡刷屏,300多萬人提前預約,一小時內銷量破100萬,截至12日中午12:37,《Mojito》的銷量已突破265萬張……有網友調侃,「如果周杰倫新歌mojito是熱搜第一的話,QQ音樂崩了應該是第二個熱搜」。
  • 我的青春叫周杰倫!周杰倫新歌《Mojito》QQ音樂首發強勢刷屏
    6月12日零點,出道20年的周杰倫在QQ音樂為眾多傑迷送上了一杯充滿古巴風情的《Mojito》。新歌上線前,QQ音樂開放的預約渠道已聚集了300萬粉絲,而在《Mojito》釋出後不到30分鐘,新歌已火速積攢超5萬條評論,截至目前,該單曲銷量已接近400萬張,獲得QQ音樂雙鑽石唱片認證。
  • 下禮拜周杰倫將迎來新歌,粉絲期待表示:要說話算數
    20年的時候毅然已經過去,周杰倫的新歌發布已經能引來廣大的關注,像去年九月份的《說好不哭》發布就一度讓QQ音樂直接崩潰,上線2小時候銷售破千萬,甚至在不到10個小時的時間裡登頂各大榜單第一,這首歌刷屏了所有人的朋友圈,而且還承包了當晚的熱搜。
  • 《Mojito》周杰倫新歌終於上線!
    6月12日周杰倫發布新歌《Mojoto》,瞬間就上了熱搜,在QQ音樂熱門搜索排行榜排名第一。唱片銷售量更是達到了260多萬張,暢銷榜周榜第一名。這首新歌有種周杰倫當年的感覺,旋律優美。這首歌在QQ音樂,酷狗音樂,酷我音樂和咪咕音樂同步上線,MV讓人置身於這個夏天的古巴街頭,異國情調的服飾以及獨特的樂器演奏更是為這首歌增添了許多色彩。有感的節奏讓你不知覺就會隨著這首歌跳動起來,這次更是將奶茶換為了雞尾酒。搭配上夏天的藍天白雲,讓整首歌更加豐富多彩。
  • 周杰倫新歌mojito歌詞內容介紹,滿滿的拉丁風情!
    周杰倫新歌mojito,最好的青春就是20年後依然有Jay的陪伴。6月12日零點,周杰倫新歌《Mojito》正式首發上線,歌曲MV也同步曝光,引發大批傑迷在線狂歡。古巴哈瓦那街頭、老爺車、歡快的舞蹈,青春氣息滿滿,讓人忍不住想跟著音樂舞動起來。
  • 周杰倫2020最新單曲《mojito》正式上線酷我音樂 刷新多項紀錄
    新歌一經上線便引發全民刷屏,微博熱搜被新歌瞬間佔據,同時這首洋溢著古巴風情的拉丁曲風,人氣爆棚收割了酷我音樂一系列榜單。     同時,本次新歌《Mojito》迅速屠榜全網各大平臺,酷我音樂新歌榜、專輯銷售榜日榜等榜單不斷刷新,或將又破歷史,成為周杰倫刷榜酷我音樂的又一首單曲。
  • 循環播放周杰倫新歌Mojito的第二天,你想起了多少關於青春的故事?
    是什麼讓一群中年人等到凌晨, 午夜刷屏? 是周杰倫啊! 12日凌晨零點, 周杰倫的最新單曲《Mojito》正式上線!
  • 周杰倫新歌《Mojito》深夜上線 MV裡的這些隱藏細節你都看懂了嗎?
    周杰倫新歌《Mojito》深夜上線 MV裡的這些隱藏細節你都看懂了嗎?時間:2020-06-12 15:40   來源:北晚新視覺網   責任編輯:沫朵 川北在線核心提示:原標題:周杰倫新歌《Mojito》深夜上線 MV裡的這些隱藏細節你都看懂了嗎? 今天凌晨!周杰倫發新歌了!
  • 「吃下」周杰倫的QQ音樂,顯然比假面騎士還能打
    不出意外的話,昨晚臨睡前大家朋友圈或多或少都被周杰倫新歌《說好不哭》的付費界面截圖刷屏,而微博上#周杰倫新歌說好不哭#的話題,也很快就成為熱搜榜首。還有不少網友反映,昨晚一打開該歌曲QQ音樂就出現崩潰,也不知是不是在線聽同一首歌的用戶太多,令其伺服器都發生了擁擠的問題。
  • 老虎堂:周杰倫新歌刷屏,暢飲夏天和青春的《Mojito》
    老虎堂:周杰倫新歌刷屏,暢飲夏天和青春的《Mojito》 2020-06-19 10:53:07   來源:網絡
  • 周杰倫發布最新單曲《說好不哭》火速刷屏
    據悉,近年周杰倫發售新歌較少,此次距上一次發新歌也已1年。《說好不哭》這首單曲上線後,不到兩小時銷量即破千萬。周杰倫發布新歌《說好不哭》引發熱議。17日凌晨,方文山在微博發文表示:「周同學這首超耐聽情歌《說好不哭》,歌詞上或許少了些場景與畫面感,詞意偏向敘事走心風格,自己覺得蠻合適的,希望你們也喜歡......
  • 我的青春叫周杰倫!周杰倫新歌《Mojito》強勢刷屏
    6月12日零點,出道20年的周杰倫在QQ音樂為眾多傑迷送上了一杯充滿古巴風情的《Mojito》。新歌上線前,QQ音樂開放的預約渠道已聚集了300萬粉絲,而在《Mojito》釋出後不到30分鐘,新歌已火速積攢超5萬條評論,截至目前,該單曲銷量已接近400萬張,獲得QQ音樂雙鑽石唱片認證。從00年到現在,沒想到當年這位愛藏在帽衫裡、唱歌還老是被吐槽「吐字不清」的男孩,就這樣陪伴、見證了大家青春的每時每刻。
  • 愛妻號周杰倫新歌MV裡沒女主角,婚戒無時無刻戴無名指上
    6月12日零點之後,網絡社交平臺被周杰倫引爆。周杰倫全新數字單曲《Mojito》於零點正式上線,隨即刷屏微博、朋友圈和各大音樂App。就問你的朋友圈裡有沒有被刷屏!官方數字顯示,不到零點,已有超過300萬人在等待他的新歌。造成這些轟動只有一個原因——周杰倫。粉絲的購買熱情甚至使付費音樂App一度癱瘓。而在周杰倫新歌再次成為爆款,吸引大量音樂平臺用戶付費購買的背後,或許意味著中國用戶音樂付費時代已經到來。
  • 當性感周杰倫遇上感性QQ音樂,調配出「我一直在這裡」的青春 Mojito
    6月12日0點,預約量突破300萬人次的周杰倫新歌《Mojito》及MV在QQ音樂正式上線,即刻佔據QQ音樂熱搜Top 1。一時間微博、朋友圈,乃至整個音樂、娛樂、網際網路圈都被周杰倫刷屏。從2014年周杰倫攜手QQ音樂推出中國音樂史上第一張數字專輯《哎呦,不錯哦》開始,多年來,周杰倫每次發新歌,以QQ音樂為核心陣地的整個網絡,都
  • 周杰倫全年174次熱搜,壓過了王一博卻沒超過肖戰,微博買房了?
    19年已知榜單中的十大熱搜人物,第一名居然是「過氣明星」周杰倫。要知道,這個榜單的給予者現在的日均搜索請求量已突破 8 億,2019年巨火的帶貨一哥李佳琪也只能屈居第二名的位置。那麼微博又是什麼情況呢?不查不知道,一查嚇一跳,2019年中肖戰186次熱搜數,易烊千璽175次,周杰倫174次,王一博158次,王源117次。這幾個男人怕是在微博熱搜上買了房吧?