【導(dǎo)讀】一款產(chǎn)品真想設(shè)計(jì)的高端大氣國(guó)際化,就必須讓用戶(hù)有求真務(wù)實(shí)占便宜的感覺(jué)。否則好看不等于好用。就比如這篇文章中的三款音樂(lè)產(chǎn)品,個(gè)頂個(gè)的美,用各種唯美的圖片來(lái)吸引用戶(hù)去聽(tīng)歌,這種邏輯能對(duì)么?在此分享這篇騰訊edc(不貝)的文章。作者用兩句膾炙人口的實(shí)話(huà)總結(jié)就是:革命不是請(qǐng)客吃飯,產(chǎn)品不要美圖泛濫;萬(wàn)水千山總是情,不要圖片行不行?!
筆者身為音樂(lè)產(chǎn)品的設(shè)計(jì)團(tuán)隊(duì)中的一員,也同意這個(gè)道理,并且朝著這個(gè)方向使勁兒設(shè)計(jì)。然而,道理都知道,設(shè)計(jì)卻很糙,要問(wèn)怎么糙?一用嚇一跳。
先從自己說(shuō)起,下面是某Q音樂(lè)產(chǎn)品某時(shí)期的歌單推薦樣式,當(dāng)然了,我們能見(jiàn)到的很多音樂(lè)產(chǎn)品也用著大同小異,換湯不換藥的此類(lèi)推薦樣式。
而下面這個(gè)某度音樂(lè)產(chǎn)品的瀑布流樣式看起來(lái)更加上檔次,頗有Pinterest的設(shè)計(jì)風(fēng)格。
再看看叫賣(mài)很努力的某易云音樂(lè)產(chǎn)品,果然有態(tài)度,灑家很多圖。
看完了中國(guó)互聯(lián)網(wǎng)三座山的音樂(lè)產(chǎn)品的這幾個(gè)例子,大家用腳都能發(fā)現(xiàn)我們面臨的問(wèn)題了,那就是我們成功地動(dòng)用了各種專(zhuān)業(yè)設(shè)計(jì)力量和高雅音樂(lè)品味設(shè)計(jì)了一款款精美的,令人陶醉的,并且鍥而不舍賣(mài)力迭代的——
“ 看圖軟件!!!”
(其實(shí)躺槍的不僅僅是音樂(lè)產(chǎn)品,電商產(chǎn)品的各類(lèi)美圖圖庫(kù)更加讓人心醉神迷,目不暇接,還請(qǐng)自備防彈衣,下回再表。)
槽點(diǎn)既然找到,我就開(kāi)始一本正經(jīng)地揣測(cè)一下出現(xiàn)此類(lèi)問(wèn)題的原因何在,并且誠(chéng)惶誠(chéng)恐地試著提出解決這些問(wèn)題的方案。
part1:我們?yōu)楹芜@樣設(shè)計(jì):
首先,我們想要和盤(pán)托出一堆內(nèi)容給用戶(hù),結(jié)果真的把盤(pán)子也端了出來(lái)。
其次,我們怕用戶(hù)麻煩,所以給了一個(gè)漏斗直插用戶(hù)的耳洞—“全部播放,批量添加”等功能。
再者,我們怕用戶(hù)看不出來(lái)這是一堆什么東西,所以給配了一張精美的圖片,以便幫用戶(hù)具象化腦袋里的東西,比如,80年代必聽(tīng)的歌曲就配了一張犯黃的圖片寫(xiě)了大大的一個(gè)“80”(聰明吧)。
最后,我們甚至怕用戶(hù)看不見(jiàn)這個(gè)盤(pán)子,就放了個(gè)大大的圖片,當(dāng)然不能忘了配一行犀利的英文字體作為點(diǎn)綴,粗中有細(xì),完美無(wú)敵。
依靠上面的設(shè)計(jì)思路,于是交互布局及跳轉(zhuǎn)邏輯設(shè)計(jì)完了,看似么么噠的方案,還原一下草圖:
part2: 用戶(hù)為何不喜歡?
家住深圳南山區(qū)的X先生最近接受了一次令人印象深刻的關(guān)于某Q音樂(lè)產(chǎn)品的體驗(yàn)訪(fǎng)談,他向(設(shè))計(jì)者表達(dá)了和很多用戶(hù)一樣的對(duì)于某Q音樂(lè)產(chǎn)品的看法,大概如下:
首先,歌單主題描述因?yàn)槭謾C(jī)屏幕太小被限制字?jǐn)?shù)了并且還不能跑馬燈滾動(dòng)(這確實(shí)不能),本來(lái)一句話(huà)的描述只能看半句,那就不看了唄,扣一分。
其次,直接全部播放功能會(huì)因?yàn)辄c(diǎn)擊圖片時(shí)誤操作點(diǎn)擊到,打斷正在收聽(tīng)的歌曲,而且會(huì)直接跳到播放頁(yè)面,扣一分,
第三,用戶(hù)根本不知道里面有什么歌曲,為什么要直接播放,給個(gè)理由先,因?yàn)檫@不是電臺(tái)啊,完全不能放心聽(tīng)啊,扣一分。
第四,圖片都是大眼睛美女,到底怎么區(qū)分日韓港澳臺(tái)?扣一分。
第五,這么多圖片,看起來(lái)多像廣告啊,最討厭廣告了,扣一分。
第六,圖片這么多,肯定費(fèi)流量,手下留情扣一分。
第七,一鍵播放肯定更費(fèi)流量,才不要點(diǎn)擊呢,扣一分。
第八,點(diǎn)大圖進(jìn)去會(huì)不會(huì)默認(rèn)播放啊?上面有個(gè)播放按鈕啊,不敢點(diǎn),扣一分。
第九,好不容易看到個(gè)閱讀場(chǎng)景的圖片,感興趣,定睛一看,標(biāo)題是“不吵不鬧,就很好聽(tīng)”,結(jié)果又一張冒著熱氣的圖片寫(xiě)著“下午茶咖啡館最?lèi)?ài)播放的歌曲”,到底聽(tīng)哪一個(gè),糾結(jié),扣一分。
…如果起評(píng)分是十分,那么我們?cè)缇筒患案窳?,什么風(fēng)格延續(xù),大圖獨(dú)有,都是自我褒獎(jiǎng)了。
鼻青臉腫,老實(shí)解決問(wèn)題,作為一款并非全新設(shè)計(jì)的產(chǎn)品,基于用戶(hù)導(dǎo)向設(shè)計(jì)的思路,可以有如下思考:
1.本質(zhì)區(qū)別:音樂(lè)產(chǎn)品區(qū)別于圖片瀏覽產(chǎn)品的方面在于,音樂(lè)要聽(tīng),圖片只要看就行了。
pinterest的瀑布流交互形式,那是為了解決大量圖片瀏覽時(shí)尺寸不一,內(nèi)容雜糅而設(shè)計(jì)的,metroUI的規(guī)則色塊是直接將內(nèi)容動(dòng)態(tài)更新到圖塊當(dāng)中而產(chǎn)生的,并不是樣子貨。
Pinterest網(wǎng)站圖片展示
METRO UI
可以發(fā)現(xiàn),沒(méi)有一個(gè)基于圖片內(nèi)容設(shè)計(jì)的交互形式能充分表達(dá)音樂(lè)產(chǎn)品的特點(diǎn),所以給瀏覽者一個(gè)充分的試聽(tīng)理由是十分重要的。
2.那么什么才是吸引用戶(hù)去點(diǎn)擊一個(gè)歌單或一組內(nèi)容的理由呢?“熟悉而又沒(méi)見(jiàn)過(guò)的內(nèi)容”,就是這個(gè)理由。
因?yàn)檫@很好地滿(mǎn)足了用戶(hù)的新鮮感,同時(shí)也符合用戶(hù)預(yù)期,那么對(duì)于音樂(lè)產(chǎn)品來(lái)說(shuō),熟悉感建立在同一類(lèi)風(fēng)格,流派,歌手,場(chǎng)景等經(jīng)驗(yàn)基礎(chǔ)上,或者建立在耳濡目染,道聽(tīng)途說(shuō)等認(rèn)知基礎(chǔ)上,而新鮮感建立在不同于別人,不同于以往的個(gè)性化意識(shí)上,所以在用戶(hù)點(diǎn)擊一個(gè)按鈕或者條目之前,要充分完成這兩個(gè)方面的設(shè)計(jì)傳達(dá)。
3.理由的形式有哪些?
首先最為直觀(guān)的理由載體就是文本,富有感染力或煽動(dòng)性或具象化的文字能夠激起用戶(hù)點(diǎn)擊的欲望,想一想很久之前的磁帶包裝盒,我們聽(tīng)這個(gè)歌,卻一遍遍地看包裝盒,因?yàn)檫@是唯一的途徑來(lái)了解音樂(lè)背后故事的方式,把音樂(lè)推薦當(dāng)做一本音樂(lè)雜志來(lái)看,應(yīng)當(dāng)將更多的文字直接展示在用戶(hù)面前,文字閱讀的效率要遠(yuǎn)遠(yuǎn)高于圖片,要用充分的熟悉感和共鳴感帶動(dòng)用戶(hù)去嘗試新的內(nèi)容。
其次是熟悉的人物,歌曲都是由人來(lái)創(chuàng)造的毋庸置疑,那么熟悉的人所創(chuàng)造的內(nèi)容基本上可以認(rèn)為是熟悉的,這是社交的熟悉感和偶像的力量所驅(qū)使的自然理由,無(wú)法抗拒。
再次,讓音樂(lè)自己說(shuō)話(huà)。圖片不是罪魁禍?zhǔn)?,?yīng)該是錦上添花,歌曲是有自己的專(zhuān)輯圖片的,這是音樂(lè)所獨(dú)有的產(chǎn)品面貌,既有視覺(jué)又有聽(tīng)覺(jué)的雙重感受,所以,找到合適的方式將音樂(lè)自己的面貌呈現(xiàn)出來(lái),才能做到和而不同的設(shè)計(jì)目的。
4.呈現(xiàn)理由的交互手段有哪些?
設(shè)計(jì)老話(huà)說(shuō)得好,具體問(wèn)題具體分析。筆者本著探討不下結(jié)論不是好孩子,下了結(jié)論也不見(jiàn)得是好孩子的原則,也為了引發(fā)更多設(shè)計(jì)思考和交互方法的創(chuàng)新,這里舉出例子供自己反思也分享給大家:
(1)回歸列表呈現(xiàn)方式,列表可以是如下表現(xiàn)形式:
列表形式的好處在于,對(duì)于內(nèi)容和對(duì)象的呈現(xiàn)更加有序,文本表達(dá)區(qū)域會(huì)更大,點(diǎn)擊區(qū)域更加突出,已讀和未讀狀態(tài)更加明顯,動(dòng)作點(diǎn)擊更加單一。
(2)提取特征標(biāo)簽,錨中用戶(hù)預(yù)期。
通過(guò)結(jié)合音樂(lè)產(chǎn)品的使用場(chǎng)景,用戶(hù)所有的聽(tīng)歌行為其強(qiáng)相關(guān)因素是場(chǎng)合而非時(shí)間或者情感因素,比如用戶(hù)更多的聽(tīng)歌行為發(fā)生在做某件事而同時(shí)聽(tīng)歌來(lái)集中注意力或者放松,而非專(zhuān)門(mén)劃撥出聽(tīng)歌時(shí)間來(lái)聽(tīng)歌,所以,快速找到自己感興趣的音樂(lè)內(nèi)容尤為重要,提取契合用戶(hù)的聽(tīng)歌場(chǎng)景關(guān)鍵詞或者智能判斷用戶(hù)行為比打情感牌要來(lái)的準(zhǔn)確,例如,開(kāi)車(chē),洗澡,上廁所,辦公室,運(yùn)動(dòng),跑步等等關(guān)鍵詞。
(3)提取典型內(nèi)容,引發(fā)用戶(hù)預(yù)期。
例如推薦同一類(lèi)搖滾曲風(fēng)的歌單,應(yīng)當(dāng)直接使用辨識(shí)度最高的歌曲專(zhuān)輯封面來(lái)代表此類(lèi)風(fēng)格,而不要使用主題氛圍圖片,畫(huà)蛇添足,多此一舉。
參考案例,蘋(píng)果APPStore:
(4)動(dòng)作應(yīng)當(dāng)發(fā)生在內(nèi)容之后。
設(shè)計(jì)應(yīng)當(dāng)有耐心,洞房花燭夜,才能掀蓋頭的做法完全不可取,應(yīng)當(dāng)讓用戶(hù)了解到內(nèi)容之后再行給與批量處理的能力選擇,所以,例如全部播放,全部添加,關(guān)注,分享等動(dòng)作一定要在內(nèi)容的底層頁(yè)面才出現(xiàn),否則會(huì)在各級(jí)頁(yè)面造成點(diǎn)擊分流或者場(chǎng)景轉(zhuǎn)移,影響到整體體驗(yàn),避免帶來(lái)產(chǎn)品印象的混亂感和強(qiáng)迫感。
(5)減少層級(jí)感,營(yíng)造輕薄便捷的內(nèi)容呈現(xiàn)方式,減輕用戶(hù)的預(yù)期負(fù)擔(dān)。
參考案例:IOS7中對(duì)于內(nèi)容呈現(xiàn)方式的交互案例
地址:www.apple.com/ios/ios7
有時(shí)候,自己看來(lái)滿(mǎn)意的設(shè)計(jì)實(shí)則漏洞百出,設(shè)計(jì)不是請(qǐng)客吃飯,還得真槍實(shí)彈,貼近用戶(hù),走進(jìn)科學(xué),謝謝收看本期節(jié)目,再見(jiàn)
來(lái)源:i黑馬