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

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

揭开“QQ音乐”交互设计的面纱

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

一、登錄界面

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

揭开“QQ音乐”交互设计的面纱

登錄頁面

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

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

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

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

揭开“QQ音乐”交互设计的面纱

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

揭开“QQ音乐”交互设计的面纱

登陸頁面對比

在登錄註冊界面中,兩者都很能體現自家APP的主題風格:

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

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

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

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

二、音樂播放界面

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

揭开“QQ音乐”交互设计的面纱

播放頁詳情

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

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

揭开“QQ音乐”交互设计的面纱

音樂分享卡片

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

揭开“QQ音乐”交互设计的面纱

跳出的菜單頁面

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

底部功能欄

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

揭开“QQ音乐”交互设计的面纱

播放頁面對比

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

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

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

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

三、我的界面

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

揭开“QQ音乐”交互设计的面纱

我的 界面

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

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

揭开“QQ音乐”交互设计的面纱

最近播放設置

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

揭开“QQ音乐”交互设计的面纱

播放列表

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

揭开“QQ音乐”交互设计的面纱

個人信息頁

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

揭开“QQ音乐”交互设计的面纱

個人頁面對比

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

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

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

四、搜索界面

QQ音樂擁有強大的搜索引擎,在搜索欄很顯示的告訴用戶可搜索的範圍、條件(音樂、視頻、歌單……)等等信息,簡單明瞭。

揭开“QQ音乐”交互设计的面纱

搜索頁面

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

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

揭开“QQ音乐”交互设计的面纱

語音輸入入口

優:搜索欄裡輸入內容時,系統會自動進行推薦,並且講關鍵詞進行標綠,乾淨整潔。

揭开“QQ音乐”交互设计的面纱

搜索內容標綠

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

揭开“QQ音乐”交互设计的面纱

搜索頁面比較

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

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

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

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

五、其他部分

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

揭开“QQ音乐”交互设计的面纱

音樂館頁面

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

揭开“QQ音乐”交互设计的面纱

推薦頁面

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

揭开“QQ音乐”交互设计的面纱

動態界面

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

揭开“QQ音乐”交互设计的面纱

聽歌識曲頁面

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

揭开“QQ音乐”交互设计的面纱

更多頁面

六、思考與總結

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

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

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

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

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

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

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

本文由 @SlowStep 原創發佈於人人都是產品經理,未經許可,禁止轉載。

題圖來自Unsplash,基於CC0協議


分享到:


相關文章: