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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

作者：AmberDu 小白