優(yōu)設(shè)主編出品！10個(gè)打動(dòng)人心的情感化產(chǎn)品細(xì)節(jié)

大家好，我是優(yōu)設(shè)獨(dú)家欄目「細(xì)節(jié)獵人」的主編小白@-AmberDu 白-。

本期的《主編出品！盤(pán)點(diǎn)產(chǎn)品設(shè)計(jì)細(xì)節(jié)》系列，將聚焦「情感化設(shè)計(jì)」的獨(dú)特魅力，和大家一同探尋那些令人眼前一亮的情感化設(shè)計(jì)案例。這些設(shè)計(jì)不僅以生動(dòng)細(xì)膩的方式精準(zhǔn)反饋用戶行為，更為人機(jī)交互注入了趣味性與互動(dòng)性。通過(guò)細(xì)致入微的考量，它們精準(zhǔn)地展現(xiàn)了產(chǎn)品的核心屬性與平臺(tái)特色，從而賦予產(chǎn)品鮮明的個(gè)性標(biāo)簽。在滿足用戶需求的同時(shí)，也為我們的生活帶來(lái)了更多的色彩與溫度。

「情感化設(shè)計(jì)」這一設(shè)計(jì)概念最早是由著名認(rèn)知心理學(xué)家唐納德·諾曼（Donald Norman）所提出的。在他的著作《情感化設(shè)計(jì)》中，諾曼依據(jù)人的情感需求，將設(shè)計(jì)分為三個(gè)層次：本能層設(shè)計(jì)、行為層設(shè)計(jì)和反思層設(shè)計(jì)。通過(guò)這三個(gè)層次的設(shè)計(jì)，希望設(shè)計(jì)師能夠更全面地考慮用戶的情感需求，從而創(chuàng)造出更具吸引力的產(chǎn)品。這種設(shè)計(jì)理念對(duì)于提高產(chǎn)品的用戶滿意度和忠誠(chéng)度具有重要意義。

一、二次元產(chǎn)品是怎樣通過(guò)情感化設(shè)計(jì)捕獲用戶的？

「貓耳」App 的 Tab 欄上，趴著一只吉祥物小貓，它會(huì)根據(jù)用戶的操作行為做出實(shí)時(shí)的動(dòng)畫(huà)反饋，巧妙地與用戶互動(dòng)。無(wú)音頻播放時(shí)，小貓會(huì)慵懶打瞌睡；一旦音頻響起，它便歡脫地蹲坐唱歌。更妙的是，直播時(shí)縮小直播間再回主頁(yè)，小貓會(huì)戴上耳機(jī)，陶醉在音樂(lè)中。這種情感化設(shè)計(jì)，既生動(dòng)又有趣，充分展現(xiàn)了「貓耳」App 的二次元特色，讓每位用戶都能沉浸其中，享受與小貓的每一次互動(dòng)。

二、如何通過(guò) hover 效果賦予表情圖標(biāo)生命力？

「Discord」的表情圖標(biāo) hover 效果獨(dú)具匠心，每當(dāng)鼠標(biāo)輕輕觸碰到表情 icon，它就仿佛活了起來(lái)，會(huì)展示出不同的表情。用戶能夠直觀地理解圖標(biāo)的功能含義，情感化的設(shè)計(jì)也讓整個(gè)交互過(guò)程變得更加生動(dòng)有趣、充滿驚喜。細(xì)節(jié)設(shè)計(jì)體現(xiàn)了「Discord」團(tuán)隊(duì)對(duì)于用戶體驗(yàn)的用心和追求，讓用戶在享受便捷功能的同時(shí)，也能感受到產(chǎn)品的獨(dú)特魅力和情感共鳴。

三、從卡片入口開(kāi)始，感受不一樣的情感化設(shè)計(jì)魅力

