pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

產品設計:萬水千山總是情 不要圖片行不行

產品設計:萬水千山總是情 不要圖片行不行 三聯

  【導讀】一款產品真想設計的高端大氣國際化,就必須讓用戶有求真務實占便宜的感覺。否則好看不等于好用。就比如這篇文章中的三款音樂產品,個頂個的美,用各種唯美的圖片來吸引用戶去聽歌,這種邏輯能對么?作者用兩句膾炙人口的實話總結就是:革命不是請客吃飯,產品不要美圖泛濫;萬水千山總是情,不要圖片行不行?!

  筆者身為音樂產品的設計團隊中的一員,也同意這個道理,并且朝著這個方向使勁兒設計。然而,道理都知道,設計卻很糙,要問怎么糙?一用嚇一跳。

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

  而下面這個某度音樂產品的瀑布流樣式看起來更加上檔次,頗有Pinterest的設計風格。

  再看看叫賣很努力的某易云音樂產品,果然有態度,灑家很多圖。

  看完了中國互聯網三座山的音樂產品的這幾個例子,大家用腳都能發現我們面臨的問題了,那就是我們成功地動用了各種專業設計力量和高雅音樂品味設計了一款款精美的,令人陶醉的,并且鍥而不舍賣力迭代的。

  “ 看圖軟件!!!”

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

  槽點既然找到,我就開始一本正經地揣測一下出現此類問題的原因何在,并且誠惶誠恐地試著提出解決這些問題的方案。

  part1:我們為何這樣設計:

  首先,我們想要和盤托出一堆內容給用戶,結果真的把盤子也端了出來。

  其次,我們怕用戶麻煩,所以給了一個漏斗直插用戶的耳洞—“全部播放,批量添加”等功能。

  再者,我們怕用戶看不出來這是一堆什么東西,所以給配了一張精美的圖片,以便幫用戶具象化腦袋里的東西,比如,80年代必聽的歌曲就配了一張犯黃的圖片寫了大大的一個“80”(聰明吧)。

  最后,我們甚至怕用戶看不見這個盤子,就放了個大大的圖片,當然不能忘了配一行犀利的英文字體作為點綴,粗中有細,完美無敵。

  依靠上面的設計思路,于是交互布局及跳轉邏輯設計完了,看似么么噠的方案,還原一下草圖:

  part2: 用戶為何不喜歡?

  家住深圳南山區的X先生最近接受了一次令人印象深刻的關于某Q音樂產品的體驗訪談,他向(設)計者表達了和很多用戶一樣的對于某Q音樂產品的看法,大概如下:

  首先,歌單主題描述因為手機屏幕太小被限制字數了并且還不能跑馬燈滾動(這確實不能),本來一句話的描述只能看半句,那就不看了唄,扣一分。

  其次,直接全部播放功能會因為點擊圖片時誤操作點擊到,打斷正在收聽的歌曲,而且會直接跳到播放頁面,扣一分,

  第三,用戶根本不知道里面有什么歌曲,為什么要直接播放,給個理由先,因為這不是電臺啊,完全不能放心聽啊,扣一分。

  第四,圖片都是大眼睛美女,到底怎么區分日韓港澳臺?扣一分。

  第五,這么多圖片,看起來多像廣告啊,最討厭廣告了,扣一分。

  第六,圖片這么多,肯定費流量,手下留情扣一分。

  第七,一鍵播放肯定更費流量,才不要點擊呢,扣一分。

  第八,點大圖進去會不會默認播放啊?上面有個播放按鈕啊,不敢點,扣一分。

  第九,好不容易看到個閱讀場景的圖片,感興趣,定睛一看,標題是“不吵不鬧,就很好聽”,結果又一張冒著熱氣的圖片寫著“下午茶咖啡館最愛播放的歌曲”,到底聽哪一個,糾結,扣一分。

  …如果起評分是十分,那么我們早就不及格了,什么風格延續,大圖獨有,都是自我褒獎了。

  鼻青臉腫,老實解決問題,作為一款并非全新設計的產品,基于用戶導向設計的思路,可以有如下思考:

  1.本質區別:音樂產品區別于圖片瀏覽產品的方面在于,音樂要聽,圖片只要看就行了。

  pinterest的瀑布流交互形式,那是為了解決大量圖片瀏覽時尺寸不一,內容雜糅而設計的,metroUI的規則色塊是直接將內容動態更新到圖塊當中而產生的,并不是樣子貨。

  Pinterest網站圖片展示

  MEtrO UI

  可以發現,沒有一個基于圖片內容設計的交互形式能充分表達音樂產品的特點,所以給瀏覽者一個充分的試聽理由是十分重要的。

  2.那么什么才是吸引用戶去點擊一個歌單或一組內容的理由呢?“熟悉而又沒見過的內容”,就是這個理由。

  因為這很好地滿足了用戶的新鮮感,同時也符合用戶預期,那么對于音樂產品來說,熟悉感建立在同一類風格,流派,歌手,場景等經驗基礎上,或者建立在耳濡目染,道聽途說等認知基礎上,而新鮮感建立在不同于別人,不同于以往的個性化意識上,所以在用戶點擊一個按鈕或者條目之前,要充分完成這兩個方面的設計傳達。

  3.理由的形式有哪些?

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

  其次是熟悉的人物,歌曲都是由人來創造的毋庸置疑,那么熟悉的人所創造的內容基本上可以認為是熟悉的,這是社交的熟悉感和偶像的力量所驅使的自然理由,無法抗拒。

  再次,讓音樂自己說話。圖片不是罪魁禍首,應該是錦上添花,歌曲是有自己的專輯圖片的,這是音樂所獨有的產品面貌,既有視覺又有聽覺的雙重感受,所以,找到合適的方式將音樂自己的面貌呈現出來,才能做到和而不同的設計目的。

  4.呈現理由的交互手段有哪些?

  設計老話說得好,具體問題具體分析。筆者本著探討不下結論不是好孩子,下了結論也不見得是好孩子的原則,也為了引發更多設計思考和交互方法的創新,這里舉出例子供自己反思也分享給大家:

  (1)回歸列表呈現方式,列表可以是如下表現形式:

  列表形式的好處在于,對于內容和對象的呈現更加有序,文本表達區域會更大,點擊區域更加突出,已讀和未讀狀態更加明顯,動作點擊更加單一。

  (2)提取特征標簽,錨中用戶預期。

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

  (3)提取典型內容,引發用戶預期。

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

  參考案例,蘋果APPStore:

  (4)動作應當發生在內容之后。

  設計應當有耐心,洞房花燭夜,才能掀蓋頭的做法完全不可取,應當讓用戶了解到內容之后再行給與批量處理的能力選擇,所以,例如全部播放,全部添加,關注,分享等動作一定要在內容的底層頁面才出現,否則會在各級頁面造成點擊分流或者場景轉移,影響到整體體驗,避免帶來產品印象的混亂感和強迫感。

  (5)減少層級感,營造輕薄便捷的內容呈現方式,減輕用戶的預期負擔。

  參考案例:IOS7中對于內容呈現方式的交互案例

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

  有時候,自己看來滿意的設計實則漏洞百出,設計不是請客吃飯,還得真槍實彈,貼近用戶,走進科學,謝謝收看本期節目,再見。

