題圖來自電影《音樂之聲》

先聲奪人，想來是最合適形容音樂產(chǎn)品的詞匯了。

騰訊ecd不貝：筆者身為音樂產(chǎn)品的設(shè)計(jì)團(tuán)隊(duì)中的一員，也同意這個道理，并且朝著這個方向使勁兒設(shè)計(jì)。然而，道理都知道，設(shè)計(jì)卻很糙，要問怎么糙？一用嚇一跳。

先從自己說起，下面是某Q音樂產(chǎn)品某時(shí)期的歌單推薦樣式，當(dāng)然了，我們能見到的很多音樂產(chǎn)品也用著大同小異，換湯不換藥的此類推薦樣式。

而下面這個某度音樂產(chǎn)品的瀑布流樣式看起來更加上檔次，頗有Pinterest的設(shè)計(jì)風(fēng)格。

再看看叫賣很努力的某易云音樂產(chǎn)品，果然有態(tài)度，灑家很多圖。

看完了中國互聯(lián)網(wǎng)三座山的音樂產(chǎn)品的這幾個例子，大家用腳都能發(fā)現(xiàn)我們面臨的問題了，那就是我們成功地動用了各種專業(yè)設(shè)計(jì)力量和高雅音樂品味設(shè)計(jì)了一款款精美的,令人陶醉的，并且鍥而不舍賣力迭代的

"看圖軟件！！！"

（其實(shí)躺槍的不僅僅是音樂產(chǎn)品，電商產(chǎn)品的各類美圖圖庫更加讓人心醉神迷，目不暇接，還請自備防彈衣，下回再表）

槽點(diǎn)既然找到，我就開始一本正經(jīng)地揣測一下出現(xiàn)此類問題的原因何在，并且誠惶誠恐地試著提出解決這些問題的方案。

part1：我們?yōu)楹芜@樣設(shè)計(jì)：

• 首先，我們想要和盤托出一堆內(nèi)容給用戶，結(jié)果真的把盤子也端了出來。
• 其次，我們怕用戶麻煩，所以給了一個漏斗直插用戶的耳洞—"全部播放，批量添加"等功能。
• 再者，我們怕用戶看不出來這是一堆什么東西，所以給配了一張精美的圖片，以便幫用戶具象化腦袋里的東西，比如，80年代必聽的歌曲就配了一張犯黃的圖片寫了大大的一個"80"（聰明吧）。
• 最后，我們甚至怕用戶看不見這個盤子，就放了個大大的圖片，當(dāng)然不能忘了配一行犀利的英文字體作為點(diǎn)綴，粗中有細(xì)，完美無敵。

依靠上面的設(shè)計(jì)思路，于是交互布局及跳轉(zhuǎn)邏輯設(shè)計(jì)完了，看似么么噠的方案，還原一下草圖：

part2： 用戶為何不喜歡？

家住深圳南山區(qū)的X先生最近接受了一次令人印象深刻的關(guān)于某Q音樂產(chǎn)品的體驗(yàn)訪談，他向（設(shè)）計(jì)者表達(dá)了和很多用戶一樣的對于某Q音樂產(chǎn)品的看法，大概如下：

• 首先，歌單主題描述因?yàn)槭謾C(jī)屏幕太小被限制字?jǐn)?shù)了并且還不能跑馬燈滾動（這確實(shí)不能），本來一句話的描述只能看半句，那就不看了唄，扣一分。
• 其次，直接全部播放功能會因?yàn)辄c(diǎn)擊圖片時(shí)誤操作點(diǎn)擊到，打斷正在收聽的歌曲，而且會直接跳到播放頁面，扣一分，
• 第三，用戶根本不知道里面有什么歌曲，為什么要直接播放，給個理由先，因?yàn)檫@不是電臺啊，完全不能放心聽啊，扣一分。
• 第四，圖片都是大眼睛美女，到底怎么區(qū)分日韓港澳臺？扣一分。
• 第五，這么多圖片，看起來多像廣告啊，最討厭廣告了，扣一分。
• 第六，圖片這么多，肯定費(fèi)流量，手下留情扣一分。
• 第七，一鍵播放肯定更費(fèi)流量，才不要點(diǎn)擊呢，扣一分。
• 第八，點(diǎn)大圖進(jìn)去會不會默認(rèn)播放啊？上面有個播放按鈕啊，不敢點(diǎn)，扣一分。
• 第九，好不容易看到個閱讀場景的圖片，感興趣，定睛一看，標(biāo)題是"不吵不鬧，就很好聽"，結(jié)果又一張冒著熱氣的圖片寫著"下午茶咖啡館最愛播放的歌曲"，到底聽哪一個，糾結(jié)，扣一分。

