從微信啟動(dòng)頁(yè)孤獨(dú)的小人望地球，到網(wǎng)易云音樂(lè)熱評(píng)區(qū)的深夜共鳴，情感化設(shè)計(jì)正在重新定義產(chǎn)品競(jìng)爭(zhēng)力。唐納德·諾曼提出的三層模型——本能層的視覺(jué)吸引、行為層的流暢體驗(yàn)、反思層的價(jià)值認(rèn)同——為產(chǎn)品設(shè)計(jì)提供了系統(tǒng)方法論。當(dāng)功能差異逐漸縮小，能走進(jìn)用戶心里的設(shè)計(jì)才能建立真正的忠誠(chéng)度。蘭亭妙微UI設(shè)計(jì)公司：深度拆解情感化設(shè)計(jì)的理論脈絡(luò)與經(jīng)典案例，揭示如何讓冰冷的產(chǎn)品擁有溫度。

在體驗(yàn)設(shè)計(jì)飛速發(fā)展的今天，“功能可用”已不再是產(chǎn)品的核心競(jìng)爭(zhēng)力，用戶對(duì)產(chǎn)品的需求早已超越了工具屬性，轉(zhuǎn)向了更深層次的情感訴求。

情感化設(shè)計(jì)作為連接產(chǎn)品與用戶心靈的橋梁，打破了“設(shè)計(jì)即功能”的傳統(tǒng)認(rèn)知，將人的情感需求、心理感受融入設(shè)計(jì)的每一個(gè)細(xì)節(jié)，讓冰冷的產(chǎn)品擁有溫度，讓交互過(guò)程充滿愉悅，最終實(shí)現(xiàn)產(chǎn)品與用戶的深度共鳴。

當(dāng)我們打開(kāi)手機(jī)，看到微信啟動(dòng)頁(yè)中孤獨(dú)的小人望著地球，心中會(huì)泛起一絲莫名的觸動(dòng)；

當(dāng)我們使用網(wǎng)易云音樂(lè)，被“網(wǎng)抑云熱評(píng)”戳中內(nèi)心，會(huì)忍不住分享與共鳴；

當(dāng)我們操作蘋果手機(jī)，流暢的動(dòng)畫過(guò)渡、細(xì)膩的觸感反饋，會(huì)讓每一次交互都感到舒適與愉悅；

當(dāng)我們走進(jìn)重慶鐘書(shū)閣，被鏡子反射出的層層疊疊的空間所震撼，會(huì)自然而然地將書(shū)店與山城的地域特色深深綁定。

這些場(chǎng)景背后，都藏著同一個(gè)設(shè)計(jì)理念——情感化設(shè)計(jì)。

在過(guò)去幾十年里，設(shè)計(jì)行業(yè)經(jīng)歷了從“功能導(dǎo)向”到“用戶導(dǎo)向”，再到“情感導(dǎo)向”的三次重大變革。

早期的設(shè)計(jì)，核心是“能用”，設(shè)計(jì)師關(guān)注的是產(chǎn)品的功能實(shí)現(xiàn)、性能穩(wěn)定，至于用戶使用過(guò)程中的感受、情緒變化，往往被忽略。

隨著科技的發(fā)展、物質(zhì)的豐富，同類產(chǎn)品的功能差異逐漸縮小，用戶在選擇產(chǎn)品時(shí)，不再僅僅關(guān)注“能不能用”，更關(guān)注“用得爽不爽”“有沒(méi)有共鳴”“能不能滿足我的情感需求”。

情感化設(shè)計(jì)應(yīng)運(yùn)而生，它將“人”的核心地位進(jìn)一步凸顯，強(qiáng)調(diào)設(shè)計(jì)不僅要解決用戶的實(shí)際問(wèn)題，還要照顧用戶的心理感受、情感訴求，讓產(chǎn)品成為用戶情感的載體、生活的伙伴，而不僅僅是工具。

在多年的實(shí)踐中深刻體會(huì)到：

好的設(shè)計(jì)，不僅能解決問(wèn)題，還能傳遞情感；

優(yōu)秀的情感化設(shè)計(jì)，能夠讓產(chǎn)品在眾多同類產(chǎn)品中脫穎而出，建立用戶忠誠(chéng)度，甚至成為一個(gè)時(shí)代的符號(hào)。

第一部分：情感化設(shè)計(jì)的由來(lái)

情感化設(shè)計(jì)并非憑空出現(xiàn)，它的產(chǎn)生有著深刻的社會(huì)背景、思想源頭與理論基礎(chǔ)，是設(shè)計(jì)行業(yè)發(fā)展的必然結(jié)果，也是人類對(duì)設(shè)計(jì)本質(zhì)認(rèn)知不斷深化的體現(xiàn)。

從早期的設(shè)計(jì)思想萌芽，到心理學(xué)、社會(huì)學(xué)理論的支撐，再到唐納德·諾曼正式提出“情感化設(shè)計(jì)”理論，最終在科技發(fā)展與用戶需求升級(jí)的推動(dòng)下走向成熟，情感化設(shè)計(jì)經(jīng)歷了一個(gè)漫長(zhǎng)而曲折的發(fā)展歷程。

1.1 情感化設(shè)計(jì)的思想萌芽（遠(yuǎn)古至20世紀(jì)中期）

情感化設(shè)計(jì)的核心思想——“設(shè)計(jì)要兼顧功能與情感”，其實(shí)早在遠(yuǎn)古時(shí)期就已經(jīng)出現(xiàn)。

人類最早的設(shè)計(jì)活動(dòng)，本質(zhì)上是為了生存，比如制作石器、陶器、房屋等，核心需求是“實(shí)用”，但在滿足實(shí)用需求的同時(shí)，人類也不自覺(jué)地融入了情感與審美訴求。

遠(yuǎn)古時(shí)期，原始人類制作的石器，除了追求鋒利、耐用（功能需求），還會(huì)在石器表面雕刻簡(jiǎn)單的紋路、圖案，這些紋路并非毫無(wú)意義，而是原始人類對(duì)自然的敬畏、對(duì)生活的向往的情感表達(dá)；新石器時(shí)代的彩陶，不僅造型規(guī)整、便于使用，還會(huì)繪制魚(yú)紋、鳥(niǎo)紋、幾何紋等圖案，色彩鮮艷、線條流暢，既體現(xiàn)了當(dāng)時(shí)的審美水平，也傳遞了原始人類的情感——比如魚(yú)紋象征著豐收、繁衍，鳥(niǎo)紋象征著自由、吉祥。

這些設(shè)計(jì)，雖然沒(méi)有明確的“情感化設(shè)計(jì)”概念，但已經(jīng)具備了情感化設(shè)計(jì)的核心特質(zhì)：功能與情感的結(jié)合，實(shí)用與審美的統(tǒng)一。

進(jìn)入奴隸社會(huì)、封建社會(huì)，設(shè)計(jì)的情感表達(dá)更加鮮明，且逐漸與等級(jí)、文化、宗教綁定。

比如中國(guó)古代的宮殿建筑，故宮的紅墻黃瓦、飛檐斗拱，不僅滿足了居住、辦公的功能需求，更通過(guò)色彩、造型傳遞了皇權(quán)的至高無(wú)上、威嚴(yán)莊重的情感；

古代的家具，比如明清時(shí)期的紅木家具，造型簡(jiǎn)潔、工藝精湛，不僅耐用、舒適，還通過(guò)紋理、雕刻傳遞了文人雅士的淡泊名利、雅致內(nèi)斂的情感；

西方中世紀(jì)的教堂建筑，哥特式教堂的高聳、尖峭，彩色玻璃的絢麗，營(yíng)造出神秘、莊嚴(yán)、肅穆的氛圍，傳遞了人們對(duì)宗教的虔誠(chéng)、對(duì)神性的敬畏。

這一時(shí)期的情感化設(shè)計(jì)，有兩個(gè)顯著的特點(diǎn)：

一是情感表達(dá)具有鮮明的階級(jí)性、文化性，不同階層、不同文化背景的設(shè)計(jì)，情感傳遞的方向、內(nèi)容截然不同；

二是情感設(shè)計(jì)的主體是“設(shè)計(jì)者”，設(shè)計(jì)師根據(jù)自己的情感、審美，結(jié)合當(dāng)時(shí)的社會(huì)文化、等級(jí)制度，進(jìn)行設(shè)計(jì)創(chuàng)作，用戶的情感需求往往處于被動(dòng)接受的地位，而非設(shè)計(jì)的核心導(dǎo)向。

工業(yè)革命之后，設(shè)計(jì)行業(yè)進(jìn)入了“功能至上”的時(shí)代。

18世紀(jì)60年代，工業(yè)革命率先在英國(guó)爆發(fā)，機(jī)器生產(chǎn)取代了手工生產(chǎn)，產(chǎn)品的批量生產(chǎn)成為可能，設(shè)計(jì)的核心目標(biāo)變成了“提高生產(chǎn)效率、降低生產(chǎn)成本、滿足大眾的基本功能需求”。

這一時(shí)期，設(shè)計(jì)師關(guān)注的是產(chǎn)品的結(jié)構(gòu)、性能、實(shí)用性，而情感、審美往往被忽略，甚至被視為“多余的裝飾”。比如，早期的工業(yè)產(chǎn)品，無(wú)論是蒸汽機(jī)、紡織機(jī)，還是日常使用的桌椅、燈具，都造型簡(jiǎn)陋、色彩單調(diào)，只追求耐用、好用，毫無(wú)情感可言。

這種“功能至上”的設(shè)計(jì)理念，雖然極大地提高了生產(chǎn)效率，降低了產(chǎn)品價(jià)格，滿足了大眾的基本生活需求，但也讓產(chǎn)品變得冰冷、刻板，缺乏溫度，用戶在使用過(guò)程中，只能感受到功能的滿足，無(wú)法獲得任何情感上的愉悅與共鳴。

隨著工業(yè)革命的深入，“功能至上”的設(shè)計(jì)理念逐漸暴露出弊端，越來(lái)越多的人開(kāi)始意識(shí)到，設(shè)計(jì)不能只關(guān)注功能，還要關(guān)注情感、審美。

20世紀(jì)初，一些設(shè)計(jì)運(yùn)動(dòng)開(kāi)始興起，反對(duì)“功能至上”的刻板設(shè)計(jì)，倡導(dǎo)“功能與審美結(jié)合”，為情感化設(shè)計(jì)的萌芽奠定了基礎(chǔ)。其中，最具代表性的是包豪斯運(yùn)動(dòng)。

1919年，包豪斯學(xué)院在德國(guó)成立，包豪斯的核心設(shè)計(jì)理念是“藝術(shù)與技術(shù)的統(tǒng)一”“設(shè)計(jì)為大眾服務(wù)”，強(qiáng)調(diào)設(shè)計(jì)既要滿足功能需求，也要注重審美體驗(yàn)，反對(duì)多余的裝飾，追求簡(jiǎn)潔、實(shí)用、美觀的設(shè)計(jì)風(fēng)格。

包豪斯的設(shè)計(jì)師們認(rèn)為，產(chǎn)品的設(shè)計(jì)不僅要解決“能用”的問(wèn)題，還要讓用戶在使用過(guò)程中感受到舒適、愉悅，這種理念，正是情感化設(shè)計(jì)的重要思想源頭。

比如，包豪斯設(shè)計(jì)師馬塞爾·布魯爾設(shè)計(jì)的瓦西里椅，采用鋼管與皮革結(jié)合的材質(zhì)，造型簡(jiǎn)潔、輕便、耐用，既滿足了日常使用的功能需求，又通過(guò)流暢的線條、舒適的坐感，傳遞了簡(jiǎn)約、時(shí)尚、舒適的情感，成為現(xiàn)代家具設(shè)計(jì)的經(jīng)典之作；

另一位包豪斯設(shè)計(jì)師威廉·華根菲爾德設(shè)計(jì)的臺(tái)燈，造型簡(jiǎn)潔、線條流暢，燈光柔和，既實(shí)用又美觀，讓用戶在使用過(guò)程中感受到溫暖、舒適，打破了早期工業(yè)產(chǎn)品冰冷、刻板的形象。

除了包豪斯運(yùn)動(dòng)，20世紀(jì)中期的斯堪的納維亞設(shè)計(jì)運(yùn)動(dòng)，也進(jìn)一步推動(dòng)了情感化設(shè)計(jì)思想的萌芽。

斯堪的納維亞設(shè)計(jì)強(qiáng)調(diào)“以人為本”，注重產(chǎn)品的實(shí)用性、舒適性與審美性的結(jié)合，追求自然、簡(jiǎn)約、溫馨的設(shè)計(jì)風(fēng)格，注重細(xì)節(jié)處理，關(guān)注用戶的使用感受與情感需求。

比如，芬蘭設(shè)計(jì)師阿爾瓦·阿爾托設(shè)計(jì)的彎木家具，采用天然的木材，造型柔和、曲線流暢，坐感舒適，既體現(xiàn)了自然之美，又傳遞了溫馨、親切的情感，讓用戶在使用過(guò)程中感受到自然的溫度與人文的關(guān)懷。

這一時(shí)期，情感化設(shè)計(jì)的思想雖然沒(méi)有形成系統(tǒng)的理論，但已經(jīng)逐漸被設(shè)計(jì)師們所認(rèn)可，設(shè)計(jì)的核心開(kāi)始從“功能”向“人”傾斜，設(shè)計(jì)師們開(kāi)始關(guān)注用戶的使用感受、情感需求，嘗試將情感、審美融入設(shè)計(jì)的細(xì)節(jié)中，為后續(xù)情感化設(shè)計(jì)理論的形成奠定了堅(jiān)實(shí)的實(shí)踐基礎(chǔ)。

1.2 情感化設(shè)計(jì)的理論基礎(chǔ)（20世紀(jì)中期至20世紀(jì)末）

20世紀(jì)中期以后，心理學(xué)、社會(huì)學(xué)、認(rèn)知科學(xué)等學(xué)科的飛速發(fā)展，為情感化設(shè)計(jì)提供了堅(jiān)實(shí)的理論支撐，讓情感化設(shè)計(jì)從“經(jīng)驗(yàn)型”的實(shí)踐，逐漸走向“科學(xué)化”的研究。

其中，認(rèn)知心理學(xué)、人本主義心理學(xué)、符號(hào)學(xué)的相關(guān)理論，對(duì)情感化設(shè)計(jì)的影響最為深遠(yuǎn)。

1.2.1 認(rèn)知心理學(xué)：揭示情感與認(rèn)知的關(guān)系

認(rèn)知心理學(xué)是研究人類認(rèn)知過(guò)程（如感知、記憶、思維、語(yǔ)言、決策等）的學(xué)科，它的出現(xiàn)，打破了傳統(tǒng)行為主義心理學(xué)“只關(guān)注行為，忽略情感、認(rèn)知”的局限，開(kāi)始關(guān)注人類的內(nèi)心活動(dòng)，揭示了情感與認(rèn)知之間的密切關(guān)系，為情感化設(shè)計(jì)提供了核心理論支撐。

認(rèn)知心理學(xué)認(rèn)為，人類的認(rèn)知過(guò)程與情感過(guò)程是相互影響、相互作用的，情感不僅會(huì)影響人類的認(rèn)知判斷、決策行為，還會(huì)影響人類對(duì)事物的感知與記憶。

比如，當(dāng)一個(gè)人處于愉悅的情緒中時(shí)，會(huì)更容易接受新事物、做出積極的決策，對(duì)產(chǎn)品的使用體驗(yàn)也會(huì)有更高的評(píng)價(jià)；當(dāng)一個(gè)人處于煩躁、焦慮的情緒中時(shí)，會(huì)更容易產(chǎn)生負(fù)面情緒，對(duì)產(chǎn)品的微小缺陷也會(huì)更加敏感，甚至?xí)艞壥褂卯a(chǎn)品。

20世紀(jì)60年代，認(rèn)知心理學(xué)家唐納德·諾曼（Donald A. Norman）開(kāi)始將認(rèn)知心理學(xué)的理論應(yīng)用于設(shè)計(jì)領(lǐng)域，研究人類的情感與產(chǎn)品設(shè)計(jì)之間的關(guān)系。

諾曼認(rèn)為，產(chǎn)品的設(shè)計(jì)不僅要符合人類的認(rèn)知規(guī)律，還要照顧人類的情感需求，因?yàn)榍楦惺侨祟愓J(rèn)知的重要組成部分，忽略情感的設(shè)計(jì)，無(wú)論功能多么完善，也無(wú)法獲得用戶的認(rèn)可。

諾曼在研究中發(fā)現(xiàn)，人類對(duì)產(chǎn)品的情感反應(yīng)，往往發(fā)生在認(rèn)知之前，比如，我們看到一個(gè)產(chǎn)品，首先會(huì)被它的外觀、色彩、造型所吸引（情感反應(yīng)），然后才會(huì)去了解它的功能、使用方法（認(rèn)知過(guò)程）；如果一個(gè)產(chǎn)品的外觀讓人感到厭惡、不適，即使它的功能非常強(qiáng)大，用戶也不會(huì)愿意去使用它。這種“情感優(yōu)先于認(rèn)知”的觀點(diǎn)，成為情感化設(shè)計(jì)的核心理論之一。

此外，認(rèn)知心理學(xué)中的“感知負(fù)荷理論”“情緒喚醒理論”也為情感化設(shè)計(jì)提供了重要的理論支撐。

感知負(fù)荷理論認(rèn)為，人類的認(rèn)知資源是有限的，如果產(chǎn)品的交互過(guò)程過(guò)于復(fù)雜、繁瑣，會(huì)增加用戶的感知負(fù)荷，讓用戶產(chǎn)生煩躁、焦慮的情緒，影響使用體驗(yàn)；而情感化設(shè)計(jì)，通過(guò)簡(jiǎn)化交互流程、優(yōu)化視覺(jué)設(shè)計(jì)、增加情感反饋，能夠降低用戶的感知負(fù)荷，讓用戶在使用過(guò)程中感到輕松、愉悅。

情緒喚醒理論認(rèn)為，適度的情緒喚醒能夠提高人類的注意力、記憶力與工作效率，而過(guò)度的情緒喚醒（過(guò)于興奮或過(guò)于壓抑）則會(huì)降低人類的認(rèn)知能力。

情感化設(shè)計(jì)的核心，就是通過(guò)設(shè)計(jì)手段，喚醒用戶適度的積極情緒（如愉悅、舒適、安心），避免用戶產(chǎn)生過(guò)度的負(fù)面情緒（如煩躁、焦慮、厭惡），從而提升用戶的使用體驗(yàn)與產(chǎn)品認(rèn)可度。

1.2.2 人本主義心理學(xué)：凸顯“人”的核心地位

人本主義心理學(xué)是20世紀(jì)50年代興起的心理學(xué)流派，其核心思想是“以人為本”，強(qiáng)調(diào)人的價(jià)值、人的尊嚴(yán)、人的情感需求與自我實(shí)現(xiàn)，反對(duì)將人視為“機(jī)器”或“刺激的被動(dòng)接受者”，認(rèn)為人是具有主觀能動(dòng)性、情感豐富的個(gè)體。

人本主義心理學(xué)的代表人物馬斯洛，提出了著名的“需求層次理論”，將人類的需求分為五個(gè)層次：生理需求、安全需求、歸屬與愛(ài)的需求、尊重需求、自我實(shí)現(xiàn)需求。

其中，生理需求、安全需求是基礎(chǔ)需求，主要與產(chǎn)品的功能、性能相關(guān)；而歸屬與愛(ài)的需求、尊重需求、自我實(shí)現(xiàn)需求，則是情感需求、精神需求，與產(chǎn)品的情感化設(shè)計(jì)密切相關(guān)。