【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

這篇文章給大家詳細介紹了HTML頁面跳轉及參數傳遞問題,需要的朋友參考下吧
這篇文章主要介紹了純css實現照片墻3D效果的示例代碼,可以實現鼠標經過圖片實現改變,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本篇文章主要介紹了純 Css 繪制扇形的方法示例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
本篇文章主要介紹了一份純CSS loading效果代碼示例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
這篇文章主要介紹了css 實現文字過長自動隱藏功能,需要的朋友可以參考下
本篇文章主要介紹了詳解CSS3 rem(設置字體大小) 教程,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
主站蜘蛛池模板: 懂研帝_专业SCI论文润色机构_SCI投稿发表服务公司 | jrs高清nba(无插件)直播-jrs直播低调看直播-jrs直播nba-jrs直播 上海地磅秤|电子地上衡|防爆地磅_上海地磅秤厂家–越衡称重 | 压砖机、液压制砖机、静压砖机、环保砖机生产厂家—杜甫机械 | 软启动器-上海能曼电气有限公司 真空搅拌机-行星搅拌机-双行星动力混合机-广州市番禺区源创化工设备厂 | 北京征地律师,征地拆迁律师,专业拆迁律师,北京拆迁律师,征地纠纷律师,征地诉讼律师,征地拆迁补偿,拆迁律师 - 北京凯诺律师事务所 | 新疆乌鲁木齐网站建设-乌鲁木齐网站制作设计-新疆远璨网络 | LZ-373测厚仪-华瑞VOC气体检测仪-个人有毒气体检测仪-厂家-深圳市深博瑞仪器仪表有限公司 | 厦门网站建设_厦门网站设计_小程序开发_网站制作公司【麦格科技】 | 真空搅拌机-行星搅拌机-双行星动力混合机-广州市番禺区源创化工设备厂 | 电位器_轻触开关_USB连接器_广东精密龙电子科技有限公司 | 危废处理系统,水泥厂DCS集散控制系统,石灰窑设备自动化控制系统-淄博正展工控设备 | 超声骨密度仪-动脉硬化检测仪器-人体成分分析仪厂家/品牌/价格_南京科力悦 | 【甲方装饰】合肥工装公司-合肥装修设计公司,专业从事安徽办公室、店面、售楼部、餐饮店、厂房装修设计服务 | 亚洲工业智能制造领域专业门户网站 - 亚洲自动化与机器人网 | 杭州标识标牌|文化墙|展厅|导视|户内外广告|发光字|灯箱|铭阳制作公司 - 杭州标识标牌|文化墙|展厅|导视|户内外广告|发光字|灯箱|铭阳制作公司 | 爱佩恒温恒湿测试箱|高低温实验箱|高低温冲击试验箱|冷热冲击试验箱-您身边的模拟环境试验设备技术专家-合作热线:400-6727-800-广东爱佩试验设备有限公司 | 杭州标识标牌|文化墙|展厅|导视|户内外广告|发光字|灯箱|铭阳制作公司 - 杭州标识标牌|文化墙|展厅|导视|户内外广告|发光字|灯箱|铭阳制作公司 | 塑料瓶罐_食品塑料瓶_保健品塑料瓶_调味品塑料瓶–东莞市富慷塑料制品有限公司 | 包塑软管|金属软管|包塑金属软管-闵彬管业 | 伶俐嫂培训学校_月嫂培训班在哪里报名学费是多少_月嫂免费政府培训中心推荐 | 面粉仓_储酒罐_不锈钢储酒罐厂家-泰安鑫佳机械制造有限公司 | 博莱特空压机|博莱特-阿特拉斯独资空压机品牌核心代理商 | 山东锐智科电检测仪器有限公司_超声波测厚仪,涂层测厚仪,里氏硬度计,电火花检漏仪,地下管线探测仪 | 行业分析:提及郑州火车站附近真有 特殊按摩 ?2025实地踩坑指南 新手如何避坑不踩雷 | pbootcms网站模板|织梦模板|网站源码|jquery建站特效-html5模板网 | 广州市哲铭油墨涂料有限公司,水性漆生产研发基地 | 广州小程序开发_APP开发公司_分销商城系统定制_小跑科技 | 电采暖锅炉_超低温空气源热泵_空气源热水器-鑫鲁禹电锅炉空气能热泵厂家 | 琉璃瓦-琉璃瓦厂家-安徽盛阳新型建材科技有限公司 | 行星搅拌机,双行星搅拌机,动力混合机,无锡米克斯行星搅拌机生产厂家 | 河南卓美创业科技有限公司-河南卓美防雷公司-防雷接地-防雷工程-重庆避雷针-避雷器-防雷检测-避雷带-避雷针-避雷塔、机房防雷、古建筑防雷等-山西防雷公司 | 无锡不干胶标签,卷筒标签,无锡瑞彩包装材料有限公司 | 出国劳务公司_正规派遣公司[严海] | 渣油泵,KCB齿轮泵,不锈钢齿轮泵,重油泵,煤焦油泵,泊头市泰邦泵阀制造有限公司 | 防渗膜厂家|养殖防渗膜|水产养殖防渗膜-泰安佳路通工程材料有限公司 | 立刷【微电签pos机】-嘉联支付立刷运营中心 | 电子万能试验机_液压拉力试验机_冲击疲劳试验机_材料试验机厂家-济南众标仪器设备有限公司 | 镀锌角钢_槽钢_扁钢_圆钢_方矩管厂家_镀锌花纹板-海邦钢铁(天津)有限公司 | 玉米深加工机械,玉米加工设备,玉米加工机械等玉米深加工设备制造商-河南成立粮油机械有限公司 | 耙式干燥机_真空耙式干燥机厂家-无锡鹏茂化工装备有限公司 | 湖南成人高考报名-湖南成考网 |