…如果起評分是十分，那么我們早就不及格了，什么風(fēng)格延續(xù)，大圖獨(dú)有，都是自我褒獎了。

鼻青臉腫，老實(shí)解決問題，作為一款并非全新設(shè)計(jì)的產(chǎn)品，基于用戶導(dǎo)向設(shè)計(jì)的思路，可以有如下思考：

1.本質(zhì)區(qū)別：音樂產(chǎn)品區(qū)別于圖片瀏覽產(chǎn)品的方面在于，音樂要聽，圖片只要看就行了。

pinterest的瀑布流交互形式，那是為了解決大量圖片瀏覽時(shí)尺寸不一，內(nèi)容雜糅而設(shè)計(jì)的，metroUI的規(guī)則色塊是直接將內(nèi)容動態(tài)更新到圖塊當(dāng)中而產(chǎn)生的，并不是樣子貨。

Pinterest網(wǎng)站圖片展示

METRO UI

可以發(fā)現(xiàn)，沒有一個基于圖片內(nèi)容設(shè)計(jì)的交互形式能充分表達(dá)音樂產(chǎn)品的特點(diǎn)，所以給瀏覽者一個充分的試聽理由是十分重要的。

2.那么什么才是吸引用戶去點(diǎn)擊一個歌單或一組內(nèi)容的理由呢？"熟悉而又沒見過的內(nèi)容"，就是這個理由。

因?yàn)檫@很好地滿足了用戶的新鮮感，同時(shí)也符合用戶預(yù)期，那么對于音樂產(chǎn)品來說，熟悉感建立在同一類風(fēng)格，流派，歌手，場景等經(jīng)驗(yàn)基礎(chǔ)上，或者建立在耳濡目染，道聽途說等認(rèn)知基礎(chǔ)上，而新鮮感建立在不同于別人，不同于以往的個性化意識上，所以在用戶點(diǎn)擊一個按鈕或者條目之前，要充分完成這兩個方面的設(shè)計(jì)傳達(dá)。

3.理由的形式有哪些？

• 首先最為直觀的理由載體就是文本，富有感染力或煽動性或具象化的文字能夠激起用戶點(diǎn)擊的欲望，想一想很久之前的磁帶包裝盒，我們聽這個歌，卻一遍遍地看包裝盒，因?yàn)檫@是唯一的途徑來了解音樂背后故事的方式，把音樂推薦當(dāng)做一本音樂雜志來看，應(yīng)當(dāng)將更多的文字直接展示在用戶面前，文字閱讀的效率要遠(yuǎn)遠(yuǎn)高于圖片，要用充分的熟悉感和共鳴感帶動用戶去嘗試新的內(nèi)容。

其次是熟悉的人物，歌曲都是由人來創(chuàng)造的毋庸置疑，那么熟悉的人所創(chuàng)造的內(nèi)容基本上可以認(rèn)為是熟悉的，這是社交的熟悉感和偶像的力量所驅(qū)使的自然理由，無法抗拒。

