揭開“QQ音樂”交互設計的面紗

我本人一直是網易云音樂的忠實粉絲用戶，這么多年以來用的第一款移動端音樂平臺就是網易云音樂。但是記憶里的QQ音樂貌似更加地具有回憶感，所以我也想看一看這個時代下的QQ音樂能帶給我怎樣的交互體驗，也想比較一下QQ音樂與網易云音樂的獨特之處～

體驗版本：9.7  體驗機型：Huawei Mate20 Pro

一、登錄界面

QQ音樂界面清新、沉浸感十足，一個“9”的大logo，以唱片的形狀作為元素，很好的體現出其音樂APP的特點

登錄頁面

1. 此頁面中交互方式的特點

優：在登陸方式上，QQ音樂只提供QQ和微信兩個登錄方式，而網易云音樂則是采取多渠道方式登錄，QQ音樂這樣的登錄方式無需其他多余操作，可以給用戶流暢的體驗感。

優：同時也在登錄方式上標注了上次登錄的記錄操作，方便用戶想起之前的操作。

缺：但這樣也可能會造成用戶隱私泄露。

2. 與網易云音樂的登錄頁面比較

登陸頁面對比

在登錄注冊界面中，兩者都很能體現自家APP的主題風格：

QQ音樂的界面設計特別的清新，采用了多種顏色，同時也富有設計感，向用戶傳達著自家公司的理念——年輕有活力，讓人眼前一亮。

網易云音樂則采用紅色為自己的主色調，一片紅色汪洋讓用戶產生極強視覺沖擊效果，第一次就能給用戶留下很深刻的印象，讓用戶記住網易云音樂的“紅色”。

在登陸方式上，QQ音樂只提供QQ和微信兩個登錄方式，網易云音樂則采用多渠道登錄；QQ音樂的做法是基于騰訊強大的社交網絡資源，他們對自己的用戶使用量充滿信心，網易云音樂則采用多渠道登錄的方式，能夠吸引到更多平臺的用戶以及新用戶，綁定手機號的方式能夠讓用戶更好的管理自己的賬號安全。

但是對于綁定手機號的方式，對于怕麻煩的用戶可能在這一步就拒絕再繼續往下操作，有可能會造成用戶流失。

二、音樂播放界面

QQ音樂的播放頁有三個部分，分別為歌曲、推薦與歌詞，通過左右滑動的方式進行切換。

播放頁詳情

1. 此頁面中交互方式的特點

優：當對歌曲播放頁面截圖時，頁面就會跳轉至如下——分享音樂卡片，方便用戶對歌曲的分享。

音樂分享卡片

缺：當用戶單擊音樂播放頁面時，頁面會自動彈出如下窗口，QQ音樂的左右滑動不易上手，且用戶單擊也會觸發誤操作 （可能是自己網易云音樂用久了，一時沒切換回來）。

跳出的菜單頁面

優：播放界面最常規的操作是播放/暫停、切歌、循環模式，QQ音樂將這一欄功能置底，放在用戶最容易操作的地方，按用戶操作頻率布局，邏輯清晰，用戶體驗感好。

底部功能欄

2. 與網易云音樂的播放頁面比較

播放頁面對比

從整體布局上看，QQ音樂按鈕布局就顯的比較擁擠，給人一種莫名壓迫感，影響聽歌體驗；網易云音樂的播放界面更簡單整潔，圖標logo更加精致小巧，將整個界面空間映襯的更空曠大方。

在歌詞顯示界面上，QQ音樂在原有基礎之上更加上彈幕和k歌功能，占據歌詞頁面，顯示的歌詞更少，亦是給人緊張的壓迫感。而且k歌功能需要用戶二次下載，可能會影響用戶的體驗（但是對最近喜歡上k歌的我而言，這也慢慢變成一個驚喜的地方，相信能吸引一類典型的用戶）。

網易云音樂則省去個性功能一欄，盡可能多的將歌詞顯示給用戶，欣賞歌詞時應該是很放松的，給用戶足夠的空曠空間，更有呼吸感。

在播放界面之間的切換方式上，QQ音樂選擇左右滑屏切換，滿足用戶的習慣性左右切屏的操作，而且操作簡單易懂，但是個人覺著不容易上手（可能是一種先入為主的觀念）。而網易云音樂采取的是點擊式切屏方式，操作更加簡單，更加給用戶一種清爽的感覺。

三、我的界面

我的頁面集成了賬號信息與自己的聽歌記錄，布局簡潔清新，結合綠色圖標給人特別清新舒爽的感覺，更貼近自然。

我的 界面

1. 此頁面中交互方式的特點

優：類似于其他影音播放軟件，QQ音樂也有自己的最近播放列表，相較其他，這里多了一個“最近播放設置”，可以設置列表內記錄歌曲的數量，最多是200首 。

最近播放設置

優：在播放列表里面，會在歌曲后面顯示聽歌的總次數，記錄用戶自己的數據，方便用戶查看自己的歷史數據，給用戶一種數據透明感。

播放列表

優：點擊個人信息頁，系統會記錄并計算用戶的音樂口味，能將數據反饋給用戶，同時也能記錄那年今日聽歌的記錄，能給用戶帶來驚喜。

個人信息頁

2. 與網易云音樂的個人頁面比較

個人頁面對比

