作為一個優秀的 Web 前端開發者，如果不懂點用戶體驗設計（UED），任由 UI 擱那指指點點，那可真叫是：知三曉五 —— 就是不懂事（四）了！

別方，抱緊我！本篇將為大家帶來最酷的網頁設計指南！

閑言少敘，直接奧力給！

新擬態

新擬態，英文叫作：Neumorphism，是由「New Skeuomorphism」組合的新名詞，也就是新型態的擬物化風格設計，中文稱作新擬態、同化，也有設計師稱其為Soft UI（軟UI）。 Neumorphism 是 2020 年最熱門的新風格，它透過燈光的原理，替圖形加上高光和陰影，類似于浮雕的效果，賦予元件真實和立體感。

它在今年仍有望成為最好的網頁設計趨勢之一。

它的風格取決于整個屏幕的顏色，為用戶提供一種開箱即用的體驗感。合理使用陰影，風格更加明顯！

這里附更多關于 Neumorphism

設計資源：

NeumorphismAdobeXDInvisionSketch

優秀設計案例：

Tesla Smart App by Gavrisov DmitriFitness Device App by Sergi MiSpotify By Unfriend rabiNeumorphism UIVuseSteel UI磨砂玻璃

磨砂玻璃設計（Frosted Glass Effects）是今年廣受喜愛的設計之一，它用最簡單的方式實現了最酷的效果。玻璃的效果增添了完美的觸碰感，它的背后所呈現的半透明、模糊的效果則更讓人著迷！！層次感立馬就有了！！

覆蓋層后面元素的模糊外觀有助于為區域添加顏色，同時還允許文本或對象出現在圖像上，并保持可讀性。

漸漸的，設計師更青睞用磨砂玻璃覆蓋背景，而不是往常的漸變背景。

現如今，我們也可以輕松實現磨砂玻璃效果：純CSS教你實現磨砂玻璃背景效果（附代碼）。

優秀設計案例：

Mooney Finance App DashboardPersonal center interfaceWalletTask ManagerFood mobile app舒適配色

“任何時候，過猶不及”

不得不說，使用夸張的字體、顏色、高亮的效果等，可能是你的網站“難看”的重大因素之一。

用看起來更舒適的配色一直以來是網頁設計的重點！

今年，網頁設計將在暗黑配色和白亮配色之外的更多中間地帶去發展，如健康的綠色、柔和的藍色、暖棕色或淺粉色。它們不會像純黑或者純白那樣尖銳，而是會讓人平靜和放松。

“Balanced- as it should be.” -Thanos.

優秀設計案例：

Website visualFood websiteSmoothiely — Food and Beverage WebsiteOnline Book ShopFreshioDeepondeMysa SkincareSwiggy46parallel WineSavage Sparkles3D 色彩

一切似乎都在往 3D 的方向發展！電影、圖片、甚至是顏色......

這種趨勢已經流行了一段時間，3D 色彩也越來越逼真！

我們可以參考：Apple’s Big Sur OS

飽和的三維色彩，就像剛摘下來的新鮮水果，在屏幕中四處飛濺果色 ?

兩種并行的顏色突然混合在一起，加上繪制的深度和陰影，這種 3D 色彩效果，讓網頁設計更具現實主義

漸變色彩

漸變色彩，還是有它的地位！

每種顏色都有數百種色調，漸變是展示它們最獨特的方式，這也是漸變一直流行的原因。

第一，漸變有更多空間感；第二，漸變設計簡潔；第三，漸變有更多運動感；

Instagram 的漸變標志在創造力和交互性方面樹立了新的標準。

漸變顏色生成器：

Color SpaceGradient HuntWeb GradientsGradientaUI GradientsCSS Gradient

優秀設計案例：

SleepiestRestedDelibroom3D 交互

咱們可以利用 CSS3 新特性輕松實現這一效果。

3D 交互，一直都很火爆！它能為你的網站帶來驚人的創造力！

優秀設計案例：

Food DeliveryWebsite 3d illustrationsLanding Page DesignZenlySapiensGetUniq質感設計