• 再次，讓音樂自己說話。圖片不是罪魁禍?zhǔn)祝瑧?yīng)該是錦上添花，歌曲是有自己的專輯圖片的，這是音樂所獨(dú)有的產(chǎn)品面貌，既有視覺又有聽覺的雙重感受，所以，找到合適的方式將音樂自己的面貌呈現(xiàn)出來，才能做到和而不同的設(shè)計(jì)目的。

4.呈現(xiàn)理由的交互手段有哪些？

設(shè)計(jì)老話說得好，具體問題具體分析。筆者本著探討不下結(jié)論不是好孩子，下了結(jié)論也不見得是好孩子的原則，也為了引發(fā)更多設(shè)計(jì)思考和交互方法的創(chuàng)新，這里舉出例子供自己反思也分享給大家：

（1）回歸列表呈現(xiàn)方式，列表可以是如下表現(xiàn)形式：

列表形式的好處在于，對于內(nèi)容和對象的呈現(xiàn)更加有序，文本表達(dá)區(qū)域會更大，點(diǎn)擊區(qū)域更加突出，已讀和未讀狀態(tài)更加明顯，動作點(diǎn)擊更加單一。

（2）提取特征標(biāo)簽，錨中用戶預(yù)期。

通過結(jié)合音樂產(chǎn)品的使用場景，用戶所有的聽歌行為其強(qiáng)相關(guān)因素是場合而非時(shí)間或者情感因素，比如用戶更多的聽歌行為發(fā)生在做某件事而同時(shí)聽歌來集中注意力或者放松，而非專門劃撥出聽歌時(shí)間來聽歌，所以，快速找到自己感興趣的音樂內(nèi)容尤為重要，提取契合用戶的聽歌場景關(guān)鍵詞或者智能判斷用戶行為比打情感牌要來的準(zhǔn)確，例如，開車，洗澡，上廁所，辦公室，運(yùn)動，跑步等等關(guān)鍵詞。

（3）提取典型內(nèi)容，引發(fā)用戶預(yù)期。

例如推薦同一類搖滾曲風(fēng)的歌單，應(yīng)當(dāng)直接使用辨識度最高的歌曲專輯封面來代表此類風(fēng)格，而不要使用主題氛圍圖片，畫蛇添足，多此一舉。

參考案例，蘋果APPStore

（4）動作應(yīng)當(dāng)發(fā)生在內(nèi)容之后。
設(shè)計(jì)應(yīng)當(dāng)有耐心，洞房花燭夜，才能掀蓋頭的做法完全不可取，應(yīng)當(dāng)讓用戶了解到內(nèi)容之后再行給與批量處理的能力選擇，所以，例如全部播放，全部添加，關(guān)注，分享等動作一定要在內(nèi)容的底層頁面才出現(xiàn)，否則會在各級頁面造成點(diǎn)擊分流或者場景轉(zhuǎn)移，影響到整體體驗(yàn)，避免帶來產(chǎn)品印象的混亂感和強(qiáng)迫感。

（5）減少層級感，營造輕薄便捷的內(nèi)容呈現(xiàn)方式，減輕用戶的預(yù)期負(fù)擔(dān)。

參考案例：IOS7中對于內(nèi)容呈現(xiàn)方式的交互案例

地址：http://www.apple.com/ios/ios7/

有時(shí)候，自己看來滿意的設(shè)計(jì)實(shí)則漏洞百出，設(shè)計(jì)不是請客吃飯，還得真槍實(shí)彈，貼近用戶，走進(jìn)科學(xué)，謝謝收看本期節(jié)目，再見。

最后，附贈一篇《電線桿上的用戶體驗(yàn)設(shè)計(jì)》 打通你的任督二脈

原文地址：騰訊ecd
作者：不貝

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計(jì)講座：每月邀請國內(nèi)互聯(lián)網(wǎng)公司設(shè)計(jì)前輩及行業(yè)總監(jiān)在群內(nèi)及YY語音（YY頻道：15335158）分享實(shí)戰(zhàn)經(jīng)驗(yàn)。
設(shè)計(jì)微博：擁有粉絲量47萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：