UI設(shè)計(jì)師交互設(shè)計(jì)|談?wù)劗a(chǎn)品細(xì)節(jié)體驗(yàn)

2022-4-15    周周

一、【即刻】圈子點(diǎn)贊 - 不同圈子,不同的點(diǎn)贊表達(dá)

二、【網(wǎng)易云音樂】唱片彩蛋 -神奇的老鷹飛出屏外

三、【網(wǎng)易蝸牛讀書】時(shí)間閱讀 - 通過限制閱讀時(shí)間,給予用戶閱讀珍惜感

四、【飛豬】鎖定狀態(tài) - 貼合場景,易于理解更易傳播給用戶強(qiáng)感知 

五、【美團(tuán)外賣】點(diǎn)餐提醒 - 多點(diǎn)食物時(shí),溫馨提醒避免鋪張浪費(fèi)

六、【微信】朋友圈賀詞 - 國家主席習(xí)近平在朋友圈的新年賀詞

七、【酷狗音樂】懸浮窗 - 強(qiáng)化運(yùn)營,同時(shí)視覺降噪二者結(jié)合

八、【酷狗音樂】播放狀態(tài) - 歌名與歌詞流暢切換,滿足快捷預(yù)覽需求 

九、【大數(shù)據(jù)行程碼】箭頭縮放 - 實(shí)時(shí)動(dòng)態(tài),有效降低截屏展示風(fēng)險(xiǎn)

十、【樂刻運(yùn)動(dòng)】室溫反饋 - 問卷調(diào)查的良好反饋,降低面對面詢問時(shí)用戶的不良感受


一、【即刻】圈子點(diǎn)贊-不同圈子,不同的點(diǎn)贊表達(dá)


1. 使用場景


在不同社區(qū)或不同話題下,給別人點(diǎn)贊的含義是不同的,如何更好地貼合用戶感知。



2. 設(shè)計(jì)思考

設(shè)計(jì)目標(biāo):解決用戶在瀏覽圈子時(shí),通過符號快速感知當(dāng)前是什么圈子,豐富的圖案彩蛋給用戶探索空間提升圈子活躍度。


設(shè)計(jì)方案:即刻作為興趣社區(qū),圈子是一大特色,可以快速找到中意的圈子。


為了增加趣味性以及產(chǎn)品特色,通過在點(diǎn)贊圖標(biāo)做不同嘗試。


把小手點(diǎn)贊用圈子同關(guān)聯(lián)圖案代替,例如:(街頭攝影掃街組-相機(jī)代替點(diǎn)贊)、(一起聽播客-頭戴耳機(jī)代替點(diǎn)贊)、(不好笑便利店-反轉(zhuǎn)的微笑代替點(diǎn)贊)等等。


趣味性的同時(shí),把不同圈子的含義也通過圖標(biāo)表達(dá)出來,給用戶文字和圖標(biāo)雙重理解,強(qiáng)化產(chǎn)品感知,形成品牌記憶。是一個(gè)細(xì)致的洞察點(diǎn),值得學(xué)習(xí)。







二、【網(wǎng)易云音樂】唱片彩蛋-神奇的老鷹飛出屏外


1. 使用場景


一些經(jīng)典影視流傳至今,并伴隨用戶點(diǎn)滴歲月,有時(shí)聽一首歌會帶來回憶與重溫,如何給予用戶更多情感與驚喜。





2. 設(shè)計(jì)思考


設(shè)計(jì)目標(biāo):解決聽覺享受的單一模式,給用戶視聽雙重享受,產(chǎn)生記憶點(diǎn),用情感綁定用戶粘性。

設(shè)計(jì)方案:在聽哈利波特主題曲(Hedwig’s Theme)1分鐘左右時(shí),黑膠唱片中飛出一只老鷹,沖出畫面。

當(dāng)我在聽歌時(shí),看到這一場景瞬間驚了一下,之后更多時(shí)溫暖的感覺,讓我對網(wǎng)易云音樂產(chǎn)生了一定聽歌享受,不僅如此,還在評論區(qū)積極留言與互動(dòng),這些舉動(dòng)都為評論區(qū)增加了活躍度,間接提高產(chǎn)品UGC做貢獻(xiàn)。










三、【網(wǎng)易蝸牛讀書】時(shí)間閱讀- 通過限制閱讀時(shí)間,給予用戶閱讀珍惜感


1. 使用場景


閱讀收費(fèi)會讓人有讀書持續(xù)性,控制閱讀時(shí)長同樣會讓用戶感到時(shí)間稀缺性從而提高閱讀效率。



2. 設(shè)計(jì)思考


設(shè)計(jì)目標(biāo):解決DAU問題,通過1小時(shí)閱讀打造產(chǎn)品特點(diǎn),同時(shí)沉淀目標(biāo)用戶群體。


