網(wǎng)易云音樂交互細節(jié)分析

前言:學習了交互設計課程后悬垃,為了避免眼高手低,筆者決定通過學習一些優(yōu)秀產(chǎn)品的交互設計占卧,總結(jié)出好產(chǎn)品好的原因遗菠,并加以運用到實際工作中去。此外华蜒,只有當你明白好產(chǎn)品好在哪里辙纬,才能更科學的改進差產(chǎn)品。因此叭喜,筆者首先選取了口碑較好的網(wǎng)易云音樂進行分析贺拣。

網(wǎng)易云音樂的產(chǎn)品體驗報告、分析報告實在不少捂蕴,所以一些例如優(yōu)雅的黑膠唱片設計譬涡、反饋及時的小秘書等產(chǎn)品閃光點我就不再一一贅述,本文將更多的從交互設計細節(jié)來分析啥辨。

軟件版本:網(wǎng)易云音樂 4.1.1

使用設備:iphone7

操作系統(tǒng):ios11.1.1

體驗時間:2017-11-14

產(chǎn)品框架圖:


結(jié)構(gòu)框架圖


一涡匀、讓我思考良多的“我的音樂”

筆者把“我的音樂 ”中的相關(guān)功能重新分類,結(jié)果如下圖所示:

左圖為常規(guī)分類委可、右圖為云音樂分類

可以看到最大的區(qū)別有兩處:

1渊跋、電臺和歌單的歸屬

無論是訂閱的電臺還是用戶自己創(chuàng)建的歌單本質(zhì)上都應歸入收藏腊嗡,即按照左圖歸類着倾。但這是不符合產(chǎn)品目標和用戶體驗的。從產(chǎn)品目標來看燕少,網(wǎng)易云音樂是很重視歌單這個功能的卡者,因此相對于收藏的歌手、MV客们、專輯和專欄崇决,要把歌單突出,于是單獨拎了出來底挫。從用戶體驗來看恒傻,訂閱的電臺是時常更新的,用戶會需要經(jīng)常去跟進建邓,所以也單獨拎出來(如圖)盈厘。

從頁面可以看出,歌單和電臺的重要程度也是不同的官边,歌單是直接把內(nèi)容顯示出來沸手,而電臺的內(nèi)容被收到了二級頁面外遇。這樣做有兩個好處,第一契吉,默認歌單“我喜歡的音樂”可以與本地音樂和最近播放平級顯示跳仿,因為從實際使用來說,用戶習慣于選擇這三者來進行收聽捐晶;第二菲语,在用戶不想聽老歌的時候,可以隨手選一個自己喜歡的歌單收聽惑灵,十分方便谨究。但是缺點就是,當收藏和創(chuàng)建的歌單越來越多泣棋,這一頁就會非常長非常擁擠胶哲,所以為了緩和,云音樂做了“展開-收起”功能潭辈。但是擁擠的問題仍然沒有解決鸯屿,導致對歌單的操作放不下,只能被放到左上角把敢。

我的音樂

2寄摆、管理歌單

對歌單的管理包括創(chuàng)建、刪除和排序修赞,網(wǎng)易云音樂將這些操作放在了頁面左上角“更多”中(如圖)婶恼。作為操作鍵,對要執(zhí)行操作的對象-歌單距離卻很遠柏副,是不利于用戶操作的勾邦,降低了產(chǎn)品的可用性。

而因為頁面沒有空閑割择,把當前使用頻次較低的“我的音樂云盤”也塞了進去眷篇。這也是“操作”命名為“更多”的原因吧。而命名為“更多”并不利于用戶理解荔泳,更多給人一種更多內(nèi)容的感覺蕉饼,把操作放在更多中比較牽強。筆者在使用過程中想創(chuàng)建歌單玛歌,也是花了一番功夫抱著嘗試的心態(tài)點擊開“更多”昧港。這里需要一個更好的設計方案。

我的音樂-更多

這里QQ音樂的做法比較好支子,如圖所示创肥,在“我的”同樣顯示了歌單,但是對歌單的操作是通過“我的歌單”標題后面的展開按鈕或者下拉至底部的“管理和恢復歌單”。然后進入二級頁面瓤的,可以進行“添加”和“管理”休弃,一目了然。并且在“我的”頁面圈膏,歌單最多羅列10個塔猾,不會有頁面過長的情況發(fā)生。

QQ音樂-管理歌單


