網(wǎng)易云音樂交互設(shè)計(jì):如何讓用戶感知到個(gè)性化推薦

2016-10-27    資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請點(diǎn)這里網(wǎng)易云音樂交互設(shè)計(jì):如何讓用戶感知到個(gè)性化推薦-IAMUE-交互設(shè)計(jì)學(xué)堂

話說,云音樂是最早做歌單個(gè)性化推薦的——在首頁根據(jù)你的口味推薦歌單,只是一開始絕大多數(shù)用戶都不知道有這個(gè)功能。

為什么呢?因?yàn)槲覀冊谡故旧戏浅5驼{(diào)——在首頁上的表現(xiàn)就是,熱門推薦歌單和個(gè)性化推薦歌單混雜在一起。一般用戶會(huì)以為都是熱門推薦,只有非常細(xì)心的用戶才可能發(fā)現(xiàn),比如你最近聽了不少古典音樂,那在首頁上就會(huì)看到古典相關(guān)的歌單推薦。

網(wǎng)易云音樂交互設(shè)計(jì):如何讓用戶感知到個(gè)性化推薦-IAMUE-交互設(shè)計(jì)學(xué)堂

我們覺得這是我們的一個(gè)特色,應(yīng)該發(fā)揚(yáng)光大,讓更多的用戶感知到。針對這個(gè)問題,我們首頁做了一次改版,將熱門推薦和個(gè)性化(口味)推薦分成兩個(gè)獨(dú)立的欄目,各自配以明確的標(biāo)題,同時(shí)給每一個(gè)口味推薦加上了推薦理由。

網(wǎng)易云音樂交互設(shè)計(jì):如何讓用戶感知到個(gè)性化推薦-IAMUE-交互設(shè)計(jì)學(xué)堂

改版之后,就收到很多用戶反饋:很喜歡你們的個(gè)性化推薦功能!mummm……人的感知就是這么簡單粗暴。

這一版首頁設(shè)計(jì)維持了相當(dāng)長一段時(shí)間。直到某一天,產(chǎn)品再次提出:“我們現(xiàn)在首頁的內(nèi)容太少,滾兩下就沒東西可看了,浪費(fèi)了首頁這么好的位置。我們要在首頁推更多的內(nèi)容給用戶,不光是歌單,還有專輯、MV、電臺(tái)節(jié)目等等,讓云音樂里更多好的資源曝光?!?

設(shè)計(jì):“那原來的個(gè)性化推薦欄目怎么辦?”

產(chǎn)品:“沒有這個(gè)欄目了,之后的首頁欄目按照內(nèi)容類型分,每個(gè)欄目里都有可能出現(xiàn)個(gè)性化推薦的內(nèi)容。”

設(shè)計(jì):“那不又回到之前的老問題了么?用戶感知不到個(gè)性化推薦?!?

產(chǎn)品:“現(xiàn)在用戶應(yīng)該都知道這個(gè)功能了吧?!?

設(shè)計(jì):“……”

看在產(chǎn)品在首頁改版上沉淀了這么久的情分上(通常是情難卻),還是勇敢地面對首頁要改這個(gè)事實(shí)吧。

按照設(shè)想初步繪制的原型:

網(wǎng)易云音樂交互設(shè)計(jì):如何讓用戶感知到個(gè)性化推薦-IAMUE-交互設(shè)計(jì)學(xué)堂

mummm…..左看右看,反正就是看上去變平庸了——和那一票在首頁分類推薦各種內(nèi)容的XX軟件沒啥區(qū)別。雖然我們自己知道,整個(gè)首頁都是個(gè)性化推薦,每個(gè)人看到的首頁都是不一樣的……除了新手引導(dǎo)(一次性的引導(dǎo)容易被忽略),如何讓用戶感知到這件事情呢?

每個(gè)內(nèi)容后面跟個(gè)推薦理由?首頁內(nèi)容變多,布局變緊湊之后就擠不下了。

給每個(gè)口味推薦的內(nèi)容打個(gè)標(biāo)記?畫出原型之后,就覺得太傻太壯觀。

網(wǎng)易云音樂交互設(shè)計(jì):如何讓用戶感知到個(gè)性化推薦-IAMUE-交互設(shè)計(jì)學(xué)堂

點(diǎn)擊進(jìn)入內(nèi)容頁以后出個(gè)toast顯示推薦理由?并不是每個(gè)用戶都想看到這玩意兒的,軟件里現(xiàn)有的各種toast已經(jīng)讓人心累。

網(wǎng)易云音樂交互設(shè)計(jì):如何讓用戶感知到個(gè)性化推薦-IAMUE-交互設(shè)計(jì)學(xué)堂

挖空心思在想哪里還有空間。

這時(shí)候有一種設(shè)計(jì)模式從記憶里浮現(xiàn)出來。微信朋友圈,瀏覽到很下面,想往回滾動(dòng)的時(shí)候,頂部的系統(tǒng)狀態(tài)欄會(huì)短暫地被一個(gè)回到頂部的快捷操作提示替換一下。類似toast,但又沒有toast那么囂張。

網(wǎng)易云音樂交互設(shè)計(jì):如何讓用戶感知到個(gè)性化推薦-IAMUE-交互設(shè)計(jì)學(xué)堂

感覺利用這個(gè)位置去顯示“推薦理由”還算靠譜,好處是沒有干擾主體界面展示。雖然從看見的時(shí)機(jī)上來說晚了一步,但是,至少還有機(jī)會(huì)真真實(shí)實(shí)地用肉眼看到。

網(wǎng)易云音樂交互設(shè)計(jì):如何讓用戶感知到個(gè)性化推薦-IAMUE-交互設(shè)計(jì)學(xué)堂

同時(shí)我們還設(shè)計(jì)了一些其他的功能露出:

比如新用戶還沒有任何口味數(shù)據(jù)的時(shí)候,中間的每日歌曲推薦功能是不可用的,此時(shí)將這個(gè)入口替換成讓用戶設(shè)置初始化口味的功能。

網(wǎng)易云音樂交互設(shè)計(jì):如何讓用戶感知到個(gè)性化推薦-IAMUE-交互設(shè)計(jì)學(xué)堂

又比如把首頁的第一個(gè)tab名稱由“推薦”變?yōu)椤皞€(gè)性推薦”;在首頁下拉出現(xiàn)的背景上顯示“首頁內(nèi)容根據(jù)你的口味生成”,等等。

網(wǎng)易云音樂交互設(shè)計(jì):如何讓用戶感知到個(gè)性化推薦-IAMUE-交互設(shè)計(jì)學(xué)堂

新版上線之后,一大波老用戶反饋來襲:哎呀原來首頁我很喜歡的個(gè)性化推薦功能怎么沒了?mummm……人的感知就是這么簡單粗暴。

不過這個(gè)改版我們已經(jīng)想了很久,方向已定,就不會(huì)因?yàn)橛脩舴答伓赝耍茏龅木褪歉脩粽f明,然后讓時(shí)間去沖淡一切。不知道現(xiàn)在有多少人知道我們首頁的個(gè)性化推薦呢。

產(chǎn)品迭代過程中,如何優(yōu)雅地讓用戶感知到我們的功能特色,是個(gè)永恒的議題。

 藍(lán)藍(lán)設(shè)計(jì)m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù) 

日歷

鏈接

個(gè)人資料

存檔