設(shè)計(jì)方案:當(dāng)打開App進(jìn)入閱讀頁面時(shí),后臺自動(dòng)從60分鐘逐漸遞減。


當(dāng)剩余0分鐘時(shí)不可閱讀書籍,并且底部有明確的時(shí)間顯示,給用戶一種時(shí)間寶貴的感受。


從而提高閱讀效率,專注閱讀同時(shí),用戶對產(chǎn)品也會有更深的記憶點(diǎn),間接提高用戶活躍度,畢竟免費(fèi)無限時(shí)長的書籍可能在手機(jī)里存放了1年都沒有打開過。


打造時(shí)間稀缺性,讓用戶產(chǎn)生強(qiáng)烈動(dòng)機(jī),用戶更愿意讀書,產(chǎn)品DAU提升一舉兩得。




四、【飛豬】鎖定狀態(tài) – 貼合場景,易于理解更易傳播給用戶強(qiáng)感知 


1. 使用場景


每次購買車票都會出現(xiàn)出票中的彈窗,顯示進(jìn)度條狀態(tài),有時(shí)在進(jìn)度條上做文章往往會產(chǎn)生更大的設(shè)計(jì)價(jià)值。



2. 設(shè)計(jì)思考


設(shè)計(jì)目標(biāo):降低出票過程的等待焦慮,結(jié)合業(yè)務(wù)給用戶狀態(tài)感知,從而產(chǎn)生品牌記憶提高使用黏性。


設(shè)計(jì)方案:在出票彈窗中,用火車車身代替進(jìn)度條展示。


當(dāng)進(jìn)度增加,火車由左向右移動(dòng),車尾用行駛中的速度感表示,在彈窗頁中火車在持續(xù)前進(jìn),貼合用戶場景,相比單一進(jìn)度條,此做法有效降低用戶等待焦慮同時(shí)提升產(chǎn)品亮點(diǎn),達(dá)到用戶加深印象的作用。




五、【美團(tuán)外賣】點(diǎn)餐提醒- 多點(diǎn)食物時(shí),溫馨提醒避免鋪張浪費(fèi)


1. 使用場景


當(dāng)點(diǎn)外賣時(shí),有時(shí)會一不小心點(diǎn)了好多,吃不完也退不掉的情況。



2. 設(shè)計(jì)思考


設(shè)計(jì)目標(biāo):解決用戶多點(diǎn)食物時(shí)無感知問題,提高點(diǎn)餐易用性,給予用戶友好使用體驗(yàn)。


設(shè)計(jì)方案:在商家點(diǎn)餐頁面中,當(dāng)重復(fù)點(diǎn)兩份套餐或相同食物時(shí),會在頂部呼出一個(gè)提示窗口,點(diǎn)餐請適量,環(huán)保又健康。

雖然提示文案固定,但給予用戶的是貼心的關(guān)心,情感化的背后,給用戶更多是產(chǎn)品的溫暖一面,弱化冷冰冰的感覺。



六、【微信】朋友圈賀詞-國家主席習(xí)近平在朋友圈的新年賀詞


1. 使用場景


國家主席新年賀詞,具有較高的普適性,全年齡段都應(yīng)該看,如何讓大眾用戶都看到。



2. 設(shè)計(jì)思考


設(shè)計(jì)目標(biāo):通過朋友圈提高新年賀詞曝光率,讓用戶感受到新年賀詞不僅是對國人說更是對個(gè)體用戶說的,感受國家溫暖。

設(shè)計(jì)方案:在元旦當(dāng)天,植入到朋友圈瀑布流中,以朋友動(dòng)態(tài)方式呈現(xiàn),讓用戶真切感受到新年祝福,并且點(diǎn)贊反饋會顯示微信好友狀態(tài),提高熱點(diǎn)。



七、【酷狗音樂】懸浮窗-強(qiáng)化運(yùn)營,同時(shí)視覺降噪二者結(jié)合


1. 使用場景

常置的懸浮層時(shí)常會遮擋部分信息,再滑動(dòng)瀏覽時(shí)會進(jìn)行遮擋與干擾。



2. 設(shè)計(jì)思考


設(shè)計(jì)目標(biāo):解決頻效問題,即強(qiáng)化運(yùn)營浮窗又提高滑動(dòng)瀏覽時(shí)的內(nèi)容檢索,提高瀏覽體驗(yàn)。

設(shè)計(jì)方案:在有懸浮窗的頁面,用戶通過向上滑動(dòng)頁面,懸浮窗進(jìn)行透明度顯示,透出底部信息,增加頁面瀏覽完整性。


當(dāng)停止后,懸浮窗顯示,給予用戶強(qiáng)感知。


類似的做法還有滑動(dòng)時(shí)懸浮窗劃入屏外,只展示三分之一或更小的區(qū)域,來有效提升頁面閱讀統(tǒng)一性。