二稽坤、關(guān)于音樂播放器

從整體框架可以看出丈甸,音樂播放器是獨立的一個功能。讓音樂播放器始終位于頁面最高層級可以說是音樂軟件公認的道理吧尿褪,因為用戶對當前播放歌曲的操作(如查看歌詞睦擂、評論、調(diào)節(jié)音量)是很頻繁的杖玲。關(guān)鍵在于顿仇,不同應用對于這個功能的設計方式大有不同。

最常見的設計就是以qq音樂為代表的音樂播放器始終懸浮在底端的設計摆马,見圖一(左)臼闻。這種設計在pc端的音樂軟件中比較常見,如圖二囤采,咪咕音樂網(wǎng)頁版音樂播放器述呐。

這種設計在pc端影響不大,但是在移動端蕉毯,由于頁面空間有限乓搬,這種條形播放器會占據(jù)很大的位置,原本可以在底端放置的標簽欄被擠掉了代虾。qq音樂的做法是把一些內(nèi)容收到了左上角的抽屜式導航进肯。了解過抽屜式導航的應該明白,抽屜里的內(nèi)容很難到達用戶褐着,一些位于抽屜內(nèi)的功能使用率會下降很多坷澡。

而網(wǎng)易云的做法則大大不同(如圖一中),把條形播放器簡化成一個有高低起伏動效的按鈕含蓉,切無論切換到哪個頁面,都始終位于頁面右上角项郊,點擊就可以喚出音樂播放器馅扣。這樣大大節(jié)省了頁面空間,所以有位置可以在底部放置標簽欄着降。這樣比較起來差油,似乎網(wǎng)易云音樂比qq音樂的做法更好一點。其實也不盡然,右上角的一個小icon不夠起眼蓄喇,即使做了動效還是容易被忽略发侵,而且沒有當前播放音樂的信息,不夠直觀妆偏。對于初次使用的用戶刃鳄,可能需要花一定成本去尋找。

更好的做法是蝦米音樂(如圖一右)钱骂,采用了舵式導航叔锐,即突出了音樂播放器的重要性,展示了部分信息(正在播放的音樂專輯封面)见秽;還與標簽欄完美結(jié)合愉烙,讓頁面位置能呈現(xiàn)更多信息。

圖一 ?qq音樂(左)解取;網(wǎng)易云音樂(中)步责;蝦米音樂(右)
咪咕音樂pc端

除了以上三種播放器,筆者在使用微信讀書時發(fā)現(xiàn)了另一種不錯的形式——懸浮于所有頁面的小按鈕禀苦,類似于蘋果的小圓點(如圖)勺择。黃色圓圈內(nèi)是微信讀書的FM頻道收起時的按鈕,當用戶在其他頁面瀏覽時伦忠,按鈕始終懸浮于頁面最上方省核,播放狀態(tài)時會旋轉(zhuǎn),暫停時會靜止昆码,點擊后可以進入頻道气忠。

微信讀書


寫到這里,筆者的感觸是赋咽,當你認為一件事是兩難的旧噪,并且想要在兩者之間有所取舍時(比如突出播放器和節(jié)約空間的取舍),其實可能是有第三條路的(比如蝦米音樂脓匿、微信讀書的做法)淘钟。所以考慮問題時,我們要時常跳出來看看陪毡,有沒有其他的可能性米母。


三、一些交互細節(jié)

1毡琉、節(jié)目標記铁瞒。

后臺會標記電臺收聽的最后一個節(jié)目,當用戶切換電臺或者退出程序后重新回到該電臺桅滋,可以繼續(xù)收聽之前沒聽完的節(jié)目慧耍。

節(jié)目標記

2身辨、分享音樂。

用戶分享時選擇音樂,云音樂沒有讓用戶從曲庫中尋找,而是提供了搜索欄和最近播放的5首歌区宇,這是充分考慮了用戶場景做的決定。我們考慮一下什么時候用戶會分享音樂定庵?就是當用戶正在聽某首歌覺得很棒,那他會立刻分享践美,所以最近播放里會有他想分享的歌洗贰。還有一種情況是用戶想分享此時的心情,所以需要找一首配樂陨倡,這時候用戶一般心里已經(jīng)有比較明確的目標歌曲敛滋,所以只要通過搜索功能就能快速實現(xiàn)目標⌒烁铮可以發(fā)現(xiàn)搜索欄有一些歷史搜索記錄绎晃,而這些記錄與首頁搜索欄的記錄如出一轍,用戶可以很方便的根據(jù)自己的歷史記錄搜索到自己想要的歌曲杂曲。