馬斯洛認(rèn)為，當(dāng)人類的基礎(chǔ)需求（生理、安全）得到滿足后，會(huì)逐漸追求更高層次的情感需求、精神需求。

這一理論，為情感化設(shè)計(jì)提供了重要的理論依據(jù)：隨著科技的發(fā)展、物質(zhì)的豐富，用戶的基礎(chǔ)需求（產(chǎn)品功能、性能）已經(jīng)得到充分滿足，此時(shí)，用戶開(kāi)始追求更高層次的情感需求——比如，通過(guò)使用產(chǎn)品獲得歸屬感、被尊重感、自我實(shí)現(xiàn)感，這也是情感化設(shè)計(jì)能夠興起并快速發(fā)展的核心原因之一。

人本主義心理學(xué)強(qiáng)調(diào)，設(shè)計(jì)應(yīng)該尊重人的情感、人的需求，關(guān)注人的內(nèi)心感受，讓產(chǎn)品成為滿足人類情感需求、實(shí)現(xiàn)自我價(jià)值的載體。

比如：

一些社交產(chǎn)品，通過(guò)設(shè)計(jì)讓用戶能夠快速找到志同道合的人，獲得歸屬感；

一些健身產(chǎn)品，通過(guò)設(shè)計(jì)激勵(lì)用戶堅(jiān)持鍛煉，實(shí)現(xiàn)自我提升，獲得成就感；

一些奢侈品，通過(guò)設(shè)計(jì)傳遞高端、尊貴的情感，滿足用戶的尊重需求。

人本主義心理學(xué)的思想，進(jìn)一步凸顯了“人”在設(shè)計(jì)中的核心地位，推動(dòng)了設(shè)計(jì)行業(yè)從“功能導(dǎo)向”向“情感導(dǎo)向”的轉(zhuǎn)型，讓情感化設(shè)計(jì)的理念更加深入人心。

1.2.3 符號(hào)學(xué)：賦予產(chǎn)品情感意義

符號(hào)學(xué)是研究符號(hào)、符號(hào)系統(tǒng)及其意義的學(xué)科，它認(rèn)為，人類的一切行為、一切創(chuàng)造，本質(zhì)上都是符號(hào)的表達(dá)，產(chǎn)品也是一種符號(hào)，不僅具有實(shí)用功能，還具有情感意義、文化意義。

符號(hào)學(xué)將產(chǎn)品分為“功能符號(hào)”與“情感符號(hào)”：

功能符號(hào)是產(chǎn)品的實(shí)用功能的體現(xiàn)，比如手機(jī)的通話功能、電腦的辦公功能、椅子的坐臥功能；

情感符號(hào)是產(chǎn)品所傳遞的情感、意義、文化，比如產(chǎn)品的外觀、色彩、造型、品牌標(biāo)識(shí)等，都屬于情感符號(hào)，能夠傳遞不同的情感信息。

比如：

• 紅色象征著熱情、喜慶、活力，很多節(jié)日產(chǎn)品、運(yùn)動(dòng)產(chǎn)品都會(huì)采用紅色作為主色調(diào)，傳遞積極、熱烈的情感；
• 藍(lán)色象征著冷靜、理性、信任，很多科技產(chǎn)品、金融產(chǎn)品都會(huì)采用藍(lán)色作為主色調(diào)，傳遞專業(yè)、可靠的情感；
• 圓形象征著圓滿、和諧、親切，很多家居產(chǎn)品、兒童產(chǎn)品都會(huì)采用圓形的造型，傳遞溫馨、親切的情感。

符號(hào)學(xué)的理論，為情感化設(shè)計(jì)提供了重要的實(shí)現(xiàn)方法：設(shè)計(jì)師可以通過(guò)設(shè)計(jì)產(chǎn)品的情感符號(hào)（外觀、色彩、造型、品牌標(biāo)識(shí)等），賦予產(chǎn)品特定的情感意義、文化內(nèi)涵，讓用戶在使用產(chǎn)品的過(guò)程中，通過(guò)解讀這些情感符號(hào)，獲得情感上的共鳴與滿足。

比如，蘋果公司的logo，是一個(gè)被咬了一口的蘋果，這個(gè)簡(jiǎn)單的符號(hào)，不僅具有很高的辨識(shí)度（功能符號(hào)），還傳遞了“創(chuàng)新、叛逆、打破常規(guī)”的情感意義（情感符號(hào)），讓用戶在看到這個(gè)logo時(shí)，就能聯(lián)想到蘋果產(chǎn)品的創(chuàng)新精神，產(chǎn)生情感共鳴；

可口可樂(lè)的紅色logo、流線型字體，傳遞了“熱情、快樂(lè)、分享”的情感意義，成為可口可樂(lè)品牌的核心情感符號(hào)，陪伴了一代又一代用戶的成長(zhǎng)。

1.3 情感化設(shè)計(jì)理論的正式提出與成熟（20世紀(jì)末至今）

20世紀(jì)末，隨著認(rèn)知心理學(xué)、人本主義心理學(xué)、符號(hào)學(xué)等學(xué)科的不斷發(fā)展，以及設(shè)計(jì)實(shí)踐的不斷積累，情感化設(shè)計(jì)終于形成了系統(tǒng)的理論體系，其中，唐納德·諾曼在1999年出版的《情感化設(shè)計(jì)》（Emotional Design）一書(shū)，正式提出了“情感化設(shè)計(jì)”的概念與核心理論，標(biāo)志著情感化設(shè)計(jì)作為一門獨(dú)立的設(shè)計(jì)學(xué)科，正式誕生。

1.3.1 唐納德·諾曼與《情感化設(shè)計(jì)》：情感化設(shè)計(jì)的里程碑

唐納德·諾曼，美國(guó)認(rèn)知心理學(xué)家、工業(yè)設(shè)計(jì)家，認(rèn)知科學(xué)學(xué)會(huì)的發(fā)起人之一，被譽(yù)為“情感化設(shè)計(jì)之父”。

諾曼早年從事認(rèn)知心理學(xué)的研究，后來(lái)將認(rèn)知心理學(xué)的理論應(yīng)用于產(chǎn)品設(shè)計(jì)、用戶體驗(yàn)設(shè)計(jì)領(lǐng)域，提出了許多影響深遠(yuǎn)的設(shè)計(jì)理論，其中，《情感化設(shè)計(jì)》一書(shū)，是他最具代表性的著作，也是情感化設(shè)計(jì)領(lǐng)域的里程碑式作品。

在《情感化設(shè)計(jì)》一書(shū)中，諾曼正式提出了“情感化設(shè)計(jì)”的概念：情感化設(shè)計(jì)，是指將人類的情感需求融入產(chǎn)品設(shè)計(jì)的每一個(gè)環(huán)節(jié)，通過(guò)設(shè)計(jì)讓產(chǎn)品能夠引發(fā)用戶的積極情感，降低用戶的負(fù)面情感，從而提升用戶的使用體驗(yàn)與產(chǎn)品認(rèn)可度。

諾曼認(rèn)為，情感不是設(shè)計(jì)的附加品，而是設(shè)計(jì)的核心，好的設(shè)計(jì)，必須兼顧功能與情感，既要解決用戶的實(shí)際問(wèn)題，也要照顧用戶的心理感受。

諾曼在書(shū)中明確指出，過(guò)去的設(shè)計(jì)，過(guò)于關(guān)注產(chǎn)品的功能、性能，忽略了用戶的情感需求，導(dǎo)致很多產(chǎn)品“能用但不好用”“好用但不喜歡”。

他認(rèn)為，產(chǎn)品的設(shè)計(jì)，應(yīng)該從“人”的角度出發(fā)，關(guān)注用戶的情感、心理、行為習(xí)慣，讓產(chǎn)品成為用戶情感的載體，而不僅僅是工具。

此外，諾曼在書(shū)中提出了情感化設(shè)計(jì)的“三層模型”，這也是情感化設(shè)計(jì)最核心、最具影響力的理論，為情感化設(shè)計(jì)的實(shí)踐提供了明確的指導(dǎo)方向。

情感化設(shè)計(jì)的三層模型，將設(shè)計(jì)分為三個(gè)層次：本能層設(shè)計(jì)（Visceral Design）、行為層設(shè)計(jì)（Behavioral Design）、反思層設(shè)計(jì)（Reflective Design），三個(gè)層次相互關(guān)聯(lián)、相互影響，共同構(gòu)成了情感化設(shè)計(jì)的完整體系。

1. 本能層設(shè)計(jì)：關(guān)注產(chǎn)品的外觀、色彩、造型、材質(zhì)等視覺(jué)與觸覺(jué)體驗(yàn)，是用戶對(duì)產(chǎn)品的第一印象，也是情感反應(yīng)的起點(diǎn)。

本能層設(shè)計(jì)的核心，是“好看、好摸、有吸引力”，通過(guò)視覺(jué)、觸覺(jué)等感官刺激，引發(fā)用戶的本能反應(yīng)，比如愉悅、喜歡、好奇等積極情感。

本能層的設(shè)計(jì)，往往是無(wú)意識(shí)的，用戶在看到產(chǎn)品的第一眼，就會(huì)產(chǎn)生相應(yīng)的情感反應(yīng)，這種情感反應(yīng)，會(huì)直接影響用戶對(duì)產(chǎn)品的后續(xù)認(rèn)知與使用意愿。

比如，一款手機(jī)的外觀設(shè)計(jì)簡(jiǎn)潔、流暢，色彩柔和，材質(zhì)細(xì)膩，用戶在看到它的第一眼，就會(huì)產(chǎn)生喜歡、愉悅的情感，從而更愿意去了解它的功能、使用它；反之，如果一款手機(jī)的外觀設(shè)計(jì)丑陋、粗糙，色彩刺眼，用戶在看到它的第一眼，就會(huì)產(chǎn)生厭惡、不適的情感，即使它的功能非常強(qiáng)大，也很難吸引用戶。

2. 行為層設(shè)計(jì)：關(guān)注產(chǎn)品的功能、可用性、易用性、交互流程等，是用戶在使用產(chǎn)品過(guò)程中的體驗(yàn)。

行為層設(shè)計(jì)的核心，是“好用、高效、流暢”，通過(guò)優(yōu)化產(chǎn)品的功能、簡(jiǎn)化交互流程、提供及時(shí)的反饋，讓用戶在使用產(chǎn)品的過(guò)程中感到輕松、愉悅、高效，避免產(chǎn)生煩躁、焦慮等負(fù)面情感。

行為層的設(shè)計(jì)，與用戶的行為習(xí)慣、認(rèn)知規(guī)律密切相關(guān)，設(shè)計(jì)師需要深入了解用戶的使用場(chǎng)景、行為邏輯，設(shè)計(jì)出符合用戶習(xí)慣的交互方式，讓用戶能夠快速上手、高效使用產(chǎn)品。

比如，一款A(yù)PP的交互流程簡(jiǎn)潔、清晰，按鈕布局合理，操作反饋及時(shí)，用戶在使用過(guò)程中能夠快速找到自己需要的功能，完成相應(yīng)的操作，從而感到輕松、愉悅；反之，如果一款A(yù)PP的交互流程復(fù)雜、繁瑣，按鈕布局混亂，操作反饋延遲，用戶在使用過(guò)程中會(huì)感到煩躁、焦慮，甚至?xí)艞壥褂谩?/p>

3. 反思層設(shè)計(jì)：關(guān)注產(chǎn)品的意義、價(jià)值、文化內(nèi)涵，是用戶在使用產(chǎn)品后產(chǎn)生的情感共鳴與心理認(rèn)同。

反思層設(shè)計(jì)的核心，是“有意義、有共鳴、有價(jià)值”，通過(guò)賦予產(chǎn)品特定的意義、文化內(nèi)涵，讓用戶在使用產(chǎn)品的過(guò)程中，能夠感受到產(chǎn)品所傳遞的情感、價(jià)值觀，從而產(chǎn)生情感共鳴與心理認(rèn)同，甚至將產(chǎn)品視為自己的身份象征、生活伙伴。

反思層的設(shè)計(jì)，是情感化設(shè)計(jì)的最高層次，也是最能建立用戶忠誠(chéng)度的層次，它能夠讓產(chǎn)品超越工具屬性，成為用戶情感的載體。

比如，網(wǎng)易云音樂(lè)的“熱評(píng)文化”，通過(guò)用戶的真實(shí)評(píng)論，傳遞了不同的情感、故事，讓用戶在使用產(chǎn)品的過(guò)程中，能夠找到共鳴，感受到“有人懂我”的溫暖，從而對(duì)網(wǎng)易云音樂(lè)產(chǎn)生強(qiáng)烈的心理認(rèn)同與忠誠(chéng)度；

比如，故宮文創(chuàng)產(chǎn)品，將故宮的傳統(tǒng)文化、歷史元素融入產(chǎn)品設(shè)計(jì)中，賦予產(chǎn)品深厚的文化內(nèi)涵，讓用戶在使用產(chǎn)品的過(guò)程中，能夠感受到傳統(tǒng)文化的魅力，產(chǎn)生文化自信與情感共鳴。

諾曼強(qiáng)調(diào)，情感化設(shè)計(jì)的三個(gè)層次，并不是相互獨(dú)立的，而是相互關(guān)聯(lián)、相互影響的。

• 本能層設(shè)計(jì)是基礎(chǔ)，能夠吸引用戶的注意力，引發(fā)用戶的初步情感反應(yīng)；
• 行為層設(shè)計(jì)是核心，能夠留住用戶，讓用戶獲得良好的使用體驗(yàn)；
• 反思層設(shè)計(jì)是升華，能夠建立用戶忠誠(chéng)度，讓產(chǎn)品與用戶產(chǎn)生深度共鳴。

一款優(yōu)秀的情感化產(chǎn)品，必須兼顧三個(gè)層次的設(shè)計(jì)，缺一不可。

比如，蘋果手機(jī)，本能層設(shè)計(jì)簡(jiǎn)潔、美觀，色彩柔和，材質(zhì)細(xì)膩，能夠吸引用戶的注意力；行為層設(shè)計(jì)流暢、易用，交互反饋及時(shí)，能夠讓用戶獲得良好的使用體驗(yàn)；反思層設(shè)計(jì)傳遞了“創(chuàng)新、簡(jiǎn)約、高品質(zhì)”的價(jià)值觀，讓用戶在使用產(chǎn)品的過(guò)程中，能夠感受到蘋果產(chǎn)品的價(jià)值，產(chǎn)生心理認(rèn)同與忠誠(chéng)度，從而成為蘋果手機(jī)的忠實(shí)用戶。

《情感化設(shè)計(jì)》一書(shū)的出版，徹底改變了設(shè)計(jì)行業(yè)的認(rèn)知，讓情感化設(shè)計(jì)的理念迅速在全球范圍內(nèi)傳播開(kāi)來(lái)，越來(lái)越多的設(shè)計(jì)師、產(chǎn)品研發(fā)者開(kāi)始關(guān)注情感化設(shè)計(jì)，將情感化設(shè)計(jì)的理論應(yīng)用于實(shí)踐中，推動(dòng)了情感化設(shè)計(jì)的快速發(fā)展。

1.3.2 情感化設(shè)計(jì)的發(fā)展與普及（21世紀(jì)至今）

