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