前言:學習了交互設計課程后悬垃,為了避免眼高手低,筆者決定通過學習一些優(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)品框架圖:
一涡匀、讓我思考良多的“我的音樂”
筆者把“我的音樂 ”中的相關(guān)功能重新分類,結(jié)果如下圖所示:
可以看到最大的區(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ā)生。
二稽坤、關(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)更多信息。
除了以上三種播放器,筆者在使用微信讀書時發(fā)現(xiàn)了另一種不錯的形式——懸浮于所有頁面的小按鈕禀苦,類似于蘋果的小圓點(如圖)勺择。黃色圓圈內(nèi)是微信讀書的FM頻道收起時的按鈕,當用戶在其他頁面瀏覽時伦忠,按鈕始終懸浮于頁面最上方省核,播放狀態(tài)時會旋轉(zhuǎn),暫停時會靜止昆码,點擊后可以進入頻道气忠。
寫到這里,筆者的感觸是赋咽,當你認為一件事是兩難的旧噪,并且想要在兩者之間有所取舍時(比如突出播放器和節(jié)約空間的取舍),其實可能是有第三條路的(比如蝦米音樂脓匿、微信讀書的做法)淘钟。所以考慮問題時,我們要時常跳出來看看陪毡,有沒有其他的可能性米母。
三、一些交互細節(jié)
1毡琉、節(jié)目標記铁瞒。
后臺會標記電臺收聽的最后一個節(jié)目,當用戶切換電臺或者退出程序后重新回到該電臺桅滋,可以繼續(xù)收聽之前沒聽完的節(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)容變得更純凈诈胜。
4豹障、截屏。
截圖后會自動跳出“分享截圖給好友”(如左圖)耘斩,可以選擇常用社交軟件進行分享沼填,從用戶來看是個很方便的設計,而從產(chǎn)品來看也能增加產(chǎn)品自身的曝光率括授,一舉兩得。不過這個功能其他軟件也有,真正讓我感到云音樂用心之處的荚虚,是在多次截圖但沒有選擇分享后薛夜,跳出提示“可在設置中取消截屏分享提示”(如右圖)。這個功能實際來講使用頻率應該不高(除了像我這樣為了分析狂截圖的...)版述,但是云音樂考慮到了梯澜,并且去做了,所以說細微之處見真章渴析。
歡迎批評指正晚伙,歡迎補充!