做了8年產(chǎn)品經(jīng)理后，我是這么看產(chǎn)品經(jīng)理的
在設(shè)計(jì)領(lǐng)域，有些原則雖然我們經(jīng)常使用，卻可能并不熟悉其背后的理論。馮·雷斯托夫效應(yīng)（Von Restorff Effect）就是這樣一種現(xiàn)象，它解釋了為何在一系列相似元素中，獨(dú)特的那個(gè)更容易被記住。
在我們的日常生活中，心理學(xué)的影響無處不在。它像一把神奇的鑰匙，能打開人們內(nèi)心深處的秘密。作為設(shè)計(jì)師，我們更應(yīng)該掌握并運(yùn)用心理學(xué)，將其融入我們的設(shè)計(jì)中，從而創(chuàng)造出更具有吸引力和影響力的作品。
設(shè)計(jì)并不僅僅是形狀、顏色和布局的組合，更是對(duì)人類心理的探索和解讀。我們的每一個(gè)設(shè)計(jì)決策，都與用戶的心理狀態(tài)和認(rèn)知過程息息相關(guān)。如何抓住用戶的眼球、引發(fā)他們的興趣、引導(dǎo)他們的行為，這些都是我們需要深入研究的課題。
在眾多的心理學(xué)原理中，馮·雷斯托夫效應(yīng)（Von Restorff Effect）是一個(gè)值得設(shè)計(jì)師們關(guān)注的設(shè)計(jì)法則。這個(gè)效應(yīng)揭示了一個(gè)有趣的現(xiàn)象：特殊的東西往往比普通的東西更容易被人記住。這就意味著，在設(shè)計(jì)中，我們要制造一些“特殊”的元素，使它們能夠從眾多的信息中脫穎而出，成為用戶關(guān)注的焦點(diǎn)。今天筆者就帶大家了解一下設(shè)計(jì)中常用的心理學(xué)之一馮·雷斯托夫效應(yīng)。
在1933年的德國，一個(gè)名叫海德維希·馮·雷斯托夫的醫(yī)生開啟了一項(xiàng)改變我們對(duì)人類記憶理解的實(shí)驗(yàn)。她深入探索了當(dāng)人們面對(duì)一系列物品時(shí)，他們的記憶是如何運(yùn)作的。通過精心設(shè)計(jì)的對(duì)比實(shí)驗(yàn)，她發(fā)現(xiàn)了一個(gè)令人驚奇的現(xiàn)象：在一組物品中，那個(gè)最特別的物品總是更容易被人們記住。
這一發(fā)現(xiàn)為我們揭示了一個(gè)核心事實(shí)：特別的事物更能吸引我們的注意力，并在我們的記憶中留下深刻的印記。想象一下，在一組物品中，如果有一個(gè)被聚光燈照亮，那么相比其他未被照亮的物品，它無疑會(huì)成為人們關(guān)注的焦點(diǎn)，從而在記憶中留下更深的痕跡。
這個(gè)人類行為和記憶的規(guī)律后來被命名為“馮·雷斯托夫效應(yīng)”。這一效應(yīng)不僅僅是一個(gè)簡(jiǎn)單的觀察，它實(shí)際上是人類行為學(xué)和心理學(xué)領(lǐng)域的一項(xiàng)重要研究成果。隨著時(shí)間的推移，這一效應(yīng)逐漸被應(yīng)用于美學(xué)和設(shè)計(jì)領(lǐng)域，為設(shè)計(jì)師們提供了全新的視角和工具，以創(chuàng)造出更具吸引力和影響力的作品。
自馮·雷斯托夫效應(yīng)被正式確立命名以來，眾多科研學(xué)者在此基礎(chǔ)上進(jìn)行了更深入的研究，他們不僅剖析了這一效應(yīng)的內(nèi)在機(jī)制和影響因素，還探討了其在不同情境下的應(yīng)用。隨著研究的深入，對(duì)于這一效應(yīng)的理解也在不斷加深，并衍生出了許多其他的理論和學(xué)術(shù)觀點(diǎn)。
馮·雷斯托夫效應(yīng)為我們提供了一個(gè)獨(dú)特的視角，幫助我們更好地理解人類記憶的運(yùn)作方式。通過運(yùn)用這一原理，我們可以在設(shè)計(jì)中有意識(shí)地創(chuàng)造出令人難忘的元素，從而與觀眾建立更深刻的聯(lián)系。無論是在廣告、品牌推廣還是產(chǎn)品設(shè)計(jì)中，突出特別的元素都是一種有效的策略，可以幫助我們更好地吸引觀眾的注意力并留下深刻的印象。
馮·雷斯托夫效應(yīng)，又被稱為隔離效應(yīng)或新奇效應(yīng)，揭示了人們?cè)谟洃浿械钠?。?dāng)情境或經(jīng)歷中出現(xiàn)與眾不同的刺激時(shí)，這種效應(yīng)尤為明顯。
在當(dāng)今信息爆炸的時(shí)代，用戶往往沒有耐心去仔細(xì)查找信息，而是快速掃視。因此，設(shè)計(jì)師需要巧妙地運(yùn)用萊斯托夫效應(yīng)，使關(guān)鍵內(nèi)容從繁雜的信息中脫穎而出，吸引用戶的目光。
統(tǒng)一性是設(shè)計(jì)的基礎(chǔ)，但只有差異化的元素才能讓信息從頁面中脫穎而出。通過巧妙運(yùn)用顏色、形狀、布局等元素，我們可以創(chuàng)造出與眾不同的視覺效果，引導(dǎo)用戶的視線。通過巧妙地突出關(guān)鍵內(nèi)容，我們能夠更好地與用戶溝通，引領(lǐng)他們的注意力，為業(yè)務(wù)創(chuàng)造更大的價(jià)值。
在界面設(shè)計(jì)中，我們常常會(huì)遇到這樣的情況：在同類型的元素中，某一元素與其他元素存在顯著差異，這種現(xiàn)象我們稱之為“背景不同”。為了使某個(gè)模塊或元素在用戶心中留下深刻印象，我們可以利用環(huán)境差異來提高其識(shí)別度和記憶度。這種手法在UI設(shè)計(jì)中被廣泛應(yīng)用，它利用了馮·雷斯托夫效應(yīng)，能有效吸引用戶點(diǎn)擊。
例如淘寶底部標(biāo)簽欄中的四個(gè)ICON，唯獨(dú)首頁的第一個(gè)ICON（品牌logo）風(fēng)格與眾不同。即使離開了該頁面，這個(gè)特殊的ICON依然讓人印象深刻，餓了么第二的圖標(biāo)也是如此。因此，我們?cè)谠O(shè)計(jì)界面時(shí)，若想吸引用戶的注意或提高點(diǎn)擊量，可以打破常規(guī)，讓特定元素在同背景下脫穎而出。
再比如下圖的個(gè)人中心界面，功能入口模塊均采用ICON展示，而游樂場(chǎng)模塊卻采用了特殊的布局和設(shè)計(jì)。因此，當(dāng)用戶進(jìn)入個(gè)人中心時(shí)，最先映入眼簾的便是游樂場(chǎng)模塊。這也解釋了為什么我們?cè)谶M(jìn)行廣告和活動(dòng)投放時(shí)，需要特別設(shè)計(jì)的原因。
當(dāng)遇到與過去經(jīng)驗(yàn)顯著不同的情況時(shí)，我們的大腦會(huì)產(chǎn)生一種特殊的效應(yīng)，這種效應(yīng)被稱為“經(jīng)驗(yàn)不同”的效應(yīng)。例如，在騎自行車的過程中，我們通常習(xí)慣于左手控制左把手，右手控制右把手。但是，如果我們嘗試用雙手交叉的方式來騎車，結(jié)果很可能會(huì)摔倒。從此以后，每當(dāng)我們聽到或描述有關(guān)騎車摔倒的事情時(shí)，我們都會(huì)立刻想起那次“經(jīng)驗(yàn)不同”的嘗試。
同樣地，淘寶和京東在618、雙十一等大型促銷活動(dòng)時(shí)，會(huì)選擇重新設(shè)計(jì)他們的首頁。與往常的設(shè)計(jì)相比，這些新的首頁設(shè)計(jì)通常會(huì)增加更多的促銷入口，甚至改變ICON的風(fēng)格。從馮·雷斯托夫效應(yīng)的角度來看，這種與以往不同的設(shè)計(jì)能夠更好地吸引用戶的注意力，加深用戶的記憶，并擴(kuò)大活動(dòng)對(duì)用戶的影響力。
在視覺層面難以實(shí)現(xiàn)強(qiáng)烈差異化時(shí)，我們可以通過功能來實(shí)現(xiàn)有效的隔離。以微信為例，其置頂功能允許用戶將好友或群聊消息置于頂部，從而與其他信息區(qū)分開來。這種設(shè)計(jì)確保了關(guān)鍵信息的優(yōu)先級(jí)，使用戶能夠更快速地找到和關(guān)注所需內(nèi)容。通過巧妙地運(yùn)用功能，我們可以輕松地解決視覺上的一致性與差異化之間的矛盾，為用戶提供更加流暢和個(gè)性化的體驗(yàn)。
靜態(tài)頁面容易讓人視覺疲勞，動(dòng)效能夠更加生動(dòng)有趣地展示內(nèi)容，引導(dǎo)用戶更加關(guān)注頁面。相較于被動(dòng)接受信息，動(dòng)效能夠更加有效地吸引用戶注意。
隨著Banner自動(dòng)輪播的普及，用戶對(duì)其的吸引力逐漸降低。面對(duì)不斷變化的廣告，用戶不再耐心地逐個(gè)瀏覽。當(dāng)無法獲取所需信息時(shí)，他們的視線會(huì)迅速轉(zhuǎn)向其他區(qū)域。
為了應(yīng)對(duì)這一挑戰(zhàn)，騰訊視頻首頁的Banner采用了背景聯(lián)動(dòng)的形式。這意味著頭部背景色會(huì)根據(jù)Banner圖片的色調(diào)進(jìn)行變化，從而擴(kuò)大了內(nèi)容的變化空間。這種設(shè)計(jì)不僅使廣告更加引人注目，還使用戶更容易被吸引并保持關(guān)注。
頻道頁的入口方式多種多樣，金剛區(qū)icon無疑是最優(yōu)選擇。若要突出展示某些業(yè)務(wù)功能，單一的icon配合動(dòng)效可有效吸引用戶關(guān)注。此策略簡(jiǎn)單高效，有助于用戶快速找到所需內(nèi)容。
在設(shè)計(jì)界面時(shí)，我們追求的是在有限的空間內(nèi)展示更多的有效信息，避免信息的無效重復(fù)。但在電商平臺(tái)中，尤其是涉及到利益點(diǎn)時(shí)，我們需要確保信息具有足夠的價(jià)值感和吸引力。
以智行APP開通會(huì)員為例，領(lǐng)神卡作為核心賣點(diǎn)被突出展示，采用了平鋪展開的方式，從而突顯其價(jià)值。相對(duì)其他權(quán)益則相應(yīng)地進(jìn)行了弱化處理，以保持整體信息的清晰度和重點(diǎn)。這樣的設(shè)計(jì)既充分利用了屏幕空間，又確保了用戶能夠快速了解到核心的利益點(diǎn)。
頁面信息層次分明，信息層級(jí)越高，用戶感知越強(qiáng)烈，越能吸引注意。例如，模態(tài)彈窗處于最上層，與內(nèi)容層完全隔離，用戶無法忽視。其次是非模態(tài)懸浮層，與內(nèi)容層隔離，但不影響用戶操作。還有側(cè)邊懸浮按鈕、頂部或底部懸浮橫條等。
受“危險(xiǎn)按鈕”的影響，過去設(shè)計(jì)師常常給予負(fù)向情緒操作很高的視覺層級(jí)，例如退出登錄。這樣的設(shè)計(jì)意圖是警示用戶操作危險(xiǎn)，但視覺上卻過于強(qiáng)調(diào)，甚至有些“喧賓奪主”。近年來，移動(dòng)端設(shè)計(jì)中這種矛盾逐漸減少，但仍然存在。與其強(qiáng)調(diào)操作的難度和危險(xiǎn)性，不如考慮如何讓用戶自然地忽視這些操作，減少不必要的干擾。從馮·雷斯托夫效應(yīng)來看，這種設(shè)計(jì)方式有本末倒置之嫌，應(yīng)盡量避免。
新手設(shè)計(jì)師常常會(huì)遇到想要突出所有元素，但最終無法突出任何一項(xiàng)的問題。頁面中的特異點(diǎn)應(yīng)該屬于少數(shù)，如果所有元素都想做得不一樣，都會(huì)讓頁面整體視覺效果崩潰。因此，在設(shè)計(jì)中要學(xué)會(huì)取舍，選擇最重要的元素進(jìn)行突出，才能達(dá)到最佳的視覺效果。
總的來說，將馮·雷斯托夫效應(yīng)運(yùn)用到設(shè)計(jì)中，能幫助我們創(chuàng)造出更具吸引力、更容易被記住的設(shè)計(jì)。但請(qǐng)記住，任何設(shè)計(jì)決策都應(yīng)以用戶為中心，了解他們的需求和心理是關(guān)鍵。只有這樣，我們才能真正創(chuàng)造出打動(dòng)人心的設(shè)計(jì)。
專欄作家
大漠飛鷹；人人都是產(chǎn)品經(jīng)理專欄作家。致力于產(chǎn)品需求的驅(qū)動(dòng)、產(chǎn)品體驗(yàn)的挖掘，利用設(shè)計(jì)的手段為受眾用戶帶來更好的體驗(yàn)，即好看、好用。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Unsplash，基于 CC0 協(xié)議。
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(www.jsyqsx.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
對(duì)于設(shè)計(jì)同學(xué)來說，很多基礎(chǔ)知識(shí)可能看起來很簡(jiǎn)單，容易被忽視。但隨著設(shè)計(jì)經(jīng)驗(yàn)越來越多，更建議大家牢固系統(tǒng)地掌握這些基礎(chǔ)知識(shí)。在本篇文章中作者給大家系統(tǒng)性地講解了界面設(shè)計(jì)進(jìn)階過程中需要搞懂的基本設(shè)計(jì)要素。一起來看吧。
當(dāng)下大多數(shù)界面設(shè)計(jì)類軟件都是以矢量圖的方式工作。通過調(diào)整參數(shù)來定義圖形的大小，并且在不降低質(zhì)量的情況下對(duì)圖形進(jìn)行拉伸和放大。
在進(jìn)行界面設(shè)計(jì)時(shí)，我們需要生成出各種尺寸的矩形、圓形等對(duì)象，規(guī)定這些對(duì)象的尺寸和樣式，并對(duì)這些對(duì)象進(jìn)行移動(dòng)，將它們放到合適的位置上。
很多基礎(chǔ)知識(shí)可能看起來很簡(jiǎn)單，容易被忽視。但隨著設(shè)計(jì)經(jīng)驗(yàn)越來越多，更建議大家牢固系統(tǒng)地掌握這些基礎(chǔ)知識(shí)，厚積薄發(fā)才能越走越遠(yuǎn)！
盒子模型是在設(shè)計(jì)和開發(fā)中定義數(shù)字接口最基本的方法。我們所做的大多數(shù)設(shè)計(jì)都是根據(jù)盒子模型進(jìn)行，因此了解盒子模型對(duì)界面設(shè)計(jì)來說非常重要。
盒子模型由四個(gè)主要元素組成：
內(nèi)容 (content)、內(nèi)邊距(padding)、邊框(border)、外邊距(margin)。
內(nèi)邊距(padding)是內(nèi)容和邊框線之間的空間，如下圖灰色區(qū)域。內(nèi)邊距的范圍越廣，內(nèi)容的安全區(qū)域就越大。
外邊距(margin)是盒子與其他元素之間的空白區(qū)域，如下圖藍(lán)色區(qū)域。外邊距保證了盒子與盒子之間有足夠的間距。
寬度(width)和高度(height)是定義對(duì)象大小的參數(shù)。在二維空間上，寬度代表橫軸上的比例，高度代表縱軸上的比例。
一定比例的寬和高構(gòu)成的矩形是容納對(duì)象的最小矩形框。如果對(duì)象本身是不規(guī)則的形狀，在設(shè)計(jì)時(shí)我們需要根據(jù)對(duì)象的尺寸制定一個(gè)規(guī)則的矩形框，方便交付開發(fā)。
角度定義了對(duì)象順時(shí)針旋轉(zhuǎn)的方向，默認(rèn)為0°。另外旋轉(zhuǎn)也可以是負(fù)數(shù)，比如-15°旋轉(zhuǎn)與345°旋轉(zhuǎn)的角度是相同的。
如果我們想要一個(gè)統(tǒng)一的界面，最好不要手動(dòng)旋轉(zhuǎn)對(duì)象，而是通過輸入度數(shù)來旋轉(zhuǎn)，這樣會(huì)比手動(dòng)旋轉(zhuǎn)更精確。
旋轉(zhuǎn)對(duì)圓形來說是特殊的存在，因?yàn)橐粋€(gè)圓形無論旋轉(zhuǎn)到哪個(gè)角度看都是一樣的。
邊框半徑數(shù)值越大，這個(gè)形狀的圓角度數(shù)就越大。例如一個(gè)矩形，既能一次性設(shè)置四個(gè)點(diǎn)的圓角半徑，也可以單獨(dú)設(shè)置某個(gè)點(diǎn)的圓角半徑。
正常來說，設(shè)置圓角的圖形看起來比直角圖形更友好。界面設(shè)計(jì)中，相同的圖形最好能保持一樣的的圓角度數(shù)，這樣界面看起來會(huì)更統(tǒng)一。
另外一個(gè)圖形是否需要圓角，要根據(jù)產(chǎn)品風(fēng)格靈活選擇，確保與當(dāng)前使用場(chǎng)景相匹配。例如某個(gè)產(chǎn)品的logo或主視覺使用了不同半徑的圓角，在界面中我們也可以使用不同半徑的圓角按鈕，保持風(fēng)格統(tǒng)一。
一旦我們決定了用某種樣式的圓角按鈕，那么界面中的其他按鈕也應(yīng)該保持一致。
填充是指對(duì)對(duì)象內(nèi)容的操作，填充的可以是一種顏色，也可以是一張圖片。
針對(duì)不同對(duì)象，我們需要差異化定義每個(gè)對(duì)象的填充效果，保證這些對(duì)象簡(jiǎn)單易懂，清晰可見。
在設(shè)計(jì)過程中，可以對(duì)同一個(gè)對(duì)象組合使用多種填充效果。例如一個(gè)正方形頭像，首先填充一張照片，在照片的基礎(chǔ)上再添加各種顏色效果，能讓頭像的設(shè)計(jì)與界面更匹配。
如果說填充強(qiáng)調(diào)對(duì)象內(nèi)部，那么描邊就是對(duì)對(duì)象外部邊框的操作。
描邊分為內(nèi)部邊框、居中邊框和外部邊框三種樣式，其中只有內(nèi)部邊框不會(huì)在視覺上使對(duì)象變大。
例如下圖是一個(gè)60px大小的正方形，有2px的描邊。從左起分別是內(nèi)邊框、居中邊框、外邊框的描邊效果。因?yàn)閮?nèi)邊框是在正方形內(nèi)部描邊，所以視覺上看這個(gè)正方形仍是60px大小。
居中邊框是指正方形的外部和內(nèi)部各占1px，那么采用居中邊框的正方形尺寸變成了62×62。
同理，外部邊框是指正方形的外部多了2px，采用外部邊框的正方形尺寸變成了64×64。
對(duì)于不同的對(duì)象，我們可以設(shè)定不同寬度的描邊，描邊的樣式可以是虛線、實(shí)線、純色、漸變色等多種樣式。
目前大多數(shù)設(shè)計(jì)軟件支持修改描邊的端點(diǎn)和節(jié)點(diǎn)。端點(diǎn)樣式包括方頭、平頭和圓頭，節(jié)點(diǎn)樣式包括斜接連接、圓角連接、斜角連接。
陰影是UI設(shè)計(jì)中最常用的效果，根據(jù)對(duì)象的X軸、Y軸的偏移程度、模糊程度、擴(kuò)展程度、顏色和不透明度等屬性構(gòu)成。
通過設(shè)置模糊能讓陰影的面積擴(kuò)散擴(kuò)得更大，顏色由深變淺。一般來說陰影的不透明度低于40%時(shí)，呈現(xiàn)的效果比較好。
當(dāng)陰影的擴(kuò)展程度為負(fù)數(shù)時(shí)，陰影看起來會(huì)更自然。對(duì)比上下兩個(gè)圖例也能看出來，擴(kuò)展程度為負(fù)時(shí)陰影看起來更柔和。
使用陰影有助于劃分界面的層次結(jié)構(gòu)！在設(shè)計(jì)中，讓陰影看起來自然柔和不生硬是界面美觀與否的關(guān)鍵因素之一。
首先要避免純黑色陰影，純黑對(duì)比太強(qiáng)會(huì)影響視覺效果，建議使用基礎(chǔ)色調(diào)派生的顏色作為陰影顏色。
例如基礎(chǔ)色是綠色，可以使用飽和度、亮度較低的深綠色作為陰影顏色。陰影顏色確定后，再給陰影足夠大的模糊數(shù)值，最終會(huì)得到了一個(gè)不錯(cuò)的陰影效果。
顏色太深、太生硬的陰影和按鈕顏色對(duì)比太大，設(shè)計(jì)時(shí)應(yīng)盡可能調(diào)整陰影的顏色、透明度等參數(shù)，避免生成這種效果；把黑色陰影調(diào)整成同色系的深色陰影，陰影的效果看起來就會(huì)更自然、更柔和；再把陰影的擴(kuò)展程度調(diào)成負(fù)數(shù)，就能消除陰影的外展，讓陰影看起來更真實(shí)。
內(nèi)陰影
內(nèi)陰影在UI設(shè)計(jì)中相對(duì)少見，內(nèi)陰影和上面所講的陰影有相同的參數(shù)設(shè)置，只不過內(nèi)陰影是在圖形內(nèi)部起效果。
內(nèi)陰影無法像外陰影那樣展現(xiàn)圖層之間的深度和層級(jí)關(guān)系，只對(duì)圖形內(nèi)部起作用。如果內(nèi)陰影使用太多，可能會(huì)混淆圖層間的層級(jí)關(guān)系，讓界面關(guān)系看起來不明確。
高斯模糊是最常用的設(shè)計(jì)效果，呈現(xiàn)出從中心向四周均勻擴(kuò)散的模糊效果。高斯模糊由半徑控制，半徑數(shù)值越大，模糊效果越明顯。
高斯模糊常用在界面之間的過渡或者用來模糊背景突出景深效果。
高斯模糊還可以作為陰影效果，放在對(duì)象下面使用。例如新建一個(gè)橢圓做成模糊效果，放在對(duì)象下面，就能快速呈現(xiàn)出一個(gè)帶有陰影的效果。
蘋果在操作系統(tǒng)中經(jīng)常使用背景模糊，呈現(xiàn)出背景很模糊的玻璃效果。
背景模糊主要針對(duì)圖層覆蓋的內(nèi)容起作用，比如新建一個(gè)矩形調(diào)整透明度，做成背景模糊效果，那么該圖層覆蓋的區(qū)域會(huì)變模糊，圖層沒有覆蓋的區(qū)域保持不變。
動(dòng)感模糊由模糊數(shù)值和角度兩個(gè)參數(shù)控制，用來模擬對(duì)象在不同角度上的移動(dòng)效果。
當(dāng)對(duì)象由內(nèi)到外變得模糊時(shí)，就會(huì)發(fā)生縮放模糊。這種模糊效果在界面設(shè)計(jì)中用得較少。
縮放模糊由模糊數(shù)值和原點(diǎn)兩個(gè)參數(shù)控制。在縮放模糊中可以隨機(jī)設(shè)置模糊原點(diǎn)，通過移動(dòng)原點(diǎn)獲得一些有趣的圖形效果。
以上是界面設(shè)計(jì)進(jìn)階過程中需要搞懂的基本設(shè)計(jì)要素，希望通過本次系統(tǒng)性的講解，能更進(jìn)一步提升設(shè)計(jì)精細(xì)度！
專欄作家
作者：Clippp，每周精選設(shè)計(jì)文章，專注分享關(guān)于產(chǎn)品、交互、UI視覺上的設(shè)計(jì)思考。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自 Unsplash，基于CC0協(xié)議。
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(www.jsyqsx.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
如果你想設(shè)計(jì)出卓越，高效和流暢的用戶界面，就請(qǐng)參考Ben Shneiderman的“界面設(shè)計(jì)的八大黃金法則” 。蘋果，谷歌和微軟設(shè)計(jì)的產(chǎn)品都反映了Shneiderman的法則，這些行業(yè)巨頭制定的用戶界面指南都包含Shneiderman黃金法則中的特征，而這些公司的熱門界面設(shè)計(jì)則是法則的視覺體現(xiàn)。本文將告訴你如何整合8大黃金法則來改進(jìn)你的工作。
Ben Shneiderman（生于1947年8月21日）是美國馬里蘭大學(xué)人機(jī)交互實(shí)驗(yàn)室的計(jì)算機(jī)科學(xué)家和教授。他的工作可以媲美Don Norman和Jakob Nielsen。Shneiderman在其熱門書“設(shè)計(jì)用戶界面：有效的人機(jī)交互策略（Designing the User Interface: Strategies for Effective Human-Computer Interaction）”中介紹了界面設(shè)計(jì)的八個(gè)黃金法則：
一致性
當(dāng)你在設(shè)計(jì)類似的功能和操作時(shí)，可以利用熟悉的圖標(biāo)，顏色，菜單的層次結(jié)構(gòu)，行為召喚，用戶流程圖來實(shí)現(xiàn)一致性。規(guī)范信息表現(xiàn)的方式可以減少用戶認(rèn)知負(fù)擔(dān)，用戶體驗(yàn)易懂流暢。一致性通過幫助用戶快速熟悉產(chǎn)品的數(shù)字化環(huán)境從而更輕松地實(shí)現(xiàn)其目標(biāo)。
常用用戶使用快捷操作
隨著使用次數(shù)的增加，用戶需要有更快的完成任務(wù)的方法。例如，Windows和Mac為用戶提供了用于復(fù)制和粘貼的鍵盤快捷方式，隨著用戶更有經(jīng)驗(yàn)，他們可以更快速，輕松地瀏覽和操作用戶界面。
提供有用信息的反饋
用戶每完成一個(gè)操作，需要系統(tǒng)給出反饋，然后用戶才能感知并進(jìn)入下一步操作。反饋有很多類型，例如聲音提示，觸摸感，語言提示，以及各種類型的組合。對(duì)于用戶的每一個(gè)動(dòng)作，應(yīng)該在合理的時(shí)間內(nèi)提供適當(dāng)?shù)?，人性化的反饋。如設(shè)計(jì)多頁問卷時(shí)應(yīng)該告訴用戶進(jìn)行到哪個(gè)步驟，要保證讓用戶在盡量少受干擾的情況下得到最有價(jià)值的信息。
作者/版權(quán)持有人：Google，Inc. 版權(quán)條款和許可：合理使用
Windows Media Player設(shè)計(jì)師應(yīng)該牢記Ben Shneiderman的第三個(gè)黃金法則：提供有用信息的反饋。體驗(yàn)不佳的錯(cuò)誤消息通常會(huì)只顯示錯(cuò)誤代碼，對(duì)用戶來說這毫無意義。作為一名好的設(shè)計(jì)師，你應(yīng)該始終給用戶以可讀和有意義的反饋。
設(shè)計(jì)流程需要設(shè)計(jì)一個(gè)完結(jié)
不要讓你的用戶猜來猜去，告訴他們其操作會(huì)引導(dǎo)他們到哪個(gè)步驟。例如，用戶在完成在線購買后看到“謝謝購買”消息提示和支付憑證后會(huì)感到滿足和安心。
提供簡(jiǎn)潔的錯(cuò)誤操作的解決方案
用戶不喜歡被告知其操作錯(cuò)誤。設(shè)計(jì)時(shí)應(yīng)該盡量考慮如何減少用戶犯錯(cuò)誤的機(jī)會(huì)，但如果用戶操作時(shí)發(fā)生不可避免的錯(cuò)誤，不能只報(bào)錯(cuò)而不提供解決方案，請(qǐng)確保為用戶提供簡(jiǎn)單，直觀的分步說明，以引導(dǎo)他們輕松快速地解決問題。例如，用戶在填寫在線表單時(shí)忘記填寫某個(gè)輸入框時(shí)，可以標(biāo)記這個(gè)輸入框以提醒用戶。
允許撤銷操作
設(shè)計(jì)人員應(yīng)為用戶提供明顯的方式來讓用戶恢復(fù)之前的操作，無論是單次動(dòng)作，數(shù)據(jù)輸入還是整個(gè)動(dòng)作序列后都應(yīng)允許進(jìn)行返回操作，正如Shneiderman在他的書中所說：
“這個(gè)功能減輕了焦慮，因?yàn)橛脩糁兰幢悴僮魇д`，之前的操作也可以被撤銷，鼓勵(lì)用戶去大膽放手探索。”
給用戶掌控感
設(shè)計(jì)時(shí)應(yīng)考慮如何讓用戶主動(dòng)去使用，而不是被動(dòng)接受，要讓用戶感覺他們對(duì)數(shù)字空間中一系列操作了如指掌，在設(shè)計(jì)時(shí)按照他們預(yù)期的方式來獲得他們的信任。
減少短時(shí)記憶負(fù)擔(dān)
人的記憶力是有限的，我們的短時(shí)記憶每次最多只能記住五個(gè)東西。因此，界面設(shè)計(jì)應(yīng)當(dāng)盡可能簡(jiǎn)潔，保持適當(dāng)?shù)男畔哟谓Y(jié)構(gòu)，讓用戶去再認(rèn)信息而不是去回憶。再認(rèn)信息總是比回憶更容易，因?yàn)樵僬J(rèn)通過感知線索讓相關(guān)信息重現(xiàn)。例如，我們經(jīng)常發(fā)現(xiàn)選擇題比簡(jiǎn)答題更容易，因?yàn)檫x擇題只需要我們對(duì)正確答案再認(rèn)，而不是從我們的記憶中提取。被彭博商業(yè)周刊稱為“世界上最具影響力的設(shè)計(jì)師之一”的Jakob Nielsen發(fā)明了幾種可用性研究方法，包括啟發(fā)式評(píng)估。信息再認(rèn)而非回憶就是Nielsen界面設(shè)計(jì)10種可用性啟發(fā)式原則之一。
蘋果整合Shneiderman的八項(xiàng)黃金法設(shè)計(jì)出成功的產(chǎn)品，他們從Mac到移動(dòng)設(shè)備設(shè)計(jì)都取得了巨大的成功，他們以產(chǎn)品設(shè)計(jì)的一致性，直觀而美麗為榮。蘋果的iOS人機(jī)界面指南也告訴我們他們的設(shè)計(jì)團(tuán)隊(duì)如何應(yīng)用Shneiderman的設(shè)計(jì)原則。
“一致性”和“感知的穩(wěn)定性”在Mac OS的設(shè)計(jì)中體現(xiàn)得淋漓盡致。不管是80年代的版本，還是現(xiàn)在的版本，Mac OS菜單欄設(shè)計(jì)都包含一致的圖形元素。
作者/版權(quán)持有人：StockSnap.io 版權(quán)條款和許可：CC0
作者/版權(quán)持有人：StockSnap.io 版權(quán)條款和許可證：CC0
隨著時(shí)間的推移，Mac OS的外觀有很大變化，Mac OS菜單欄設(shè)計(jì)都保持一致。
如前所述，Mac允許用戶使用各種鍵盤快捷鍵，使用頻率高的包括復(fù)制和粘貼（Command-X和Command-V）以及截圖（Command-Shift-3）。
作者/版權(quán)持有人：StockSnap.io 版權(quán)條款和許可證：CC0
Mac允許用戶鍵盤快捷方式操作實(shí)現(xiàn)通常需要鼠標(biāo)、觸控板或其他輸入設(shè)備才能完成的操作。
當(dāng)用戶點(diǎn)擊Mac桌面上的文件時(shí)，該文件會(huì)“突出顯示”，這是視覺反饋的一個(gè)很好的示例。另外，當(dāng)用戶拖動(dòng)桌面上的文件夾時(shí)，他們可以看到在按住鼠標(biāo)時(shí)，文件夾顯示被移動(dòng)的狀態(tài)。
作者/版權(quán)持有人：Euphemia Wong 版權(quán)條款和許可：合理使用
作者/版權(quán)持有人：Euphemia Wong 版權(quán)條款和許可：合理使用
當(dāng)用戶將軟件安裝到Mac OS時(shí)，提示信息的屏幕顯示用戶當(dāng)前的安裝步驟。
作者/版權(quán)持有人：Google，Inc. 版權(quán)條款和許可：合理使用
在軟件安裝過程中，如果發(fā)生錯(cuò)誤，用戶將收到友好的提示信息。提供復(fù)雜的解決方案，或用戶難以理解的解決方案，或只報(bào)錯(cuò)不提供解決方案，都是極大影響用戶體驗(yàn)，使用戶沮喪的關(guān)鍵原因。根據(jù)錯(cuò)誤操作的嚴(yán)重程度，區(qū)分何時(shí)使用小的，不會(huì)影響用戶操作的提醒，以及何時(shí)使用大的，侵入式提醒。但當(dāng)錯(cuò)誤操作發(fā)生時(shí)，請(qǐng)謹(jǐn)慎選擇正確的語氣和正確的語言提醒用戶操作錯(cuò)誤。
作者/版權(quán)持有人：Google，Inc. 版權(quán)條款和許可：合理使用
Mac OS通過顯示一個(gè)溫和的提示消息向用戶解釋出現(xiàn)了什么錯(cuò)誤操作及其原因。另外，解釋這是由于自己的安全偏好選擇，進(jìn)一步向用戶保證，告訴他們一切在掌控范圍內(nèi)。
作者/版權(quán)持有人：Manutencaonet Blogspot 版權(quán)條款和許可：CC BY 3.0
Windows系統(tǒng)中這個(gè)非常不友好的提示信息使用“fatal（后果嚴(yán)重的）”和“terminated（被終止）”字樣。這樣的負(fù)面的，不友好的言語肯定會(huì)嚇倒大多數(shù)用戶！
當(dāng)用戶在安裝過程中提供信息時(shí)發(fā)生錯(cuò)誤，允許他們重新回到上一步，而不必重新開始。
作者/版權(quán)持有人：Euphemia Wong 版權(quán)條款和許可：合理使用
讓用戶有權(quán)選擇是繼續(xù)運(yùn)行程序還是退出程序，Mac的活動(dòng)監(jiān)視器允許用戶在程序意外崩潰時(shí)“強(qiáng)制退出”。
作者/版權(quán)持有人：Euphemia Wong 版權(quán)條款和許可：合理使用
由于人類短時(shí)記憶每次只能記住5個(gè)東西，所以蘋果iPhone屏幕底部的主菜單區(qū)域中只能放置4個(gè)及以下的應(yīng)用程序圖標(biāo)，這個(gè)設(shè)計(jì)不僅涉及對(duì)記憶負(fù)荷的考慮，還考慮了不同版本一致性問題。
作者/版權(quán)持有人：Brian Voo 版權(quán)條款和許可：合理使用
作為設(shè)計(jì)師，你的工作是創(chuàng)建直觀，精美和流暢的用戶界面設(shè)計(jì)，讓用戶感到輕松和滿意。下面這個(gè)工作表可以幫你把上述這些規(guī)則應(yīng)用于你的設(shè)計(jì)中。
譯者：oftodesign
原文作者：Euphemia Wong（The Interaction Design Foundation用戶體驗(yàn)研究員，設(shè)計(jì)師）
本文由 @oftodesign 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
蘭亭妙微(www.jsyqsx.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
編輯導(dǎo)語：前幾篇文章中，我們已經(jīng)了解到了許多關(guān)于界面設(shè)計(jì)的相關(guān)知識(shí)。今天這篇文章讓我們回歸一下界面設(shè)計(jì)本身，談一談其設(shè)計(jì)原則與標(biāo)準(zhǔn)，希望對(duì)你有幫助。
前面介紹了5種基本的界面形式，如果從構(gòu)成界面的要素（構(gòu)件）層面看，實(shí)際上所有的界面都是一樣的，因?yàn)樗鼈兌际怯赏瑯拥目丶?gòu)成的，只是控件的位置不同而已。
因此就有必要對(duì)界面的布置進(jìn)行統(tǒng)一的標(biāo)準(zhǔn)化，建立了界面布置的標(biāo)準(zhǔn)后設(shè)計(jì)效率會(huì)提升、同時(shí)也為界面設(shè)計(jì)資料的復(fù)用奠定了基礎(chǔ)。
界面設(shè)計(jì)的標(biāo)準(zhǔn)化非常重要，因?yàn)榻缑媸怯脩粽J(rèn)知系統(tǒng)的窗口，這個(gè)標(biāo)準(zhǔn)實(shí)際上是構(gòu)建“人-機(jī)-人”工作環(huán)境的標(biāo)準(zhǔn)之一，標(biāo)準(zhǔn)化的界面形式也可以減少用戶的認(rèn)知負(fù)擔(dān)和培訓(xùn)成本。
這里給出一些界面設(shè)計(jì)上的基本原則和標(biāo)準(zhǔn)供作參考，按照從整體到局部的順序，重點(diǎn)提出以下的幾個(gè)界面設(shè)計(jì)時(shí)的原則與標(biāo)準(zhǔn)（不限于此）：
這些原則/標(biāo)準(zhǔn)根據(jù)界面的使用場(chǎng)景不同、設(shè)計(jì)師的設(shè)計(jì)理念的不同等都會(huì)有所不同，需要根據(jù)具體情況具體分析設(shè)計(jì)，這些原則和標(biāo)準(zhǔn)僅供參考。
界面的布局是用戶理解業(yè)務(wù)功能的重要手段，布局一定要以“業(yè)務(wù)導(dǎo)向”，布局的規(guī)范化、規(guī)律化可以培養(yǎng)用戶逐漸地走向“無師自通”的方向，如：
圖1 布局原則
如圖1所示，細(xì)表區(qū)的標(biāo)題設(shè)置過多（A～J），致使大約有40%的信息在處在窗口外，用戶不使用橫向滾動(dòng)條就看不到。
如果這是一個(gè)頻繁操作的動(dòng)作，那么工作效率就會(huì)低下，這就是所謂的應(yīng)用體驗(yàn)設(shè)計(jì)的不好，這種設(shè)計(jì)會(huì)極大地造成用戶滿意度的下降。解決的方法可以考慮采用分頁表達(dá)的形式。
注：對(duì)具有自適應(yīng)功能的界面也存在同樣的原則，由于列數(shù)過多界面自適應(yīng)后的字體太小看不清楚，為了看清楚必須要放大字體，結(jié)果還是要頻繁地使用橫向滾動(dòng)條，所以適當(dāng)減少列數(shù)是最有效的解決方法。
要約定好界面上基本的控件距離、尺寸，參見圖2，比如：
圖2 界面設(shè)計(jì)標(biāo)準(zhǔn)的制定
以組件的主界面為第一層界面，子窗體的層數(shù)最好控制在3層以內(nèi)，也就是連續(xù)打開三個(gè)界面為限，參見圖3：
圖3 子窗體的層數(shù)示意圖
如果內(nèi)容實(shí)在是比較多，最終彈出的子窗體要超過3層時(shí)，可以考慮另外再設(shè)置一個(gè)組件來分擔(dān)處理的內(nèi)容，不然子界面彈出過多，就會(huì)造成界面的混亂，會(huì)降低用戶的操作效率。
字段控件的表達(dá)格式根據(jù)內(nèi)容不同而不同，字段控件由兩個(gè)部分構(gòu)成：標(biāo)題欄和輸入框，參見圖4：
圖4 字段控件的長(zhǎng)度與數(shù)據(jù)位置
標(biāo)題的字?jǐn)?shù)不要太多，因?yàn)闃?biāo)題長(zhǎng)到如同一句話時(shí)就不容易記憶了，最佳字?jǐn)?shù)在2～6個(gè)字之間（易于記憶與稱呼的長(zhǎng)度）；另外標(biāo)題中的文字位置可以參考：有背景框時(shí)居中，沒有時(shí)居左或居右，圖4中的標(biāo)題欄有背景色，所以采用了文字居中的形式。
注：這里的”標(biāo)題欄名稱“指的是”字段名稱“，不是4個(gè)業(yè)務(wù)功能中的”表單名稱“，后者可以按照實(shí)際的名稱寫，多少字都可以，不必要設(shè)置字?jǐn)?shù)。
輸入框的字段長(zhǎng)度是不一定的，建議輸入框的長(zhǎng)度與字?jǐn)?shù)相匹配不必統(tǒng)一，如圖4（a）的式樣，因?yàn)槿绻y(tǒng)一長(zhǎng)度就一定會(huì)以字?jǐn)?shù)最多的字段為準(zhǔn)，那么字?jǐn)?shù)少的字段也用長(zhǎng)輸入框就不容易讀取，而且輸入框的長(zhǎng)度一樣時(shí)字段之間的辨識(shí)度就會(huì)降低，尋找某個(gè)字段的時(shí)間會(huì)增加。
比如：圖4（b）樣式的“工程月數(shù)”字段只有2個(gè)單位的長(zhǎng)度，如果采用和具有30個(gè)單位長(zhǎng)度的“項(xiàng)目名稱”一樣長(zhǎng)的輸入框時(shí)，則“工程月數(shù)”就會(huì)因?yàn)闃?biāo)題與數(shù)據(jù)的距離太遠(yuǎn)而不容易讀?。床粶?zhǔn)）。
相比較而言，圖4（a）樣式中的“座機(jī)號(hào)碼”、“郵政編號(hào)”、”工程月數(shù)“的輸入框長(zhǎng)度比較短，就比較容易尋找和識(shí)別。
輸入框內(nèi)數(shù)據(jù)的位置，根據(jù)內(nèi)容不同而不同，參見圖4（a）：
這里介紹的界面設(shè)計(jì)中雖然不涉及到美工的內(nèi)容，但是也希望作為設(shè)計(jì)師具有一些美學(xué)的意識(shí)，因?yàn)樽罱K用戶的滿意度是個(gè)綜合的指標(biāo)，這個(gè)指標(biāo)至少包括了下述內(nèi)容：
因?yàn)槠髽I(yè)管理系統(tǒng)不是宣傳用的網(wǎng)站、電商平臺(tái)，界面風(fēng)格要具有以下的特點(diǎn)（僅供參考）：
隨著計(jì)算機(jī)技術(shù)的發(fā)展，計(jì)算機(jī)的使用領(lǐng)域和用途越來越廣泛，界面風(fēng)格也隨之更加多樣化。
比如：互聯(lián)網(wǎng)風(fēng)格頁面、物聯(lián)網(wǎng)的界面，硬件技術(shù)的進(jìn)步也影響界面風(fēng)格的變化；比如：智能手機(jī)端、平板電腦端等，它們的設(shè)計(jì)內(nèi)容、風(fēng)格都有所不同，但是上述的基本理念、原則等還是適用的。
本文由 @李鴻君 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自 Unsplash，基于 CC0 協(xié)議
蘭亭妙微(www.jsyqsx.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
在交互設(shè)計(jì)的范疇里，對(duì)用戶的深入研究能夠?yàn)樵O(shè)計(jì)師提供關(guān)鍵的解決問題的參考依據(jù)。本文旨在運(yùn)用一些成熟的方法，助力新人設(shè)計(jì)師更深入地理解用戶，拓寬認(rèn)知視野，進(jìn)而創(chuàng)造出更多具有價(jià)值的設(shè)計(jì)。
在設(shè)計(jì)的廣袤領(lǐng)域中，對(duì)于眾多初入行業(yè)的設(shè)計(jì)新人來說，設(shè)計(jì)工作常常被誤解為純粹主觀且感性的行為。
他們往往認(rèn)為個(gè)人對(duì)美觀的評(píng)判即是設(shè)計(jì)的全部要義，似乎用戶理應(yīng)沉浸于設(shè)計(jì)師所營(yíng)造的美感之中。然而，設(shè)計(jì)的本質(zhì)遠(yuǎn)非如此表面。
實(shí)際上，設(shè)計(jì)是一項(xiàng)通過精心設(shè)想和精確計(jì)算來創(chuàng)造價(jià)值的工作，其真正的意義聚焦于是否具有價(jià)值以及能否切實(shí)解決特定的問題。
首先，讓我們從一道看似簡(jiǎn)單的題目開始：
一雙球鞋和一個(gè)籃球共計(jì) 1100 元，球鞋比籃球貴 1000 元，那么這個(gè)籃球究竟值多少錢？
許多人可能會(huì)在瞬間給出 100 元的答案，但經(jīng)過仔細(xì)斟酌后會(huì)發(fā)現(xiàn)正確答案其實(shí)是 50 元。
這種錯(cuò)誤判斷的根源在于大多數(shù)人所具有的兩種思考模式，即快思考和慢思考。它們也被稱為“無意識(shí)思維和有意識(shí)受控思維”“感性和理性”等不同的表述方式。
每個(gè)人都同時(shí)擁有這兩種思考方式，然而通常情況下，慢思考會(huì)在接收快思考的估計(jì)和決策之后才開始啟動(dòng)。人類在漫長(zhǎng)的生存歷程中，不斷地處理著各種各樣的問題，有復(fù)雜的難題，也有相對(duì)簡(jiǎn)單的情況?？焖伎际菍?duì)眾多事情給出下意識(shí)的回應(yīng)，是一種未經(jīng)充分大腦思考的快速處理方式，其主要目的在于降低大腦的能量消耗。人類作為一種善于尋找規(guī)律的生物，快思考往往在以往的經(jīng)驗(yàn)中迅速找尋答案。只有當(dāng)問題獲得反饋或者進(jìn)入需要慢思考的情境時(shí)，人們才會(huì)察覺快思考中存在的疏漏。例如，我們時(shí)常會(huì)在未經(jīng)深思熟慮的情況下，脫口而出對(duì)某些問題的回答，這正是快思考在發(fā)揮作用。
正如前文所述，大多數(shù)人同時(shí)具備快思考和慢思考兩種模式，所以在未經(jīng)特殊訓(xùn)練的情況下，大多數(shù)用戶也同樣兼具感性和理性。在大多數(shù)情形下，用戶帶著感性的心態(tài)而來，只有當(dāng)遭遇問題或者涉及自身切實(shí)利益時(shí)，才會(huì)啟動(dòng)慢思考，從而變得理性。對(duì)于商業(yè)領(lǐng)域而言，更傾向于快思考的用戶。
因?yàn)榭焖伎紩?huì)帶來感性和沖動(dòng)，促使用戶迅速做出決策。這也正是為什么許多銷售人員熱衷于趁熱打鐵，讓用戶在快思考的狀態(tài)下被感性和沖動(dòng)所支配，進(jìn)而快速完成交易。在各類電商以及活動(dòng)類的運(yùn)營(yíng)活動(dòng)中，精心營(yíng)造氛圍的目的就是期望用戶在快思考的時(shí)候就完成決策，避免用戶進(jìn)入慢思考狀態(tài)后因猶豫不決而影響決策的達(dá)成。
在交互設(shè)計(jì)中，有以下更為深入的常見做法可以讓用戶持續(xù)保持感性：
1、顯著地標(biāo)識(shí)狀態(tài)與當(dāng)前進(jìn)度：
不僅僅是簡(jiǎn)單地顯示狀態(tài)和進(jìn)度，更要通過巧妙的設(shè)計(jì)讓用戶在第一時(shí)間就能直觀地理解其含義。例如，使用動(dòng)態(tài)的進(jìn)度條，配合清晰的數(shù)字顯示和簡(jiǎn)潔的文字說明，讓用戶不僅知道自己所處的位置，還能預(yù)估完成任務(wù)所需的時(shí)間。同時(shí)，根據(jù)不同的進(jìn)度階段，采用不同的顏色或圖標(biāo)進(jìn)行區(qū)分，增強(qiáng)用戶的視覺感知和心理預(yù)期。
在游戲設(shè)計(jì)中，常見的經(jīng)驗(yàn)條就是一個(gè)很好的例子。玩家可以通過經(jīng)驗(yàn)條的變化，清晰地了解自己距離升級(jí)還有多遠(yuǎn)，這種明確的進(jìn)度展示能夠激發(fā)玩家繼續(xù)努力的動(dòng)力，保持他們?cè)谟螒蛑械耐度敫小?/p>
2、引導(dǎo)用戶完成他們的目標(biāo)：
引導(dǎo)不僅僅是提供方向，更要深入理解用戶的心理需求和行為模式，以更加個(gè)性化的方式引導(dǎo)用戶。通過分析用戶的歷史行為數(shù)據(jù)和偏好，為用戶量身定制引導(dǎo)路徑。例如，在在線學(xué)習(xí)平臺(tái)上，根據(jù)用戶的學(xué)習(xí)進(jìn)度和能力水平，為其推薦適合的課程和學(xué)習(xí)資源，引導(dǎo)用戶逐步實(shí)現(xiàn)學(xué)習(xí)目標(biāo)。
利用智能助手或虛擬角色進(jìn)行引導(dǎo)，增加互動(dòng)性和趣味性。例如，一些購物 APP 中的虛擬導(dǎo)購員，可以根據(jù)用戶的瀏覽記錄和購買意向，為用戶提供個(gè)性化的購物建議和推薦商品，讓用戶在購物過程中感受到貼心的服務(wù)和引導(dǎo)。
3、明確無誤地告知用戶想了解的信息：
信息的傳達(dá)要做到準(zhǔn)確、簡(jiǎn)潔、全面。除了基本的產(chǎn)品特點(diǎn)、功能和價(jià)格等信息外，還應(yīng)提供用戶可能關(guān)心的其他細(xì)節(jié)。例如，在電子產(chǎn)品的介紹頁面，除了列出產(chǎn)品的技術(shù)參數(shù)外，還可以提供使用教程、常見問題解答、用戶評(píng)價(jià)等內(nèi)容，讓用戶能夠全面了解產(chǎn)品，做出更明智的決策。
采用多種信息傳達(dá)方式，滿足不同用戶的需求。例如，對(duì)于視覺型用戶，可以提供圖片、視頻等直觀的信息展示；對(duì)于聽覺型用戶，可以提供語音介紹；對(duì)于閱讀型用戶，可以提供詳細(xì)的文字說明。同時(shí)，利用信息分層和漸進(jìn)式披露的方式，讓用戶可以根據(jù)自己的需求逐步獲取更深入的信息。
4、不要讓用戶去診斷問題：
系統(tǒng)應(yīng)具備強(qiáng)大的自我診斷和故障排除能力，在問題出現(xiàn)的第一時(shí)間自動(dòng)檢測(cè)并提供解決方案。例如，當(dāng)軟件出現(xiàn)故障時(shí)，系統(tǒng)可以自動(dòng)彈出錯(cuò)誤提示窗口，同時(shí)提供可能的解決方案，如重新啟動(dòng)軟件、檢查網(wǎng)絡(luò)連接等。用戶只需按照提示進(jìn)行操作，無需自己去尋找問題所在。
建立完善的用戶反饋機(jī)制，及時(shí)收集用戶遇到的問題，并進(jìn)行快速響應(yīng)和解決。例如，在 APP 中設(shè)置反饋入口，用戶可以隨時(shí)提交問題和建議，開發(fā)團(tuán)隊(duì)可以及時(shí)跟進(jìn)處理，并將處理結(jié)果反饋給用戶，增強(qiáng)用戶的信任感和滿意度。
5、盡量減少設(shè)置的數(shù)量和復(fù)雜度：
進(jìn)行深入的用戶需求分析，去除不必要的設(shè)置選項(xiàng)，簡(jiǎn)化操作流程。例如，在智能家居設(shè)備的設(shè)置中，通過智能化的默認(rèn)設(shè)置和自動(dòng)配置功能，減少用戶的手動(dòng)操作。同時(shí)，對(duì)于一些復(fù)雜的設(shè)置，可以采用逐步引導(dǎo)的方式，讓用戶在需要的時(shí)候再進(jìn)行深入設(shè)置。
采用可視化的設(shè)置界面，讓用戶能夠直觀地了解設(shè)置選項(xiàng)的作用和效果。例如，在圖像編輯軟件中，通過實(shí)時(shí)預(yù)覽功能，讓用戶可以在調(diào)整設(shè)置參數(shù)的同時(shí)看到效果的變化，從而更加方便地進(jìn)行設(shè)置。
6、讓用戶感覺而不是去計(jì)算：
設(shè)計(jì)要注重用戶的直覺和感受，通過巧妙的視覺設(shè)計(jì)、交互反饋和情感化元素，讓用戶在無需進(jìn)行復(fù)雜計(jì)算的情況下就能做出決策。例如，在酒店預(yù)訂網(wǎng)站上，通過展示酒店的圖片、評(píng)價(jià)和星級(jí)等信息，讓用戶能夠直觀地感受酒店的品質(zhì)和舒適度，從而更容易做出選擇。
利用大數(shù)據(jù)和人工智能技術(shù)，為用戶提供個(gè)性化的推薦和決策支持。例如，音樂播放 APP 根據(jù)用戶的聽歌歷史和偏好，為用戶推薦符合其口味的音樂，讓用戶無需花費(fèi)時(shí)間去搜索和篩選。
7、讓描述更貼近用戶：
深入了解用戶的語言習(xí)慣和文化背景，使用用戶熟悉的詞匯和表達(dá)方式進(jìn)行描述。例如，在面向年輕人的產(chǎn)品中，可以采用流行的網(wǎng)絡(luò)語言和表達(dá)方式，增強(qiáng)用戶的認(rèn)同感和親近感。在面向不同地區(qū)的用戶時(shí)，要考慮到當(dāng)?shù)氐奈幕町悾捎煤线m的語言和表達(dá)方式。
進(jìn)行用戶測(cè)試和反饋收集，不斷優(yōu)化描述內(nèi)容。邀請(qǐng)用戶對(duì)產(chǎn)品的描述進(jìn)行評(píng)價(jià)和建議，根據(jù)用戶的反饋進(jìn)行調(diào)整和優(yōu)化，確保描述內(nèi)容能夠準(zhǔn)確傳達(dá)產(chǎn)品的特點(diǎn)和優(yōu)勢(shì)，同時(shí)符合用戶的需求和期望。
8、在需要計(jì)算的內(nèi)容提前幫用戶計(jì)算好：
利用自動(dòng)化計(jì)算和智能算法，為用戶提供準(zhǔn)確、及時(shí)的計(jì)算結(jié)果。例如，在理財(cái) APP 中，自動(dòng)計(jì)算用戶的收益和風(fēng)險(xiǎn)，為用戶提供投資建議。在購物網(wǎng)站上，自動(dòng)計(jì)算商品的總價(jià)、優(yōu)惠金額和運(yùn)費(fèi)等信息，讓用戶清楚知道自己需要支付的費(fèi)用。
提供多種計(jì)算方式和比較工具，讓用戶可以根據(jù)自己的需求進(jìn)行選擇。例如，在房貸計(jì)算器中，提供等額本金和等額本息兩種還款方式的計(jì)算結(jié)果，讓用戶可以比較不同還款方式的優(yōu)缺點(diǎn)，做出更合適的選擇。
9、用情感帶給用戶細(xì)微的感受：
通過情感化設(shè)計(jì)，觸動(dòng)用戶的內(nèi)心深處，建立與用戶的情感連接。例如，在社交 APP 中，通過溫馨的提示和問候，讓用戶感受到關(guān)懷和溫暖。在紀(jì)念日或特殊節(jié)日，為用戶送上個(gè)性化的祝福和禮物，增強(qiáng)用戶的忠誠度。
利用故事和場(chǎng)景化設(shè)計(jì)，讓用戶在使用產(chǎn)品的過程中產(chǎn)生情感共鳴。例如，在旅游 APP 中，通過展示美麗的風(fēng)景圖片和用戶的旅行故事，激發(fā)用戶的旅行欲望。在產(chǎn)品介紹中，以故事的形式講述產(chǎn)品的誕生和發(fā)展歷程，讓用戶更加了解產(chǎn)品的背后故事，增強(qiáng)用戶的認(rèn)同感。
許多新人設(shè)計(jì)師在初期往往喜歡站在個(gè)人和美學(xué)的角度來看待自己的設(shè)計(jì)。然而，隨著設(shè)計(jì)經(jīng)驗(yàn)的不斷積累和對(duì)行業(yè)的深入理解，他們會(huì)逐漸認(rèn)識(shí)到有價(jià)值、能解決問題才是人類發(fā)展的核心目的。在市場(chǎng)上存在眾多同類型產(chǎn)品都具有價(jià)值、能解決問題的情況下，才需要通過設(shè)計(jì)出不同的差異點(diǎn)來脫穎而出。但始終要牢記的前提是設(shè)計(jì)必須具有價(jià)值、能解決問題，一旦拋棄了這個(gè)大前提，任何設(shè)計(jì)都會(huì)顯得空洞、索然無味。
設(shè)計(jì)與藝術(shù)雖然有一定的關(guān)聯(lián)，但它們并不是一回事。設(shè)計(jì)更注重實(shí)用性和功能性，以滿足用戶的需求和解決實(shí)際問題為主要目標(biāo)。而藝術(shù)則更強(qiáng)調(diào)審美價(jià)值和自我表達(dá)，追求的是情感的共鳴和創(chuàng)造力的展現(xiàn)。設(shè)計(jì)師需要在設(shè)計(jì)過程中平衡好實(shí)用性和美觀性，既要確保設(shè)計(jì)能夠解決問題，又要讓設(shè)計(jì)具有一定的審美價(jià)值，從而提升用戶的體驗(yàn)和滿意度。
總之，交互設(shè)計(jì)要深入理解用戶的思維方式，通過更為深入和有效的方法讓用戶持續(xù)保持感性，從而提高用戶的滿意度和忠誠度。同時(shí)，設(shè)計(jì)師要時(shí)刻牢記設(shè)計(jì)的價(jià)值和目的，不斷創(chuàng)造有價(jià)值、能解決問題的設(shè)計(jì)作品，為人類的發(fā)展和進(jìn)步做出貢獻(xiàn)。
以上觀點(diǎn)僅代表個(gè)人看法，如有不對(duì)之處，歡迎在評(píng)論區(qū)指正交流。謝謝！
本文由 @用戶體驗(yàn)王叔 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)
蘭亭妙微(www.jsyqsx.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
“B 端頁面加載，關(guān)乎用戶體驗(yàn)。” 在 B 端產(chǎn)品設(shè)計(jì)中，頁面加載功能不容小覷。如何讓用戶在等待中減少焦慮？怎樣使頁面加載邏輯清晰、策略得當(dāng)？本文將詳細(xì)闡述，為 B 端產(chǎn)品設(shè)計(jì)提供指引。
每一個(gè)用戶都不喜歡進(jìn)入頁面時(shí)需要長(zhǎng)時(shí)間的等待，并且對(duì)著一個(gè)空白的頁面。
因此在 iOS當(dāng)中會(huì)使用大量的動(dòng)效、情感化設(shè)計(jì)來引導(dǎo)用戶多停留一些時(shí)間等待加載；在較多 app 當(dāng)中，也會(huì)通過動(dòng)效設(shè)計(jì)，優(yōu)化頁面信息的加載。
那既然頁面加載很重要，對(duì)于B端產(chǎn)品而言，我們也需要去考慮頁面的功能究竟要如何進(jìn)行設(shè)計(jì)。
今天我們會(huì)聊聊 頁面加載 功能的具體邏輯，以及B端產(chǎn)品的常見頁面加載策略，希望能夠?qū)Ω魑煌瑢W(xué)有所幫助～
在系統(tǒng)當(dāng)中，頁面加載其實(shí)是用戶對(duì)系統(tǒng)界面進(jìn)行交互后，系統(tǒng)會(huì)將對(duì)應(yīng)的數(shù)據(jù)傳給服務(wù)器，而服務(wù)器又會(huì)將內(nèi)容反饋給用戶的整個(gè)過程。
比如在按鈕組件中，我們就需要去設(shè)定「當(dāng)用戶點(diǎn)擊了按鈕過后它需要長(zhǎng)時(shí)間加載的 Loading 狀態(tài)」
通過這樣的做法，其實(shí)就是緩解用戶等待所花費(fèi)的時(shí)間，減少焦慮。
在很多C端產(chǎn)品中，頁面加載是非常常見的。比如會(huì)有懶加載、預(yù)加載、異步加載等。
同時(shí)會(huì)使用非常多的 插畫設(shè)計(jì)、動(dòng)效設(shè)計(jì) 去降低用戶所使用的焦慮。但是在桌面端中，它的思考方式會(huì)有些許不同，我們將其分為四種不同的方式。
骨架屏是較為常規(guī)的頁面模塊加載方式。
它主要適用于模塊當(dāng)中，加載內(nèi)容需要提供占位信息時(shí)進(jìn)行使用。通常會(huì)在 列表、卡片類 圖文信息較多的頁面當(dāng)中進(jìn)行呈現(xiàn) 。
在用戶預(yù)期上，骨架圖能夠幫助我們展示當(dāng)中頁面的大體結(jié)構(gòu)，以避免在頁面加載信息的過程當(dāng)中出現(xiàn)隨意跳動(dòng)、亂展示的情況。
特別是在很多頁面第一次加載時(shí)，由于數(shù)據(jù)內(nèi)容較多，因此使用骨架圖填充會(huì)更為合理。比如在有贊當(dāng)中， 就會(huì)使用骨架圖的方式來進(jìn)行頁面信息的加載。而在B端后臺(tái)中也更多的適用于工作臺(tái)信息的加載，特別是在工作臺(tái)中有數(shù)據(jù)部分的內(nèi)容呈現(xiàn)的時(shí)候，需要格外去注意。
Spin 主要要于頁面和區(qū)塊當(dāng)中的信息加載，通過適當(dāng)?shù)膭?dòng)效，能夠保證頁面加載時(shí)緩解用戶的焦慮。
在 Spin 當(dāng)中，會(huì)有許多不同的類型：基礎(chǔ)Loading、動(dòng)畫Loading、進(jìn)度Loading
基礎(chǔ)Loading 更適用于頁面當(dāng)中的組件類級(jí)別的加載，像是在輸入框內(nèi)、按鈕中、下拉選擇… 的內(nèi)容加載。
動(dòng)畫Loading 則偏向于區(qū)塊、頁面級(jí)別的加載，比如在表格頁面中，就會(huì)經(jīng)常使用加載的方式展示目前正在相應(yīng)。
進(jìn)度Loading 則更像是進(jìn)度條的外露，想要更凸顯目前的真實(shí)進(jìn)度情況。目前在 Ant Design 5.18.0 版本當(dāng)中即可支持
當(dāng)然，在系統(tǒng)當(dāng)中還會(huì)出現(xiàn)一些特殊的加載狀態(tài)。比如在針對(duì)數(shù)據(jù)量較大的情況下時(shí)，我們會(huì)采取什么樣的加載策略？
比如在神策數(shù)據(jù)當(dāng)中，當(dāng)我們?cè)谌シ治龊笈_(tái)的行為數(shù)據(jù)時(shí)，需要進(jìn)行大量的計(jì)算，因此在分析完一次過后所等待的時(shí)間也會(huì)更為長(zhǎng)久。這時(shí)候神策會(huì)給出一套更為復(fù)雜的加載策略。
首先在加載層面上，它會(huì)優(yōu)先告知用戶目前整體的加載進(jìn)度，這對(duì)于用戶的等待是非常有益的。
其次，如果你對(duì)于整體加載的時(shí)間進(jìn)度不夠滿意，那我可以給你相應(yīng)的解決策略，像是分批加載等等。
最后如果你在加載過程當(dāng)中有其他的分析任務(wù)，也可以通過異步加載的方式，進(jìn)行后臺(tái)計(jì)算，等結(jié)果出來后會(huì)通過通知的方式進(jìn)行提示。當(dāng)然，在此過程中，你可以中斷、退出。
異步加載也是針對(duì)長(zhǎng)時(shí)間加載的一種策略，比如我需要去上傳較大信息的時(shí)候，我需要耗費(fèi)特別多的時(shí)間。那這時(shí)候就可以采用異步加載的方式，滿足用戶的正常使用。
在飛書當(dāng)中，我要上傳飛書妙記，我要導(dǎo)入飛書成員，那都可以通過異步加載的方式來進(jìn)行呈現(xiàn)。
那在設(shè)計(jì)的時(shí)候需要去考慮異步加載整體的入口以及功能之間是如何實(shí)現(xiàn)的。
像是在飛書妙記中，它會(huì)將其作為一個(gè)上傳入口，進(jìn)行快速的展現(xiàn)。而在導(dǎo)入飛書成員的時(shí)候，則會(huì)展現(xiàn)是將其放在后臺(tái)進(jìn)行加載，等完成過后通過通知的方式來告知用戶（與神策相同）
關(guān)于加載，其實(shí)在設(shè)計(jì)上還會(huì)有很多細(xì)節(jié)，我們也會(huì)在課程當(dāng)中，通過 功能設(shè)計(jì) 的方式給大家進(jìn)行梳理設(shè)計(jì)要點(diǎn)（肯定會(huì)比現(xiàn)在更為系統(tǒng)），后續(xù)有時(shí)間，再和大家分享～
本文由人人都是產(chǎn)品經(jīng)理作者【CE青年】，原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于 CC0 協(xié)議。
蘭亭妙微(www.jsyqsx.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
從擬物風(fēng)格到扁平化，再到如今的多變色彩與微妙質(zhì)感，設(shè)計(jì)風(fēng)格的演變不僅反映了技術(shù)的進(jìn)步，也折射出用戶需求的轉(zhuǎn)變。本文結(jié)合釘釘近10年的B端設(shè)計(jì)經(jīng)驗(yàn)，深入探討2025年B端設(shè)計(jì)的三大趨勢(shì)：多變豐富的色彩、微妙克制的質(zhì)感以及清晰明了的圖形。揭示了如何在滿足企業(yè)高效、專業(yè)需求的同時(shí)，為用戶帶來更具情感價(jià)值和科技感的視覺體驗(yàn)。
回溯互聯(lián)網(wǎng)的發(fā)展進(jìn)程，從桌面端的撥號(hào)上網(wǎng)，到5G移動(dòng)互聯(lián)網(wǎng)，再至人工智能的助力，科技領(lǐng)域正在經(jīng)歷著翻天覆地的變革。未來的數(shù)字世界，在沉浸感、參與度、個(gè)性化等維度對(duì)體驗(yàn)會(huì)提出更進(jìn)階的要求；與此同時(shí)，B端企業(yè)對(duì)于高效、簡(jiǎn)便、用戶友好的界面需求與日俱增。在2025年的當(dāng)下，B端設(shè)計(jì)師唯有持續(xù)學(xué)習(xí)，適應(yīng)新技術(shù)與新趨勢(shì)，緊密圍繞客戶的業(yè)務(wù)價(jià)值展開設(shè)計(jì)，進(jìn)一步注重實(shí)用性、包容性以及可定制化，方可為企業(yè)客戶塑造出卓越的產(chǎn)品與服務(wù)。
因此，我們結(jié)合釘釘近10年的B端產(chǎn)品設(shè)計(jì)經(jīng)驗(yàn)，鑒于未來B端設(shè)計(jì)趨勢(shì)將展現(xiàn)出多元化、智能化和人性化的特質(zhì)，從B端產(chǎn)品個(gè)性化、風(fēng)格與質(zhì)感、界面版式、圖標(biāo)、動(dòng)態(tài)交互等多維度設(shè)計(jì)展開深度研究，與大家一道探討B(tài)端設(shè)計(jì)的本質(zhì)和趨勢(shì)，期望在真正駕馭B端產(chǎn)品設(shè)計(jì)的這條道路上，帶來些許有益的啟迪。
上篇文章我們講述了B端產(chǎn)品的個(gè)性化趨勢(shì)，如何利用個(gè)性化幫助個(gè)體提升用戶價(jià)值，打造個(gè)體形象、滿足個(gè)體情緒以及增強(qiáng)個(gè)體自信。
今天，我們要給大家分享的是B端產(chǎn)品風(fēng)格&質(zhì)感，為企業(yè)塑造品牌形象、為個(gè)人用戶提供情感價(jià)值。
設(shè)計(jì)作為科技和藝術(shù)的結(jié)合，UI設(shè)計(jì)風(fēng)格的演變不僅與技術(shù)的發(fā)展密不可分，而且與藝術(shù)創(chuàng)作風(fēng)格的發(fā)展有著異曲同工之妙，都經(jīng)歷了抽象—具象—抽象的過程。
20世紀(jì)70-80年代是計(jì)算機(jī)圖形界面的萌芽階段，就像繪畫藝術(shù)起源之時(shí)的那個(gè)茹毛飲血的年代，當(dāng)時(shí)的原始人所能利用的工具只有火堆熄滅后留下的木炭，圖像呈現(xiàn)的載體也只有山洞內(nèi)的墻壁和巖石。就像剛剛進(jìn)入計(jì)算機(jī)時(shí)代的設(shè)計(jì)師們，不僅缺少專業(yè)的繪圖軟件，而且當(dāng)時(shí)計(jì)算機(jī)本身的顯示能力也尚且不足。這個(gè)階段的UI設(shè)計(jì)，能夠在顯示器上清晰地顯示并傳達(dá)明確的含義，比畫出風(fēng)格更加重要。觀察當(dāng)時(shí)的操作界面，不難猜測(cè)當(dāng)時(shí)的設(shè)計(jì)師，努力以具象的表現(xiàn)風(fēng)格來減少人們對(duì)計(jì)算機(jī)界面的陌生感，但由于工具和載體的限制無法完美實(shí)現(xiàn)，雖然這種風(fēng)格無法被稱為擬物風(fēng)格，但為后來真正的擬物風(fēng)格的出現(xiàn)和發(fā)展奠定了基礎(chǔ)。
1995年，家用計(jì)算機(jī)的顯示能力迎來了質(zhì)的飛躍，Windows95發(fā)布、對(duì)真色彩的支持、PhotoShop5.0的發(fā)布……技術(shù)進(jìn)步和專業(yè)軟件的加持讓設(shè)計(jì)師突破了過去創(chuàng)作工具和呈現(xiàn)載體的限制，就好像在山洞里用木炭繪畫的原始人，擁有了畫筆、顏料和畫布。設(shè)計(jì)師的創(chuàng)作空間和寫實(shí)能力得到極大提升。
與此同時(shí)，個(gè)人計(jì)算機(jī)和手機(jī)開始普及，圖形化的操作界面不再是科研人員和專業(yè)人士的專屬，而是普通人工作學(xué)習(xí)中的一部分。為了讓沒有接觸過圖形化操作界面的用戶快速識(shí)別圖標(biāo)代表的功能，最好的方式就是在界面中對(duì)現(xiàn)實(shí)世界中的物體進(jìn)行還原，這便推動(dòng)了擬物風(fēng)格的發(fā)展。
擬物風(fēng)格的設(shè)計(jì)作品，通過模擬現(xiàn)實(shí)物品的造型和質(zhì)感，通過疊加、高光、紋理、材質(zhì)、陰影等效果對(duì)實(shí)物進(jìn)行再現(xiàn)，讓用戶以極低的學(xué)習(xí)成本快速熟悉圖形化的操作界面和產(chǎn)品功能，并以符合日常習(xí)慣和直覺的方式引導(dǎo)用戶進(jìn)行交互。
例如在ios6中的相機(jī)icon，對(duì)鏡頭部分細(xì)節(jié)刻畫非常細(xì)致，用戶很容易聯(lián)想到使用真實(shí)相機(jī)時(shí)能夠做到的事情，這對(duì)用戶理解和熟悉某一個(gè)產(chǎn)品功能的幫助無疑是巨大的；再比如同樣在ios6中的書架icon設(shè)計(jì)也十分精彩，不僅對(duì)真實(shí)報(bào)刊架的結(jié)構(gòu)和質(zhì)感極度還原，而且對(duì)書架內(nèi)的雜志也進(jìn)行了展示，用戶甚至能像真的面對(duì)一個(gè)書架一樣看到書架中的內(nèi)容，小小的icon中信息含量極高。
到2013年左右，智能手機(jī)在全球主要國家和地區(qū)的普及率大幅提高。根據(jù)統(tǒng)計(jì)數(shù)據(jù)，許多發(fā)達(dá)國家的智能手機(jī)普及率超過了50%，發(fā)展中國家的智能手機(jī)普及率也在快速上升。大部分用戶已經(jīng)對(duì)圖形化的操作界面非常熟悉，無需那些極致寫實(shí)的風(fēng)格也能快速理解圖形背后的含義和功能。同時(shí)，越來越多的信息和應(yīng)用涌入智能設(shè)備，擬物風(fēng)格所推崇的肌理、質(zhì)感、光影……帶來精致效果的同時(shí)，也讓細(xì)節(jié)變得冗余，如何處理爆炸的信息成為UI設(shè)計(jì)的首要問題。就像19世紀(jì)攝影技術(shù)對(duì)傳統(tǒng)寫實(shí)繪畫藝術(shù)的沖擊，讓藝術(shù)家們重新思考繪畫藝術(shù)的發(fā)展方向一樣，擬物風(fēng)格的極致具象化在達(dá)到巔峰之時(shí)也漸漸到達(dá)了轉(zhuǎn)折點(diǎn)。
2013年9月ios7發(fā)布，并且首次在UI設(shè)計(jì)中采用了扁平化的設(shè)計(jì)風(fēng)格。這種風(fēng)格摒棄了擬物設(shè)計(jì)風(fēng)格中的寫實(shí)光影、肌理、冗余的細(xì)節(jié)、甚至放棄了體積的塑造以及一切可能會(huì)對(duì)識(shí)別產(chǎn)生干擾的元素，只保留對(duì)用戶最關(guān)鍵的信息，呈現(xiàn)出十分干凈整潔的視覺效果。
然而物極必反，扁平化設(shè)計(jì)的極致簡(jiǎn)潔，容易讓長(zhǎng)期使用的用戶感到冷淡和無趣，于是新擬物風(fēng)格應(yīng)運(yùn)而生。
新擬物融合了擬物和扁平兩種風(fēng)格的特點(diǎn)，在光影和立體效果方面較為寫實(shí)，元素通常是凸起或凹陷于界面之上，視覺上錯(cuò)落有致，但是在色彩和造型方面則更偏向于扁平化風(fēng)格，圖形往往經(jīng)過一定的簡(jiǎn)化和抽象，并搭配少量簡(jiǎn)潔的主觀顏色。但是新擬物風(fēng)格過于依賴投影和立體效果對(duì)界面元素的區(qū)分，很難呈現(xiàn)復(fù)雜的信息層級(jí)，而且微妙的對(duì)比度也不利于無障礙識(shí)別，所以這種風(fēng)格并未真正大面積流行和使用。
2022年，ChatGPT發(fā)布，AI在自然語言處理方面達(dá)到了前所未有的高度，同年Midjourney和stablediffusion的出圈讓每個(gè)人看到了AI生圖的魅力。不僅各種AI應(yīng)用和網(wǎng)站如同雨后春筍般出現(xiàn)，而且各行各業(yè)的APP都在爭(zhēng)前恐后的升級(jí)自己的AI能力。這樣的時(shí)代背景，為UI設(shè)計(jì)提出了一個(gè)新的命題：如何用設(shè)計(jì)展現(xiàn)應(yīng)用的AI能力以及企業(yè)的智能化心智。
色彩在B端設(shè)計(jì)風(fēng)格中占據(jù)著至關(guān)重要的地位，能夠帶給用戶非常強(qiáng)烈的直觀感受，是用戶對(duì)產(chǎn)品和品牌的第一印象。例如藍(lán)色就是過去對(duì)To B或科技產(chǎn)品的色彩印象，諸如英特爾、微軟、聯(lián)想、戴爾、IBM…這些品牌通過藍(lán)色來傳達(dá)簡(jiǎn)潔、未來感和高科技等視覺感受。但是這個(gè)標(biāo)準(zhǔn)并非是一成不變的，越來越多的B端設(shè)計(jì)，選擇使用豐富的色彩來表達(dá)智能化千變?nèi)f化的特點(diǎn)，科技感的表達(dá)不再是千篇一律的冷色，而有了更多的變化。
彌散漸變
彌散漸變是一種借助模糊效果將多種顏色進(jìn)行混合的特殊漸變形式，多種顏色的混合以及不規(guī)律的漸變走勢(shì)，讓彌散漸變具有很強(qiáng)的氛圍烘托效果和表現(xiàn)力。暈開的色彩仿佛在一片虛空之中慢慢彌散開來，細(xì)膩、柔和又夢(mèng)幻，很適合用來提升界面的局部氛圍。
優(yōu)秀的場(chǎng)景適用性
在B端設(shè)計(jì)中，屏效和識(shí)別尤為重要，利用圖形或插畫的形式烘托氛圍，往往需要占用更多的空間，并且在網(wǎng)頁端的適配過程中，容易產(chǎn)生圖文重疊帶來的識(shí)別的問題。而彌散漸變由于其模糊和明度均勻的特點(diǎn)，可以在為畫面貢獻(xiàn)豐富度的同時(shí)，不產(chǎn)生視覺上的焦點(diǎn)，所以在適配過程中也不會(huì)產(chǎn)生圖文重疊的問題，具有很普遍的應(yīng)用場(chǎng)景。
高效的場(chǎng)景拓展
在調(diào)整漸變時(shí)，通過保留一些相對(duì)清晰的輪廓，彌散漸變還能呈現(xiàn)出虛實(shí)結(jié)合的視覺體驗(yàn)，讓畫面更具動(dòng)感和層次變化，就像一面磨砂玻璃后飄浮著一些真實(shí)的物體一樣，十分具有空間感。虛實(shí)的變化讓色彩有了具體的造型，可能是一段波浪、一個(gè)球體、或是一座山丘……這樣的背景配合一些簡(jiǎn)單的排版，便可以是一張海報(bào)、一張banner、一個(gè)推送封面……這無疑為高速迭代的B端設(shè)計(jì)提供了一個(gè)高效的解決方案。
動(dòng)態(tài)變化
根據(jù)資料顯示，手機(jī)軟件的AI生圖時(shí)長(zhǎng)一般在10秒至120秒之間，AI搜索平均時(shí)長(zhǎng)大致在2秒到15秒之間，專業(yè)的寫作AI成文時(shí)間大致在3秒到30秒……
AI應(yīng)用伴隨著大量的等待時(shí)間。使用動(dòng)態(tài)變化的顏色能夠降低用戶在等待期間的焦慮感，并且不斷變化流動(dòng)的色彩也能暗示用戶，當(dāng)前仍處在“生成中”的狀態(tài)下。例如用戶在等待釘釘AI助理回答的過程中，聊天氣泡會(huì)呈現(xiàn)出多彩的流光效果；用戶在與AI助理進(jìn)行語音交互時(shí)，整個(gè)屏幕邊緣會(huì)呈現(xiàn)動(dòng)態(tài)的彩色光效，以表示當(dāng)前的AI激活狀態(tài)。
除此之外，全屏動(dòng)態(tài)的漸變背景還很適合用在信息不多的功能或應(yīng)用首頁，例如在釘釘?shù)牡卿涰撁妫聊唤种目臻g中只有簡(jiǎn)單的文字動(dòng)畫，搭配全氛圍的動(dòng)態(tài)漸變背景，不僅清晰地傳達(dá)品牌的智能化心智，而且為“登錄”這一操作增添了滿滿的儀式感。類似的還有釘釘AI搜索的功能首頁，大面積涌動(dòng)的動(dòng)態(tài)漸變，充分在視覺層面展現(xiàn)了智能化的心智，而且大面積的留白也讓釘釘AI企業(yè)搜索的功能價(jià)值描述顯得格外突出。
雖然新擬態(tài)風(fēng)格并未大規(guī)模的使用和流行，但其衍生和沉寂的背后反映了設(shè)計(jì)的本質(zhì)就是一場(chǎng)功能和審美之間的角逐。B端設(shè)計(jì)更是如此，用戶側(cè)需要美的設(shè)計(jì)來愉悅工作中的心情，但又不想被花哨的色彩和裝飾干擾工作效率，企業(yè)側(cè)需要擺脫沉悶古板的刻板印象，但同時(shí)也需要呈現(xiàn)專業(yè)、科技的高大形象保持可信度。微妙克制的質(zhì)感表達(dá)為這種“平衡”的實(shí)現(xiàn)提供了解決思路。
玻璃擬態(tài)
玻璃擬態(tài)是2020年末開始流行的設(shè)計(jì)風(fēng)格，顧名思義就是對(duì)玻璃這種材質(zhì)的一種擬物化設(shè)計(jì)，玻璃擬態(tài)風(fēng)格相較于新擬物風(fēng)格最明顯的進(jìn)步在于，它巧妙地利用玻璃這種材質(zhì)解決了新擬物風(fēng)格中元素邊界不清晰、難以體現(xiàn)復(fù)雜層級(jí)等問題。其風(fēng)格特點(diǎn)可以總結(jié)為以下特點(diǎn)：
通透：
由于磨砂玻璃的通透性，在界面中存在多個(gè)層級(jí)時(shí)，會(huì)呈現(xiàn)出一種虛實(shí)結(jié)合的美感。并且其透明的屬性，能夠很好的暗示用戶目前所處的位置，利用此特性，不僅能更沉浸的展現(xiàn)用戶當(dāng)前關(guān)注的信息，而且“疊加”而非“跳轉(zhuǎn)”的交互邏輯也極大減輕了用戶操作時(shí)的心理負(fù)擔(dān)。
懸?。?/p>
傳統(tǒng)的擬物風(fēng)格往往會(huì)塑造一個(gè)地面，再將圖標(biāo)“放置”在上面。而玻璃擬態(tài)風(fēng)格則更像是構(gòu)建了一個(gè)“無重力”的虛擬空間，界面中的元素有明顯的懸浮感，顯得十分輕盈，同時(shí)也非常適用于B端場(chǎng)景下對(duì)于科技感的體現(xiàn)。配合投影、虛實(shí)對(duì)比，用戶能夠清晰地感受到元素在空間上的高度差異，不僅保障了信息的可讀性，而且讓可交互元素更具點(diǎn)擊感。
微妙：
由于磨砂玻璃的物理特性，頁面背景在經(jīng)過“玻璃層”的模糊處理后會(huì)變得十分柔和，類似上文所述的“彌散漸變”，呈現(xiàn)出一種明度均勻，沒有視覺焦點(diǎn)的狀態(tài)，無論是動(dòng)態(tài)還是靜態(tài)都能很好的保障前景文字、UI控件等元素的可識(shí)別性。并且在玻璃擬態(tài)風(fēng)格中，常常使用輕薄微妙的邊框來強(qiáng)化物理質(zhì)感，這種既作為描邊，又作為“玻璃”的厚度的處理方式，讓卡片能夠以一個(gè)恰到好處的對(duì)比度呈現(xiàn)在界面中。
綜上所述，玻璃擬態(tài)風(fēng)格在擬物程度上找到了一個(gè)很好的平衡點(diǎn)，既為枯燥的B端設(shè)計(jì)提供了真實(shí)感和趣味性，又保障了復(fù)雜信息情況下的識(shí)別度。并且由于玻璃光滑、透明等物理特性，也為“科技感”的視覺呈現(xiàn)提供了新的方向。
柔和光影+微質(zhì)感材質(zhì)
與C端設(shè)計(jì)中常用強(qiáng)烈的光影效果吸引用戶不同，b端設(shè)計(jì)相對(duì)更加沉穩(wěn)。對(duì)比阿里云、WPS、釘釘、騰訊云的官網(wǎng)首頁，都不約而同地使用了非常柔和的環(huán)境光，這種光影設(shè)計(jì)，在保障整體亮度的基礎(chǔ)上，不會(huì)產(chǎn)生明確的光照方向和陰影效果，并且在材質(zhì)選擇上，也都使用了高光、反光均不明顯的漫反射材質(zhì)或微質(zhì)感的毛玻璃材質(zhì)，整體視覺感受十分沉靜和整潔。
圖形在設(shè)計(jì)中扮演著兩部分角色，一方面圖形作為頁面的裝飾需要保證審美的愉悅性，另一方面圖形也作為文字信息的補(bǔ)充，需要傳達(dá)某些特定的含義。好的圖形設(shè)計(jì)不僅能為整個(gè)頁面的氛圍添光加彩，而且能幫助用戶更好的理解文字信息。
規(guī)律感的幾何圖形
在b端場(chǎng)景下，常常需要借助圖形表達(dá)一些抽象的概念，例如PaaS、服務(wù)器、AI、用量、科技、流量……這類含義并不直接對(duì)應(yīng)一個(gè)特定的造型，使用有規(guī)律的幾何圖形，似乎是一個(gè)不錯(cuò)的選擇。這些技術(shù)概念的背后來自于二進(jìn)制中0和1的組合，而將幾何元素有機(jī)地排列，甚至衍生出不同的形態(tài)的過程，不是正如代碼的編寫嗎？
簡(jiǎn)潔高效的手繪元素
在當(dāng)下的B端設(shè)計(jì)領(lǐng)域，越來越重視情感關(guān)懷和個(gè)人用戶的體驗(yàn)。在頁面中使用具有手繪感的元素或使用直接使用手繪圖案作為配圖，不僅能夠快速拉近品牌和用戶之間的距離，塑造年輕化、有親和力的品牌形象，也能提升用戶在使用產(chǎn)品工作時(shí)的愉悅感。這類充滿輕松感的圖形比起傳統(tǒng)的插畫或3d建模更加簡(jiǎn)潔，色彩鮮明，具有很強(qiáng)的表現(xiàn)力，并且設(shè)計(jì)成本也更低，十分適合作為一些小而美的產(chǎn)品配圖。
例如Google推出的Material design的設(shè)計(jì)語言就大量使用了抽象且配色艷麗的手繪元素作為配圖，這類圖案更加強(qiáng)調(diào)色彩并不過多細(xì)化造型，穿插在文字之間，讓深色背景的頁面一下活躍了起來。與此類似的還有figma的官網(wǎng)，設(shè)計(jì)師將軟件內(nèi)的部分工具比如線條、線框、錨點(diǎn)、指針等元素抽象出來作為插圖，不僅簡(jiǎn)潔耐看，而且十分具有自身的品牌特色。
除此之外，利用手繪線條來表現(xiàn)hover的交互狀態(tài)，圈畫重要的文字信息，或是進(jìn)行操作引導(dǎo)，也具有極高的效率。簡(jiǎn)單的箭頭或者波浪線，能夠非常直接地將用戶的注意力指引到重要信息處，就像學(xué)生時(shí)期在書本上圈畫重點(diǎn)一樣，感受上十分自然而親切。仿佛應(yīng)用的設(shè)計(jì)者悄悄在用戶耳邊說了一句小tips，而不是粗暴地把信息丟到用戶眼前。
無論是擬物風(fēng)格時(shí)期的極致寫實(shí)，還是扁平化風(fēng)格時(shí)期的極簡(jiǎn)，又或是AI時(shí)代的多彩絢麗，設(shè)計(jì)風(fēng)格的發(fā)展始終圍繞著技術(shù)發(fā)展的主線，其發(fā)展的目標(biāo)，始終圍繞著如何讓當(dāng)前時(shí)代的用戶更好更便捷地享受到技術(shù)應(yīng)用帶來的便利。一個(gè)好的b端設(shè)計(jì)風(fēng)格，不僅能夠幫助企業(yè)展現(xiàn)品牌心智和技術(shù)上的先進(jìn)性；而且能夠讓個(gè)人用戶更高效且愉悅地完成工作任務(wù)。在未來的B端產(chǎn)品設(shè)計(jì)中，我們應(yīng)該始終堅(jiān)持形式服務(wù)于功能和以人為本的原則，探索更適合業(yè)務(wù)場(chǎng)景的設(shè)計(jì)風(fēng)格，為用戶帶來更加舒適自然的視覺體驗(yàn)。
以上是本期帶來的B端設(shè)計(jì)趨勢(shì)之個(gè)風(fēng)格篇。
本文由人人都是產(chǎn)品經(jīng)理作者【釘釘用戶體驗(yàn)】，原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于 CC0 協(xié)議。
蘭亭妙微(www.jsyqsx.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
多數(shù)產(chǎn)品經(jīng)理總是認(rèn)為很專業(yè)，總會(huì)有一些異想天開的想法；殊不知我們不少自以為是的“優(yōu)秀”設(shè)計(jì)，并不符合用戶使用場(chǎng)景，還可能摧毀用戶價(jià)值。就像本文列舉的這幾個(gè)案例，你有注意到嗎？
產(chǎn)品經(jīng)理的專業(yè)視角與用戶視角，如同孿生兄弟，外表相似但內(nèi)在迥異。
有時(shí)我們說誰的產(chǎn)品專業(yè)能力過硬，可能是一句褒獎(jiǎng)的話。但專業(yè)能力若不能融合專家視角與用戶視角，便可能被視為局限而非優(yōu)點(diǎn)。
張小龍說自己可以很快變小白，而馬化騰卻可以“一秒變小白”。
所謂“一秒變小白”是指快速從專業(yè)視角切換到用戶視角，確保在設(shè)計(jì)產(chǎn)品和評(píng)估用戶價(jià)值時(shí)，避免陷入專家思維，無意中損害用戶價(jià)值。
兩年前，我?guī)е鴰讉€(gè)“朋友”坐飛機(jī)回云南老家，到達(dá)長(zhǎng)水機(jī)場(chǎng)后，準(zhǔn)備去上廁所。其中一位女性朋友，徑直走進(jìn)男廁所，直至上完廁所出來后，我們提醒她才“恍然大悟”——進(jìn)錯(cuò)了廁所。
究其原因就在于一個(gè)“設(shè)計(jì)”：女廁所圖標(biāo)設(shè)計(jì)不明確，導(dǎo)致誤解。
目前在機(jī)場(chǎng)、商場(chǎng)（尤其是高級(jí)商場(chǎng)）、寫字樓等場(chǎng)所，設(shè)計(jì)者都采取一種精簡(jiǎn)設(shè)計(jì)方案，他們追求簡(jiǎn)潔的設(shè)計(jì)感。即只有一個(gè)非常簡(jiǎn)潔的圖標(biāo)，有的是男和女的人物圖標(biāo)，有的是煙斗和高跟鞋等?？傊粫?huì)有任何一個(gè)漢字（或英文）描述。
好像一旦圖標(biāo)旁寫上“男廁”、“女廁”后，它們就變成了一種“土”、“low”的設(shè)計(jì)方案。
同一個(gè)空間內(nèi)，不僅僅是廁所圖標(biāo)，還有扶梯、直梯、貨梯、嬰幼兒室、母嬰室等各類圖標(biāo)，甚至有時(shí)它們會(huì)同時(shí)出現(xiàn)在一個(gè)引導(dǎo)牌，讓你真正玩一把“猜猜猜”的圖像游戲。
結(jié)果是：你無法快速找到圖標(biāo)；找到后，你需要仔細(xì)辨認(rèn)以及“揣摩”圖標(biāo)的含義，避免走錯(cuò)；直至你走錯(cuò)后，才能“吃一塹，長(zhǎng)一智”。
同時(shí)，某些商場(chǎng)或?qū)懽謽堑南词峙_(tái)，為了追求設(shè)計(jì)感以及合理利用空間，把洗手液跟紙抽“融入”到鏡面里，表面看確實(shí)簡(jiǎn)潔，是一種優(yōu)秀設(shè)計(jì)方案。
但當(dāng)你伸手接洗手液洗手時(shí)，卻無法精準(zhǔn)對(duì)接，需要反復(fù)嘗試2-3次。沒接到的洗手液，自然流就流落到洗手臺(tái)之上。
結(jié)果是：用戶體驗(yàn)差，浪費(fèi)洗手液，增加清潔成本。
保潔阿姨發(fā)現(xiàn)這個(gè)問題后，最后的解決方案就是：在洗手臺(tái)旁邊，直接放了一個(gè)自助式的洗手液。至此，那個(gè)“優(yōu)秀”的設(shè)計(jì)方案，從此成為了擺設(shè)。
你自以為的優(yōu)秀設(shè)計(jì)，往往卻摧毀了用戶的價(jià)值。它肯定不是你的初心，而是你的專業(yè)視角所致，卻忽略了用戶視角（尤其是小白用戶視角）。
如下圖所示，用戶對(duì)發(fā)放工資條時(shí)，選擇方案的設(shè)計(jì)進(jìn)行了“吐槽”。一般默認(rèn)勾選時(shí)，顯示一個(gè)多選框，勾選即選中，反之不選，而設(shè)計(jì)升級(jí)后，期望讓選中效果更明顯，去掉勾選框，點(diǎn)擊列表選中，再次點(diǎn)擊取消。
結(jié)果是：用戶不知道如何勾選，“優(yōu)秀”設(shè)計(jì)摧毀了用戶體驗(yàn)。
我們?cè)倏匆粋€(gè)例子。
如下圖所示，它們都是新建班次的設(shè)置頁面，核心是約定員工的上下班時(shí)間跟打卡范圍，但它們代表兩種不同的設(shè)計(jì)風(fēng)格。
方案1采用平鋪直敘的用戶語言風(fēng)格，以對(duì)話感設(shè)計(jì)頁面元素，旨在增強(qiáng)用戶互動(dòng)體驗(yàn)，但可能導(dǎo)致信息顯示冗余。比如最早可提前x分鐘打卡，晚于x分鐘打卡記為遲到；
方案2采用簡(jiǎn)潔設(shè)計(jì)，避免冗余文字，以簡(jiǎn)潔頁面提升視覺效果，但可能增加用戶理解和使用難度（就像廁所圖標(biāo)的設(shè)計(jì)一樣）。比如上班卡當(dāng)天5:00-當(dāng)天12:00，用戶自行設(shè)置取卡范圍。
第一，認(rèn)知層面。產(chǎn)品經(jīng)理的專業(yè)能力體現(xiàn)在創(chuàng)造用戶價(jià)值和商業(yè)價(jià)值，而非局限于單一專業(yè)領(lǐng)域。這種能力需同時(shí)滿足專業(yè)人士和小白用戶的需求，否則不能稱之為真正的專業(yè)能力。
第二，設(shè)計(jì)語言。采用用戶語言/自然語言作為設(shè)計(jì)語言，而不是設(shè)計(jì)師或產(chǎn)品經(jīng)理的“專業(yè)”語言。比如晚于30分鐘打卡記為遲到，就好于“豁免30分鐘”；最早可提前120分鐘打卡，最晚可延后120分鐘打卡，就好于“上班卡范圍：當(dāng)天6:00-10:00”。
第三，設(shè)計(jì)“潛規(guī)則”。遵循行業(yè)“潛規(guī)則”設(shè)計(jì)，避免過度自我創(chuàng)造（或創(chuàng)新），導(dǎo)致傷害了用戶價(jià)值。比如單選、多選、開關(guān)等設(shè)計(jì)要素，遵循成熟的設(shè)計(jì)方式，而不是非要“獨(dú)樹一幟”。
我們?cè)谏虉?chǎng)、機(jī)場(chǎng)等，比較常見的解決方案是：提供一個(gè)間親子衛(wèi)生間。
哈爾濱江北商場(chǎng)提供了一種創(chuàng)新的解決方案。即：在正常男女廁所旁邊，新建了一個(gè)開放式的兒童廁所，配備了男孩和女孩專用的小便池及兒童洗手臺(tái)。
既解決了家長(zhǎng)帶異性子女上廁所的難題，也方便了兒童獨(dú)立使用，體現(xiàn)了對(duì)兒童和家長(zhǎng)需求的細(xì)致考慮，這是真正用戶視角下的產(chǎn)品設(shè)計(jì)。
專欄作家
邢小作，微信公眾號(hào)：產(chǎn)品方法論集散地，人人都是產(chǎn)品經(jīng)理專欄作家。一枚在線教育的產(chǎn)品，關(guān)注互聯(lián)網(wǎng)教育，喜歡研究用戶心理。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Unsplash，基于CC0協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(www.jsyqsx.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
在當(dāng)今數(shù)字化時(shí)代，交互設(shè)計(jì)不僅是產(chǎn)品成功的關(guān)鍵因素之一，更是連接用戶與產(chǎn)品之間的橋梁。交互設(shè)計(jì)的原則和方法雖然眾多，但本文將聚焦于產(chǎn)品交互設(shè)計(jì)的內(nèi)在邏輯和基本原理，探討什么樣的設(shè)計(jì)才是優(yōu)秀的，如何衡量其效果。
首先，我們需要明確“產(chǎn)品交互設(shè)計(jì)”的定義。產(chǎn)品交互設(shè)計(jì)是為了達(dá)成特定產(chǎn)品目標(biāo)而進(jìn)行的用戶與產(chǎn)品之間的交互流程設(shè)計(jì)和反饋設(shè)計(jì)。換句話說，它不僅關(guān)注用戶如何使用產(chǎn)品，還關(guān)注產(chǎn)品如何有效地反饋給用戶。值得注意的是，產(chǎn)品交互設(shè)計(jì)是圍繞產(chǎn)品目標(biāo)展開的，而非單純圍繞用戶展開，用戶在這一過程中只是間接的服務(wù)對(duì)象。
這種思維方式可能與許多人的初始認(rèn)知有所不同。以宜家家居為例，作為一家大型購物中心，宜家并不希望用戶能迅速找到想要的產(chǎn)品，而是希望用戶能在其店內(nèi)多做體驗(yàn)。盡管這種迂回而漫長(zhǎng)的購物路徑可能讓人感到煩惱，但用戶卻很少對(duì)此抱怨。這正是成功的產(chǎn)品交互設(shè)計(jì)的體現(xiàn)：雖然交互流程可能令人困擾，但良好的交互反饋（如各類家具的試用體驗(yàn)）卻能讓用戶感到滿意。
產(chǎn)品交互設(shè)計(jì)的核心在于用戶體驗(yàn)流程的設(shè)計(jì)。這一理念強(qiáng)調(diào)，交互設(shè)計(jì)并非簡(jiǎn)單的按鈕、彈窗或功能的堆砌，而是為了實(shí)現(xiàn)產(chǎn)品目標(biāo)而有意設(shè)計(jì)的用戶與產(chǎn)品的互動(dòng)流程。在這個(gè)過程中，每一個(gè)交互環(huán)節(jié)都旨在滿足用戶需求，同時(shí)實(shí)現(xiàn)產(chǎn)品的獲益目標(biāo)。這種獲益不一定是金錢上的，可能還包括用戶的關(guān)注度和忠誠度。
尼爾森可用性原則專業(yè)描述：
尼爾森可用性原則由人機(jī)交互學(xué)博士Jakob Nielsen提出，包括狀態(tài)可見性原則、貼近用戶真實(shí)環(huán)境原則、自由控制原則、一致性和標(biāo)準(zhǔn)化原則、防錯(cuò)原則等。這些原則提供了一套評(píng)估用戶體驗(yàn)好壞的標(biāo)準(zhǔn)，幫助設(shè)計(jì)師和產(chǎn)品經(jīng)理進(jìn)行自查和優(yōu)化
理論支撐：
用戶體驗(yàn)地圖是一種以用戶為中心的可視化工具，用于描述和展示用戶在使用產(chǎn)品、服務(wù)或系統(tǒng)的過程中的整體體驗(yàn)和情感變化。它通過講故事的方式，描述用戶參與服務(wù)過程中的體驗(yàn)變化，并通過可視化的方式將信息予以呈現(xiàn)。用戶體驗(yàn)地圖關(guān)注用戶的行為接觸點(diǎn)、情緒曲線、痛點(diǎn)和機(jī)會(huì)點(diǎn)，幫助團(tuán)隊(duì)更好地理解用戶需求，從而優(yōu)化產(chǎn)品設(shè)計(jì)
案例分析：
Netflix：Netflix通過用戶體驗(yàn)地圖分析用戶觀看習(xí)慣，發(fā)現(xiàn)用戶在選擇觀看內(nèi)容時(shí)往往會(huì)感到選擇困難。為此，Netflix優(yōu)化了推薦算法，提供個(gè)性化的內(nèi)容推薦，顯著提升了用戶的觀看體驗(yàn)和滿意度。
交互設(shè)計(jì)的成功在于與用戶的有效溝通。正如俞軍所說，“產(chǎn)品經(jīng)理就是以產(chǎn)品當(dāng)筆，與世界對(duì)話”。在設(shè)計(jì)過程中，理解用戶的需求和情感是至關(guān)重要的。
理解用戶的方法：
KANO模型：由東京理工大學(xué)教授狩野紀(jì)昭（Noriaki Kano）發(fā)明，是一種對(duì)用戶需求進(jìn)行分類和優(yōu)先排序的方法論。它將用戶需求分為基本型需求、期望型需求和興奮型需求，幫助企業(yè)識(shí)別不同層次的用戶需求，從而優(yōu)化產(chǎn)品功能。
馬斯洛需求層次理論專業(yè)描述： 馬斯洛需求層次理論由心理學(xué)家亞伯拉罕·馬斯洛提出，將人類的需求劃分為五個(gè)主要層次，從最基本的生理需求到最高層次的自我實(shí)現(xiàn)需求逐級(jí)遞增。理解這些層次的需求有助于揭示人們行為的驅(qū)動(dòng)力及其生活的主要?jiǎng)訖C(jī)。
案例分析：
Dropbox：在早期，Dropbox通過用戶訪談和數(shù)據(jù)分析了解用戶對(duì)文件共享的需求，發(fā)現(xiàn)用戶希望能夠輕松分享文件而不必?fù)?dān)心復(fù)雜的設(shè)置?；谶@些反饋，Dropbox簡(jiǎn)化了分享流程，使得用戶可以一鍵分享文件，極大提升了用戶體驗(yàn)。
設(shè)計(jì)的最終目標(biāo)是讓用戶理解我們的意圖。如果用戶無法理解設(shè)計(jì)表達(dá)，那么所有的努力都將付諸東流。為了實(shí)現(xiàn)這一目標(biāo)，我們需要遵循以下原則：
1. 按照用戶的思維習(xí)慣設(shè)計(jì)：設(shè)計(jì)應(yīng)符合用戶的思維邏輯。例如，用戶在使用某些功能時(shí)，往往會(huì)根據(jù)自己的經(jīng)驗(yàn)進(jìn)行操作，設(shè)計(jì)應(yīng)當(dāng)順應(yīng)這種習(xí)慣。
2. 使用用戶的習(xí)慣性語言：設(shè)計(jì)中使用用戶熟悉的術(shù)語和表達(dá)方式，以降低理解成本。例如，針對(duì)不同文化背景的用戶，設(shè)計(jì)語言和符號(hào)應(yīng)有所不同。
3. **提供足夠的提示**：在設(shè)計(jì)中加入必要的提示和指導(dǎo)，幫助用戶理解如何使用產(chǎn)品。例如，在注冊(cè)界面中，確保用戶能夠清晰地看到同意《用戶協(xié)議》的選項(xiàng)。
案例分析：
Slack：Slack在設(shè)計(jì)其用戶界面時(shí)，充分考慮了用戶的習(xí)慣性語言和操作邏輯，使用了直觀的圖標(biāo)和清晰的提示，幫助用戶快速上手。用戶在使用Slack時(shí)，能夠輕松找到所需功能，極大提升了用戶的滿意度。
簡(jiǎn)潔性是交互設(shè)計(jì)的重要原則，但這并不意味著界面內(nèi)容越少越好，而是要讓用戶在使用過程中感到輕松和自然。簡(jiǎn)潔的設(shè)計(jì)應(yīng)當(dāng)幫助用戶快速實(shí)現(xiàn)目標(biāo)，而不是讓他們感到困惑。
實(shí)現(xiàn)簡(jiǎn)潔性的策略：
理論支撐：
諾曼的交互設(shè)計(jì)基本原則：諾曼提出的示能、意符、映射、反饋和概念模型等原則，為設(shè)計(jì)師提供了清晰的指導(dǎo)，幫助他們創(chuàng)造出用戶友好的設(shè)計(jì)。
案例分析：
蘋果公司：蘋果在其產(chǎn)品設(shè)計(jì)中始終堅(jiān)持簡(jiǎn)潔性原則，通過直觀的界面和簡(jiǎn)單的操作流程，使用戶能夠輕松上手。無論是iPhone的操作系統(tǒng)，還是Mac的桌面環(huán)境，用戶都能快速找到所需功能，享受流暢的使用體驗(yàn)。
用戶體驗(yàn)的“峰-終”值原理表明，用戶的整體滿意度并不取決于每個(gè)環(huán)節(jié)的完美，而是關(guān)鍵時(shí)刻的滿意度。因此，設(shè)計(jì)師應(yīng)關(guān)注用戶在使用過程中的高峰體驗(yàn)和結(jié)束體驗(yàn)。
實(shí)現(xiàn)用戶滿意度的策略：
案例分析：
Zappos：Zappos以其卓越的客戶服務(wù)而聞名，尤其是在處理退貨和客戶投訴時(shí)。他們確保用戶在購買后無論遇到什么問題，都能得到及時(shí)和滿意的解決，從而提升了用戶的整體滿意度。
綜上所述，產(chǎn)品交互設(shè)計(jì)的基本原則在于將設(shè)計(jì)視為一個(gè)整體流程，深入理解用戶，確保設(shè)計(jì)能夠被用戶理解，并讓用戶感到簡(jiǎn)單和愉悅。最終，設(shè)計(jì)的成功與否應(yīng)通過是否幫助實(shí)現(xiàn)產(chǎn)品目標(biāo)來衡量。通過不斷迭代和優(yōu)化，我們可以創(chuàng)造出既滿足用戶需求又推動(dòng)產(chǎn)品發(fā)展的優(yōu)秀交互設(shè)計(jì)。設(shè)計(jì)師在這一過程中，應(yīng)始終保持對(duì)用戶的敏感度，關(guān)注用戶的反饋，以確保設(shè)計(jì)始終圍繞用戶的真實(shí)需求展開。
作者：海鮮不設(shè)計(jì)，微信公眾號(hào)：海鮮不設(shè)計(jì)
本文由 @海鮮不設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(www.jsyqsx.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
在B端產(chǎn)品設(shè)計(jì)中，退訂是用戶對(duì)產(chǎn)品不滿的直接表現(xiàn)，也是我們優(yōu)化產(chǎn)品的重要信號(hào)。作為UI設(shè)計(jì)師，如何通過交互設(shè)計(jì)降低退訂率，提升用戶留存，是一個(gè)值得深入探討的話題。本文將結(jié)合 DeepSeek（深度探索） 的設(shè)計(jì)理念，從用戶心理和交互設(shè)計(jì)的角度，分享B端產(chǎn)品退訂心理學(xué)的設(shè)計(jì)策略與實(shí)踐。
強(qiáng)調(diào)通過深度探索用戶行為和心理，找到問題的本質(zhì)。在退訂場(chǎng)景中，用戶的行為背后往往隱藏著以下心理動(dòng)因：
1）設(shè)計(jì)目標(biāo)：通過數(shù)據(jù)分析，找到用戶退訂的高頻節(jié)點(diǎn)，優(yōu)化交互路徑。
2）設(shè)計(jì)策略：
1）設(shè)計(jì)目標(biāo)：通過設(shè)計(jì)手段，讓用戶直觀感受到產(chǎn)品的價(jià)值。
2）設(shè)計(jì)策略：
1）設(shè)計(jì)目標(biāo)：降低用戶的操作成本，減少因體驗(yàn)不佳導(dǎo)致的退訂。
2）設(shè)計(jì)策略：
1）設(shè)計(jì)目標(biāo)：通過設(shè)計(jì)讓用戶感受到被重視，增強(qiáng)對(duì)產(chǎn)品的情感依賴。
2）設(shè)計(jì)策略：
以某B端 SaaS 產(chǎn)品為例，通過 DeepSeek+交互設(shè)計(jì)策略，退訂率降低了20%。
具體優(yōu)化包括：
退訂是用戶對(duì)產(chǎn)品的“最后反饋”，也是我們優(yōu)化產(chǎn)品的重要機(jī)會(huì)。通過 DeepSeek+交互設(shè)計(jì)，我們可以深度探索用戶心理，優(yōu)化交互路徑，強(qiáng)化價(jià)值感知，簡(jiǎn)化操作流程，并建立情感連接，從而有效降低退訂率。希望本文的設(shè)計(jì)策略與實(shí)踐能為B端產(chǎn)品的優(yōu)化提供啟發(fā)，讓我們的產(chǎn)品更好地服務(wù)于用戶，提升用戶留存與滿意度。
本文由 @劉萍 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)
蘭亭妙微(www.jsyqsx.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.jsyqsx.cn