可以有所改進的是庶艾,在搜索欄可以添加一些心情標簽,一些有該種心情卻不知道分享什么歌曲的用戶可以通過標簽選擇歌曲擎勘。

分享音樂

3咱揍、朋友動態(tài)。

在動態(tài)中棚饵,用戶除了可以對朋友分享的動態(tài)點贊煤裙、評論和轉(zhuǎn)發(fā)以外,還可以把朋友分享的歌曲設為下一首播放噪漾。對于非優(yōu)質(zhì)內(nèi)容硼砰,用戶可以選擇“不感興趣,減少此類推薦”欣硼、“不再顯示推薦動態(tài)”以及舉報等操作题翰。給了用戶更大的自由,讓社交內(nèi)容變得更純凈诈胜。

朋友動態(tài)

4豹障、截屏。

截圖后會自動跳出“分享截圖給好友”(如左圖)耘斩,可以選擇常用社交軟件進行分享沼填,從用戶來看是個很方便的設計,而從產(chǎn)品來看也能增加產(chǎn)品自身的曝光率括授,一舉兩得。不過這個功能其他軟件也有,真正讓我感到云音樂用心之處的荚虚,是在多次截圖但沒有選擇分享后薛夜,跳出提示“可在設置中取消截屏分享提示”(如右圖)。這個功能實際來講使用頻率應該不高(除了像我這樣為了分析狂截圖的...)版述,但是云音樂考慮到了梯澜,并且去做了,所以說細微之處見真章渴析。

截屏


歡迎批評指正晚伙,歡迎補充!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末俭茧,一起剝皮案震驚了整個濱河市咆疗,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌母债,老刑警劉巖午磁,帶你破解...
    沈念sama閱讀 212,454評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異毡们,居然都是意外死亡迅皇,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,553評論 3 385
  • 文/潘曉璐 我一進店門衙熔,熙熙樓的掌柜王于貴愁眉苦臉地迎上來登颓,“玉大人,你說我怎么就攤上這事红氯】蛄” “怎么了?”我有些...
    開封第一講書人閱讀 157,921評論 0 348
  • 文/不壞的土叔 我叫張陵脖隶,是天一觀的道長扁耐。 經(jīng)常有香客問我,道長产阱,這世上最難降的妖魔是什么婉称? 我笑而不...
    開封第一講書人閱讀 56,648評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮构蹬,結(jié)果婚禮上王暗,老公的妹妹穿的比我還像新娘。我一直安慰自己庄敛,他們只是感情好俗壹,可當我...
    茶點故事閱讀 65,770評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著藻烤,像睡著了一般绷雏。 火紅的嫁衣襯著肌膚如雪头滔。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,950評論 1 291
  • 那天涎显,我揣著相機與錄音坤检,去河邊找鬼。 笑死期吓,一個胖子當著我的面吹牛早歇,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播讨勤,決...
    沈念sama閱讀 39,090評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼箭跳,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了潭千?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,817評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎奶躯,沒想到半個月后嘹黔,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體儡蔓,經(jīng)...
    沈念sama閱讀 44,275評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,592評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了吉嚣。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蹬铺。...
    茶點故事閱讀 38,724評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡琐馆,死狀恐怖啡捶,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情与帆,我是刑警寧澤玄糟,帶...
    沈念sama閱讀 34,409評論 4 333
  • 正文 年R本政府宣布,位于F島的核電站郭卫,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏词疼。R本人自食惡果不足惜贰盗,卻給世界環(huán)境...
    茶點故事閱讀 40,052評論 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望书释。 院中可真熱鬧爆惧,春花似錦锨能、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,815評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽鳄袍。三九已至拗小,卻和暖如春哀九,著一層夾襖步出監(jiān)牢的瞬間阅束,已是汗流浹背围俘。 一陣腳步聲響...
    開封第一講書人閱讀 32,043評論 1 266
  • 我被黑心中介騙來泰國打工漾抬, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人挽荠。 一個月前我還...
    沈念sama閱讀 46,503評論 2 361
  • 正文 我出身青樓捏雌,卻偏偏與公主長得像纬傲,于是被迫代替她去往敵國和親算墨。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,627評論 2 350