進(jìn)入21世紀(jì)，隨著科技的飛速發(fā)展（尤其是互聯(lián)網(wǎng)、移動(dòng)互聯(lián)網(wǎng)、人工智能的發(fā)展）、用戶需求的不斷升級(jí)，情感化設(shè)計(jì)迎來(lái)了快速發(fā)展的黃金時(shí)期，逐漸從理論走向?qū)嵺`，從小眾走向大眾，成為體驗(yàn)設(shè)計(jì)、產(chǎn)品研發(fā)的核心理念之一。

21世紀(jì)初，互聯(lián)網(wǎng)的興起，讓產(chǎn)品的形態(tài)發(fā)生了巨大的變化，從傳統(tǒng)的實(shí)體產(chǎn)品，逐漸延伸到互聯(lián)網(wǎng)產(chǎn)品（如網(wǎng)站、APP、軟件等），情感化設(shè)計(jì)的應(yīng)用場(chǎng)景也逐漸豐富。

互聯(lián)網(wǎng)產(chǎn)品的核心是用戶體驗(yàn)，而情感化設(shè)計(jì)，正是提升用戶體驗(yàn)的關(guān)鍵手段。

比如，早期的門戶網(wǎng)站，設(shè)計(jì)簡(jiǎn)潔、清晰，通過(guò)優(yōu)化視覺(jué)設(shè)計(jì)、簡(jiǎn)化操作流程，讓用戶能夠快速找到自己需要的信息，獲得良好的使用體驗(yàn)；早期的社交軟件，如QQ，通過(guò)設(shè)計(jì)可愛(ài)的頭像、表情、昵稱，讓用戶能夠表達(dá)自己的情感，獲得歸屬感與愉悅感。

2010年以后，移動(dòng)互聯(lián)網(wǎng)的爆發(fā)，進(jìn)一步推動(dòng)了情感化設(shè)計(jì)的普及與發(fā)展。

智能手機(jī)的普及，讓APP成為用戶日常生活中不可或缺的一部分，同類APP的競(jìng)爭(zhēng)日益激烈，功能差異逐漸縮小，情感化設(shè)計(jì)成為APP脫穎而出的關(guān)鍵。

比如：

• 微信的啟動(dòng)頁(yè)、朋友圈的交互設(shè)計(jì)、表情包的設(shè)計(jì)，都融入了情感化元素，讓用戶在使用過(guò)程中感受到溫暖、愉悅、親切；
• 網(wǎng)易云音樂(lè)的“每日推薦”“私人FM”“熱評(píng)文化”，通過(guò)精準(zhǔn)的算法推薦與情感化的內(nèi)容設(shè)計(jì)，讓用戶感受到“被理解、被陪伴”，建立了強(qiáng)烈的用戶忠誠(chéng)度；
• 抖音的短視頻交互設(shè)計(jì)、特效設(shè)計(jì)、背景音樂(lè)設(shè)計(jì)，通過(guò)營(yíng)造輕松、愉悅、有趣的氛圍，讓用戶在使用過(guò)程中獲得快樂(lè)，沉迷其中。

與此同時(shí)，人工智能、大數(shù)據(jù)等技術(shù)的發(fā)展，為情感化設(shè)計(jì)提供了更加強(qiáng)大的技術(shù)支撐，讓情感化設(shè)計(jì)更加精準(zhǔn)、更加個(gè)性化。

比如：

通過(guò)大數(shù)據(jù)分析用戶的行為習(xí)慣、情感偏好，設(shè)計(jì)師可以為不同的用戶提供個(gè)性化的情感化設(shè)計(jì)，讓產(chǎn)品能夠更好地滿足用戶的個(gè)性化情感需求；

通過(guò)人工智能技術(shù)，產(chǎn)品可以實(shí)現(xiàn)情感識(shí)別、情感反饋，比如，智能音箱可以識(shí)別用戶的情緒變化，根據(jù)用戶的情緒播放相應(yīng)的音樂(lè)、傳遞相應(yīng)的安慰話語(yǔ)；智能客服可以識(shí)別用戶的負(fù)面情緒，提供更加耐心、貼心的服務(wù)，緩解用戶的煩躁、焦慮。

除了互聯(lián)網(wǎng)產(chǎn)品，實(shí)體產(chǎn)品、空間設(shè)計(jì)、服務(wù)設(shè)計(jì)等領(lǐng)域，情感化設(shè)計(jì)的應(yīng)用也越來(lái)越廣泛。

• 在實(shí)體產(chǎn)品領(lǐng)域，蘋果、小米、華為等企業(yè)，將情感化設(shè)計(jì)融入產(chǎn)品的每一個(gè)細(xì)節(jié)，讓產(chǎn)品變得更加有溫度、更加有吸引力；
• 在空間設(shè)計(jì)領(lǐng)域，重慶鐘書(shū)閣、無(wú)印良品的門店設(shè)計(jì)，通過(guò)優(yōu)化空間布局、營(yíng)造溫馨的氛圍，讓用戶在空間中感受到舒適、愉悅、放松；
• 在服務(wù)設(shè)計(jì)領(lǐng)域，海底撈的服務(wù)、星巴克的服務(wù)，通過(guò)貼心、細(xì)致的服務(wù)，傳遞溫暖、尊重的情感，讓用戶獲得良好的服務(wù)體驗(yàn)，建立用戶忠誠(chéng)度。

此外，隨著設(shè)計(jì)行業(yè)的不斷發(fā)展，情感化設(shè)計(jì)的理念也逐漸被全球范圍內(nèi)的設(shè)計(jì)師、企業(yè)所認(rèn)可，越來(lái)越多的設(shè)計(jì)獎(jiǎng)項(xiàng)（如紅點(diǎn)設(shè)計(jì)獎(jiǎng)、IF設(shè)計(jì)獎(jiǎng)、IDEA設(shè)計(jì)獎(jiǎng)等），將情感化設(shè)計(jì)作為重要的評(píng)選標(biāo)準(zhǔn)，鼓勵(lì)設(shè)計(jì)師進(jìn)行情感化設(shè)計(jì)創(chuàng)作；越來(lái)越多的高校，開(kāi)設(shè)了情感化設(shè)計(jì)相關(guān)的課程，培養(yǎng)情感化設(shè)計(jì)領(lǐng)域的專業(yè)人才，推動(dòng)情感化設(shè)計(jì)的不斷發(fā)展與創(chuàng)新。

1.4 情感化設(shè)計(jì)興起的核心原因

情感化設(shè)計(jì)的興起與發(fā)展，并不是偶然的，而是多種因素共同作用的結(jié)果，其核心原因主要包括以下幾個(gè)方面：

1.4.1 用戶需求的升級(jí)：從功能滿足到情感追求

隨著科技的發(fā)展、物質(zhì)的豐富，用戶的需求已經(jīng)發(fā)生了根本性的變化，從早期的“功能滿足”，逐漸升級(jí)為“情感追求”。

在過(guò)去，物質(zhì)匱乏，用戶選擇產(chǎn)品的核心標(biāo)準(zhǔn)是“能用”，只要產(chǎn)品能夠滿足基本的功能需求，就能夠被用戶接受；而現(xiàn)在，物質(zhì)豐富，同類產(chǎn)品的功能差異逐漸縮小，用戶在選擇產(chǎn)品時(shí)，不再僅僅關(guān)注“能不能用”，更關(guān)注“用得爽不爽”“有沒(méi)有共鳴”“能不能滿足我的情感需求”。

比如，在手機(jī)市場(chǎng)，早期的手機(jī)，只要能夠通話、發(fā)短信，就能夠滿足用戶的需求；而現(xiàn)在，手機(jī)的功能已經(jīng)非常完善，通話、發(fā)短信、上網(wǎng)、拍照、娛樂(lè)等功能，幾乎所有手機(jī)都具備，用戶在選擇手機(jī)時(shí)，會(huì)更加關(guān)注手機(jī)的外觀設(shè)計(jì)、交互體驗(yàn)、情感傳遞，比如，有些用戶喜歡蘋果手機(jī)的簡(jiǎn)約、高端，有些用戶喜歡華為手機(jī)的科技、愛(ài)國(guó)情懷，有些用戶喜歡小米手機(jī)的性價(jià)比、年輕化，這些都是用戶情感需求的體現(xiàn)。

用戶需求的升級(jí)，是情感化設(shè)計(jì)興起的核心動(dòng)力，它推動(dòng)了設(shè)計(jì)行業(yè)從“功能導(dǎo)向”向“情感導(dǎo)向”的轉(zhuǎn)型，讓情感化設(shè)計(jì)成為產(chǎn)品研發(fā)的核心理念之一。

1.4.2 科技的發(fā)展：為情感化設(shè)計(jì)提供技術(shù)支撐

科技的飛速發(fā)展，尤其是互聯(lián)網(wǎng)、移動(dòng)互聯(lián)網(wǎng)、人工智能、大數(shù)據(jù)等技術(shù)的發(fā)展，為情感化設(shè)計(jì)提供了強(qiáng)大的技術(shù)支撐，讓情感化設(shè)計(jì)的實(shí)現(xiàn)變得更加容易、更加精準(zhǔn)。

在互聯(lián)網(wǎng)、移動(dòng)互聯(lián)網(wǎng)出現(xiàn)之前，實(shí)體產(chǎn)品的情感化設(shè)計(jì)，主要依賴于外觀、色彩、造型等視覺(jué)與觸覺(jué)元素，受技術(shù)限制，情感化設(shè)計(jì)的表達(dá)形式比較單一，無(wú)法實(shí)現(xiàn)個(gè)性化、精準(zhǔn)化的情感傳遞；而互聯(lián)網(wǎng)、移動(dòng)互聯(lián)網(wǎng)的出現(xiàn)，讓產(chǎn)品的情感化設(shè)計(jì)有了更多的表達(dá)形式，比如，交互反饋、動(dòng)畫效果、內(nèi)容設(shè)計(jì)、社交互動(dòng)等，能夠更好地傳遞情感，引發(fā)用戶共鳴。

人工智能、大數(shù)據(jù)技術(shù)的發(fā)展，進(jìn)一步提升了情感化設(shè)計(jì)的精準(zhǔn)度與個(gè)性化水平。

通過(guò)大數(shù)據(jù)分析用戶的行為習(xí)慣、情感偏好、使用場(chǎng)景，設(shè)計(jì)師可以深入了解用戶的情感需求，為不同的用戶提供個(gè)性化的情感化設(shè)計(jì)；通過(guò)人工智能技術(shù)，產(chǎn)品可以實(shí)現(xiàn)情感識(shí)別、情感反饋，能夠根據(jù)用戶的情緒變化，調(diào)整產(chǎn)品的交互方式、內(nèi)容呈現(xiàn)，提供更加貼心、精準(zhǔn)的服務(wù)，讓用戶感受到“被理解、被重視”。

1.4.3 市場(chǎng)競(jìng)爭(zhēng)的加劇：情感化成為產(chǎn)品差異化競(jìng)爭(zhēng)的關(guān)鍵

隨著市場(chǎng)競(jìng)爭(zhēng)的日益加劇，同類產(chǎn)品的功能、性能、價(jià)格差異逐漸縮小，產(chǎn)品的差異化競(jìng)爭(zhēng)，逐漸從“功能差異化”轉(zhuǎn)向“情感差異化”。

在激烈的市場(chǎng)競(jìng)爭(zhēng)中，只有那些能夠滿足用戶情感需求、與用戶產(chǎn)生深度共鳴的產(chǎn)品，才能夠脫穎而出，建立用戶忠誠(chéng)度，占據(jù)市場(chǎng)優(yōu)勢(shì)。

比如，在飲料市場(chǎng)，可口可樂(lè)與百事可樂(lè)的功能差異非常小，都是碳酸飲料，能夠解渴、提神，但兩者的情感化設(shè)計(jì)差異非常明顯：可口可樂(lè)傳遞“熱情、快樂(lè)、分享”的情感，主打經(jīng)典、懷舊；百事可樂(lè)傳遞“年輕、時(shí)尚、活力”的情感，主打年輕群體。

正是這種情感化的差異化設(shè)計(jì)，讓兩者在激烈的市場(chǎng)競(jìng)爭(zhēng)中，都占據(jù)了重要的市場(chǎng)份額，擁有大量的忠實(shí)用戶。又如，在互聯(lián)網(wǎng)音樂(lè)市場(chǎng)，網(wǎng)易云音樂(lè)、QQ音樂(lè)、酷狗音樂(lè)的功能差異也非常小，都能夠播放音樂(lè)、下載音樂(lè)、推薦音樂(lè)，但網(wǎng)易云音樂(lè)通過(guò)“熱評(píng)文化”“私人FM”“每日推薦”等情感化設(shè)計(jì)，傳遞“陪伴、理解、共鳴”的情感，與用戶產(chǎn)生深度共鳴，從而在激烈的市場(chǎng)競(jìng)爭(zhēng)中，脫穎而出，成為很多年輕用戶的首選音樂(lè)APP。

1.4.4 設(shè)計(jì)理念的進(jìn)化：從“物為本”到“人為本”

設(shè)計(jì)理念的不斷進(jìn)化，也是情感化設(shè)計(jì)興起的重要原因之一。

早期的設(shè)計(jì)理念，是“物為本”，設(shè)計(jì)師關(guān)注的是產(chǎn)品的功能、性能、外觀，忽略了“人”的需求，將產(chǎn)品視為“獨(dú)立于人的工具”；而隨著設(shè)計(jì)行業(yè)的不斷發(fā)展，設(shè)計(jì)理念逐漸進(jìn)化為“人為本”，設(shè)計(jì)師關(guān)注的是“人”的需求、“人”的感受，將“人”作為設(shè)計(jì)的核心，認(rèn)為產(chǎn)品是“為人服務(wù)的”，是“人與世界連接的橋梁”。

“人為本”的設(shè)計(jì)理念，強(qiáng)調(diào)設(shè)計(jì)要尊重人、理解人、關(guān)愛(ài)人，要兼顧人的功能需求與情感需求，要讓產(chǎn)品成為用戶情感的載體、生活的伙伴。

這種設(shè)計(jì)理念的進(jìn)化，推動(dòng)了情感化設(shè)計(jì)的興起與發(fā)展，讓情感化設(shè)計(jì)成為“人為本”設(shè)計(jì)理念的核心體現(xiàn)。

第二部分：情感化設(shè)計(jì)的案例分析

情感化設(shè)計(jì)的價(jià)值，最終要通過(guò)實(shí)踐來(lái)體現(xiàn)。

在多年的設(shè)計(jì)實(shí)踐中，國(guó)內(nèi)外眾多企業(yè)、設(shè)計(jì)師，將情感化設(shè)計(jì)的理論（本能層、行為層、反思層）融入產(chǎn)品、空間、服務(wù)的每一個(gè)細(xì)節(jié)，打造了眾多經(jīng)典的情感化設(shè)計(jì)案例，這些案例覆蓋了互聯(lián)網(wǎng)產(chǎn)品、實(shí)體產(chǎn)品、空間設(shè)計(jì)、服務(wù)設(shè)計(jì)等多個(gè)領(lǐng)域，不僅為用戶帶來(lái)了良好的體驗(yàn)，也為企業(yè)帶來(lái)了巨大的商業(yè)價(jià)值，同時(shí)也為后續(xù)的情感化設(shè)計(jì)實(shí)踐提供了寶貴的參考。

本部分將圍繞情感化設(shè)計(jì)的“三層模型”，拆解不同領(lǐng)域的經(jīng)典案例，深入分析每個(gè)案例的情感化設(shè)計(jì)邏輯、實(shí)現(xiàn)方法、落地效果，讓讀者直觀感受情感化設(shè)計(jì)的魅力與價(jià)值，掌握情感化設(shè)計(jì)的實(shí)踐技巧。

2.1 互聯(lián)網(wǎng)產(chǎn)品領(lǐng)域：情感化設(shè)計(jì)的主戰(zhàn)場(chǎng)

互聯(lián)網(wǎng)產(chǎn)品（APP、網(wǎng)站、軟件等）是情感化設(shè)計(jì)應(yīng)用最廣泛、最成熟的領(lǐng)域，因?yàn)榛ヂ?lián)網(wǎng)產(chǎn)品的核心是用戶體驗(yàn)，而情感化設(shè)計(jì)正是提升用戶體驗(yàn)的關(guān)鍵手段。

互聯(lián)網(wǎng)產(chǎn)品的情感化設(shè)計(jì)，主要體現(xiàn)在本能層（視覺(jué)設(shè)計(jì)、動(dòng)畫效果）、行為層（交互流程、功能設(shè)計(jì)、反饋設(shè)計(jì)）、反思層（內(nèi)容設(shè)計(jì)、社交互動(dòng)、品牌傳遞）三個(gè)方面，三者相互結(jié)合，打造出有溫度、有情感、有共鳴的產(chǎn)品體驗(yàn)。

2.1.1 案例一：微信——國(guó)民級(jí)APP的情感化設(shè)計(jì)精髓

微信，作為中國(guó)國(guó)民級(jí)的社交APP，擁有超過(guò)10億的用戶，其成功不僅在于強(qiáng)大的功能（社交、支付、辦公、娛樂(lè)等），更在于其細(xì)膩、貼心的情感化設(shè)計(jì)，微信的每一個(gè)細(xì)節(jié)，都融入了情感化元素，讓用戶在使用過(guò)程中感受到溫暖、親切、舒適，從而建立了強(qiáng)烈的用戶忠誠(chéng)度。

1. 本能層設(shè)計(jì)：簡(jiǎn)約、干凈、親切，打造舒適的視覺(jué)體驗(yàn)

微信的本能層設(shè)計(jì)，遵循“簡(jiǎn)約、干凈、親切”的原則，視覺(jué)設(shè)計(jì)簡(jiǎn)潔大方，色彩柔和，造型簡(jiǎn)約，讓用戶在看到微信的第一眼，就能夠產(chǎn)生舒適、愉悅的情感。

首先，在色彩設(shè)計(jì)上，微信的主色調(diào)是綠色，綠色象征著自然、健康、和諧、親切，能夠緩解用戶的視覺(jué)疲勞，傳遞溫暖、舒適的情感，與微信“連接人與人、連接生活”的核心定位相契合；微信的界面背景，采用白色作為主背景，簡(jiǎn)潔干凈，沒(méi)有多余的裝飾，讓用戶的視覺(jué)注意力能夠集中在核心內(nèi)容上，降低視覺(jué)負(fù)荷。

其次，在圖標(biāo)設(shè)計(jì)上，微信的圖標(biāo)設(shè)計(jì)簡(jiǎn)約大方，造型圓潤(rùn)，沒(méi)有鋒利的棱角，傳遞親切、溫和的情感。

比如，微信的啟動(dòng)圖標(biāo)，是一個(gè)綠色的對(duì)話氣泡，氣泡內(nèi)有兩個(gè)白色的小人，象征著“人與人的對(duì)話、人與人的連接”，簡(jiǎn)潔明了，又充滿情感；微信內(nèi)部的功能圖標(biāo)（如微信、通訊錄、發(fā)現(xiàn)、我），設(shè)計(jì)簡(jiǎn)約，造型統(tǒng)一，色彩協(xié)調(diào)，讓用戶能夠快速識(shí)別，同時(shí)也能夠感受到視覺(jué)上的舒適。

再次，在動(dòng)畫設(shè)計(jì)上，微信的動(dòng)畫效果細(xì)膩、流暢，沒(méi)有夸張的特效，卻能夠傳遞出親切、自然的情感。

比如，微信的啟動(dòng)動(dòng)畫，是一個(gè)孤獨(dú)的小人，望著藍(lán)色的地球，這個(gè)動(dòng)畫雖然簡(jiǎn)單，卻傳遞出“連接、陪伴”的情感——無(wú)論你身在何方，微信都能夠讓你與遠(yuǎn)方的親人、朋友保持連接，不再孤獨(dú)；

微信的消息提示動(dòng)畫，是一個(gè)簡(jiǎn)單的震動(dòng)+氣泡彈出，細(xì)膩柔和，既能夠提醒用戶有新消息，又不會(huì)打擾到用戶，傳遞貼心的情感；微信的轉(zhuǎn)賬、紅包動(dòng)畫，采用紅色作為主色調(diào)，搭配簡(jiǎn)單的動(dòng)畫效果，傳遞喜慶、快樂(lè)的情感，契合中國(guó)人的情感習(xí)慣。

2. 行為層設(shè)計(jì)：流暢、易用、貼心，打造高效的交互體驗(yàn)

微信的行為層設(shè)計(jì)，遵循“流暢、易用、貼心”的原則，優(yōu)化交互流程，簡(jiǎn)化操作步驟，提供及時(shí)的反饋，讓用戶在使用微信的過(guò)程中，能夠快速上手、高效操作，感受到輕松、愉悅，避免產(chǎn)生煩躁、焦慮等負(fù)面情感。

首先，在交互流程設(shè)計(jì)上，微信的交互流程簡(jiǎn)潔清晰，沒(méi)有復(fù)雜的操作步驟，用戶能夠快速找到自己需要的功能，完成相應(yīng)的操作。

比如，發(fā)送消息的流程，只需點(diǎn)擊聯(lián)系人、輸入文字、點(diǎn)擊發(fā)送，三步即可完成，簡(jiǎn)單易用；轉(zhuǎn)賬、發(fā)紅包的流程，也非常簡(jiǎn)潔，只需點(diǎn)擊相應(yīng)的功能、輸入金額、確認(rèn)發(fā)送，即可完成，讓用戶能夠快速完成操作，節(jié)省時(shí)間。

其次，在功能設(shè)計(jì)上，微信的功能設(shè)計(jì)非常貼心，能夠精準(zhǔn)捕捉用戶的使用場(chǎng)景與情感需求，解決用戶的實(shí)際問(wèn)題，同時(shí)傳遞溫暖的情感。

比如：

微信的“語(yǔ)音消息”功能，允許用戶發(fā)送語(yǔ)音，無(wú)需打字，既方便了那些不擅長(zhǎng)打字、或者不方便打字的用戶（如老人、開(kāi)車的用戶），又能夠讓用戶感受到“面對(duì)面交流”的溫暖，傳遞陪伴的情感；

微信的“視頻通話”功能，支持實(shí)時(shí)視頻，讓用戶能夠與遠(yuǎn)方的親人、朋友“見(jiàn)面”，緩解思念之情，傳遞連接的情感；

微信的“收藏”功能，允許用戶收藏自己喜歡的文章、圖片、視頻、語(yǔ)音等，方便后續(xù)查看，傳遞“貼心、實(shí)用”的情感；微信的“免打擾”功能，允許用戶設(shè)置免打擾時(shí)段，避免被消息打擾，尊重用戶的個(gè)人空間，傳遞尊重的情感。

再次，在反饋設(shè)計(jì)上，微信的反饋設(shè)計(jì)及時(shí)、細(xì)膩，能夠讓用戶清晰地知道自己的操作是否成功，傳遞安心的情感。比如，發(fā)送消息后，會(huì)顯示“發(fā)送成功”的提示，同時(shí)消息氣泡會(huì)變成灰色，讓用戶知道消息已經(jīng)發(fā)送成功；

轉(zhuǎn)賬、發(fā)紅包后，會(huì)顯示“轉(zhuǎn)賬成功”“紅包已發(fā)出”的提示，同時(shí)會(huì)有相應(yīng)的動(dòng)畫反饋，讓用戶知道操作已經(jīng)完成；

如果操作失敗（如網(wǎng)絡(luò)異常、金額錯(cuò)誤），會(huì)顯示清晰的錯(cuò)誤提示，同時(shí)給出相應(yīng)的解決方法，緩解用戶的煩躁情緒，傳遞貼心的情感。

3. 反思層設(shè)計(jì)：連接、陪伴、共鳴，打造深度的情感認(rèn)同

微信的反思層設(shè)計(jì)，核心是“連接、陪伴、共鳴”，通過(guò)賦予微信特定的意義、文化內(nèi)涵，讓用戶在使用微信的過(guò)程中，能夠感受到微信所傳遞的情感、價(jià)值觀，從而產(chǎn)生深度的情感共鳴與心理認(rèn)同，將微信視為自己生活中不可或缺的一部分。

首先，在社交互動(dòng)設(shè)計(jì)上，微信通過(guò)多種方式，促進(jìn)人與人之間的連接，傳遞陪伴、溫暖的情感，讓用戶獲得歸屬感。

比如，微信的“朋友圈”功能，允許用戶分享自己的生活、心情、感悟，同時(shí)也能夠查看好友的動(dòng)態(tài)，點(diǎn)贊、評(píng)論，促進(jìn)好友之間的互動(dòng)與交流，讓用戶感受到“被關(guān)注、被重視”；

微信的“群聊”功能，允許用戶創(chuàng)建群聊，邀請(qǐng)好友加入，方便好友之間的集體交流，傳遞“團(tuán)圓、陪伴”的情感，比如，家庭群、同學(xué)群、同事群，讓用戶能夠與自己關(guān)心的人保持緊密的聯(lián)系，獲得歸屬感；

微信的“拜年紅包”“節(jié)日祝福”功能，契合中國(guó)人的節(jié)日情感習(xí)慣，讓用戶在節(jié)日期間，能夠向親人、朋友傳遞祝福，增進(jìn)感情，傳遞溫暖、喜慶的情感。

其次，在內(nèi)容設(shè)計(jì)上，微信通過(guò)“公眾號(hào)”“視頻號(hào)”“小程序”等功能，為用戶提供豐富、有價(jià)值的內(nèi)容，同時(shí)傳遞積極、正向的價(jià)值觀，讓用戶在使用微信的過(guò)程中，能夠獲得情感共鳴與精神滿足。

比如：

• 公眾號(hào)的內(nèi)容涵蓋了生活、情感、職場(chǎng)、文化等多個(gè)領(lǐng)域，很多公眾號(hào)的文章，能夠戳中用戶的內(nèi)心，引發(fā)用戶的情感共鳴；
• 視頻號(hào)的內(nèi)容，簡(jiǎn)潔、真實(shí)、接地氣，很多視頻能夠傳遞溫暖、感動(dòng)、快樂(lè)的情感，讓用戶在碎片化的時(shí)間里，獲得情感的慰藉；
• 小程序的內(nèi)容，涵蓋了生活服務(wù)、娛樂(lè)、辦公等多個(gè)領(lǐng)域，方便用戶的日常生活，讓用戶感受到微信的價(jià)值，產(chǎn)生心理認(rèn)同。

再次，在品牌傳遞上，微信的品牌定位是“連接人與人，連接人與生活”，通過(guò)多年的情感化設(shè)計(jì)與品牌傳播，微信已經(jīng)成為“連接”“陪伴”的象征，讓用戶在使用微信的過(guò)程中，能夠感受到微信所傳遞的“溫暖、連接、包容”的價(jià)值觀，從而產(chǎn)生深度的品牌認(rèn)同。

比如：

微信的廣告語(yǔ)“微信，是一個(gè)生活方式”，傳遞了微信與用戶生活的深度融合，讓用戶意識(shí)到，微信不僅僅是一個(gè)社交工具，更是自己生活的一部分，是陪伴自己的伙伴；

微信的公益活動(dòng)（如微信公益、騰訊公益），傳遞了社會(huì)責(zé)任與愛(ài)心，讓用戶在使用微信的過(guò)程中，能夠感受到自己的價(jià)值，產(chǎn)生自豪感與認(rèn)同感。

案例總結(jié)

微信的情感化設(shè)計(jì)，是本能層、行為層、反思層三者完美結(jié)合的典范。

• 本能層的簡(jiǎn)約、親切的視覺(jué)設(shè)計(jì)，吸引用戶的注意力，引發(fā)用戶的初步情感反應(yīng)；
• 行為層的流暢、易用、貼心的交互設(shè)計(jì)，留住用戶，讓用戶獲得良好的使用體驗(yàn)；
• 反思層的連接、陪伴、共鳴的內(nèi)容與品牌設(shè)計(jì)，建立用戶忠誠(chéng)度，讓用戶與微信產(chǎn)生深度共鳴。

微信的成功，證明了情感化設(shè)計(jì)的價(jià)值——好的情感化設(shè)計(jì)，能夠讓產(chǎn)品超越工具屬性，成為用戶生活的伙伴，建立強(qiáng)大的用戶忠誠(chéng)度，實(shí)現(xiàn)商業(yè)價(jià)值與情感價(jià)值的雙贏。

2.1.2 案例二：網(wǎng)易云音樂(lè)——以情感共鳴打造差異化競(jìng)爭(zhēng)優(yōu)勢(shì)

網(wǎng)易云音樂(lè)，作為國(guó)內(nèi)最具代表性的音樂(lè)APP之一，在激烈的市場(chǎng)競(jìng)爭(zhēng)中，脫穎而出，擁有大量的忠實(shí)用戶，其核心競(jìng)爭(zhēng)力，并不是強(qiáng)大的曲庫(kù)（與QQ音樂(lè)、酷狗音樂(lè)相比，曲庫(kù)并沒(méi)有絕對(duì)優(yōu)勢(shì)），而是其獨(dú)特的情感化設(shè)計(jì)——網(wǎng)易云音樂(lè)以“情感”為核心，打造了“陪伴、理解、共鳴”的產(chǎn)品氛圍，讓用戶在使用音樂(lè)的過(guò)程中，能夠找到情感的慰藉，產(chǎn)生深度的情感共鳴，從而建立了強(qiáng)烈的用戶忠誠(chéng)度。

1. 本能層設(shè)計(jì)：文藝、簡(jiǎn)約、有質(zhì)感，打造沉浸式的視覺(jué)體驗(yàn)網(wǎng)易云音樂(lè)的本能層設(shè)計(jì)，遵循“文藝、簡(jiǎn)約、有質(zhì)感”的原則，視覺(jué)設(shè)計(jì)充滿文藝氣息，色彩柔和，造型簡(jiǎn)約，能夠讓用戶在使用過(guò)程中，感受到舒適、放松，快速進(jìn)入音樂(lè)的氛圍中。

首先，在色彩設(shè)計(jì)上，網(wǎng)易云音樂(lè)的主色調(diào)是紅色，紅色象征著熱情、溫暖、情感，與網(wǎng)易云音樂(lè)“情感共鳴”的核心定位相契合；網(wǎng)易云音樂(lè)的界面背景，采用深色作為主背景（夜間模式）或淺色作為主背景（日間模式），深色背景能夠營(yíng)造沉浸式的音樂(lè)氛圍，讓用戶的注意力集中在音樂(lè)上，淺色背景則簡(jiǎn)潔干凈，緩解視覺(jué)疲勞；界面中的文字、圖標(biāo)，色彩協(xié)調(diào)，對(duì)比清晰，既保證了視覺(jué)的美觀，又保證了可讀性。

在圖標(biāo)設(shè)計(jì)上，網(wǎng)易云音樂(lè)的圖標(biāo)設(shè)計(jì)簡(jiǎn)約、有質(zhì)感，充滿文藝氣息。比如，網(wǎng)易云音樂(lè)的啟動(dòng)圖標(biāo)，是一個(gè)紅色的唱片，唱片上有白色的音符，象征著音樂(lè)、情感，簡(jiǎn)約而有質(zhì)感，能夠快速傳遞產(chǎn)品的核心定位；網(wǎng)易云音樂(lè)內(nèi)部的功能圖標(biāo)（如發(fā)現(xiàn)、我的、云村、視頻），設(shè)計(jì)簡(jiǎn)約，造型統(tǒng)一，色彩協(xié)調(diào)，充滿文藝氣息，讓用戶能夠快速識(shí)別，同時(shí)也能夠感受到視覺(jué)上的舒適。

在動(dòng)畫設(shè)計(jì)上，網(wǎng)易云音樂(lè)的動(dòng)畫效果細(xì)膩、流暢，充滿情感，能夠增強(qiáng)產(chǎn)品的沉浸感與情感傳遞。

比如，網(wǎng)易云音樂(lè)的播放界面，唱片會(huì)隨著音樂(lè)的播放而旋轉(zhuǎn)，旋轉(zhuǎn)的速度與音樂(lè)的節(jié)奏相契合，讓用戶能夠直觀地感受到音樂(lè)的韻律，增強(qiáng)沉浸感；

網(wǎng)易云音樂(lè)的切換歌曲動(dòng)畫，簡(jiǎn)潔流暢，沒(méi)有多余的特效，卻能夠傳遞出自然、舒適的情感；

網(wǎng)易云音樂(lè)的“心動(dòng)模式”動(dòng)畫，采用紅色的愛(ài)心作為核心元素，搭配細(xì)膩的動(dòng)畫效果，傳遞溫暖、浪漫的情感，契合用戶的情感需求。

2. 行為層設(shè)計(jì)：流暢、易用、貼心，打造個(gè)性化的音樂(lè)體驗(yàn)

網(wǎng)易云音樂(lè)的行為層設(shè)計(jì)，遵循“流暢、易用、貼心”的原則，優(yōu)化交互流程，簡(jiǎn)化操作步驟，提供個(gè)性化的功能與反饋，讓用戶在使用音樂(lè)的過(guò)程中，能夠快速上手、高效操作，獲得個(gè)性化、舒適的音樂(lè)體驗(yàn)。

首先，在交互流程設(shè)計(jì)上，網(wǎng)易云音樂(lè)的交互流程簡(jiǎn)潔清晰，沒(méi)有復(fù)雜的操作步驟，用戶能夠快速找到自己需要的功能，完成相應(yīng)的操作。比如，搜索歌曲的流程，只需點(diǎn)擊搜索框、輸入歌曲名稱、點(diǎn)擊搜索，三步即可完成，簡(jiǎn)單易用；播放歌曲的流程，只需點(diǎn)擊歌曲名稱，即可開(kāi)始播放，同時(shí)，播放界面的操作按鈕（暫停、播放、上一首、下一首、音量調(diào)節(jié)）布局合理，操作便捷，讓用戶能夠快速調(diào)整播放狀態(tài)。

在功能設(shè)計(jì)上，網(wǎng)易云音樂(lè)的功能設(shè)計(jì)非常貼心，能夠精準(zhǔn)捕捉用戶的音樂(lè)需求與情感需求，提供個(gè)性化的音樂(lè)服務(wù)，傳遞溫暖、貼心的情感。

比如，網(wǎng)易云音樂(lè)的“每日推薦”功能，通過(guò)大數(shù)據(jù)分析用戶的聽(tīng)歌習(xí)慣、情感偏好，為用戶推薦符合自己口味的歌曲，每天推薦的歌曲都不一樣，讓用戶感受到“被理解、被重視”，傳遞陪伴的情感；

網(wǎng)易云音樂(lè)的“私人FM”功能，根據(jù)用戶的聽(tīng)歌習(xí)慣，自動(dòng)播放歌曲，無(wú)需用戶手動(dòng)操作，讓用戶能夠輕松享受音樂(lè)，緩解疲勞，傳遞貼心的情感；

網(wǎng)易云音樂(lè)的“心動(dòng)模式”功能，能夠根據(jù)用戶喜歡的歌曲，推薦相似風(fēng)格的歌曲，同時(shí)，點(diǎn)擊愛(ài)心按鈕，即可收藏歌曲，傳遞浪漫、溫暖的情感；

網(wǎng)易云音樂(lè)的“歌詞翻譯”“歌詞滾動(dòng)”功能，讓用戶能夠更好地理解歌曲的含義，享受音樂(lè)的魅力，傳遞貼心的情感。

在反饋設(shè)計(jì)上，網(wǎng)易云音樂(lè)的反饋設(shè)計(jì)及時(shí)、細(xì)膩，充滿情感，能夠讓用戶清晰地知道自己的操作是否成功，同時(shí)感受到溫暖、貼心的情感。

比如，收藏歌曲后，會(huì)顯示“已收藏”的提示，同時(shí)愛(ài)心圖標(biāo)會(huì)變成紅色，讓用戶知道歌曲已經(jīng)收藏成功；下載歌曲后，會(huì)顯示“下載成功”的提示，讓用戶知道歌曲已經(jīng)下載完成；

如果操作失敗（如網(wǎng)絡(luò)異常、歌曲無(wú)法播放），會(huì)顯示清晰的錯(cuò)誤提示，同時(shí)給出相應(yīng)的解決方法，緩解用戶的煩躁情緒，傳遞貼心的情感；

此外，網(wǎng)易云音樂(lè)的播放反饋，會(huì)根據(jù)音樂(lè)的節(jié)奏，顯示相應(yīng)的歌詞滾動(dòng)與唱片旋轉(zhuǎn)，讓用戶能夠直觀地感受到音樂(lè)的韻律，增強(qiáng)沉浸感與情感體驗(yàn)。

3. 反思層設(shè)計(jì)：共鳴、陪伴、認(rèn)同，打造有溫度的音樂(lè)社區(qū)

網(wǎng)易云音樂(lè)的反思層設(shè)計(jì)，是其情感化設(shè)計(jì)的核心，也是其差異化競(jìng)爭(zhēng)的關(guān)鍵。

網(wǎng)易云音樂(lè)通過(guò)打造“云村”社區(qū)、“熱評(píng)文化”等，讓用戶在使用音樂(lè)的過(guò)程中，能夠找到情感的共鳴，獲得陪伴與理解，從而產(chǎn)生深度的情感認(rèn)同與品牌忠誠(chéng)度。

首先，在“熱評(píng)文化”設(shè)計(jì)上，網(wǎng)易云音樂(lè)的“熱評(píng)”是其最具代表性的情感化設(shè)計(jì)，也是用戶情感共鳴的核心載體。

每一首歌曲的評(píng)論區(qū)，都有大量的用戶留言，這些留言，有的是用戶的心情感悟、有的是用戶的故事、有的是用戶的思念與祝福，真實(shí)而真摯，能夠戳中用戶的內(nèi)心，引發(fā)用戶的情感共鳴。

比如，很多用戶在聽(tīng)到傷感的歌曲時(shí)，會(huì)在評(píng)論區(qū)留言自己的傷心事，其他用戶會(huì)在評(píng)論區(qū)安慰、鼓勵(lì)，形成一種“相互陪伴、相互理解”的氛圍；很多用戶在聽(tīng)到溫暖的歌曲時(shí)，會(huì)在評(píng)論區(qū)留言自己的幸福事，分享自己的快樂(lè)，讓其他用戶也能夠感受到快樂(lè)。

網(wǎng)易云音樂(lè)的“熱評(píng)”設(shè)計(jì)，不僅讓用戶能夠表達(dá)自己的情感，還能夠讓用戶找到志同道合的人，獲得歸屬感與陪伴感。

此外，網(wǎng)易云音樂(lè)還會(huì)將優(yōu)質(zhì)的熱評(píng)，展示在歌曲的播放界面，讓更多的用戶看到，引發(fā)更多的情感共鳴；同時(shí)，網(wǎng)易云音樂(lè)還會(huì)舉辦“熱評(píng)征集”活動(dòng)，鼓勵(lì)用戶留言，進(jìn)一步強(qiáng)化“熱評(píng)文化”，傳遞陪伴、理解、共鳴的情感。

其次，在“云村”社區(qū)設(shè)計(jì)上，網(wǎng)易云音樂(lè)打造了“云村”社區(qū)，讓用戶能夠圍繞音樂(lè)，進(jìn)行更深入的社交互動(dòng)，傳遞陪伴、共鳴的情感。

“云村”社區(qū)涵蓋了“動(dòng)態(tài)、Mlog、歌單、話題”等多個(gè)板塊，用戶可以在“云村”發(fā)布自己的動(dòng)態(tài)、Mlog，分享自己的音樂(lè)感悟、生活故事；可以創(chuàng)建歌單，分享自己喜歡的歌曲，與其他用戶交流音樂(lè)心得；可以參與話題討論，圍繞音樂(lè)、情感等話題，與其他用戶交流互動(dòng)，找到志同道合的人，獲得歸屬感。

比如，“云村”的“每日話題”，每天都會(huì)推出一個(gè)與情感、音樂(lè)相關(guān)的話題（如“你聽(tīng)過(guò)最治愈的一首歌”“用一首歌形容你的今天”），鼓勵(lì)用戶參與討論，分享自己的故事與感悟，引發(fā)用戶的共鳴。

轉(zhuǎn)載：人人都是產(chǎn)品經(jīng)理

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.hengshangtqd.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。

蘭亭妙微UI設(shè)計(jì)公司分享：過(guò)去，產(chǎn)品經(jīng)理談界面設(shè)計(jì)，常常只需要說(shuō)一句：“這個(gè)頁(yè)面按后臺(tái)系統(tǒng)常規(guī)樣式做就行。”

但今天，這句話已經(jīng)不夠用了。

一方面，AI 產(chǎn)品、SaaS 工具、內(nèi)容平臺(tái)、數(shù)據(jù)看板、運(yùn)營(yíng)后臺(tái)越來(lái)越多，產(chǎn)品的第一印象越來(lái)越依賴界面質(zhì)感。另一方面，前端開(kāi)發(fā)已經(jīng)不再是從零開(kāi)始寫每一個(gè)按鈕、表單和彈窗，大多數(shù)團(tuán)隊(duì)都會(huì)基于成熟的 UI 框架或組件庫(kù)快速搭建產(chǎn)品。

所以，產(chǎn)品經(jīng)理雖然不一定要會(huì)寫代碼，但至少應(yīng)該知道：市面上有哪些常見(jiàn)的前端 UI 框架？它們分別適合什么產(chǎn)品？什么時(shí)候該用現(xiàn)成框架，什么時(shí)候需要做定制設(shè)計(jì)？如果你完全不了解這些，很容易在需求評(píng)審時(shí)提出“不現(xiàn)實(shí)的設(shè)計(jì)要求”，或者在產(chǎn)品視覺(jué)層面輸給競(jìng)品。

這篇文章，就幫產(chǎn)品經(jīng)理系統(tǒng)梳理一次。

一、什么是前端 UI 框架？

簡(jiǎn)單理解，前端 UI 框架就是一套已經(jīng)設(shè)計(jì)好、開(kāi)發(fā)好的界面組件集合。

比如：

按鈕、輸入框、下拉選擇器、表格、彈窗、標(biāo)簽頁(yè)、菜單、日期選擇器、上傳組件、通知提醒、側(cè)邊欄、數(shù)據(jù)卡片……

這些都是產(chǎn)品頁(yè)面中高頻出現(xiàn)的基礎(chǔ)元素。

如果沒(méi)有 UI 框架，前端工程師就需要從零開(kāi)始寫這些組件，不僅開(kāi)發(fā)效率低，也很難保證不同頁(yè)面之間的風(fēng)格統(tǒng)一。

而有了 UI 框架之后，團(tuán)隊(duì)可以直接調(diào)用現(xiàn)成組件，再根據(jù)品牌風(fēng)格進(jìn)行主題定制。對(duì)于產(chǎn)品經(jīng)理來(lái)說(shuō)，這意味著：

• 頁(yè)面開(kāi)發(fā)速度更快；
• 交互一致性更強(qiáng)；
• 設(shè)計(jì)和研發(fā)溝通成本更低；
• 后續(xù)維護(hù)和迭代更可控。

所以，UI 框架并不只是“讓頁(yè)面變好看”的工具，它本質(zhì)上是產(chǎn)品研發(fā)效率的一部分。

二、產(chǎn)品經(jīng)理為什么需要了解 UI 框架？

很多產(chǎn)品經(jīng)理會(huì)覺(jué)得：“UI 框架不是前端工程師的事情嗎？我為什么要懂？”

原因很簡(jiǎn)單：你不需要會(huì)用，但你需要會(huì)判斷。

產(chǎn)品經(jīng)理至少要知道三個(gè)問(wèn)題：

第一，這個(gè)產(chǎn)品適合用什么類型的 UI 框架？

一個(gè)企業(yè)管理后臺(tái)，和一個(gè) AI 聊天產(chǎn)品，和一個(gè)營(yíng)銷活動(dòng)頁(yè)面，對(duì)界面風(fēng)格的要求是不一樣的。后臺(tái)系統(tǒng)更看重表格、表單、權(quán)限、篩選和數(shù)據(jù)展示；AI 產(chǎn)品更看重現(xiàn)代感、輕量感、動(dòng)效和交互體驗(yàn)；官網(wǎng)落地頁(yè)則更看重視覺(jué)沖擊力和轉(zhuǎn)化路徑。

第二，UI 框架會(huì)影響產(chǎn)品氣質(zhì)。

同樣是一個(gè)管理系統(tǒng)，用 Ant Design、Element Plus、shadcn/ui、HeroUI 做出來(lái)的感覺(jué)可能完全不同。有的偏企業(yè)化，有的偏清爽，有的偏現(xiàn)代，有的偏國(guó)際化。

第三，UI 框架會(huì)影響需求實(shí)現(xiàn)成本。

有些組件框架本身就提供復(fù)雜表格、表單校驗(yàn)、日期選擇、上傳、權(quán)限布局等能力，實(shí)現(xiàn)成本較低；但如果產(chǎn)品經(jīng)理提出的交互和框架默認(rèn)能力差異很大，研發(fā)成本就會(huì)上升。

所以，懂 UI 框架，不是為了替前端做技術(shù)選型，而是為了讓產(chǎn)品經(jīng)理在設(shè)計(jì)需求、評(píng)估成本、判斷風(fēng)格時(shí)更專業(yè)。

三、產(chǎn)品經(jīng)理必知的幾類前端 UI 框架

前端 UI 框架很多，但產(chǎn)品經(jīng)理不需要全部掌握。你只需要知道以下幾類。

1. Ant Design：企業(yè)級(jí)后臺(tái)系統(tǒng)的經(jīng)典選擇

如果你做過(guò)中后臺(tái)產(chǎn)品，大概率聽(tīng)說(shuō)過(guò) Ant Design。

它最適合的場(chǎng)景是：企業(yè)管理后臺(tái)、CRM、ERP、數(shù)據(jù)平臺(tái)、運(yùn)營(yíng)后臺(tái)、權(quán)限系統(tǒng)、審批系統(tǒng)、配置系統(tǒng)等。

Ant Design 的優(yōu)勢(shì)是組件非常完整，尤其適合復(fù)雜表格、復(fù)雜表單、數(shù)據(jù)篩選、彈窗、菜單、導(dǎo)航、分頁(yè)、上傳等中后臺(tái)場(chǎng)景。對(duì)于國(guó)內(nèi)很多 B 端產(chǎn)品來(lái)說(shuō)，它幾乎已經(jīng)是一種“默認(rèn)選擇”。

但它也有一個(gè)明顯問(wèn)題：默認(rèn)風(fēng)格比較“企業(yè)化”。如果不做主題調(diào)整，產(chǎn)品容易看起來(lái)像傳統(tǒng)后臺(tái)，缺少年輕感和高級(jí)感。

產(chǎn)品經(jīng)理在使用 Ant Design 時(shí)要注意一點(diǎn)：它適合提高效率，但不代表產(chǎn)品一定好看。如果是面向外部客戶的 SaaS 產(chǎn)品，最好在顏色、間距、卡片、圖標(biāo)和數(shù)據(jù)可視化上做二次設(shè)計(jì)。

適合場(chǎng)景：

• 企業(yè)后臺(tái)
• SaaS 管理系統(tǒng)
• 數(shù)據(jù)看板
• 權(quán)限管理系統(tǒng)
• 運(yùn)營(yíng)配置平臺(tái)

不太適合：

• 強(qiáng)品牌感官網(wǎng)
• 高級(jí)感 AI 產(chǎn)品首頁(yè)
• 視覺(jué)表達(dá)要求很強(qiáng)的 C 端產(chǎn)品

2. Element Plus：Vue 技術(shù)棧里的后臺(tái)常用選擇

Element Plus 是 Vue 生態(tài)里非常常見(jiàn)的 UI 組件庫(kù)，很多國(guó)內(nèi)團(tuán)隊(duì)做后臺(tái)系統(tǒng)都會(huì)用它。

如果你的技術(shù)團(tuán)隊(duì)使用 Vue 3，那么 Element Plus 通常會(huì)是一個(gè)很容易被考慮的選項(xiàng)。它上手成本低，文檔友好，組件也比較完整，適合快速搭建管理系統(tǒng)。

它的產(chǎn)品氣質(zhì)和 Ant Design 有點(diǎn)類似，都是偏中后臺(tái)、偏效率、偏穩(wěn)定的路線。對(duì)于產(chǎn)品經(jīng)理來(lái)說(shuō)，Element Plus 的核心價(jià)值不是“多么驚艷”，而是“穩(wěn)定、通用、開(kāi)發(fā)快”。

適合場(chǎng)景：

• Vue 技術(shù)棧后臺(tái)系統(tǒng)
• 內(nèi)部管理平臺(tái)
• 表單密集型產(chǎn)品
• 快速搭建 MVP
• 運(yùn)營(yíng)管理系統(tǒng)

需要注意的是，如果產(chǎn)品對(duì)視覺(jué)高級(jí)感要求很高，Element Plus 默認(rèn)風(fēng)格也需要二次設(shè)計(jì)，否則容易顯得普通。

3. Naive UI：更清爽現(xiàn)代的 Vue 組件庫(kù)

Naive UI 也是 Vue 3 生態(tài)中值得產(chǎn)品經(jīng)理了解的一套組件庫(kù)。

和 Element Plus 相比，Naive UI 的氣質(zhì)更輕、更現(xiàn)代，視覺(jué)上也更清爽一些。它比較適合那些既需要后臺(tái)能力，又希望界面不要太傳統(tǒng)的產(chǎn)品。

比如 AI 工具后臺(tái)、內(nèi)容管理系統(tǒng)、知識(shí)庫(kù)產(chǎn)品、數(shù)據(jù)分析工具、輕量 SaaS 控制臺(tái)等，都可以考慮 Naive UI。

對(duì)產(chǎn)品經(jīng)理來(lái)說(shuō)，Naive UI 的價(jià)值在于：它不那么“老派后臺(tái)”，同時(shí)又具備比較完整的組件能力。如果你希望產(chǎn)品既有效率，又看起來(lái)更年輕，它是一個(gè)不錯(cuò)的選擇。

適合場(chǎng)景：

• Vue 3 項(xiàng)目
• 清爽型后臺(tái)
• AI 工具管理端
• 內(nèi)容平臺(tái)后臺(tái)
• 輕量 SaaS 產(chǎn)品

4. Arco Design：適合年輕化企業(yè)產(chǎn)品

Arco Design 是一套偏企業(yè)級(jí)的設(shè)計(jì)系統(tǒng)和組件庫(kù)，既有 React 版本，也有 Vue 版本。它的整體風(fēng)格比傳統(tǒng)企業(yè)后臺(tái)更年輕，適合需要兼顧效率和視覺(jué)感的產(chǎn)品。

如果說(shuō) Ant Design 更像成熟穩(wěn)重的企業(yè)后臺(tái)，那么 Arco Design 相對(duì)更輕、更活潑一些。它適合做企業(yè)協(xié)同產(chǎn)品、效率工具、數(shù)據(jù)平臺(tái)、SaaS 后臺(tái)、運(yùn)營(yíng)系統(tǒng)等。

產(chǎn)品經(jīng)理可以把 Arco Design 理解為：在企業(yè)級(jí)能力和年輕化視覺(jué)之間做平衡的一套方案。

適合場(chǎng)景：

• 企業(yè)級(jí) SaaS
• 協(xié)同辦公產(chǎn)品
• 數(shù)據(jù)分析平臺(tái)
• 運(yùn)營(yíng)后臺(tái)
• 年輕化 B 端產(chǎn)品

5. MUI：適合國(guó)際化產(chǎn)品和 Material Design 風(fēng)格

MUI 是 React 生態(tài)里很成熟的一套組件庫(kù)，基于 Google 的 Material Design 風(fēng)格。

它的特點(diǎn)是規(guī)范感強(qiáng)、組件完整、國(guó)際化程度高。很多海外產(chǎn)品、開(kāi)發(fā)者工具、SaaS 產(chǎn)品會(huì)使用 MUI。

不過(guò)，MUI 的默認(rèn)風(fēng)格有比較明顯的 Material Design 特征。如果你的產(chǎn)品希望看起來(lái)更“Google 系”，MUI 會(huì)比較合適；但如果你希望做出獨(dú)特品牌感，就需要進(jìn)行較多主題定制。

適合場(chǎng)景：

• 國(guó)際化 SaaS
• React 項(xiàng)目
• 工具型產(chǎn)品
• 海外用戶產(chǎn)品
• Material Design 風(fēng)格產(chǎn)品

6. Mantine：React 生態(tài)里的全能型選手

Mantine 是一套比較全能的 React 組件庫(kù)。

它的優(yōu)勢(shì)在于組件豐富、hooks 完整、主題定制能力強(qiáng)，適合做各種 Web 應(yīng)用，尤其適合 SaaS、后臺(tái)系統(tǒng)、工具型產(chǎn)品。

和 Ant Design 相比，Mantine 的視覺(jué)氣質(zhì)更輕一些；和 shadcn/ui 相比，它又更像一個(gè)完整的組件庫(kù)，開(kāi)箱即用能力更強(qiáng)。

如果你的團(tuán)隊(duì)使用 React，并且想要一個(gè)既能快速開(kāi)發(fā)、又不會(huì)太傳統(tǒng)的 UI 框架，Mantine 是值得考慮的選擇。

適合場(chǎng)景：

• React SaaS 產(chǎn)品
• 工具型 Web 應(yīng)用
• 管理后臺(tái)
• 表單密集型產(chǎn)品
• 中小型商業(yè)產(chǎn)品

7. Shadcn ui：當(dāng)下很適合 AI 產(chǎn)品的現(xiàn)代組件方案

近幾年，Shadcn ui 在 React 和 Next.js 圈子里非常受歡迎。

嚴(yán)格來(lái)說(shuō)，它并不是傳統(tǒng)意義上的組件庫(kù)。它更像是一套可以復(fù)制到自己項(xiàng)目里、再自由改造的組件體系。它的設(shè)計(jì)風(fēng)格非常現(xiàn)代，配合 Tailwind CSS 使用，很容易做出高級(jí)、干凈、有質(zhì)感的界面。

這類風(fēng)格非常適合 AI 產(chǎn)品、SaaS 官網(wǎng)、開(kāi)發(fā)者工具、數(shù)據(jù)看板、知識(shí)庫(kù)產(chǎn)品、內(nèi)容平臺(tái)等。

shadcn/ui 的優(yōu)勢(shì)是好看、靈活、可控；缺點(diǎn)是它對(duì)前端團(tuán)隊(duì)能力要求更高，不像傳統(tǒng)組件庫(kù)那樣“一裝即用”。如果團(tuán)隊(duì)前端能力不錯(cuò)，它可以做出非常有差異化的產(chǎn)品視覺(jué)；如果團(tuán)隊(duì)比較依賴現(xiàn)成組件，使用成本可能會(huì)更高。

適合場(chǎng)景：

• AI 產(chǎn)品
• Next.js 項(xiàng)目
• SaaS 控制臺(tái)
• 開(kāi)發(fā)者工具
• 高級(jí)感管理后臺(tái)
• 需要定制化設(shè)計(jì)系統(tǒng)的產(chǎn)品

對(duì)產(chǎn)品經(jīng)理來(lái)說(shuō)，shadcn/ui 值得重點(diǎn)關(guān)注。因?yàn)楝F(xiàn)在很多新一代 AI 產(chǎn)品的界面風(fēng)格，已經(jīng)不再是傳統(tǒng)后臺(tái)，而是更輕、更白、更克制、更高級(jí)的設(shè)計(jì)語(yǔ)言。

8. HeroUI：適合想要默認(rèn)就好看的 React 產(chǎn)品

HeroUI 也是一套適合 React 項(xiàng)目的現(xiàn)代 UI 組件庫(kù)。

它的特點(diǎn)是默認(rèn)視覺(jué)比較好，組件帶有更明顯的現(xiàn)代感和動(dòng)效感，適合做 AI 工具、創(chuàng)作者產(chǎn)品、社區(qū)產(chǎn)品、輕量 SaaS 產(chǎn)品等。

如果產(chǎn)品經(jīng)理希望產(chǎn)品一開(kāi)始就有不錯(cuò)的視覺(jué)表現(xiàn)，而不是完全依賴設(shè)計(jì)師和前端從零調(diào)整，HeroUI 會(huì)是一個(gè)不錯(cuò)的選擇。

適合場(chǎng)景：

• AI 工具
• 創(chuàng)作者工具
• 輕量 SaaS
• 社區(qū)產(chǎn)品
• 現(xiàn)代化 Web 應(yīng)用

9. Tailwind CSS：不是組件庫(kù)，但產(chǎn)品經(jīng)理也應(yīng)該知道

Tailwind CSS 嚴(yán)格來(lái)說(shuō)不是 UI 組件庫(kù)，而是一套 CSS 工具框架。

你可以把它理解成一套“原子化樣式系統(tǒng)”。它不會(huì)直接給你一個(gè)完整的表格或彈窗，但它可以讓前端非常靈活地搭建各種界面。

現(xiàn)在很多現(xiàn)代 UI 框架和組件方案都會(huì)基于 Tailwind CSS，比如 shadcn/ui、HeroUI 等。

產(chǎn)品經(jīng)理不需要理解 Tailwind CSS 的寫法，但要知道它代表了一種趨勢(shì)：越來(lái)越多團(tuán)隊(duì)不滿足于直接套用傳統(tǒng)組件庫(kù)，而是希望通過(guò)更靈活的樣式系統(tǒng)，做出更有品牌感的界面。

適合場(chǎng)景：

• 高定制化官網(wǎng)
• SaaS 官網(wǎng)
• AI 產(chǎn)品頁(yè)面
• 需要強(qiáng)視覺(jué)表達(dá)的產(chǎn)品
• 自建設(shè)計(jì)系統(tǒng)

四、產(chǎn)品經(jīng)理應(yīng)該如何選擇 UI 框架？

產(chǎn)品經(jīng)理不需要決定最終技術(shù)選型，但可以和設(shè)計(jì)師、前端一起從以下幾個(gè)維度判斷。

1. 先看產(chǎn)品類型

如果是企業(yè)后臺(tái)、管理系統(tǒng)、配置平臺(tái)，可以優(yōu)先考慮 Ant Design、Element Plus、Arco Design。

如果是 AI 產(chǎn)品、SaaS 工具、開(kāi)發(fā)者工具，可以重點(diǎn)關(guān)注 shadcn/ui、HeroUI、Mantine。

如果是 Vue 技術(shù)棧，可以看 Element Plus、Naive UI、Arco Design Vue。

如果是官網(wǎng)、落地頁(yè)、活動(dòng)頁(yè)，可以關(guān)注 Tailwind CSS 及其生態(tài)組件。

2. 再看技術(shù)棧

React 項(xiàng)目常見(jiàn)選擇：

• Ant Design
• MUI
• Mantine
• shadcn/ui
• HeroUI
• Arco Design React

Vue 項(xiàng)目常見(jiàn)選擇：

• Element Plus
• Naive UI
• Arco Design Vue
• shadcn-vue

不同框架并不是隨便選的，它和團(tuán)隊(duì)技術(shù)棧高度相關(guān)。產(chǎn)品經(jīng)理不要只說(shuō)“我喜歡這個(gè)風(fēng)格”，還要問(wèn)一句：“我們現(xiàn)在的前端技術(shù)棧適合用它嗎？”

3. 看組件完整度

如果產(chǎn)品里有大量復(fù)雜表格、篩選、表單、權(quán)限、彈窗、上傳、日期選擇，組件完整度非常重要。

這類產(chǎn)品更適合選擇成熟組件庫(kù)，比如 Ant Design、Element Plus、Mantine、Arco Design。

如果產(chǎn)品更重視視覺(jué)表達(dá)、頁(yè)面質(zhì)感和品牌差異化，可以選擇 shadcn/ui、HeroUI、Tailwind CSS 生態(tài)。

4. 看設(shè)計(jì)定制能力

很多產(chǎn)品的問(wèn)題不是“沒(méi)有 UI 框架”，而是“所有頁(yè)面都長(zhǎng)得像模板”。

如果你希望產(chǎn)品有自己的品牌感，就不能只依賴默認(rèn)樣式。產(chǎn)品經(jīng)理需要關(guān)注：

• 是否支持主題色定制？
• 是否支持暗黑模式？
• 組件間距能不能統(tǒng)一調(diào)整？
• 按鈕、卡片、表格、彈窗是否能形成統(tǒng)一設(shè)計(jì)語(yǔ)言？
• 設(shè)計(jì)稿和前端組件是否能長(zhǎng)期保持一致？

一個(gè)成熟產(chǎn)品，最終一定不是簡(jiǎn)單套模板，而是形成自己的設(shè)計(jì)系統(tǒng)。

五、不同產(chǎn)品場(chǎng)景的推薦選擇

如果你是做企業(yè)中后臺(tái)：

優(yōu)先看 Ant Design、Element Plus、Arco Design。它們組件成熟，適合復(fù)雜業(yè)務(wù)場(chǎng)景，尤其是表格、表單、篩選、權(quán)限等能力比較重要的系統(tǒng)。

如果你是做 AI 產(chǎn)品：

優(yōu)先看 shadcn/ui、HeroUI、Mantine。它們更容易做出現(xiàn)代感和高級(jí)感，適合 AI 工具、AI 工作臺(tái)、AI 內(nèi)容平臺(tái)、AI Agent 控制臺(tái)等產(chǎn)品。

如果你是做 SaaS 產(chǎn)品：

可以根據(jù)風(fēng)格選擇 Mantine、shadcn/ui、Ant Design、Arco Design。如果是偏后臺(tái)管理，可以選 Ant Design 或 Arco；如果是偏現(xiàn)代工具，可以選 shadcn/ui 或 Mantine。

如果你是做官網(wǎng)和營(yíng)銷頁(yè)：

可以關(guān)注 Tailwind CSS 生態(tài)。相比傳統(tǒng)后臺(tái)組件庫(kù)，它更適合做品牌官網(wǎng)、課程頁(yè)、活動(dòng)頁(yè)、產(chǎn)品介紹頁(yè)。

如果你是 Vue 團(tuán)隊(duì)：

可以重點(diǎn)看 Element Plus、Naive UI、Arco Design Vue。如果想穩(wěn)妥，就選 Element Plus；如果想更現(xiàn)代，可以看 Naive UI；如果要企業(yè)級(jí)完整方案，可以看 Arco Design Vue。

六、產(chǎn)品經(jīng)理要避免的幾個(gè)誤區(qū)

第一個(gè)誤區(qū)：以為 UI 框架等于設(shè)計(jì)稿。

UI 框架只是基礎(chǔ)組件，不等于完整設(shè)計(jì)。真正的產(chǎn)品體驗(yàn)還包括信息架構(gòu)、頁(yè)面布局、視覺(jué)層級(jí)、交互路徑、文案表達(dá)和品牌調(diào)性。

第二個(gè)誤區(qū)：只看好不好看，不看業(yè)務(wù)復(fù)雜度。

有些框架看起來(lái)很美，但不一定適合復(fù)雜后臺(tái)。如果產(chǎn)品有大量表格、篩選和表單，組件能力比視覺(jué)炫酷更重要。

第三個(gè)誤區(qū)：只追求差異化，忽略開(kāi)發(fā)成本。

如果每個(gè)組件都要重寫，每個(gè)交互都要高度定制，產(chǎn)品看起來(lái)可能更特別，但研發(fā)成本和維護(hù)成本也會(huì)大幅上升。

第四個(gè)誤區(qū)：認(rèn)為用了某個(gè)框架就一定高級(jí)。

同樣使用 shadcn/ui，有的產(chǎn)品很高級(jí)，有的產(chǎn)品也會(huì)很普通。框架只是起點(diǎn)，最終效果取決于設(shè)計(jì)能力、前端實(shí)現(xiàn)和產(chǎn)品細(xì)節(jié)。

七、產(chǎn)品經(jīng)理真正應(yīng)該掌握的不是框架名字，而是選型邏輯

產(chǎn)品經(jīng)理了解 UI 框架，不是為了和前端爭(zhēng)論“到底用哪個(gè)庫(kù)”，而是為了提升產(chǎn)品判斷力。

你至少要能判斷：

• 這個(gè)產(chǎn)品是偏后臺(tái)，還是偏前臺(tái)？
• 是效率優(yōu)先，還是品牌優(yōu)先？
• 是快速上線，還是長(zhǎng)期打造設(shè)計(jì)系統(tǒng)？
• 是 React 技術(shù)棧，還是 Vue 技術(shù)棧？
• 是重表格表單，還是重視覺(jué)體驗(yàn)？
• 是內(nèi)部系統(tǒng)，還是面向用戶的商業(yè)產(chǎn)品？

當(dāng)你能回答這些問(wèn)題，和設(shè)計(jì)師、前端溝通時(shí)就會(huì)更專業(yè)。

結(jié)語(yǔ)：未來(lái)的產(chǎn)品經(jīng)理，要懂一點(diǎn)前端審美和工程效率

AI 時(shí)代，產(chǎn)品經(jīng)理的能力邊界正在變化。

過(guò)去，產(chǎn)品經(jīng)理重點(diǎn)關(guān)注需求、流程和功能；現(xiàn)在，產(chǎn)品經(jīng)理還需要懂一點(diǎn)界面審美、組件思維、設(shè)計(jì)系統(tǒng)和研發(fā)效率。

前端 UI 框架就是連接產(chǎn)品、設(shè)計(jì)和研發(fā)的重要橋梁。

你不需要成為前端工程師，但你需要知道：

• 做企業(yè)后臺(tái)時(shí)，為什么很多團(tuán)隊(duì)會(huì)選擇 Ant Design 或 Element Plus；
• 做現(xiàn)代 AI 產(chǎn)品時(shí)，為什么越來(lái)越多團(tuán)隊(duì)關(guān)注 shadcn/ui、HeroUI 和 Tailwind CSS；
• 做 SaaS 產(chǎn)品時(shí)，為什么組件庫(kù)不僅影響開(kāi)發(fā)速度，也影響用戶對(duì)產(chǎn)品專業(yè)度的第一印象。

真正優(yōu)秀的產(chǎn)品經(jīng)理，不只是會(huì)寫需求文檔，也要能判斷一個(gè)產(chǎn)品該用什么方式被更高效、更美觀、更可持續(xù)地做出來(lái)。

這，就是產(chǎn)品經(jīng)理應(yīng)該了解前端 UI 框架的原因。

轉(zhuǎn)載：人人都是產(chǎn)品經(jīng)理

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.hengshangtqd.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。

蘭亭妙微UI設(shè)計(jì)公司：在用戶需求日益多元化的旅游市場(chǎng)中，會(huì)員權(quán)益的價(jià)值不僅在于提供優(yōu)惠，更在于創(chuàng)造差異化的體驗(yàn)與長(zhǎng)期歸屬感。本次會(huì)員權(quán)益感知升級(jí)，我們通過(guò)權(quán)益展示規(guī)則優(yōu)化和場(chǎng)景化等方式，加強(qiáng)用戶對(duì)會(huì)員權(quán)益的感知，讓用戶從預(yù)訂到旅程的每個(gè)環(huán)節(jié)都能清晰感知會(huì)員權(quán)益的價(jià)值。

一、背景

當(dāng)前，集團(tuán)持續(xù)加大在會(huì)員權(quán)益方面的投入，旨在通過(guò)更具價(jià)值的權(quán)益體系提升用戶體驗(yàn)。優(yōu)質(zhì)的會(huì)員服務(wù)不僅能增強(qiáng)用戶粘性和忠誠(chéng)度，更能有效提高權(quán)益使用率和訂單轉(zhuǎn)化率。此次會(huì)員體驗(yàn)升級(jí)，正是希望通過(guò)優(yōu)化權(quán)益設(shè)計(jì)和服務(wù)體驗(yàn)，實(shí)現(xiàn)用戶價(jià)值與平臺(tái)效益的雙贏，最終形成"投入-體驗(yàn)提升-效益增長(zhǎng)"的良性循環(huán)。

二、問(wèn)題洞察

通過(guò)走查線上各業(yè)務(wù)線（如機(jī)票、酒店等）的頁(yè)面，我們發(fā)現(xiàn)了以下 2 個(gè)問(wèn)題：

1. 不同業(yè)務(wù)線間：權(quán)益的展示節(jié)點(diǎn)和感知強(qiáng)度不同，缺少一致的設(shè)計(jì)原則

目前各業(yè)務(wù)線在會(huì)員權(quán)益方面的設(shè)計(jì)手段不同，在權(quán)益展示點(diǎn)位和感知強(qiáng)度上存在明顯差異，缺少一致的設(shè)計(jì)原則進(jìn)行規(guī)范。具體表現(xiàn)為：

酒店：主要通過(guò)貨架展示強(qiáng)化會(huì)員權(quán)益感知

機(jī)票：側(cè)重在列表頁(yè)和中間頁(yè)等固定位置展示

火車票：則聚焦于權(quán)益使用環(huán)節(jié)的觸達(dá)

2. 單個(gè)業(yè)務(wù)線內(nèi)：優(yōu)勢(shì)權(quán)益在流程中沒(méi)有充分傳達(dá)

通過(guò)對(duì)各業(yè)務(wù)線現(xiàn)有頁(yè)面的走查，我們發(fā)現(xiàn)會(huì)員權(quán)益在訂前、訂后部分關(guān)鍵節(jié)點(diǎn)存在展示缺失的問(wèn)題。雖然用戶在流程中能看到權(quán)益信息，但整體感知度仍有不足。

針對(duì)上述問(wèn)題，我們需要建立統(tǒng)一的設(shè)計(jì)原則，在保持各業(yè)務(wù)線自身特色的同時(shí)，形成協(xié)同一致的會(huì)員體驗(yàn)，提升用戶對(duì)會(huì)員權(quán)益的整體感知效果。

三、設(shè)計(jì)優(yōu)化——從"能看到"到"感知好"

本次優(yōu)化主要圍繞兩個(gè)核心目標(biāo)展開(kāi)：一是建立規(guī)范的權(quán)益展示原則，二是提升用戶對(duì)權(quán)益的感知度。具體將從以下幾個(gè)方向著手：

1. 權(quán)益前置，強(qiáng)化展示

根據(jù)歷史機(jī)票和酒店的項(xiàng)目數(shù)據(jù)，我們發(fā)現(xiàn)將具有明顯優(yōu)勢(shì)的權(quán)益提前展示，能夠顯著增強(qiáng)用戶的感知，并有效提升預(yù)訂轉(zhuǎn)化率。例如攜程酒店將會(huì)員賬戶中的的權(quán)益與預(yù)訂流程結(jié)合，將原本無(wú)早餐的劣勢(shì)轉(zhuǎn)化為會(huì)員可免費(fèi)兌早餐的優(yōu)勢(shì)展示。這樣的方式為我們提供了本次優(yōu)化的思路——通過(guò)權(quán)益前置來(lái)強(qiáng)化權(quán)益，加強(qiáng)感知。

什么樣的權(quán)益需要前置？——設(shè)定強(qiáng)弱權(quán)益規(guī)則

為提升會(huì)員權(quán)益展示效果，我們通過(guò)對(duì)權(quán)益內(nèi)容的系統(tǒng)分析，將其劃分為兩大類別：強(qiáng)權(quán)益和弱權(quán)益。

強(qiáng)權(quán)益：指與產(chǎn)品線直接相關(guān)或?qū)r(jià)格產(chǎn)生顯著影響的權(quán)益，例如酒店業(yè)務(wù)的免費(fèi)早餐服務(wù)和會(huì)員專享價(jià)格。這類權(quán)益在用戶購(gòu)買決策中起關(guān)鍵作用，能有效提升用戶滿意度和預(yù)訂轉(zhuǎn)化率，因此需要在核心預(yù)訂節(jié)點(diǎn)進(jìn)行重點(diǎn)展示。

弱權(quán)益：指與產(chǎn)品線關(guān)聯(lián)度較低的權(quán)益，例如機(jī)票業(yè)務(wù)的快速安檢服務(wù)。雖然這類權(quán)益不會(huì)直接影響用戶的預(yù)訂決策，但可作為增值服務(wù)提升用戶體驗(yàn)，間接促進(jìn)轉(zhuǎn)化。

為確保權(quán)益展示的客觀準(zhǔn)確，我們也可以借助內(nèi)部的權(quán)益價(jià)值計(jì)算公式，量化每項(xiàng)權(quán)益的實(shí)際價(jià)值，幫助我們精準(zhǔn)評(píng)估和展示權(quán)益，為用戶提供更有價(jià)值的會(huì)員體驗(yàn)，最終提升用戶滿意度和忠誠(chéng)度。

2. 讓權(quán)益貫穿各節(jié)點(diǎn)的策略

在對(duì)各業(yè)務(wù)線的線上頁(yè)面進(jìn)行走查時(shí)，我們注意到訂前、訂后部分節(jié)點(diǎn)常常出現(xiàn)權(quán)益感知缺失的情況。

為了充分提升權(quán)益的曝光，我們制定了強(qiáng)弱權(quán)益展示的規(guī)則，定義了在各節(jié)點(diǎn)展示的必要性。在預(yù)訂前節(jié)點(diǎn)，我們優(yōu)先展示與用戶決策緊密相關(guān)的強(qiáng)權(quán)益，并在相關(guān)性較低的節(jié)點(diǎn)提前展示弱權(quán)益，以加深用戶印象并促進(jìn)轉(zhuǎn)化。預(yù)定后，對(duì)收益、轉(zhuǎn)化率和 CPO（客服來(lái)電率）的影響較小，需要做到盡可能強(qiáng)的展示。

根據(jù)以上規(guī)則，我們?cè)趯?shí)際點(diǎn)位進(jìn)行了應(yīng)用：

以火車票業(yè)務(wù)為例，我們通過(guò)優(yōu)化權(quán)益展示策略，在首頁(yè)新增曝光點(diǎn)位、強(qiáng)化現(xiàn)有頁(yè)面展示效果，并完善訂后權(quán)益展示，使會(huì)員權(quán)益的觸達(dá)貫穿用戶全流程。優(yōu)化后，權(quán)益曝光率和用戶感知強(qiáng)度有了明顯的提升。

3. 更加嚴(yán)格的設(shè)計(jì)規(guī)范

此前制定的會(huì)員權(quán)益視覺(jué)規(guī)范，因各業(yè)務(wù)線復(fù)雜度不同，在多次迭代后逐漸出現(xiàn)差異，導(dǎo)致不同業(yè)務(wù)線之間展示不一致、單個(gè)業(yè)務(wù)線內(nèi)流程不統(tǒng)一的問(wèn)題。為此，本次優(yōu)化中我們也重點(diǎn)明確了各類場(chǎng)景的標(biāo)簽使用規(guī)范和文案規(guī)范，全面提升展示一致性，同時(shí)加強(qiáng)會(huì)員身份的表達(dá)。

經(jīng)過(guò)以上幾點(diǎn)優(yōu)化，上線后數(shù)據(jù)顯示用戶對(duì)會(huì)員權(quán)益的滿意度、會(huì)員權(quán)益的使用率都有顯著提升，驗(yàn)證了設(shè)計(jì)方案的有效性。

四、強(qiáng)化重要節(jié)點(diǎn)的感知

除了常規(guī)流程中的會(huì)員感知，我們也在思考如何進(jìn)一步加深用戶的印象，讓用戶訂票時(shí)優(yōu)先選擇攜程。

1. 出行中節(jié)點(diǎn)——提供好用的體驗(yàn)

訂后的節(jié)點(diǎn)往往容易被忽視，以機(jī)票的快速安檢權(quán)益為例，用戶通常需要打開(kāi)攜程 App → 查找訂單詳情 → 定位權(quán)益入口 → 完成核銷，步驟較長(zhǎng)，導(dǎo)致體驗(yàn)打折。

新版本中，我們將出行相關(guān)的會(huì)員權(quán)益（如快速安檢）直接前置至攜程 App 大首頁(yè)的行程卡片。用戶打開(kāi) App 即可快速查看和使用權(quán)益，無(wú)需多層跳轉(zhuǎn)。改版后，用戶體驗(yàn)和權(quán)益使

用率都得到了提升。

2. 會(huì)員升級(jí)節(jié)點(diǎn)——制造驚喜感

基于 KANO 模型，我們可以將用戶需求分為三類：基本型、期望型、興奮型，在前面的改版中我們已經(jīng)滿足了用戶的前兩類需求。我們希望制造驚喜感和儀式感來(lái)滿足用戶的興奮型需求。攜程會(huì)員體系以“山峰”為視覺(jué)符號(hào)，不同高度代表不同等級(jí)，用戶每次升級(jí)，都象征著翻越一座新的高峰。象征用戶翻越山峰的升級(jí)節(jié)點(diǎn)正是滿足用戶“興奮型需求”的關(guān)鍵時(shí)刻。

因此，在用戶升級(jí)時(shí)，我們?cè)跀y程首頁(yè)增加升級(jí)彈窗強(qiáng)化驚喜感和儀式感。用戶打開(kāi) App 即可直觀感受到等級(jí)提升的成就，并快速了解新增權(quán)益。上線后帶來(lái)了人均使用權(quán)益訂單量、會(huì)員中心訪問(wèn)率等數(shù)據(jù)的提升。

結(jié)語(yǔ)

通過(guò)系統(tǒng)化的設(shè)計(jì)與持續(xù)迭代，會(huì)員權(quán)益體系能夠深度釋放用戶價(jià)值，推動(dòng)品牌的長(zhǎng)期可持續(xù)增長(zhǎng)。在這個(gè)過(guò)程中，我們需要確保用戶在全渠道觸點(diǎn)中獲得連貫一致的體驗(yàn)，從而建立穩(wěn)固的品牌信任，降低用戶的學(xué)習(xí)與決策成本。同時(shí)，我們需要強(qiáng)化會(huì)員的價(jià)值感知，通過(guò)具象化的權(quán)益呈現(xiàn)和情感化的設(shè)計(jì)表達(dá)，讓用戶切實(shí)感受到專屬特權(quán)與歸屬感，最終打造出更具黏性的用戶體驗(yàn)閉環(huán)。

轉(zhuǎn)載：優(yōu)設(shè)

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.hengshangtqd.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。

在接觸和學(xué)習(xí) UI 設(shè)計(jì)的時(shí)候，我們都必須面對(duì)國(guó)內(nèi)外 UI 設(shè)計(jì)風(fēng)格差異巨大的問(wèn)題。比如最近 618，相信大家沒(méi)少被國(guó)產(chǎn)應(yīng)用的廣告“親切的”問(wèn)候。

一方面是尋找設(shè)計(jì)靈感時(shí)要做區(qū)分，另一方面則是我們學(xué)習(xí) UI 時(shí)看的書(shū)籍，學(xué)習(xí)的理論、規(guī)范，都是由西方國(guó)家產(chǎn)出的，而國(guó)內(nèi)設(shè)計(jì)的方向卻和它們背道而馳，用一個(gè)詞來(lái)形容現(xiàn)狀，那就是 —— 割裂。

所以在初學(xué)階段，理論學(xué)的越多，受到的沖擊也就越大，疑問(wèn)也就越多。所以我們今天的目標(biāo)，就是來(lái)幫大家解答這個(gè)疑問(wèn)。

一、設(shè)計(jì)差異的根源分析

當(dāng)我們研究國(guó)內(nèi)外 UI 設(shè)計(jì)的差異時(shí)，樣式上的差異只是表象，它們是由更深層次的因素所激發(fā)，所以我們首先要深究這些問(wèn)題的根源。

根據(jù)過(guò)去十幾年的 UI 研究經(jīng)驗(yàn)，我總結(jié)的設(shè)計(jì)差異包含下面這些因素：

1. 盈利模式的差異
2. 人工成本的差異
3. 用戶習(xí)慣的差異

1. 盈利模式的差異

國(guó)外產(chǎn)品相對(duì)國(guó)內(nèi)的盈利模式相對(duì)簡(jiǎn)單、健康，排除掉大型平臺(tái)和其它服務(wù)配套應(yīng)用外（比如會(huì)員、硬件的配套），基本就是買斷、訂閱、廣告這三個(gè)途徑。

比如我們熟悉的 Figma、Canva、Notion 等，都是訂閱制服務(wù)，在產(chǎn)品具備足夠競(jìng)爭(zhēng)力的條件下發(fā)展出海量的付費(fèi)用戶，獲得巨大的收益和估值（團(tuán)隊(duì)只有一兩百人時(shí)估值過(guò)百億刀）。既然做好產(chǎn)品就能盈利，那這些產(chǎn)品的目標(biāo)自然是打造更好的產(chǎn)品和提供更好的服務(wù)或體驗(yàn)來(lái)獲得收益。

而國(guó)內(nèi)市場(chǎng)我們都知道，用戶付費(fèi)的意愿是非常非常低的，這就導(dǎo)致很多產(chǎn)品即使做的還不錯(cuò)也看不到盈利希望，尤其是大廠產(chǎn)品，比如迅雷，百度網(wǎng)盤，網(wǎng)易云等等。

靠基礎(chǔ)付費(fèi)模式做不出讓人滿意的營(yíng)收，產(chǎn)品團(tuán)隊(duì)自然要使出渾身解數(shù)來(lái)找到盈利點(diǎn)，不管是增加一些奇怪的功能，還是制造各種營(yíng)銷活動(dòng)。而這些嘗試想要獲得持續(xù)的盈利是非常困難的，所以就得一直想，一直嘗試，一直投放。

雖然吃相往往看上去很難看，但不這么做就會(huì)“暴斃”，而這么做至少還可以“茍延殘喘”，為了生存和盈利，產(chǎn)品團(tuán)隊(duì)做出什么離奇的操作都能做出來(lái)。

這里還要澄清一點(diǎn)，有很多優(yōu)秀的工具產(chǎn)品不是國(guó)內(nèi)做不出來(lái)，是做出來(lái)也很難盈利，所以有能力的團(tuán)隊(duì)和開(kāi)發(fā)者是不會(huì)輕易往火坑里跳的。

2. 人工成本的差異

第二點(diǎn)就是國(guó)內(nèi)外人工成本上的巨大差異，發(fā)達(dá)國(guó)家的人工成本非常高昂，不只局限在產(chǎn)品開(kāi)發(fā)團(tuán)隊(duì)的成本，還包括底層運(yùn)營(yíng)、客服、銷售、業(yè)務(wù)員、快遞員等等。

而產(chǎn)品的衍生業(yè)務(wù)往往要借助大量的底層勞力，比如京東做外賣服務(wù)，得有充沛的、廉價(jià)的騎手作為依托才辦得起來(lái)，而這在發(fā)達(dá)西方國(guó)家是難以想象的。比如最近經(jīng)常討論的為什么日本線下購(gòu)物市場(chǎng)還很繁榮，線上發(fā)展不起來(lái)。主要原因之一就是快遞員的成本差了好幾倍，做不出即廉價(jià)又便捷的網(wǎng)購(gòu)體驗(yàn)。

加上西方國(guó)家對(duì)雇傭關(guān)系的保護(hù)，招人容易，裁員可就沒(méi)有那么簡(jiǎn)單，所以多數(shù)產(chǎn)品團(tuán)隊(duì)對(duì)擴(kuò)張都持非常謹(jǐn)慎的態(tài)度。人數(shù)少，又不能輕易搞 996，就大大限制了產(chǎn)品作妖的范圍，這就直接導(dǎo)致他們沒(méi)有人力做一大堆次要功能的迭代以及運(yùn)營(yíng)活動(dòng)，設(shè)計(jì)需求自然也會(huì)低很多。

3. 用戶習(xí)慣的差異

最后一點(diǎn)，就是用戶習(xí)慣的差異。除了前面說(shuō)的付費(fèi)意愿低以外，還有很多其它因素。其中在我看來(lái)影響最大的因素，就是國(guó)內(nèi)用戶對(duì)互聯(lián)網(wǎng)的依賴是遠(yuǎn)高于國(guó)外用戶的。

國(guó)內(nèi)的移動(dòng)互聯(lián)網(wǎng)行業(yè)爆發(fā)并不僅僅是局限在互聯(lián)網(wǎng)行業(yè)里，而是把觸手拓展到各行各業(yè)，用贏學(xué)的角度來(lái)講甚至它還大幅度完善了政府基建和民生服務(wù)。我們今天繳納水電費(fèi)，辦理銀行卡通過(guò)線上就能完成，而很多發(fā)達(dá)國(guó)家甚至到今天還要你去營(yíng)業(yè)廳手寫填表。

并且互聯(lián)網(wǎng)產(chǎn)品已經(jīng)成為我們購(gòu)物、娛樂(lè)的重要載體，大量的決策、交易、娛樂(lè)是在上面進(jìn)行的。既然用戶習(xí)慣和粘性都成型了，離不開(kāi)這些產(chǎn)品了，那么“適當(dāng)損害”一下用戶體驗(yàn)也不是不可以。尤其是大廠各類離奇的功能和運(yùn)營(yíng)活動(dòng)可以輪番轟炸用戶，同時(shí)把用戶對(duì)這類負(fù)面操作的耐受度都拉高了。

既然用戶都適應(yīng)了，那么為什么還要“裝清高”，做個(gè)簡(jiǎn)約的、有原則的、有尊嚴(yán)的產(chǎn)品？當(dāng)然是加入到運(yùn)營(yíng)的狂歡里和其它產(chǎn)品一起壓榨用戶的注意力，像孔雀開(kāi)屏一樣，在最雞肋的器官上比劃……

以上三點(diǎn)，就是造成國(guó)內(nèi)外設(shè)計(jì)差異的根本因素。最早國(guó)內(nèi)產(chǎn)品的設(shè)計(jì)是和國(guó)外看齊的，但隨著市場(chǎng)的反饋和驗(yàn)證，我們最終走出了自己的道路。這是商業(yè)的選擇，而不是簡(jiǎn)單歸因給審美、民族、文化、消費(fèi)力的限制。

不管創(chuàng)業(yè)者抱著什么樣的想法，進(jìn)入這個(gè)牌桌以后，最終都會(huì)被市場(chǎng)調(diào)教成相同的模樣。

作為 UI 設(shè)計(jì)師來(lái)說(shuō)，也不要認(rèn)為這是錯(cuò)誤的發(fā)展方向，因?yàn)檫@種模式大大增加了 UI 設(shè)計(jì)的需求量，間接提供了更多的飯碗。如果產(chǎn)品都按歐美的模式發(fā)展和設(shè)計(jì)，那對(duì)于國(guó)內(nèi) UI 設(shè)計(jì)行業(yè)來(lái)說(shuō)真正的天塌了，設(shè)計(jì)崗位會(huì)銳減 8 成以上，而這是 AI 設(shè)計(jì)根本實(shí)現(xiàn)不了的破壞力。

二、國(guó)內(nèi)外 UI 的具體差異

有了內(nèi)因，下面再對(duì)國(guó)內(nèi)外 UI 設(shè)計(jì)的具體差異做對(duì)應(yīng)的拆解，幫助大家更好理解國(guó)內(nèi)市場(chǎng)的設(shè)計(jì)特征。

1. 中英文字形排版差異

第一個(gè)差異，就是中英文的字體形態(tài)差異。中文文字是方塊化等寬的，而英文字母則是大小長(zhǎng)短不一，詞組長(zhǎng)度更長(zhǎng)，節(jié)奏感更強(qiáng)。所以英文設(shè)計(jì)中，往往會(huì)將字體作為一部分融入到排版中，豐富視覺(jué)觀感。

而中文設(shè)計(jì)中文字的節(jié)奏感較弱，文本的主要作用基本就是傳遞信息，所以只用中文排版很難出現(xiàn)英文的相同效果，就會(huì)促使設(shè)計(jì)師添加更多的內(nèi)容，來(lái)豐富界面的效果。

2. 運(yùn)營(yíng)需求的平面視覺(jué)

第二個(gè)差異，就是運(yùn)營(yíng)設(shè)計(jì)上的差異。歐美產(chǎn)品中運(yùn)營(yíng)活動(dòng)不是沒(méi)有，但是數(shù)量少，而且往往在設(shè)計(jì)上也做的很隨意，說(shuō)好聽(tīng)點(diǎn)叫簡(jiǎn)約，說(shuō)難聽(tīng)點(diǎn)就是敷衍。

而國(guó)內(nèi)運(yùn)營(yíng)活動(dòng)數(shù)量多，且投入精力更大，運(yùn)營(yíng)的設(shè)計(jì)是沒(méi)有限制的，可以用上廣告平面的所有視覺(jué)手段，不管是插畫還是 3D、AI、擬物、攝影。大團(tuán)隊(duì)往往會(huì)配置平面設(shè)計(jì)師完成這部分工作，小公司就要 UI 設(shè)計(jì)師自己負(fù)責(zé)，所以沒(méi)有固定的設(shè)計(jì)要求，水平之間差距也巨大。

運(yùn)營(yíng)設(shè)計(jì)的差異，源自國(guó)內(nèi)廣告設(shè)計(jì)方向的特色，從早年追求隱喻、創(chuàng)意的合成設(shè)計(jì)，到現(xiàn)在追求視覺(jué)沖擊力的大標(biāo)題、大色塊設(shè)計(jì)。

而國(guó)內(nèi)運(yùn)營(yíng)設(shè)計(jì)在今天絕不只出現(xiàn)在一般廣告位中，會(huì)見(jiàn)縫插針到所有元素中，比如頁(yè)面頂部、二樓、膠囊、圖標(biāo)區(qū)、瓷片區(qū)、底部導(dǎo)航等等。

3. 字段和信息數(shù)量差異

國(guó)內(nèi)有大量產(chǎn)品的功能和服務(wù)都更完善，這也就催生了更多的信息量和交互需求，單一頁(yè)面、組件的信息量、交互、狀態(tài)就遠(yuǎn)遠(yuǎn)比國(guó)外產(chǎn)品多。

這就導(dǎo)致我們?cè)谠O(shè)計(jì)時(shí)要考慮這些復(fù)雜的情況，需要設(shè)計(jì)師做具體的業(yè)務(wù)分析整理字段，還需要做大量的稿件做測(cè)試和評(píng)審。

不像國(guó)外很多簡(jiǎn)單的產(chǎn)品內(nèi)容就那么點(diǎn)，可以花大量精力去搞用研或者測(cè)試，在這種情況下光是完成產(chǎn)品需求就很困難，更遑論圍繞那么海量的內(nèi)容做用研也是很麻煩的。

所以國(guó)內(nèi)團(tuán)隊(duì)雖然會(huì)強(qiáng)調(diào)體驗(yàn)，但實(shí)際設(shè)計(jì)過(guò)程中必然業(yè)務(wù)優(yōu)先，體驗(yàn)更多是圍繞業(yè)務(wù)的優(yōu)化和改進(jìn)。所以作品集表現(xiàn)上業(yè)務(wù)的權(quán)重是非常高的，絕對(duì)不是學(xué)習(xí)國(guó)外的項(xiàng)目包裝邏輯堆砌體驗(yàn)和用研內(nèi)容。

4. 品牌視覺(jué)特征的差異

在國(guó)內(nèi)激烈的競(jìng)爭(zhēng)環(huán)境中，建立品牌化的視覺(jué)感知就是每個(gè)產(chǎn)品都要認(rèn)真對(duì)待的事情。但本身產(chǎn)品內(nèi)容、信息量就已經(jīng)很大了，要實(shí)現(xiàn)品牌化的視覺(jué)輸出就沒(méi)辦法走傳統(tǒng)品牌的“意識(shí)流”路線，使用簡(jiǎn)單的配色和大量的留白。

同時(shí)，UI 的組件樣式又高度統(tǒng)一，使用常規(guī)樣式完成的設(shè)計(jì)是很難塑造品牌化視覺(jué)的。所以最終的解決方案，就是給組件增加更多樣式細(xì)節(jié)，通過(guò)局部的創(chuàng)意來(lái)塑造視覺(jué)上的差異，同時(shí)再和其它應(yīng)用做出區(qū)分。

于是，主流產(chǎn)品就陷入這種樣式上的競(jìng)賽，非常高頻的更新組件和視覺(jué)的設(shè)計(jì)，希望做出和別人不同的設(shè)計(jì)同時(shí)又有自己的特點(diǎn)。

這種現(xiàn)狀不能說(shuō)是消極的，因?yàn)樗_實(shí)推動(dòng)了整個(gè) UI 行業(yè)視覺(jué)的發(fā)展，但對(duì) UI 設(shè)計(jì)師的視覺(jué)素養(yǎng)要求也就更高。所以今天國(guó)內(nèi)的中高級(jí) UI 設(shè)計(jì)師，轉(zhuǎn)入國(guó)外 UI 市場(chǎng)以后都能實(shí)現(xiàn)降維打擊，就是因?yàn)槭袌?chǎng)的要求對(duì)自身的磨練遠(yuǎn)比外部市場(chǎng)高。

基于以上的差異，可以說(shuō)在國(guó)內(nèi)做 UI 和和在國(guó)外做 UI 是兩種難度，要學(xué)習(xí)和訓(xùn)練的方式也完全不同。作為 UI 設(shè)計(jì)師要懂得理解背后的成因，并不會(huì)無(wú)腦迷信國(guó)外的設(shè)計(jì)要求和標(biāo)準(zhǔn)，才可以幫助我們更好融入真實(shí)的工作。

結(jié)尾

結(jié)尾再說(shuō)點(diǎn)有趣的問(wèn)題，從我們之前學(xué)員到國(guó)外工作的反饋來(lái)看，雖然國(guó)內(nèi)設(shè)計(jì)容易被嫌棄，但是從設(shè)計(jì)質(zhì)量和輸出上已經(jīng)遠(yuǎn)超歐美的平均水平。

而他們的設(shè)計(jì)師多數(shù)還在劃水搞一些無(wú)關(guān)痛癢的體驗(yàn)和用研時(shí)，我們?cè)诮鉀Q更復(fù)雜的商業(yè)問(wèn)題，如果有機(jī)會(huì)，建議你們也可以去卷國(guó)外的 UI，會(huì)有你們想象不到的優(yōu)勢(shì)。

轉(zhuǎn)載：優(yōu)設(shè)

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.hengshangtqd.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。

在互聯(lián)網(wǎng)產(chǎn)品日趨成熟的今天，你會(huì)發(fā)現(xiàn)所有的App越來(lái)越像，似乎是同一套模版設(shè)計(jì)出來(lái)的產(chǎn)品；而這種普適化的設(shè)計(jì)會(huì)導(dǎo)致同質(zhì)化嚴(yán)重，使得設(shè)計(jì)不精致，產(chǎn)品沒(méi)有氣質(zhì)和品牌感。

一個(gè)App設(shè)計(jì)是否精致，是否富有設(shè)計(jì)感，在于它的細(xì)節(jié)，這就意味著我們?cè)谶M(jìn)行設(shè)計(jì)的時(shí)候，要從細(xì)微之處著手，從多方面去鉆研如何創(chuàng)造出打動(dòng)人心的UI設(shè)計(jì)。

蘭亭妙微UI設(shè)計(jì)公司，總結(jié)了12個(gè)簡(jiǎn)單直觀的提升設(shè)計(jì)感的小細(xì)節(jié)，一起來(lái)學(xué)習(xí)。

一、使用顏色深淺構(gòu)建層次結(jié)構(gòu)

在對(duì)UI 文本進(jìn)行樣式控制的時(shí)候，最常見(jiàn)的錯(cuò)誤莫過(guò)于過(guò)度依賴字體大小差異來(lái)營(yíng)造對(duì)比；單純使用字體大小對(duì)比，所營(yíng)造的對(duì)比并不夠，嘗試結(jié)合色彩和字重來(lái)營(yíng)造更好的對(duì)比效果。

每種顏色都有一個(gè)視覺(jué)權(quán)重，這有助于在內(nèi)容中建立層次結(jié)構(gòu)；通過(guò)使用顏色的深淺，為元素賦予不同的重要性。

如果可以的話，你甚至可以采用兩到三種顏色：

• 主要內(nèi)容使用深灰色（諸如標(biāo)題，但是不要用純黑）；
• 次要內(nèi)容使用灰色（比如商品介紹）；
• 輔助性內(nèi)容采用淺灰色（比如發(fā)布日期）；

類似的，在UI設(shè)計(jì)的時(shí)候，通常兩種不同的字重足以營(yíng)造出優(yōu)秀的層次感：

• 大多數(shù)的文本采用正常的字重（400到500，具體取決于字體）；
• 對(duì)于需要強(qiáng)調(diào)的文字采用較重的字重（600到700，具體取決于字體）；

▲主標(biāo)題字重為600，其他標(biāo)綠點(diǎn)的文字字重都為400

應(yīng)當(dāng)盡量不要讓正文部分字重低于400，因?yàn)檫@一部分字體本身尺寸已經(jīng)較小，低于400會(huì)使得可讀性不佳。

如果你依然需要降低字重，那么不妨讓字體色彩更淺一點(diǎn)，或者替換成其他識(shí)別度較強(qiáng)、字重相對(duì)較小的字體。

灰色文字在無(wú)彩/彩色背景下要分開(kāi)處理：

不要在有色背景上使用灰色的文本，在白色背景下，將黑色的文本改成灰色（或者在黑色背景下使用灰色文本），是不錯(cuò)的淡化其視覺(jué)效果的做法。

但是在彩色背景下，想要降低和背景色之間的對(duì)比，通常有兩種方法：

一是降低白色文本的不透明度；二是讓文本逐步接近背景色，而不是改為灰色。

▲左圖設(shè)計(jì)師職位信息為白色文字降低不透明度，右圖為和背景同色相高明度的顏色

其次當(dāng)涉及長(zhǎng)篇內(nèi)容時(shí)，大面積的深色粗體字會(huì)給人一種沉重感，而且很跳躍；通過(guò)選擇類似深灰色（#4F4F4F）這樣的顏色可以很容易地解決這個(gè)問(wèn)題，使文字更容易被識(shí)別。

二、統(tǒng)一色調(diào)

選擇一種基礎(chǔ)色，再調(diào)整色調(diào)和顏色深淺來(lái)增加均衡；設(shè)計(jì)時(shí)避免用過(guò)多的顏色。如果項(xiàng)目允許，只需使用固定的色板，通過(guò)調(diào)整基礎(chǔ)色的飽和度和明度，利用這種簡(jiǎn)單的方式為設(shè)計(jì)增加一致性。

三、干凈的陰影

陰影是UI設(shè)計(jì)中最常見(jiàn)的視覺(jué)表現(xiàn)手法，它可以增加元素的深度，使其從背景中脫穎而出，引起用戶的注意力，同時(shí)也能增強(qiáng)畫面的視覺(jué)層次感。

相比于采用大范圍的擴(kuò)散模糊陰影，使用微妙的垂直偏移陰影效果更明顯，更自然，它模擬了最常見(jiàn)的光源特征，光線從上往下照下來(lái)所營(yíng)造的陰影效果。

這種輕柔的陰影呈現(xiàn)出的干凈，增加了畫面的精致；如果陰影的范圍太小或顏色太深，位置也沒(méi)有偏移，而是聚集在元素的四周，就會(huì)讓畫面更加扁平，讓視覺(jué)變得厚重，呈現(xiàn)出不精致的畫面感。

陰影不一定是黑色的，還有一種擴(kuò)算陰影是模擬元素本身的顏色投射在背景上，由于陰影與元素的色調(diào)一致，因此呈現(xiàn)出十分融洽的畫面感。

在UI設(shè)計(jì)中，這種手法不宜過(guò)多使用，否則呈現(xiàn)出的各種色彩搭配會(huì)讓人眼花繚亂。

四、個(gè)性的圖標(biāo)設(shè)計(jì)

合格的設(shè)計(jì)師能夠繪制風(fēng)格統(tǒng)一的圖標(biāo)，而優(yōu)秀的設(shè)計(jì)師能夠創(chuàng)造風(fēng)格獨(dú)特的圖標(biāo)。

我們能否在追求大小一致，圓角一致，線寬一致和配色一致的同時(shí)，為它的視覺(jué)表現(xiàn)力加入更多的創(chuàng)意呢？例如下面這組圖標(biāo)設(shè)計(jì)，無(wú)論是在圖形上的創(chuàng)新，還是顏色搭配上都呈現(xiàn)出無(wú)與倫比的創(chuàng)意。

標(biāo)簽欄作為一個(gè)App的全局導(dǎo)航起著至關(guān)重要的作用，它的設(shè)計(jì)影響著整個(gè)產(chǎn)品的視覺(jué)風(fēng)格。

通常，大多數(shù)App都是使用iOS規(guī)范的設(shè)計(jì)樣式（默認(rèn)灰色，選中填充品牌色），這樣的設(shè)計(jì)太普通，太常見(jiàn)了；要想讓標(biāo)簽欄圖標(biāo)設(shè)計(jì)精致和富有個(gè)性，可以豐富每一個(gè)選中態(tài)圖標(biāo)的視覺(jué)表現(xiàn)，例如給圖標(biāo)加上背景和表情，即顯得生動(dòng)有趣，又增加了用戶的好感，給人留下深刻的印象。

3D立體圖標(biāo)設(shè)計(jì)是近幾年來(lái)的流行趨勢(shì)，看上去十分精致、華麗，但是看久了會(huì)讓人產(chǎn)生輕微的視覺(jué)疲勞，同時(shí)因其復(fù)雜的結(jié)構(gòu)會(huì)增加用戶的認(rèn)知成本，一般在外賣美食類應(yīng)用中比較常見(jiàn)。

五、Tab的設(shè)計(jì)感

Tab是App設(shè)計(jì)中最常見(jiàn)的控件之一，它源自Material Design的設(shè)計(jì)規(guī)范；現(xiàn)在很多iOS產(chǎn)品當(dāng)中也開(kāi)始使用這種導(dǎo)航欄樣式來(lái)進(jìn)行設(shè)計(jì)，而原本屬于iOS規(guī)范當(dāng)中的分段選擇器變得不那么常見(jiàn)了。

在視覺(jué)表現(xiàn)形式上，Tab和標(biāo)簽欄同樣也分為選中態(tài)和未選態(tài)，它的設(shè)計(jì)較為簡(jiǎn)單，通常是使用一組文字標(biāo)簽，通過(guò)顏色或在標(biāo)簽下加上小長(zhǎng)條來(lái)區(qū)分兩者的狀態(tài)；因?yàn)樗?jiǎn)單，卻越難設(shè)計(jì)出彩，要發(fā)揮極大的設(shè)計(jì)想象力，跳脫出設(shè)計(jì)規(guī)范的限制，才能找到完美的方案。

例如蝦米音樂(lè)的Tab選中態(tài)是一段音頻波線，再配合文字的大小對(duì)比，一個(gè)富有設(shè)計(jì)感又符合產(chǎn)品特征的Tabs就被創(chuàng)造出來(lái)了。

我們還可以從品牌基因中獲取靈感，品牌作為用戶熟知的形象是個(gè)絕佳的來(lái)源。

從品牌形象中提取具有獨(dú)特氣質(zhì)的視覺(jué)富豪作為Tab選中態(tài)的小長(zhǎng)條，這樣就建立起視覺(jué)上的聯(lián)系，讓用戶產(chǎn)生由內(nèi)而外的一致感受；例如馬蜂窩品牌形象中的微笑符號(hào)和飛豬旅行品牌形象中的豬頭都被延伸到Tab的設(shè)計(jì)上，既讓界面視覺(jué)獨(dú)一無(wú)二，又進(jìn)一步強(qiáng)化了用戶對(duì)品牌形象的認(rèn)知。

六、無(wú)框設(shè)計(jì) 去繁從簡(jiǎn)

在UI設(shè)計(jì)中，有許多的裝飾元素，如卡片的邊框、列表的分割線等，雖然邊框，分割線是分隔兩個(gè)元素的好辦法，但是它不是唯一的方法；使用過(guò)多會(huì)讓整個(gè)布局的設(shè)計(jì)感降低，或多或少都會(huì)干擾用戶瀏覽的視線，讓信息內(nèi)容失去注意力，因此可以減少不必要的裝飾元素。

我們可以通過(guò)以下幾個(gè)方法來(lái)劃分元素的視覺(jué)層次，讓畫面變得干凈，整齊：

1）使用陰影

陰影同樣可以營(yíng)造出邊界感，而且相比邊框分割線更加微妙，并不會(huì)顯得突兀，不會(huì)分散用戶的注意力，讓內(nèi)容更聚焦。

2）使用不同的背景色來(lái)區(qū)分

通常，相鄰的元素背景只需要有微妙的差別就能夠讓人對(duì)他們進(jìn)行區(qū)分；所以，你所需要做的就是在不同的區(qū)塊采用不同的背景色，并且嘗試刪除分割線，因?yàn)槟愀静恍枰?/p>

3）增加額外的留白

創(chuàng)建元素之間的分離效果，并不一定要通過(guò)線框來(lái)表現(xiàn)，只要增加留白，讓它們分隔開(kāi)就行了，通過(guò)留白和間距來(lái)實(shí)現(xiàn)元素分組是UI設(shè)計(jì)中的常用手法。

七、統(tǒng)一設(shè)計(jì)元素

在App中的每一個(gè)界面都有許多元素，那些同類的元素應(yīng)保持統(tǒng)一的設(shè)計(jì)樣式。

通常個(gè)人中心的標(biāo)簽欄圖標(biāo)是一個(gè)人形剪影，它代表著用戶，因此可以在展示用戶頭像和用戶形象的界面中延續(xù)使用。

如果圖形擁有獨(dú)特的外觀，如橢圓矩形，也可以作為視覺(jué)符號(hào)的一種，延續(xù)到其他界面中，成為圖形或按鈕的外觀；這樣，整個(gè)界面就被統(tǒng)一的設(shè)計(jì)元素聯(lián)系起來(lái)了，給用戶始終如一的一致感。

八、符合產(chǎn)品氣質(zhì)的字體

選擇符合產(chǎn)品氣質(zhì)的字體，可以與產(chǎn)品的定位相吻合，傳遞給用戶正確的情感意識(shí)。

雖然默認(rèn)字體可以滿足大多數(shù)App 的設(shè)計(jì)需求，但會(huì)出現(xiàn)一個(gè)問(wèn)題就是——系統(tǒng)字體的普適性并沒(méi)有什么特色，在一些特定的情境下就顯得收效甚微；例如在運(yùn)動(dòng)類App中更適合粗壯的斜體來(lái)傳遞力量、爆發(fā)力、速度的感覺(jué)，換成系統(tǒng)字體后，整體感覺(jué)在氣勢(shì)上就變?nèi)趿撕芏唷?/p>

九、第三方圖標(biāo)風(fēng)格統(tǒng)一

大多數(shù)App都支持三方登陸，他可以減輕用戶注冊(cè)的時(shí)間成本。

通常是在注冊(cè)登陸頁(yè)的底部展示第三方圖標(biāo)入口，這也是設(shè)計(jì)師最常忽略的內(nèi)容，往往是直接將第三方圖標(biāo)調(diào)整一致大小和擺放整齊位置，沒(méi)有針對(duì)它們?cè)僭O(shè)計(jì)；一個(gè)設(shè)計(jì)精致的App不應(yīng)漏過(guò)任何的細(xì)節(jié)，我們可以以自家App的圖標(biāo)風(fēng)格為依據(jù)，對(duì)第三方圖標(biāo)進(jìn)行優(yōu)化設(shè)計(jì)。

十、圖片中尋找色彩

App中優(yōu)美的圖文設(shè)計(jì)，能帶給用戶如沐春風(fēng)的視覺(jué)享受，它非常重要。我們經(jīng)常看到文字疊加在圖片背景上的設(shè)計(jì)樣式；為了減少?gòu)?fù)雜圖片背景對(duì)文字的干擾，通常的做法是疊加半透明度的黑色蒙版，讓白色文字清晰可見(jiàn)，但這不是最優(yōu)的辦法。

我們可以從圖片中提取主色調(diào)用于疊加背景的填充色，這樣就使文字、色塊和圖片融入到一起了，畫面變得高級(jí)和富有設(shè)計(jì)感。

十一、提高圖片質(zhì)量

圖片的質(zhì)量影響著整個(gè)App的格調(diào)和用戶的情緒，高品質(zhì)的圖片給人愉悅的視覺(jué)享受，產(chǎn)生美好的聯(lián)想；而低品質(zhì)的圖片會(huì)瞬間拉低App的質(zhì)感。

在App設(shè)計(jì)中，一張漂亮的圖片從收集到上線，需要經(jīng)過(guò)裁剪，調(diào)色等過(guò)程才能被使用；即使是普通的商品圖片，我們將它摳圖后調(diào)整成統(tǒng)一大小，再加上干凈的背景，就能立刻提升商品的美感，界面視覺(jué)也會(huì)變得美觀、整潔。

十二、卡片式設(shè)計(jì)

現(xiàn)在的UI界面設(shè)計(jì)中，卡片式設(shè)計(jì)已經(jīng)是一種非常常見(jiàn)的設(shè)計(jì)形式，它有利于信息分層和整合，劃分出更加清晰的組織結(jié)構(gòu)，實(shí)現(xiàn)復(fù)雜內(nèi)容的簡(jiǎn)化處理，提高空間利用率；同時(shí)卡片式設(shè)計(jì)通常很依賴視覺(jué)元素，很強(qiáng)的視覺(jué)元素正是卡片式設(shè)計(jì)的一種優(yōu)勢(shì)，也是提升設(shè)計(jì)品質(zhì)感的良方。

轉(zhuǎn)載：人人都是產(chǎn)品經(jīng)理

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.hengshangtqd.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。

蘭亭妙微UI設(shè)計(jì)公司分享：當(dāng)AI能夠深度理解'團(tuán)圓經(jīng)濟(jì)'的情感密碼，節(jié)日營(yíng)銷正在從流量爭(zhēng)奪升級(jí)為心智滲透的精準(zhǔn)戰(zhàn)役。58同城在中秋期間以'好崗離家近'為核心，通過(guò)AI生成融合城市地標(biāo)與職業(yè)場(chǎng)景的個(gè)性化視覺(jué)，在6大城市實(shí)現(xiàn)千萬(wàn)級(jí)曝光的同時(shí)提升簡(jiǎn)歷投遞量40%。這場(chǎng)品效合一的實(shí)踐揭示了一個(gè)關(guān)鍵趨勢(shì)：AI不再是冰冷的效率工具，而是情感共鳴的放大器——它讓招聘廣告從信息堆砌轉(zhuǎn)向情感連接，真正實(shí)現(xiàn)了品牌溫度與業(yè)務(wù)增長(zhǎng)的雙贏。

01 精準(zhǔn)錨定：明確情感與場(chǎng)景的設(shè)計(jì)方向

項(xiàng)目首先基于人口特征、營(yíng)銷資源與業(yè)績(jī)需求，精準(zhǔn)圈定長(zhǎng)沙、成都、西安、無(wú)錫、南昌五大目標(biāo)城市。這些城市的共性在于春節(jié)/中秋返鄉(xiāng)率超80%，鄉(xiāng)土情結(jié)與團(tuán)圓氛圍尤為濃郁。

執(zhí)行層面：項(xiàng)目聚焦6大城市的24個(gè)核心商圈，選擇電梯內(nèi)、戶外大屏、公交站亭三大高頻觸達(dá)渠道。

主視覺(jué)采用“品牌區(qū)+創(chuàng)意區(qū)”雙分區(qū)布局：左側(cè)傳遞“好崗離家近”的核心主張，右側(cè)則分別針對(duì)B端企業(yè)（展示招聘實(shí)力）與C端求職者（突出崗位優(yōu)勢(shì)），引導(dǎo)“求職者投遞-商家入駐”的雙向轉(zhuǎn)化。

02 AI賦能：效率與創(chuàng)意的雙重突破

AI設(shè)計(jì)的核心價(jià)值，在于讓“情感共鳴”與“高效落地”并行不悖。本次項(xiàng)目中，AI技術(shù)貫穿創(chuàng)意生成、視覺(jué)優(yōu)化全流程，既精準(zhǔn)傳遞“團(tuán)圓+留鄉(xiāng)”的情感內(nèi)核，又破解了多城市定制、短周期交付的效率難題，實(shí)現(xiàn)雙重突破。

設(shè)計(jì)提案方向：

1. 情感+場(chǎng)景化共鳴：讓設(shè)計(jì)喚醒本土情結(jié)

設(shè)計(jì)緊扣“中秋團(tuán)圓”與“留鄉(xiāng)就業(yè)”的雙重訴求，以主題文案將求職需求與家庭情感深度綁定，精準(zhǔn)觸動(dòng)目標(biāo)人群的“本土情結(jié)”。

創(chuàng)意構(gòu)思沿兩個(gè)方向展開(kāi)：

「中秋+商圈實(shí)景」方向提案：

快速建立“本地招聘”的直觀認(rèn)知，通過(guò)融合城市地標(biāo)與品牌色，結(jié)合 “中秋團(tuán)圓” 節(jié)點(diǎn)，延續(xù) “好崗離家近” 的核心訴求，同時(shí)針對(duì)不同城市定制化文案（如西安的“照的見(jiàn)你的未來(lái)”、成都的“崗位和火鍋一樣沸騰”），既傳遞就業(yè)價(jià)值，又契合城市氣質(zhì)，激活留鄉(xiāng)就業(yè)的情感需求。，讓城市印記成為情感紐帶。

「中秋+地標(biāo)+職業(yè)人物」方向提案：

采用真實(shí)場(chǎng)景與AI生成插畫人物相結(jié)合的方式（如職場(chǎng)女性與城市景觀、特色元素的融合），畫面生動(dòng)富有層次，打破傳統(tǒng)招聘廣告的單調(diào)感。

最終方案：

2. AI提效：貫穿流程的設(shè)計(jì)革命

AI技術(shù)在此次項(xiàng)目中深度融入從創(chuàng)意到落地的全流程，實(shí)現(xiàn)“多快好省”的突破：

創(chuàng)意圖像生成：借助Topnow等工具，快速合成“中秋+商圈”的定制化場(chǎng)景，使AI元素與實(shí)景自然銜接，直觀傳遞信息，降低用戶理解成本。

高效素材處理：

即夢(mèng)4.0：

字體設(shè)計(jì)：幾分鐘內(nèi)完成字體設(shè)計(jì)方案。

處理圖片：快速調(diào)整建筑角度、優(yōu)化圖片內(nèi)容，適配戶外大屏的傳播需求，大幅減少后期耗時(shí)。

即夢(mèng)3.0：

生成圖片：月亮的質(zhì)感與主文案的藝術(shù)化呈現(xiàn)，通過(guò) AI 技術(shù)實(shí)現(xiàn)視覺(jué)吸引力，既保證節(jié)日氛圍的營(yíng)造，又讓文案具備強(qiáng)記憶點(diǎn)。

卡通插畫：效果比4.0優(yōu)秀

在插畫生成上表現(xiàn)卓越，通過(guò)精準(zhǔn)指令，快速產(chǎn)出風(fēng)格統(tǒng)一的本地職業(yè)形象（如成都外賣小哥、西安青年群體），傳遞“本地工作的愉悅感”，效率遠(yuǎn)超人工。

關(guān)鍵詞參考：

“一個(gè)外賣小哥抱著熊貓玩偶，大步跑，綠色系工作服，開(kāi)心地笑，黑色單線描邊，扁平插畫，炫彩配色”

“一個(gè)女孩面對(duì)手機(jī)視頻通話，身穿襯衫，坐姿端正，張口說(shuō)話，居家環(huán)境，黑色單線描邊，扁平插畫，橙色系配色”

“5個(gè)男女青年，抬頭看前方，一人手指前方，全身，站立，背影，時(shí)尚穿搭，黑色單線描邊，扁平插畫，豐富配色”

具體成效：

創(chuàng)意階段：半天生成4個(gè)完整方向，傳統(tǒng)方式需2-3天。

多城市適配：快速產(chǎn)出兼具系列感與地方特色的視覺(jué)方案。

修改優(yōu)化：響應(yīng)客戶反饋的速度提升70%以上。

3. 物料延展：保障多場(chǎng)景視覺(jué)統(tǒng)一

基于“一套核心視覺(jué)，多場(chǎng)景適配”原則，AI擴(kuò)圖、高清修復(fù)，協(xié)助快速延展生成線下物料、線上專場(chǎng)Banner、長(zhǎng)圖海報(bào)等多尺寸物料，確保線上線下品牌形象統(tǒng)一，強(qiáng)化用戶認(rèn)知。

03 價(jià)值落地：三大邏輯驅(qū)動(dòng)品效合一

AI賦能的設(shè)計(jì)創(chuàng)新，本次設(shè)計(jì)通過(guò)情感、商業(yè)、品牌三大邏輯，實(shí)現(xiàn)“品效合一”核心目標(biāo)。讓設(shè)計(jì)不僅是視覺(jué)呈現(xiàn)，更實(shí)現(xiàn)了品牌價(jià)值與業(yè)務(wù)增長(zhǎng)的雙重落地。

1.情感邏輯：激活本土情結(jié)，拉動(dòng)C端轉(zhuǎn)化。AI設(shè)計(jì)精準(zhǔn)觸達(dá)留鄉(xiāng)需求，讓“像鳥(niǎo)飛往自己的山”不再只是心理期許，而是有具體崗位支撐的現(xiàn)實(shí)可能。數(shù)據(jù)印證成效：長(zhǎng)沙、成都、西安等地線上專場(chǎng)簡(jiǎn)歷投遞量增長(zhǎng)40%，“本地崗位”搜索量上升62%，有效拉動(dòng)C端用戶參與度。

2.商業(yè)邏輯：精準(zhǔn)賦能B端，超額完成業(yè)績(jī)。對(duì)B端商家而言，精準(zhǔn)廣告投放是核心需求。通過(guò)“行業(yè)+地域”的定制化廣告設(shè)計(jì)，有效提升了商家投放意愿與合作轉(zhuǎn)化。

3.品牌邏輯：沉淀長(zhǎng)期認(rèn)知資產(chǎn)。設(shè)計(jì)圍繞“貼近受眾、強(qiáng)化認(rèn)知、促進(jìn)轉(zhuǎn)化”原則，將“提供家鄉(xiāng)好工作”的營(yíng)銷邏輯，拆解為“明月+地標(biāo)+文案+品牌信息”的直觀的視覺(jué)符號(hào)組合，降低用戶信息理解成本。通過(guò)品牌色、視覺(jué)等符號(hào)在多場(chǎng)景的重復(fù)曝光，持續(xù)強(qiáng)化“找本地好工作，就上58”的用戶心智，使品牌從工具平臺(tái)升級(jí)為“助力團(tuán)圓”的伙伴，構(gòu)筑獨(dú)特的品牌競(jìng)爭(zhēng)壁壘。

04 行業(yè)啟示：走向“策略+情感”的AI設(shè)計(jì)新范式

本次實(shí)踐為行業(yè)帶來(lái)核心啟示：AI是設(shè)計(jì)師的“超級(jí)助手”，其核心價(jià)值在于提升效率與精準(zhǔn)度。未來(lái)的品牌設(shè)計(jì)應(yīng)聚焦于 “策略為先，AI賦能，情感共鳴”的融合模式——以策略為導(dǎo)向，用AI提效，最終以情感打動(dòng)人心。

打動(dòng)人心的永遠(yuǎn)是對(duì)人性的洞察和情感的共鳴：

對(duì)招聘品牌推廣而言，這打破了“信息堆砌”的傳統(tǒng)廣告模式；對(duì)更廣的行業(yè)來(lái)說(shuō)，則示范了“AI賦能設(shè)計(jì)，設(shè)計(jì)驅(qū)動(dòng)品效”的新路徑。技術(shù)終究是工具，而深度的策略思考與人文洞察，永遠(yuǎn)是設(shè)計(jì)師不可替代的核心價(jià)值。當(dāng)AI與品牌策略、情感共鳴深度結(jié)合，營(yíng)銷才能實(shí)現(xiàn)真正的突破，為品牌創(chuàng)造可持續(xù)的長(zhǎng)期價(jià)值。

05 寫在最后

58同城此次中秋品牌營(yíng)銷項(xiàng)目，正是技術(shù)理性與創(chuàng)意感性完美融合的例證。用AI實(shí)現(xiàn)高效精準(zhǔn)的落地，用設(shè)計(jì)傳遞深刻的情感價(jià)值，最終成就了品牌聲量與業(yè)務(wù)增長(zhǎng)的雙贏，也為行業(yè)提供了可復(fù)制的品效合一實(shí)踐范本。

轉(zhuǎn)載：人人都是產(chǎn)品經(jīng)理

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.hengshangtqd.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。