做了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é)的影響無(wú)處不在。它像一把神奇的鑰匙，能打開(kāi)人們內(nèi)心深處的秘密。作為設(shè)計(jì)師，我們更應(yīng)該掌握并運(yùn)用心理學(xué)，將其融入我們的設(shè)計(jì)中，從而創(chuàng)造出更具有吸引力和影響力的作品。
設(shè)計(jì)并不僅僅是形狀、顏色和布局的組合，更是對(duì)人類心理的探索和解讀。我們的每一個(gè)設(shè)計(jì)決策，都與用戶的心理狀態(tài)和認(rèn)知過(guò)程息息相關(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年的德國(guó)，一個(gè)名叫海德維希·馮·雷斯托夫的醫(yī)生開(kāi)啟了一項(xiàng)改變我們對(duì)人類記憶理解的實(shí)驗(yàn)。她深入探索了當(dāng)人們面對(duì)一系列物品時(shí)，他們的記憶是如何運(yùn)作的。通過(guò)精心設(shè)計(jì)的對(duì)比實(shí)驗(yàn)，她發(fā)現(xiàn)了一個(gè)令人驚奇的現(xiàn)象：在一組物品中，那個(gè)最特別的物品總是更容易被人們記住。
這一發(fā)現(xiàn)為我們揭示了一個(gè)核心事實(shí)：特別的事物更能吸引我們的注意力，并在我們的記憶中留下深刻的印記。想象一下，在一組物品中，如果有一個(gè)被聚光燈照亮，那么相比其他未被照亮的物品，它無(wú)疑會(huì)成為人們關(guān)注的焦點(diǎn)，從而在記憶中留下更深的痕跡。
這個(gè)人類行為和記憶的規(guī)律后來(lái)被命名為“馮·雷斯托夫效應(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)被正式確立命名以來(lái)，眾多科研學(xué)者在此基礎(chǔ)上進(jìn)行了更深入的研究，他們不僅剖析了這一效應(yīng)的內(nèi)在機(jī)制和影響因素，還探討了其在不同情境下的應(yīng)用。隨著研究的深入，對(duì)于這一效應(yīng)的理解也在不斷加深，并衍生出了許多其他的理論和學(xué)術(shù)觀點(diǎn)。
馮·雷斯托夫效應(yīng)為我們提供了一個(gè)獨(dú)特的視角，幫助我們更好地理解人類記憶的運(yùn)作方式。通過(guò)運(yùn)用這一原理，我們可以在設(shè)計(jì)中有意識(shí)地創(chuàng)造出令人難忘的元素，從而與觀眾建立更深刻的聯(lián)系。無(wú)論是在廣告、品牌推廣還是產(chǎn)品設(shè)計(jì)中，突出特別的元素都是一種有效的策略，可以幫助我們更好地吸引觀眾的注意力并留下深刻的印象。
馮·雷斯托夫效應(yīng)，又被稱為隔離效應(yīng)或新奇效應(yīng)，揭示了人們?cè)谟洃浿械钠?。?dāng)情境或經(jīng)歷中出現(xiàn)與眾不同的刺激時(shí)，這種效應(yīng)尤為明顯。
在當(dāng)今信息爆炸的時(shí)代，用戶往往沒(méi)有耐心去仔細(xì)查找信息，而是快速掃視。因此，設(shè)計(jì)師需要巧妙地運(yùn)用萊斯托夫效應(yīng)，使關(guān)鍵內(nèi)容從繁雜的信息中脫穎而出，吸引用戶的目光。
統(tǒng)一性是設(shè)計(jì)的基礎(chǔ)，但只有差異化的元素才能讓信息從頁(yè)面中脫穎而出。通過(guò)巧妙運(yùn)用顏色、形狀、布局等元素，我們可以創(chuàng)造出與眾不同的視覺(jué)效果，引導(dǎo)用戶的視線。通過(guò)巧妙地突出關(guān)鍵內(nèi)容，我們能夠更好地與用戶溝通，引領(lǐng)他們的注意力，為業(yè)務(wù)創(chuàng)造更大的價(jià)值。
在界面設(shè)計(jì)中，我們常常會(huì)遇到這樣的情況：在同類型的元素中，某一元素與其他元素存在顯著差異，這種現(xiàn)象我們稱之為“背景不同”。為了使某個(gè)模塊或元素在用戶心中留下深刻印象，我們可以利用環(huán)境差異來(lái)提高其識(shí)別度和記憶度。這種手法在UI設(shè)計(jì)中被廣泛應(yīng)用，它利用了馮·雷斯托夫效應(yīng)，能有效吸引用戶點(diǎn)擊。
例如淘寶底部標(biāo)簽欄中的四個(gè)ICON，唯獨(dú)首頁(yè)的第一個(gè)ICON（品牌logo）風(fēng)格與眾不同。即使離開(kāi)了該頁(yè)面，這個(gè)特殊的ICON依然讓人印象深刻，餓了么第二的圖標(biāo)也是如此。因此，我們?cè)谠O(shè)計(jì)界面時(shí)，若想吸引用戶的注意或提高點(diǎn)擊量，可以打破常規(guī)，讓特定元素在同背景下脫穎而出。
再比如下圖的個(gè)人中心界面，功能入口模塊均采用ICON展示，而游樂(lè)場(chǎng)模塊卻采用了特殊的布局和設(shè)計(jì)。因此，當(dāng)用戶進(jìn)入個(gè)人中心時(shí)，最先映入眼簾的便是游樂(lè)場(chǎng)模塊。這也解釋了為什么我們?cè)谶M(jìn)行廣告和活動(dòng)投放時(shí)，需要特別設(shè)計(jì)的原因。
當(dāng)遇到與過(guò)去經(jīng)驗(yàn)顯著不同的情況時(shí)，我們的大腦會(huì)產(chǎn)生一種特殊的效應(yīng)，這種效應(yīng)被稱為“經(jīng)驗(yàn)不同”的效應(yīng)。例如，在騎自行車(chē)的過(guò)程中，我們通常習(xí)慣于左手控制左把手，右手控制右把手。但是，如果我們嘗試用雙手交叉的方式來(lái)騎車(chē)，結(jié)果很可能會(huì)摔倒。從此以后，每當(dāng)我們聽(tīng)到或描述有關(guān)騎車(chē)摔倒的事情時(shí)，我們都會(huì)立刻想起那次“經(jīng)驗(yàn)不同”的嘗試。
同樣地，淘寶和京東在618、雙十一等大型促銷活動(dòng)時(shí)，會(huì)選擇重新設(shè)計(jì)他們的首頁(yè)。與往常的設(shè)計(jì)相比，這些新的首頁(yè)設(shè)計(jì)通常會(huì)增加更多的促銷入口，甚至改變ICON的風(fēng)格。從馮·雷斯托夫效應(yīng)的角度來(lái)看，這種與以往不同的設(shè)計(jì)能夠更好地吸引用戶的注意力，加深用戶的記憶，并擴(kuò)大活動(dòng)對(duì)用戶的影響力。
在視覺(jué)層面難以實(shí)現(xiàn)強(qiáng)烈差異化時(shí)，我們可以通過(guò)功能來(lái)實(shí)現(xiàn)有效的隔離。以微信為例，其置頂功能允許用戶將好友或群聊消息置于頂部，從而與其他信息區(qū)分開(kāi)來(lái)。這種設(shè)計(jì)確保了關(guān)鍵信息的優(yōu)先級(jí)，使用戶能夠更快速地找到和關(guān)注所需內(nèi)容。通過(guò)巧妙地運(yùn)用功能，我們可以輕松地解決視覺(jué)上的一致性與差異化之間的矛盾，為用戶提供更加流暢和個(gè)性化的體驗(yàn)。
靜態(tài)頁(yè)面容易讓人視覺(jué)疲勞，動(dòng)效能夠更加生動(dòng)有趣地展示內(nèi)容，引導(dǎo)用戶更加關(guān)注頁(yè)面。相較于被動(dòng)接受信息，動(dòng)效能夠更加有效地吸引用戶注意。
隨著B(niǎo)anner自動(dòng)輪播的普及，用戶對(duì)其的吸引力逐漸降低。面對(duì)不斷變化的廣告，用戶不再耐心地逐個(gè)瀏覽。當(dāng)無(wú)法獲取所需信息時(shí)，他們的視線會(huì)迅速轉(zhuǎn)向其他區(qū)域。
為了應(yīng)對(duì)這一挑戰(zhàn)，騰訊視頻首頁(yè)的Banner采用了背景聯(lián)動(dòng)的形式。這意味著頭部背景色會(huì)根據(jù)Banner圖片的色調(diào)進(jìn)行變化，從而擴(kuò)大了內(nèi)容的變化空間。這種設(shè)計(jì)不僅使廣告更加引人注目，還使用戶更容易被吸引并保持關(guān)注。
頻道頁(yè)的入口方式多種多樣，金剛區(qū)icon無(wú)疑是最優(yōu)選擇。若要突出展示某些業(yè)務(wù)功能，單一的icon配合動(dòng)效可有效吸引用戶關(guān)注。此策略簡(jiǎn)單高效，有助于用戶快速找到所需內(nèi)容。
在設(shè)計(jì)界面時(shí)，我們追求的是在有限的空間內(nèi)展示更多的有效信息，避免信息的無(wú)效重復(fù)。但在電商平臺(tái)中，尤其是涉及到利益點(diǎn)時(shí)，我們需要確保信息具有足夠的價(jià)值感和吸引力。
以智行APP開(kāi)通會(huì)員為例，領(lǐng)神卡作為核心賣(mài)點(diǎn)被突出展示，采用了平鋪展開(kāi)的方式，從而突顯其價(jià)值。相對(duì)其他權(quán)益則相應(yīng)地進(jìn)行了弱化處理，以保持整體信息的清晰度和重點(diǎn)。這樣的設(shè)計(jì)既充分利用了屏幕空間，又確保了用戶能夠快速了解到核心的利益點(diǎn)。
頁(yè)面信息層次分明，信息層級(jí)越高，用戶感知越強(qiáng)烈，越能吸引注意。例如，模態(tài)彈窗處于最上層，與內(nèi)容層完全隔離，用戶無(wú)法忽視。其次是非模態(tài)懸浮層，與內(nèi)容層隔離，但不影響用戶操作。還有側(cè)邊懸浮按鈕、頂部或底部懸浮橫條等。
受“危險(xiǎn)按鈕”的影響，過(guò)去設(shè)計(jì)師常常給予負(fù)向情緒操作很高的視覺(jué)層級(jí)，例如退出登錄。這樣的設(shè)計(jì)意圖是警示用戶操作危險(xiǎn)，但視覺(jué)上卻過(guò)于強(qiáng)調(diào)，甚至有些“喧賓奪主”。近年來(lái)，移動(dòng)端設(shè)計(jì)中這種矛盾逐漸減少，但仍然存在。與其強(qiáng)調(diào)操作的難度和危險(xiǎn)性，不如考慮如何讓用戶自然地忽視這些操作，減少不必要的干擾。從馮·雷斯托夫效應(yīng)來(lái)看，這種設(shè)計(jì)方式有本末倒置之嫌，應(yīng)盡量避免。
新手設(shè)計(jì)師常常會(huì)遇到想要突出所有元素，但最終無(wú)法突出任何一項(xiàng)的問(wèn)題。頁(yè)面中的特異點(diǎn)應(yīng)該屬于少數(shù)，如果所有元素都想做得不一樣，都會(huì)讓頁(yè)面整體視覺(jué)效果崩潰。因此，在設(shè)計(jì)中要學(xué)會(huì)取舍，選擇最重要的元素進(jìn)行突出，才能達(dá)到最佳的視覺(jué)效果。
總的來(lái)說(shuō)，將馮·雷斯托夫效應(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ì)的手段為受眾用戶帶來(lái)更好的體驗(yàn)，即好看、好用。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自 Unsplash，基于 CC0 協(xié)議。
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(www.liangyajiaju.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。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
Bento UI其實(shí)流行已經(jīng)有一段時(shí)間了，但是近一兩年來(lái)才展現(xiàn)出發(fā)展的勢(shì)頭，Bento UI的體驗(yàn)和用戶友好性在設(shè)計(jì)中的價(jià)值不斷被認(rèn)識(shí)與驗(yàn)證。本文就Bento UI設(shè)計(jì)風(fēng)格進(jìn)行分析總結(jié)，希望能給你一些啟發(fā)。
Bento UI的流行已經(jīng)有一段時(shí)間，但直到最近一兩年，它才真正展現(xiàn)出強(qiáng)勁的發(fā)展勢(shì)頭。這是因?yàn)樵O(shè)計(jì)師們逐漸認(rèn)識(shí)到，Bento UI的體驗(yàn)和用戶友好性在設(shè)計(jì)中的價(jià)值。
關(guān)于Bento UI的起源存在一些爭(zhēng)議，就像許多設(shè)計(jì)趨勢(shì)一樣。有人認(rèn)為Bento UI的成功應(yīng)歸功于蘋(píng)果公司，因?yàn)樘O(píng)果在其UI元素中采用了類似的風(fēng)格。另一些人則指出，微軟的Metro UI實(shí)際上就是Bento UI的一種體現(xiàn)。不管它的來(lái)源如何，毋庸置疑，Bento UI正變得越來(lái)越受歡迎。隨著其使用量的增加，它作為一種UI風(fēng)格的可靠性也在不斷得到驗(yàn)證。
Bento UI 的靈感來(lái)自便當(dāng)盒（一種精心布置且視覺(jué)上吸引人的日本料理）概念，提供了令人耳目一新的設(shè)計(jì)。它不僅僅是一個(gè)設(shè)計(jì)框架，而是一種兼顧用戶需求和視覺(jué)吸引力的整體理念。這篇文章讓我?guī)闵钊胙芯恳幌?Bento UI 如何實(shí)現(xiàn)實(shí)用性與美觀的相互融合。
Bento UI設(shè)計(jì)的優(yōu)點(diǎn)多種多樣，它將實(shí)用性和美學(xué)完美融合，為用戶帶來(lái)出色的體驗(yàn)。
1. 強(qiáng)調(diào)模塊化和可重用性： Bento UI將界面元素拆分為模塊化的組件，使得設(shè)計(jì)師可以輕松地組合、調(diào)整和重用這些組件，從而提高了設(shè)計(jì)效率和一致性。
2. 簡(jiǎn)潔而美觀的外觀： Bento UI注重簡(jiǎn)約、現(xiàn)代和美學(xué)的結(jié)合，帶來(lái)干凈、清晰且視覺(jué)吸引人的界面。這有助于提升用戶的第一印象，增加用戶停留時(shí)間和參與度。
3. 良好的用戶體驗(yàn)： Bento UI注重用戶導(dǎo)向，通過(guò)清晰的布局、直觀的導(dǎo)航和有趣的交互元素，為用戶創(chuàng)造出愉悅和流暢的瀏覽體驗(yàn)。
4. 強(qiáng)化品牌形象： Bento UI可以根據(jù)品牌的風(fēng)格和價(jià)值觀進(jìn)行定制，從而增強(qiáng)品牌在用戶心中的形象和認(rèn)知。一致的設(shè)計(jì)元素有助于塑造品牌的獨(dú)特性。
5. 強(qiáng)調(diào)交互和動(dòng)畫(huà)： Bento UI強(qiáng)調(diào)微交互和動(dòng)畫(huà)效果，為用戶創(chuàng)造出更加生動(dòng)和有趣的互動(dòng)體驗(yàn)。這不僅吸引用戶的注意，還增強(qiáng)了用戶的參與感。
6. 提升移動(dòng)設(shè)備體驗(yàn)： Bento UI通常是響應(yīng)式的，可以自適應(yīng)不同的屏幕尺寸和設(shè)備類型。這為移動(dòng)用戶提供了更好的體驗(yàn)，無(wú)論是在手機(jī)、平板還是桌面電腦上。
要設(shè)計(jì)出成功的Bento UI，首先需要理解其核心原則。簡(jiǎn)約、模塊化和活力交互是Bento UI的靈魂。簡(jiǎn)約的設(shè)計(jì)風(fēng)格能夠使界面更加清晰明了，而模塊化的組件則讓設(shè)計(jì)師能夠靈活構(gòu)建頁(yè)面，快速滿足不同需求?；盍换ィ▌?dòng)畫(huà)效果和微交互，能夠增強(qiáng)用戶與界面的互動(dòng)感，提升用戶體驗(yàn)。
在Bento UI中，清晰的布局是至關(guān)重要的。界面元素應(yīng)該有明確的排列，避免過(guò)于擁擠和混亂。通過(guò)合理的分區(qū)和對(duì)齊，可以將信息有序地呈現(xiàn)給用戶，使其能夠快速獲取所需信息。此外，清晰的布局還能夠增強(qiáng)用戶的舒適感，使其更樂(lè)意與界面互動(dòng)。
Bento UI倡導(dǎo)使用鮮明的顏色和獨(dú)特的圖標(biāo)設(shè)計(jì)。色彩可以傳達(dá)情感和品牌特點(diǎn)，因此選擇適合項(xiàng)目風(fēng)格的顏色是至關(guān)重要的。同時(shí)，圖標(biāo)作為界面的視覺(jué)元素，能夠直觀地傳達(dá)信息，提高用戶的使用效率。確保顏色和圖標(biāo)的使用既美觀又有意義，能夠?yàn)橛脩魩?lái)更好的視覺(jué)體驗(yàn)。
Bento UI的動(dòng)畫(huà)效果和微交互是設(shè)計(jì)中的亮點(diǎn)之一。動(dòng)畫(huà)可以增強(qiáng)用戶與界面的互動(dòng)感，使用戶感受到界面的活力。微交互則能夠提供反饋，引導(dǎo)用戶完成操作。設(shè)計(jì)師可以巧妙地運(yùn)用過(guò)渡效果、淡入淡出和其他動(dòng)畫(huà)元素，使界面變得更加生動(dòng)有趣。
在整個(gè)設(shè)計(jì)過(guò)程中，保持一致性和用戶友好性至關(guān)重要。界面的風(fēng)格、字體和元素應(yīng)該保持統(tǒng)一，以確保用戶在瀏覽不同頁(yè)面時(shí)能夠感受到一致的視覺(jué)效果。另外，界面的導(dǎo)航和操作也應(yīng)該簡(jiǎn)單明了，讓用戶能夠輕松找到所需內(nèi)容。
一些案例：
iPhone 14 Pro介紹頁(yè)面中，您將看到以這種方式呈現(xiàn)的高級(jí)功能介紹，并通??過(guò)多種視覺(jué)處理來(lái)保持有趣。雖然有不同的視覺(jué)處理，但由于使用大小和漸變文本有效地引導(dǎo)用戶的眼睛，內(nèi)容不會(huì)相互沖突。
Bolt對(duì)每個(gè)圖塊使用了更加一致的視覺(jué)方法，以使內(nèi)容更易于瀏覽。這對(duì)于傳達(dá)功能并引導(dǎo)他們?cè)谧詈蟛榭锤鄡?nèi)容非常有用！
Linear的設(shè)計(jì)師也采用了Bento UI的設(shè)計(jì)風(fēng)格，我個(gè)人很喜歡他們這樣的設(shè)計(jì)。
Iconwerk使用Bento UI風(fēng)格來(lái)展示他們最好的圖標(biāo)設(shè)計(jì)。每個(gè)內(nèi)容框都保持得非常小，這樣當(dāng)它們?nèi)糠旁谝黄饡r(shí)，就不會(huì)感到擁擠。
Traf使用Bento UI以時(shí)尚的深色主題設(shè)計(jì)來(lái)布局他的作品集作品。
是否選擇應(yīng)用Bento UI取決于您的項(xiàng)目需求和目標(biāo)。如果您追求引人入勝的界面、活力的交互和用戶友好性，Bento UI可能是一個(gè)理想的選擇。特別是對(duì)于品牌展示、產(chǎn)品推廣和互動(dòng)性強(qiáng)的網(wǎng)頁(yè)，Bento UI能夠?yàn)槟捻?xiàng)目增添獨(dú)特的魅力和吸引力。然而，設(shè)計(jì)師應(yīng)該根據(jù)項(xiàng)目特點(diǎn)，靈活運(yùn)用Bento UI的元素，以確保最終的設(shè)計(jì)能夠滿足用戶需求并達(dá)到預(yù)期效果。
但是Bento UI并非適用于所有項(xiàng)目。它最適合于擁有簡(jiǎn)潔層次結(jié)構(gòu)的項(xiàng)目，因此，如果您的項(xiàng)目層次結(jié)構(gòu)較為復(fù)雜，Bento UI可能并不適合。不過(guò)，如果您的項(xiàng)目存在復(fù)雜層次結(jié)構(gòu)，或許是時(shí)候改變這一現(xiàn)狀了。
Bento UI的設(shè)計(jì)和感覺(jué)極具現(xiàn)代氛圍，我預(yù)測(cè)它將在未來(lái)一段時(shí)間內(nèi)持續(xù)受歡迎。隨著蘋(píng)果等專業(yè)設(shè)計(jì)團(tuán)隊(duì)的使用還有諸如Vision Pro等新技術(shù)的出現(xiàn)，它甚至可能發(fā)展成我們目前尚未能夠預(yù)見(jiàn)的新形態(tài)。
Bento UI是一種引人注目的設(shè)計(jì)風(fēng)格，簡(jiǎn)約美學(xué)、動(dòng)感交互和模塊化創(chuàng)造力為設(shè)計(jì)帶來(lái)了新的可能性。作為一種新興的設(shè)計(jì)趨勢(shì)，Bento UI正在成為越來(lái)越多設(shè)計(jì)師和品牌的選擇。
通過(guò)將Bento UI的理念融入設(shè)計(jì)中，我們能夠?yàn)橛脩魟?chuàng)造出令人難忘的體驗(yàn)，將品牌價(jià)值傳達(dá)得更加生動(dòng)而深刻，從而實(shí)現(xiàn)更好的用戶參與和品牌傳播效果。
本文由 @收手的阿祖 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash，基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(www.liangyajiaju.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。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
2022 原創(chuàng)輸出第 15 篇，我們互相努力。
作為設(shè)計(jì)師都會(huì)時(shí)刻關(guān)注設(shè)計(jì)趨勢(shì)，以 UI 設(shè)計(jì)來(lái)說(shuō)每年都會(huì)出現(xiàn)很多相關(guān)的趨勢(shì)總結(jié)，基本是結(jié)合預(yù)測(cè)和實(shí)際相結(jié)合的。趨勢(shì)可以讓我們把控設(shè)計(jì)的方向，帶給用戶更好的感官體驗(yàn)。
最近黑馬哥結(jié)合落地產(chǎn)品所呈現(xiàn)出來(lái)的設(shè)計(jì)趨勢(shì)，進(jìn)行了這方面的探索，今天以其中之一的趨勢(shì)-極光風(fēng)和大家先聊一聊。
一、極光風(fēng)趨勢(shì)的來(lái)源
二、UI 場(chǎng)景中的極光風(fēng)設(shè)計(jì)
三、實(shí)現(xiàn)極光風(fēng)設(shè)計(jì)的方法
四、極光風(fēng)案例實(shí)戰(zhàn)
五、小結(jié)
極光（Aurora），是一種絢麗多彩的等離子體（發(fā)光）現(xiàn)象，在夜間出現(xiàn)燦爛美麗的光輝。在南極被稱為南極光，在北極被稱為北極光，視為自然界中最漂亮的奇觀之一。（來(lái)源于百度百科）
這樣的自然奇觀被攝影師捕捉到靜態(tài)的影像中，設(shè)計(jì)師再結(jié)合這樣的影像作品，視覺(jué)化之后出現(xiàn)在了一些設(shè)計(jì)作品中。在 2021 年被廣泛運(yùn)用，形成一種流行的視覺(jué)風(fēng)格。在眾多的互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中，也經(jīng)常運(yùn)用這種類似極光的視覺(jué)影像風(fēng)格，稱之為 Aurora UI。
在產(chǎn)品設(shè)計(jì)底層需求獲得滿足之后，感光體驗(yàn)的提升被重視，視覺(jué)感的強(qiáng)化對(duì) UI 設(shè)計(jì)師來(lái)說(shuō)至關(guān)重要?；诓桓淖儽旧淼慕Y(jié)構(gòu)層，在背景層和裝飾性元素上面發(fā)揮，使得 Aurora UI 得到了發(fā)揮的空間。
富有創(chuàng)意的極光風(fēng)在背景層和裝飾性元素上面發(fā)揮得淋漓盡致，助推了其成為 UI 設(shè)計(jì)趨勢(shì)的關(guān)鍵，下面就讓我們一起來(lái)看看落地產(chǎn)品中的 Aurora UI。
由于在眾多落地產(chǎn)品中被廣泛運(yùn)用，形成了近些年影響 UI 設(shè)計(jì)趨勢(shì)的風(fēng)格。極光風(fēng)和彌散光在表現(xiàn)形式上類似，也有設(shè)計(jì)師將該風(fēng)格歸類為彌散光，下面就看一下具體的運(yùn)用場(chǎng)景。
2.1、強(qiáng)化導(dǎo)航欄設(shè)計(jì)的視覺(jué)感
如果想要強(qiáng)化頂部導(dǎo)航欄的視覺(jué)感，通常是利用品牌色作為背景顏色，這樣也會(huì)顯得頂部比重較大。通過(guò)白色或者淺灰色作為背景屬于比較弱化的處理方式，而極光風(fēng)的處理形式處于輕重之間的理想狀態(tài)。不僅可以豐富視覺(jué)表現(xiàn)力，也能使得整體風(fēng)格更加年輕化。
2.2、強(qiáng)化個(gè)人中心頂部視覺(jué)區(qū)域
隨著互聯(lián)網(wǎng)用戶年輕化的趨勢(shì)，在配色上面逐步趨近于年輕化，眾多產(chǎn)品在個(gè)人中心界面的設(shè)計(jì)上面亦是如此。利用極光風(fēng)效果呈現(xiàn)出的設(shè)計(jì)比較符合年輕化的趨勢(shì)，可以是同色系的飽和度變化，也可以是不同色相的相互融合。利用低飽和度高明度的配色原則，使得整體的視覺(jué)感更加輕量化，視覺(jué)效果清新自然且通透力更強(qiáng)。
也有基于品牌色結(jié)合極光風(fēng)進(jìn)行融合，相對(duì)單色來(lái)說(shuō)效果更加豐富自然，使得背景的變化更加多樣。
2.3、豐富背景設(shè)計(jì)的視覺(jué)感
除了在頂部區(qū)域進(jìn)行運(yùn)用以外，也有一些產(chǎn)品會(huì)在背景層面進(jìn)行強(qiáng)化，相較于白色或者淺灰色的背景來(lái)說(shuō)色彩感更豐富。運(yùn)用到整個(gè)界面背景層相對(duì)比較少，在局部背景層上的運(yùn)用比較多些，可以強(qiáng)化局部模塊的視覺(jué)感。
2.4、點(diǎn)綴彈窗設(shè)計(jì)局部
極光風(fēng)的設(shè)計(jì)表現(xiàn)也會(huì)出現(xiàn)在一些局部功能的細(xì)節(jié)處，比如運(yùn)用到彈窗的色彩處理中，作為背景局部或者插畫(huà)部分等的襯托。帶來(lái)的視覺(jué)感更加親和自然，也不會(huì)過(guò)度干擾其他元素的呈現(xiàn)。
2.5、強(qiáng)化卡片式設(shè)計(jì)局部
卡片式設(shè)計(jì)也是近些年運(yùn)用比較多的設(shè)計(jì)趨勢(shì)之一，基本是以白色卡片居多，具有整合信息的好處。在卡片的邊緣位置強(qiáng)化色彩，可以使得卡片色彩更加豐富，也有一些電商產(chǎn)品是起到與商品形成色彩呼應(yīng)的作用。
2.6、突出搜索設(shè)計(jì)的差異化
搜索框的設(shè)計(jì)在大部分的認(rèn)知里面都是白色或者淺灰色，也有一些是帶有邊框的形式，利用低飽和度高明度的配色原則來(lái)進(jìn)行設(shè)計(jì)，帶來(lái)的效果更加年輕化。也是一種差異化設(shè)計(jì)的嘗試，打破常規(guī)的設(shè)計(jì)認(rèn)知。也可以舉一反三，在一些按鈕或者標(biāo)簽設(shè)計(jì)中運(yùn)用。
2.7、分類標(biāo)簽的裝飾設(shè)計(jì)
這是一個(gè)裝飾性的設(shè)計(jì)嘗試，在突出模塊分類的當(dāng)前狀態(tài)時(shí)，通常都會(huì)通過(guò)裝飾元素來(lái)進(jìn)一步強(qiáng)化。可以通過(guò)字體粗細(xì)、顏色深淺、字體大小和裝飾元素來(lái)強(qiáng)化，裝飾元素除了線段和一些圖形元素以外，極光風(fēng)的背景元素也是一種不錯(cuò)的表現(xiàn)手法。
2.8、圖標(biāo)設(shè)計(jì)中的運(yùn)用
運(yùn)用到圖標(biāo)設(shè)計(jì)中通常是出現(xiàn)在質(zhì)感類圖標(biāo)，輔助強(qiáng)化圖標(biāo)的色彩感和層次感。有時(shí)候無(wú)法通過(guò)常規(guī)的漸變形式達(dá)到要求，就可以嘗試運(yùn)用極光風(fēng)的處理技巧，將顏色通過(guò)模糊和剪切蒙版的形式融入到圖標(biāo)中，可以使得圖標(biāo)色彩豐富和強(qiáng)化光影變化。
2.9、深色卡片色彩強(qiáng)化
以上案例屬于在淺色或者白色的環(huán)境中運(yùn)用，在深色主題中依然會(huì)用到極光風(fēng)進(jìn)行設(shè)計(jì)強(qiáng)化。在界面背景和卡片背景中運(yùn)用，效果也是非常不錯(cuò)的，可以給深色的卡片一些色彩感和豐富度。
2.10、作品包裝中的背景強(qiáng)化
除了在 UI 設(shè)計(jì)場(chǎng)景中運(yùn)用以外，最近發(fā)現(xiàn)在設(shè)計(jì)師作品包裝中的運(yùn)用也是非常普遍，用于背景層的渲染帶來(lái)的視覺(jué)體驗(yàn)度也是非常不錯(cuò)的。在作品包裝環(huán)節(jié)中作為背景運(yùn)用和局部裝飾，也有在封面設(shè)計(jì)中重點(diǎn)運(yùn)用，使得作品集緊貼設(shè)計(jì)趨勢(shì)，提高作品的打開(kāi)率。
2.11、其他場(chǎng)景中的應(yīng)用普及
在 UI 場(chǎng)景還有很多運(yùn)用場(chǎng)景，這里僅為拋磚引玉，無(wú)論是作為背景強(qiáng)化還是元素裝飾，都能帶給用戶更加年輕化的感官體驗(yàn)。
除了在 UI 場(chǎng)景中呈現(xiàn)以外，極光風(fēng)的設(shè)計(jì)也會(huì)出現(xiàn)在更多其它場(chǎng)景中。在 Banner 設(shè)計(jì)、海報(bào)設(shè)計(jì)、專題頁(yè)設(shè)計(jì)等視覺(jué)設(shè)計(jì)層面也是運(yùn)用廣泛，是一個(gè)影響范圍比較廣的設(shè)計(jì)趨勢(shì)之一。
通過(guò)一些線上的案例欣賞和分析，相信大家對(duì)于極光風(fēng)在 UI 場(chǎng)景中運(yùn)用都有一定的了解，在項(xiàng)目設(shè)計(jì)中也能輕松嘗試。這一類風(fēng)格從技法實(shí)現(xiàn)的角度來(lái)說(shuō)并不難，關(guān)鍵因素在于控制好配色原理，下面就為大家總結(jié)幾種實(shí)現(xiàn)的方法。
方法 01 ：利用不透明度漸變?nèi)诤?/strong>
不透明度漸變?cè)谠O(shè)計(jì)中的運(yùn)用比較普遍，利用的是不透明度從 100%-0% 之間形成漸變，讓色彩逐漸消失或者淡化。
畫(huà)一個(gè)圓形，選擇徑向漸變，漸變兩端的顏色選擇同一個(gè)色相。然后設(shè)置中間顏色不透明度為 100%，另一個(gè)顏色不透明度設(shè)置為 0%，這里顏色適合選擇低飽和度的范圍。同樣的方法反復(fù)繪制幾個(gè)不同顏色的圓形進(jìn)行組合，即可完成極光風(fēng)背景設(shè)計(jì)。
方法 02 ：利用模糊度變化融合
這個(gè)方法是結(jié)合了形狀和模糊設(shè)置（高斯模糊等），繪制幾個(gè)大小不等的圓形進(jìn)行排版組合，然后選擇所有圓形一起進(jìn)行模糊設(shè)置。形狀的繪制上面最好是有大小差異，排版錯(cuò)落有致，這樣形成的效果比較富有變化。
在顏色的選擇上面需要根據(jù)背景的強(qiáng)化程度選擇，低飽和度的顏色融合性更高，適合作為弱化性質(zhì)的背景使用。
方法 03 ：利用背景模糊融合
背景模糊在 Sketch、Figma 等設(shè)計(jì)軟件中有該功能，是一個(gè)影響設(shè)計(jì)趨勢(shì)較為常用的功能，特別是在實(shí)現(xiàn)玻璃質(zhì)感和一些質(zhì)感圖標(biāo)上面非常實(shí)用。
在背景層繪制圖形，顏色和形狀均可自由發(fā)揮，然后再繪制一個(gè)形狀作為調(diào)節(jié)層，調(diào)節(jié)層是用于控制模糊效果的。在調(diào)節(jié)層的形狀上面設(shè)置一個(gè)帶有透明度的顏色（必須要帶有透明度），然后再設(shè)置背景模糊，背景模糊數(shù)值的大小決定模糊的程度，不透明度的大小決定整體效果的亮度。
方法 04 ：利用圖片模糊融合
以上的方法都需要進(jìn)行配色處理，如果色感方面比較薄弱的設(shè)計(jì)師，也可以挑選一些不錯(cuò)的圖片來(lái)實(shí)現(xiàn)極光風(fēng)效果。
挑選一張色彩符合要求的圖片，然后在 Photoshop 等設(shè)計(jì)軟件中執(zhí)行高斯模糊，半徑值的多少?zèng)Q定了模糊之后的自然度。我們?cè)谶x擇圖片的過(guò)程中除了整張圖片進(jìn)行操作以外，也可以截取其中的一部分，也許可以帶來(lái)意想不到的效果。
除了這幾個(gè)方法以外還有更多不一樣的實(shí)現(xiàn)方法，大家可以根據(jù)自己的探索選擇最適合自己的方法。根據(jù)使用軟件的差別選擇最簡(jiǎn)單的形式，根據(jù)想要實(shí)現(xiàn)的效果選擇最靈活的方法，這樣才能便于后期的反復(fù)調(diào)整。
五、小結(jié)
研究落地產(chǎn)品的設(shè)計(jì)細(xì)節(jié)和視覺(jué)趨勢(shì)，將有助于提高我們對(duì)于當(dāng)前有效設(shè)計(jì)趨勢(shì)的把控，而不僅僅只是停留在概念化的預(yù)測(cè)階段，而是行之有效的真實(shí)案例。
極光風(fēng)是近些年運(yùn)用在落地產(chǎn)品中的 UI 設(shè)計(jì)趨勢(shì)之一，通過(guò)大量案例驗(yàn)證之后的有效方法，希望大家能夠掌握并靈活運(yùn)用到項(xiàng)目設(shè)計(jì)中。落地產(chǎn)品的 UI 設(shè)計(jì)趨勢(shì)還有很多，本次分享的僅為拋磚引玉，后續(xù)將和大家探討更多的有效設(shè)計(jì)趨勢(shì)，輔助提高我們的設(shè)計(jì)能力。
作者：黑馬青年（vx: heimaux）
本文由 @黑馬青年 原創(chuàng)發(fā)布。未經(jīng)許可，禁止轉(zhuǎn)載。
蘭亭妙微(www.liangyajiaju.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。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
UI 行業(yè)正站在創(chuàng)新與變革的前沿，極簡(jiǎn)主義與情感化設(shè)計(jì)的融合、智能交互的驅(qū)動(dòng)、響應(yīng)式設(shè)計(jì)的進(jìn)階、3D 元素與微交互的崛起以及數(shù)據(jù)可視化的深入應(yīng)用等趨勢(shì)相互交織，共同塑造著未來(lái) UI 設(shè)計(jì)的全新風(fēng)貌。對(duì)于 UI 設(shè)計(jì)師而言，緊跟這些趨勢(shì)，不斷學(xué)習(xí)和探索新技術(shù)、新方法，將用戶需求與創(chuàng)新設(shè)計(jì)理念相結(jié)合，才能在這個(gè)充滿活力與挑戰(zhàn)的領(lǐng)域中打造出引領(lǐng)潮流、滿足用戶期待并推動(dòng)數(shù)字產(chǎn)品成功的優(yōu)秀 UI 作品。
【6】Telegram更新：全面提升應(yīng)用使用性能
【7】Openvibe：一款將多個(gè)社交應(yīng)用進(jìn)行整合的開(kāi)放式社交平臺(tái)
蘭亭妙微(www.liangyajiaju.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。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
UI 設(shè)計(jì)趨勢(shì)，正逐漸在各個(gè)領(lǐng)域展現(xiàn)出強(qiáng)大的魅力和潛力。
蘭亭妙微(www.liangyajiaju.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。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
新需求為我們理解用戶需求提供了新的思路，而產(chǎn)品場(chǎng)景化思維則是將這些需求轉(zhuǎn)化為實(shí)際產(chǎn)品的重要方法。在產(chǎn)品設(shè)計(jì)、開(kāi)發(fā)和推廣過(guò)程中，我們應(yīng)該充分運(yùn)用場(chǎng)景化思維，深入分析場(chǎng)景五要素，精準(zhǔn)把握用戶需求，為用戶提供更加優(yōu)質(zhì)、個(gè)性化的產(chǎn)品和服務(wù)，從而在激烈的市場(chǎng)競(jìng)爭(zhēng)中脫穎而出。
蘭亭妙微(www.liangyajiaju.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。我們建立了一個(gè)微信群，每天分享國(guó)內(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.liangyajiaju.cn