「躺平」App 在卡片入口處以獨(dú)特的視覺(jué)創(chuàng)新吸引用戶，巧妙融合動(dòng)效與插畫(huà)藝術(shù)。動(dòng)效迅速捕獲用戶目光，增添趣味性，引導(dǎo)自然點(diǎn)擊；插畫(huà)則巧妙融入頁(yè)面，強(qiáng)化設(shè)計(jì)感，與品牌 Logo 中的「躺平人物」形象相得益彰。作為生活方式分享社區(qū)，「躺平」App 致力于營(yíng)造輕松愜意的氛圍。這種設(shè)計(jì)手法不僅豐富了情感化元素，更在細(xì)微之處提升了用戶的整體體驗(yàn)。

四、怎樣將注冊(cè)頁(yè)設(shè)計(jì)得生動(dòng)有趣？

「Readme」在賬號(hào)注冊(cè)流程中巧妙融入了觸發(fā)動(dòng)畫(huà)，與用戶進(jìn)行愉悅互動(dòng)。每當(dāng)用戶填寫(xiě)完一項(xiàng)資料，可愛(ài)的平臺(tái)吉祥物小貓頭鷹便躍然而出，為接下來(lái)的注冊(cè)步驟提供明晰的指引。這一設(shè)計(jì)不僅起到了直觀的視覺(jué)引導(dǎo)作用，更為冗長(zhǎng)且往往枯燥的注冊(cè)過(guò)程注入了趣味與溫情。細(xì)致入微的用戶體驗(yàn)設(shè)計(jì)，讓注冊(cè)新賬號(hào)變得輕松而愉快，充分展現(xiàn)了「Readme」團(tuán)隊(duì)在設(shè)計(jì)上的匠心獨(dú)運(yùn)。

五、如何利用登錄動(dòng)畫(huà)強(qiáng)化品牌 IP？

「轉(zhuǎn)轉(zhuǎn)」的登錄頁(yè)巧妙的與循環(huán)小動(dòng)畫(huà)做了結(jié)合。隨著頂部發(fā)條的旋轉(zhuǎn)，下方吉祥物形象會(huì)隨機(jī)切換，妙趣橫生。生動(dòng)有趣的動(dòng)畫(huà)不僅使產(chǎn)品更具親和力，還深化了品牌 IP 的印象。此外，登錄按鈕的文案「登錄開(kāi)啟轉(zhuǎn)轉(zhuǎn)世界」正好與動(dòng)畫(huà)轉(zhuǎn)動(dòng)切換的動(dòng)作相呼應(yīng)，可激發(fā)用戶的探索欲，引導(dǎo)他們登錄后瀏覽二手商品，提升產(chǎn)品的轉(zhuǎn)化率。

六、為產(chǎn)品注入靈魂的情感化設(shè)計(jì)怎么做？

在「小睡眠」App 的白噪音 DIY 界面，每次增添聲音素材時(shí)，頁(yè)面底部都會(huì)俏皮地顯現(xiàn)一只小貓爪，準(zhǔn)確接住飄落的素材球。若你隨機(jī)挑選一組白噪音，就如同啟動(dòng)了一場(chǎng)老虎機(jī)游戲，聲音元素隨機(jī)蹦出，而此時(shí)，那只淘氣的小貓更是忍不住探出頭來(lái)，好奇地窺視。生動(dòng)又富有情趣的情感化細(xì)節(jié)設(shè)計(jì)，不僅讓交互體驗(yàn)更為流暢，更為產(chǎn)品注入了靈動(dòng)可愛(ài)的靈魂。

七、2233 娘真是貼心的小姐姐(*?▽?*)

登錄網(wǎng)站或應(yīng)用時(shí)，輸入密碼總是讓人心生不安。「bilibili」對(duì)于這個(gè)問(wèn)題的處理方式顯得十分可愛(ài)，在輸入密碼環(huán)節(jié)，背景中的 2233 娘會(huì)做出雙手捂眼的小動(dòng)畫(huà)。可愛(ài)的設(shè)計(jì)，讓原本單調(diào)的密碼輸入過(guò)程變得生動(dòng)有趣。更重要的是，這一蒙眼動(dòng)作巧妙傳達(dá)了對(duì)用戶隱私的尊重與保護(hù)，讓用戶在輸入密碼時(shí)倍感安心，感受到自己的隱私受到保護(hù)與尊重，從而提升整體的使用體驗(yàn)。