八、【酷狗音樂】播放狀態(tài)-歌名與歌詞流暢切換,滿足快捷預(yù)覽需求 


1. 使用場景


在懸浮層聽歌時(shí),往往想要一遍瀏覽內(nèi)容一遍查看實(shí)時(shí)歌詞,畢竟有的歌曲好聽想要跟著哼唧但無奈看不到歌詞的情況,但又想同時(shí)一心二用,瀏覽評論或查看其他內(nèi)容。



2. 設(shè)計(jì)思考


設(shè)計(jì)目標(biāo):解決懸浮播放器查看實(shí)時(shí)歌詞功能,提高聽歌看歌詞易用性。

設(shè)計(jì)方案:當(dāng)用戶播放一首歌曲返回首頁后,底部懸浮播放器會顯示歌曲名稱。


用戶想看實(shí)時(shí)歌詞時(shí),通過在懸浮區(qū)域向右滑動(dòng)手勢,能看到黑膠唱片向右移動(dòng)的動(dòng)畫,并且歌名消失,出現(xiàn)歌詞顯示,同步人聲位置,有種卡拉OK的感覺,讓用戶清晰鎖定當(dāng)前歌曲的歌詞位置,提升查看體驗(yàn)。




九、【大數(shù)據(jù)行程碼】箭頭縮放-實(shí)時(shí)動(dòng)態(tài),有效降低截屏展示風(fēng)險(xiǎn)


1. 使用場景

疫情防控,人人有責(zé)。


為保障用戶出行安全,避免截屏出行導(dǎo)致經(jīng)過風(fēng)險(xiǎn)地區(qū)而不自知的情況,同時(shí)為預(yù)防二次傳播提供保障。



2. 設(shè)計(jì)思考


設(shè)計(jì)目標(biāo):解決部分用戶用截圖僥幸過安檢的心態(tài),提高大數(shù)據(jù)行程碼的專業(yè)權(quán)威性,避免風(fēng)險(xiǎn)提升用戶安全保障。


設(shè)計(jì)方案:在通信行程卡頁面中,給予圓圈箭頭縮放動(dòng)畫,相比靜態(tài)圖片,此方法更具實(shí)時(shí)性與動(dòng)態(tài)性,在開發(fā)層面只需要寫縮放區(qū)間,難度系數(shù)弱。

但對于想要截屏抱有僥幸心理的用戶增加了一層屏障。


這種細(xì)小的設(shè)計(jì)細(xì)節(jié),不就是為了更好服務(wù)用戶做出的體驗(yàn)向改版點(diǎn)嘛。同時(shí)通過設(shè)計(jì)保障業(yè)務(wù)安全且可持續(xù)性。





十、【樂刻運(yùn)動(dòng)】室溫反饋- 問卷調(diào)查的良好反饋,降低面對面詢問時(shí)用戶的不良感受

1. 使用場景


健身房溫度有時(shí)過冷或過熱,原因在于室外突然降溫而室內(nèi)還是保持原有溫度,身體溫差大難以適應(yīng)。

店長線下統(tǒng)計(jì)人力物力成本,且很難覆蓋到所有人,也有用戶不想被人打擾,但又不好意思直接向店長反饋情況。



2. 設(shè)計(jì)思考


設(shè)計(jì)目標(biāo):解決室內(nèi)溫度用戶滿意度統(tǒng)計(jì)問題,提高統(tǒng)計(jì)效率,快捷調(diào)整室內(nèi)溫度,給用戶良好訓(xùn)練環(huán)境。


設(shè)計(jì)方案:樂刻健身房進(jìn)門要通過App掃碼開門,這就表示用戶要進(jìn)行訓(xùn)練必須使用App。

通過用戶掃碼開門后,呼出底部浮層,反饋當(dāng)前室溫是否適宜,并且有文字提示“匿名反饋,店長不會看到你的信息”給用戶隱私保障。


同時(shí)疫情期間降低面對面詢問室溫是否合適的風(fēng)險(xiǎn),同時(shí)用戶也減少尷尬回答的情況,是一個(gè)良好的用戶體驗(yàn)向設(shè)計(jì)。



十一、結(jié)語


設(shè)計(jì)師要有發(fā)現(xiàn)美的眼睛。美不僅是視覺,還有好的體驗(yàn)流程。不要讓用戶思考,這是每個(gè)設(shè)計(jì)師所追求的。認(rèn)真記錄產(chǎn)品細(xì)節(jié),了解背后的思考,也是不斷提升自己邏輯思維和表達(dá)能力的一種方式。


本期產(chǎn)品細(xì)節(jié)分析結(jié)束,我們下期再見!

文章來源:站酷   作者:碳水sir

分享此文一切功德,皆悉回向給文章原作者及眾讀者.


免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)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è)人資料

存檔