Material Design！

做過管理后臺的同學，對這類設計風格一定很熟悉！

它源自 Google 的「卡片」設計，材質設計基于網格的布局、回應動畫與過渡、填充、深度效果等。

Material Design 也是 扁平化設計 的延續，它的目標不只是為了吸引視覺，更多的是為了可用，所以作管理后臺極佳。

暗黑模式

（暗黑，程序猿最喜歡這個了~）

實驗證明，低光環境下更容易進行查看。黑色是一種特別強烈的顏色，可以激發人們強烈的情緒，當您想要突出顯示特定類型的內容時，暗模式特別有用。

所以，暗黑設計會一直流行：

它有一種酷炫的科技、現代感覺；它可以節省設備電池電量；它可以突出顯式其它元素；它可以減少強白光下的視覺疲勞；

這里有一篇文章關于 《為什么要使用深色背景？》https://wpamelia.com/dark-background/

扁平設計

扁平設計處處體現極簡的設計思想：

隱藏導航；用戶友好的界面導航空間；創造性地使用字體；一次最多三種顏色；避免過多的細節：顏色過渡、陰影、紋理；

優秀設計案例：

coaxsoftSperryNikeKamu手繪元素

視覺效果比文字更吸引人，照片、插圖或草圖的這些元素對視覺設計非常有用！為了吸引用戶的注意力，在項目中引入手繪元素是一個創新的想法！

優秀設計案例：

HandwryttenMetamusicEqualparts微交互

交互會增強網頁的體驗，這毋庸置疑。

微交互則會讓你的網頁更具趣味和體驗感！

微交互分四個部分：

激發狀態；規則清晰；及時反饋；循環和模式；微動畫

微動畫并不是指微不足道的動畫，而是指微小的動畫，有時候，小動畫有大作用；

微動畫帶來了更好的體驗！

微動畫在電商購物中的應用：

文字主導

一個大膽、獨特的字體足以迅速引起用戶的注意。

優秀設計案例：

MutezaGoogle PixelViesus數據可視

數據可視化和動畫元素在現代平面設計中發揮著重要作用，以互動和引人入勝的方式展示數據并不是一件容易的事。

人是視覺生物，視覺傳達著你需要傳達的信息。讓數據栩栩如生是最流行的設計方式。

拇指移動

請認真看上圖，明顯右邊輸入框的地方放的位置更合適，減少了拇指的移動！沒錯，交互好，就是意味著更懶！

留白設計

留白設計，簡約精心，可以輕松傳遞信息。

留白優點:

提供輕松的體驗;內容更突出;即興的可讀性;傳達明確的信息;

優秀設計案例：

QuipAppleDropboxOwlLabsSquarespace使用視頻

視覺效果總是吸引人的！！

因此，如果你正在創建新網站，強烈建議在主頁上使用視頻。

優秀設計案例：

Sparks44Answerthepublicpp-performanceHondersaltingYinmindfulness不對稱布局

我們一直在強調對稱的美麗，但是可曾想過，不對稱也有它的魅力。

不對稱布局打破了傳統主義，朝著成功的野蠻主義、個性、活力和樂趣邁進，極具獨特性和強大的自信。

但是，實際上，我們也需要在不對稱布局中找到一種平衡感。

好啦~以上便是一些最酷的網頁設計指南！包含了現代未來主義和創新方法，漸變、醒目的視覺效果和顏色、3D 效果以及重新設計的復古趨勢等等新風格。

我們希望看到更多明亮、干凈、視覺豐富和互動的網站，這些網站使用動畫或視頻來增強與訪問者的互動性，并改善我們的用戶體驗。

這一次，web 交互設計，咱們前端仔也能來話一話事！

我是掘金安東尼： 一名人氣前端技術博主（文章 100w 閱讀量）

終身寫作者（INFP 寫作人格）

堅持與熱愛（簡書打卡 1000 日）

陪你一起度過漫長技術歲月吧（以夢為馬）

覺得不錯，點個贊吧（您的三連，我最大的動力 ）