八、在「即刻」APP 里，養(yǎng)一只貓咪～

在「即刻」APP 的「設(shè)置」頁(yè)面，執(zhí)行上滑的手勢(shì)操作，會(huì)從頁(yè)面底部出現(xiàn)一只可愛(ài)的小貓咪。這個(gè)隱藏的彩蛋設(shè)計(jì)與「Trello」頁(yè)面底部的哈士奇異曲同工。但不同的是，「即刻」里的小貓咪不會(huì)在你每次訪問(wèn)「設(shè)置」進(jìn)行上滑操作時(shí)一直叫個(gè)不停，只有在你第一次發(fā)現(xiàn)它時(shí)會(huì)發(fā)出歡快撒嬌的叫聲。聲音的互動(dòng)給體驗(yàn)帶來(lái)驚喜，而對(duì)聲音運(yùn)用的克制則體現(xiàn)了團(tuán)隊(duì)對(duì)于防止用戶受打擾的貼心。「Created in Shanghai with love」的文案雖然簡(jiǎn)單直白，但暖心的同時(shí)更體現(xiàn)了團(tuán)隊(duì)創(chuàng)造產(chǎn)品的誠(chéng)意之心。

九、你的小衛(wèi)星正在向地球發(fā)送信號(hào)…

在「我的天氣」APP 進(jìn)行下拉刷新的操作手勢(shì)，你會(huì)發(fā)現(xiàn)頁(yè)面頂部的空白空間被設(shè)計(jì)成了宇宙的模樣。當(dāng)下拉刷新頁(yè)面處于信息更新?tīng)顟B(tài)， 頂部動(dòng)畫(huà)里的人造衛(wèi)星會(huì)向地球發(fā)送信號(hào)。又是一個(gè)情理之中又讓人驚喜的情感化設(shè)計(jì)，通過(guò)微交互動(dòng)畫(huà)模擬物理世界里的真實(shí)情境，來(lái)為用戶呈現(xiàn)更清晰易懂又具備趣味性的操作反饋。

十、讓人意想不到的團(tuán)隊(duì)展示 hover 效果

drygital 設(shè)計(jì)工作室的網(wǎng)站有著個(gè)性又炫酷的視覺(jué)與交互效果。團(tuán)隊(duì)展示界面的 hover 效果，就讓人意想不到眼前一亮：當(dāng)鼠標(biāo)的光標(biāo)移到單個(gè)成員的半身像時(shí)，原本正襟危坐的照片會(huì)變成另一張展示該成員個(gè)性或喜好的搞怪照片。原照片展示了團(tuán)隊(duì)成員在工作中嚴(yán)謹(jǐn)專業(yè)的一面，而 hover 效果呈現(xiàn)的圖片則展示了成員們私下生活里幽默有趣個(gè)性鮮明的另一面。這樣的設(shè)計(jì)不僅突出了團(tuán)隊(duì)成員的個(gè)人特色展示，利于團(tuán)隊(duì)的歸屬感與凝聚力提升，也展現(xiàn)了團(tuán)隊(duì)的開(kāi)放包容與活力創(chuàng)新。

以上就是本期的內(nèi)容，希望能為大家?guī)?lái)新的視野與啟發(fā)。若覺(jué)得有所收獲，請(qǐng)不吝點(diǎn)贊、收藏或留下寶貴評(píng)論，大家的支持將是我持續(xù)創(chuàng)作的動(dòng)力。同時(shí)，誠(chéng)摯邀請(qǐng)更多小伙伴加入我們，成為「細(xì)節(jié)獵人」作者團(tuán)隊(duì)的一員，一起發(fā)現(xiàn)產(chǎn)品設(shè)計(jì)的美好 ：）

微博：@-AmberDu 白-

qq：1662900478

「細(xì)節(jié)獵人」主頁(yè) http://www.czdes.cn/hunters
「產(chǎn)品知識(shí)索引」 http://www.czdes.cn/alltopics#app
「細(xì)節(jié)獵人」投稿通道 http://www.czdes.cn/contribution?type=hunter