體驗(yàn)者：Ronnie
日期：2016-5-9
版本：6.1.0（iOS）
1.總體結(jié)構(gòu)
2.風(fēng)格
QQ音樂主推兩種風(fēng)格的主題。一種為常規(guī)模式，主色調(diào)為白和綠；另一種為夜間模式，主色調(diào)為黑和綠。白綠和黑綠均為相對清爽的配色，對于 QQ 音樂這一類功能相對復(fù)雜的音樂播放器，使用此類配色可使界面更加簡潔。同類競品中的 echo 回聲和豆瓣電臺均使用了該配色。
3.模塊
3.1. 播放模塊
播放功能是一個音樂播放器的核心功能，該場景的用戶體驗(yàn)是否良好在一定程度上 決定了能否抓住用戶痛點(diǎn)。QQ 音樂存在兩種播放模塊的展現(xiàn)形式：①是在歌曲列表中點(diǎn) 擊歌曲進(jìn)入播放的全屏模式，②是在播放過程中無論切換任意頁面，均在底部常駐的播 放條（暫停或停止時也保持停留）。③鎖屏?xí)r顯示的播放插件
全屏模式下，默認(rèn)顯示的除了播放器的基本操作按鍵以外，還顯示了正在播放的一句歌詞、專輯封面、QQ 音樂的部分特殊功能；左劃查看歌曲詳細(xì)信息；右劃查看歌詞。該模式的優(yōu)點(diǎn)在于按照操作頻率的優(yōu)先級將對應(yīng)按鍵由中部向兩側(cè)由大到小排列，給用 戶主次感的區(qū)別；同時將專輯封面用播放光盤的形式展示，體現(xiàn)了復(fù)古感（網(wǎng)易云音樂 使用留聲機(jī)形式，類似）。但不足的是點(diǎn)擊進(jìn)入大部分模塊后，點(diǎn)擊“返回”均直接返回首頁而非播放頁。同時在網(wǎng)易云音樂中很火的評論功能放在了較為隱蔽的位置，這可能 與 QQ 音樂的評論質(zhì)量相對不高有一定關(guān)系，在設(shè)計(jì)產(chǎn)品時將其暫時放在了不顯眼的地方。
播放條模式下，僅僅展示出了一首歌最關(guān)鍵的內(nèi)容——歌曲名、歌手/當(dāng)前歌詞、專 輯、暫停按鍵和歌曲列表。在有限的空間內(nèi)最有效地給予了用戶所需的信息。點(diǎn)擊播放條后可進(jìn)入全屏模式。
鎖屏模式下展示的內(nèi)容如圖 3.1-3。在鎖屏模式下專輯封面占據(jù)了約一半的空間， 個人認(rèn)為考慮到了①使界面不顯得空曠，②專輯封面相對花哨，能吸引用戶注意。而鎖屏模式下有音量控件但APP內(nèi)沒有，可能考慮到了封面界面較為空曠同時簡化用戶操作；APP 內(nèi)由于功能繁多，需要適當(dāng)刪減用處不大的空間（可以通過數(shù)據(jù)埋點(diǎn)的方式得到用 戶點(diǎn)擊率較小的控件）。鎖屏模式的不足在于頂部的時間條、歌曲名稱等被****專輯封面喧賓奪主，不夠引人注意。此外，當(dāng)專輯封面顏色主題為白、灰時，歌詞會看得不夠清晰，可以對背景進(jìn)行虛化處理。
3.2.音樂館模塊
在音樂館模塊中，主要功能被分為了五大塊。
當(dāng)進(jìn)入“音樂館”模塊時（如圖3.2.1-1），首先展現(xiàn)的是“精選”部分，即官方挑 選的最優(yōu)質(zhì)的內(nèi)容（例如根據(jù)用戶習(xí)慣推薦的30首歌曲）、廣告、QQ音樂和唱片方做的 推廣以及定期制作的活動。雖然并沒有相關(guān)數(shù)據(jù)，但可以肯定的是用戶點(diǎn)擊音樂館的次數(shù)是相當(dāng)多的，因此“精選”窗口是一個很好的流量入口，但如何讓用戶不反感也是需 要考慮的，例如推薦綠鉆時應(yīng)當(dāng)與整個界面風(fēng)格及內(nèi)容形成較好的融會。除此之外，“精 選”欄目還會將音樂館中其他****幾個欄目的熱門內(nèi)容，如“熱門歌單”“精選電臺”“MV巔 峰榜”，由于在頁面頂部可切換欄目，因此對應(yīng)的熱門內(nèi)容被調(diào)整至了尾部，既不影響核心內(nèi)容的展示，又增大了展示出的內(nèi)容的點(diǎn)擊率。
在“排行”模塊中（圖3.2.1-2），首先展示的是各種不同類型的榜單，每個榜單顯 示了前三名的曲名，在大體保證頁面不會過長的情況下又最大化吸引了用戶進(jìn)入（部分 歌單提供了“用戶刷榜”功能，吸引腦殘粉使用）。點(diǎn)擊進(jìn)入后（圖3.2.1-3），可查看歌單排名、歌單詳情以及歌詞。歌單信息展示了歌曲三要素（名稱、歌手、專輯），此外還展示了對應(yīng)曲目在歌單的升降趨勢。但此處的交互略有缺陷——當(dāng)點(diǎn)擊下拉菜單按鈕時“更多操作”的界面是由下往上出現(xiàn)的，與人的主觀感受不符。除了巔峰榜以外，特色推薦榜單和全球榜采用并排排放的規(guī)則，其優(yōu)先級明顯低于巔峰榜。
“歌單”欄目主要展示了第三方（加V用戶）自創(chuàng)的歌單，可按照APP內(nèi)的推薦算法展示優(yōu)質(zhì)歌單，也可查看最新生成的歌單。點(diǎn)擊歌單主頁后進(jìn)入歌單列表，列表內(nèi)交互與圖 3.2.1-3相同。此外，還根據(jù)語種、流派等場景創(chuàng)建了分類，用戶可方便地根據(jù)自己的喜好進(jìn)行選擇，自主選擇的余地足，避免了被產(chǎn)品綁架。頂部推薦的內(nèi)容在5月7日晚分別為韓國明星、粵語、電影原聲、英文歌曲四類，這四類的潛在用戶群十分龐大，擊中用戶痛點(diǎn)。但在歌單列表中存在邏輯上的不足：在歌單向下滑動至一半是，出 現(xiàn)了歌單達(dá)人列表，然而歌單達(dá)人與前后的歌單并未能做足夠的過渡，易使用戶產(chǎn)生歧義（在我個人第一次使用時并沒能理解其用意），若在歌單達(dá)人尾部標(biāo)明繼續(xù)列出歌單， 則用戶體驗(yàn)更佳。
“電臺”欄目主要功能是根據(jù)類別隨機(jī)播放歌曲。位于頁面最頂端的顯然還是“熱門”類目，收聽量均在100萬以上。頁面左側(cè)尺子樣式（圖3.2.2-2）的切換條可上下 滑動，切換類目時的動畫效果做的也相對流暢，而電臺類目的排列順序大致是按照點(diǎn)擊量排序的。除此之外，電臺欄目有兩個較人性化的功能：①是可根據(jù)現(xiàn)實(shí)時間推出“上 午”或“下午”電臺；②是有一個“個性電臺”，可根據(jù)個人收聽列表來推薦相似歌曲（當(dāng)然不得不承認(rèn)網(wǎng)易云以及豆瓣電臺的這一功能更受好評）。
MV 欄目的推薦內(nèi)容主要有以下三類：①是最近熱門的歌曲對應(yīng)的MV；②是通過分 析使用此功能的用戶畫像來定向推出更適合某一群體的 MV（例如韓國歌曲、萌妹子歌曲）；③是推廣和QQ音樂官方有合作關(guān)系的MV。從交互上來說，MV欄目中每一個分類均在首頁推送一張大圖和四張小圖（如圖3.2.2-4），這五張圖已經(jīng)占據(jù)了大于一個4寸屏的空間。當(dāng)用戶看完五張圖未找到相關(guān)信息時，又需要向反方向滑動屏幕才能查看“更 多”。若在每一分類的底部設(shè)置“更多”更好。
對于整個音樂館頁面的交互?？傮w上不會讓用戶產(chǎn)生不明白點(diǎn)擊某個操作的意義，但某些細(xì)節(jié)上還需要打磨——例如部分功能需要進(jìn)入第四層才能獲得（假設(shè)用戶需要查 看內(nèi)地歌手的MV，需要依次點(diǎn)擊音樂館——MV——頻道——內(nèi)地才可），在增加了用戶 操作成本的同時還降低了對應(yīng)欄目的點(diǎn)擊率。除此之外，在音樂館內(nèi)任意點(diǎn)開某個界面，均能感受到界面的雜亂。圖過多、顏色過于鮮艷，同時文字較多，字號也不同，用戶的 閱讀壓力陡增。音樂原本能給用戶帶來舒緩的體驗(yàn)，但雜亂的頁面往往適得其反。
3.3. 發(fā)現(xiàn)
發(fā)現(xiàn)功能與音樂館功能相比，區(qū)別在于“發(fā)現(xiàn)”模塊傾向于以自我為中心，主觀地 去尋找一些自己喜歡的資源；或者和好友相關(guān)的內(nèi)容。
首先，“發(fā)現(xiàn)”中的搜索框會默認(rèn)顯示一條近期的熱門歌曲，同時設(shè)置了語音搜索功 能。這與“我的”模塊的搜索框是一樣的。可以看到界面右上角同時存在一個小的搜索 按鈕，在我個人看來，二者的功能并不完全沖突，均可以予以保留：①右上角的搜索按 鈕是全局停留的，除了進(jìn)入設(shè)置界面以及播放以外，其余的使用狀況下無論切換到任意 位置均能進(jìn)行搜索，減少了用戶多余的操作；②搜索框能夠顯示一條熱門歌曲，是一個 非常大的流量入口（用于推廣該首歌曲有很大幫助）。
搜索框下部是查找歌手、查看音樂圈、歌詞海報(bào)三個入口。查找歌手是一個傳統(tǒng)的 搜索方式，從歌手自身屬性來區(qū)分進(jìn)行歸類；音樂圈則類似于微信朋友圈，可以查看歌手或者音樂人的最新狀態(tài)，音樂圈與好友熱播功能均是 QQ音樂對于音樂社交的一個初步嘗試；歌詞海報(bào)可以通過一種文藝的方式讓用戶主動推廣自己高逼格的內(nèi)容，對于產(chǎn)品檔次的提升能起到幫助?！昂糜褵岵ァ惫δ芸勺層脩舨榭醋约旱暮糜衙刻炻牭膬?nèi)容，但 僅僅用好友數(shù)量和其中三個好友的頭像來說明哪些好友在聽顯得單薄，如果直接修改為只顯示好友數(shù)量，雖然依然單薄，但可以簡化界面內(nèi)容。
3.4.搜索
搜索界面分為熱門搜索以及歷史搜索。熱門搜索不但能讓用戶通過近期熱點(diǎn)找到喜愛的歌，還能作為一個引流的工具宣傳內(nèi)容。歷史搜索則相對平庸，沒有亮點(diǎn)但也無明顯缺點(diǎn)，能簡潔地表達(dá)內(nèi)容。
?
3.5. 更多
“更多”頁面大體上按照付費(fèi)內(nèi)容-常用設(shè)置-冷門功能-應(yīng)用介紹的順序由上到下排列。點(diǎn)擊進(jìn)具體信息前均能大體了解該功能的作用。且不論“更多”頁面還是子頁面（如“設(shè)置”界面）均按照類別區(qū)分開，不會給用戶雜亂的感受。
END