在此界面，QQ音樂以灰白搭配打底，結合綠色圖標給人特別清新舒爽的感覺，更貼近自然。網易云音樂主要以白色打底（夜間模式下為黑色），結合經典網易紅，形成視覺反差，抓住用戶眼球，但也容易造成斷層的感覺。

QQ音樂將個人信息入口、會員入口、簽到入口等等放在這個界面，這些功能入口都是與用戶個人信息息息相關的。這些功能的布局也剛剛好符合“我的”這個詞的定位，讓用戶有歸屬感。而網易云音樂（安卓端）則是將這些功能隱藏在了側邊欄，用戶不大容易找到相關的功能界面。

關于導航欄，QQ音樂和網易云音樂的布局完全相反，前者在頂部欄，后者在底部欄。在一般情況下，用戶的操作空間是手機的下半部分，而QQ音樂選擇把導航欄放在底部，更加限制了用戶的操作空間。相反網易云音樂（安卓端）將導航欄置頂，雖然可能不容易點擊切換界面，但是滑屏切換方式很完美的解決這個問題，為用戶空出更多自由操作空間。

四、搜索界面

QQ音樂擁有強大的搜索引擎，在搜索欄很顯示的告訴用戶可搜索的范圍、條件（音樂、視頻、歌單……）等等信息，簡單明了。

搜索頁面

1. 此頁面中交互方式的特點

優：在輸入方式中，QQ音樂可以在鍵盤輸入的基礎上進行語音輸入，用戶可以切換交互方式。

語音輸入入口

優：搜索欄里輸入內容時，系統會自動進行推薦，并且講關鍵詞進行標綠，干凈整潔。

搜索內容標綠

2. 與網易云音樂的搜索頁面比較

搜索頁面比較

在“搜索”界面，兩者的布局相差無幾，主要是在一些小交互細節上的差異。

QQ音樂擁有強大的搜索引擎，在搜索欄很顯示的告訴用戶可搜索的范圍、條件（音樂、視頻、歌單……）等等信息，簡單明了。網易云音樂則是直接提供用戶示例，根據大數據算法算出近期搜索較多的內容作為搜索欄默認內容，用戶可直接搜索默認內容也可自行選擇搜索內容，更加人性化。

在輸入方式中，QQ音樂在數字鍵盤上增加一個麥克風圖標，用戶可以使用這個功能進行語音輸入，同時也可以堅持鍵盤輸入，給了用戶更大的選擇空間。網易云音樂則只有鍵盤輸入的方式。

在搜索欄里輸入內容時，兩者都會自動顯示與搜索內容相關的信息，但是信息展現的形式不一樣， QQ音樂則是直接以一個新頁面展示相關信息，并為每一條相關內容里的搜索關鍵字標綠，界面更加的清晰；而網易云音樂在一個獨立的覆蓋在主界面之上的小界面顯示，使得界面富有層次感。

五、其他部分

優：當頁面下拉時，會出現如下的動態加載圖標，可以在提示數據緩存的同時，帶來一定程度上的趣味性與靈活。

音樂館頁面

優：底部的推薦icon是會隨著日期的改變而改變，如今天是12月23日，icon內的數字就會變成“23”，這一個細節可以加深用戶的時間觀念。

推薦頁面

缺：沒有獨立的視頻模塊，視頻內容是集成在社交頁面與音樂播放頁面，如果用戶想要看音樂視頻的話上手不是很方便。

動態界面

優：聽歌識曲模塊中的識別效果會動態顯示，中部波浪變化動態顯示聲波效果，很有擬物化特點，對用戶做出反饋。同時也有哼唱識別的功能切換，增加了用戶友好度，同時也包含識別的歷史記錄。

聽歌識曲頁面

優：此頁面是我的頁面的子頁面，增設了兩個特別模式模塊，分別為跑步電臺和親子模式兩種，增加了場景模式的多樣性。

更多頁面

六、思考與總結

目前中國國內的音樂市場已然相對成熟，QQ音樂作為起步最早的一款音樂類產品之一，在早期憑借著QQ和微信社交平臺提供的龐大用戶群體，建立了一片天下。

發展至今，QQ音樂已經涵蓋了極其龐大的功能體系，包括各種風格的音樂曲庫、個性化電臺服務。在后期也逐漸搭建起了音樂交流社區，以明星IP帶動粉絲用戶消費和置入評論互動，不斷提高平臺的用戶活躍度

在前幾個版本的QQ音樂的使用過程中，并沒有對我產生很好的印象，功能結構復雜，框架不明顯，使用體驗極差，但是最近幾個版本更新過后，使我對它的印象煥然一新。

這一版本的感覺是：大方、簡潔、干凈，視覺上秉承了簡潔和輕薄的扁平化設計，白色的默認主題顏色，大方自然，不顯壓抑厚重和累贅感。功能的布局上，比之前幾個版本更加自然化，板塊劃分明確、功能結構清晰，更加符合人們使用的思維習慣。

后續迭代開發上也有較大的潛力，其強大的版權和樂庫資源也將成為其未來最具有競爭力的優勢。

第一篇網絡文章請多指教，在此平臺上希望能記錄自己的成長，也希望大佬們能多多賜教~

 

作者：SlowStep，產品小白一名，目前正在找實習ing……

本文由 @SlowStep 原創發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自Unsplash，基于CC0協議