给你 2021 最酷网页设计指南！

关注公众号前端热榜，回复“加群”

加入我们一起学习，天天进步

作为一个优秀的 Web 前端开发者，如果不懂点用户体验设计（UED），任由 UI 搁那指指点点，那可真叫是：知三晓五 —— 就是不懂事（四）了！

别方，抱紧我！本篇将为大家带来 2021 最酷的网页设计指南！

闲言少叙，直接奥力给！

新拟态

新拟态，英文叫作：Neumorphism，是由「New Skeuomorphism」组合的新名词，也就是新型态的拟物化风格设计，中文称作新拟态、同化，也有设计师称其为Soft UI（软UI）。Neumorphism 是 2020 年最热门的新风格，它透过灯光的原理，替图形加上高光和阴影，类似于浮雕的效果，赋予元件真实和立体感。

它在 2021 年仍有望成为最好的网页设计趋势之一。

它的风格取决于整个屏幕的颜色，为用户提供一种开箱即用的体验感。合理使用阴影，风格更加明显！

这里附更多关于 Neumorphism

设计资源：

Neumorphism^[1]：这也太治愈了吧！！！墙裂推荐！！！
AdobeXD^[2]：adobe！！！yyds！！！
Invision^[3]
Sketch^[4]

优秀设计案例：

Tesla Smart App by Gavrisov Dmitri^[5]
Fitness Device App by Sergi Mi^[6]
Spotify By Unfriend rabi^[7]
Neumorphism UI^[8]
Vuse^[9]
Steel UI^[10]

磨砂玻璃

磨砂玻璃设计（Frosted Glass Effects）是 2021 广受喜爱的设计之一，它用最简单的方式实现了最酷的效果。玻璃的效果增添了完美的触碰感，它的背后所呈现的半透明、模糊的效果则更让人着迷！！层次感立马就有了！！

覆盖层后面元素的模糊外观有助于为区域添加颜色，同时还允许文本或对象出现在图像上，并保持可读性。

渐渐的，设计师更青睐用磨砂玻璃覆盖背景，而不是往常的渐变背景。

优秀设计案例：

Mooney Finance App Dashboard^[11]
Personal center interface^[12]
Wallet^[13]
Task Manager^[14]
Food mobile app^[15]

舒适配色

“任何时候，过犹不及”

不得不说，使用夸张的字体、颜色、高亮的效果等，可能是你的网站“难看”的重大因素之一。

用看起来更舒适的配色一直以来是网页设计的重点！

2021，网页设计将在暗黑配色和白亮配色之外的更多中间地带去发展，如健康的绿色、柔和的蓝色、暖棕色或浅粉色。它们不会像纯黑或者纯白那样尖锐，而是会让人平静和放松。

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

优秀设计案例：

Website visual
Food website
Smoothiely — Food and Beverage Website
Online Book Shop
Freshio^[16]
Deeponde^[17]：极度舒适的配色和交互！
Mysa Skincare^[18]
Swiggy^[19]
46parallel Wine^[20]
Savage Sparkles^[21]

3D 色彩

一切似乎都在往 3D 的方向发展！电影、图片、甚至是颜色......

这种趋势已经流行了一段时间，3D 色彩也越来越逼真！

我们可以参考：Apple’s Big Sur OS^[22]

饱和的三维色彩，就像刚摘下来的新鲜水果，在屏幕中四处飞溅果色 ✨

两种并行的颜色突然混合在一起，加上绘制的深度和阴影，这种 3D 色彩效果，让网页设计更具现实主义