是这么个景儿哈，身为一名相当出色的Web前端开发者，设想一下哈，当你对用户体验设计（UED）这方面一丁点儿都不知道，然后UI在旁边就这么随意地指指点点，你说在这种情况下，这可就应了那句话：知晓三次晓得五次 —— 偏偏就是不懂事儿（四）去了！

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

闲言少叙，直接奥力给！

新拟态

一种被称作新拟态的设计风格，英文名为New ，它是由「New 」组合而成的，属于新型态的拟物化风格设计，在中文里被叫做新拟态、同化，也有设计师将其称为Soft UI（软UI），是2020年最热门的新风格，它借助灯光原理，给图形添加高光和阴影，呈现类似浮雕的视觉效果，赋予元件真实感与立体感。

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

整个屏幕的颜色给定着它的风格所示，给予用户一种开箱之后就能够使用的体验感受。经由合理性运用阴影，风格会变得更加显著突出！

这里附更多关于

设计资源：

优秀设计案例：

磨砂玻璃

采用磨砂玻璃设计，也就是 Glass 这种设计，乃是今年备受广泛喜爱的设计当中的一种，它运用极为简单的方式达成了最为酷炫的效果，玻璃所具备的效果增添了堪称完美的触碰感，而在其背后所展现呈现出来的半透明、呈现模糊状态的效果，更是愈发让人深深着迷，层次感瞬间就得以拥有了 ！ ！ ， ！ ！

覆盖层之后的那些元素，有着模糊的外观，这有助于给区域增添颜色sketch book mobile，与此同时，它还准许文本或者对象呈现在图像之上，并且能维持可读性 。

渐渐地，设计师对于用磨砂玻璃覆盖背景愈发青睐有加，并非像以往那样钟情于渐变背景，而是如今更倾向于此了。

现今当下，我们同样能够易行达成磨砂玻璃之效果，纯CSS教导你去达成磨砂玻璃背景之效果，还附带代码哟。

优秀设计案例：

舒适配色

“任何时候，过犹不及”

不得不承认，运用夸张的字体，采用夸张的颜色，呈现高亮的效果等，或许是你网站“难看”的十分重要的因素之一。

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

今年哟，网页设计呢，将会在暗黑配色跟白亮配色之外的更多中间地带那儿去展开发展行动啦，比如说健康的那种绿色呀，柔和的那种蓝色呀，暖棕色或者浅粉色呢。这些配色并不像纯黑或者纯白那般尖锐哟，而是会使得人处于平静以及放松的状态呢。

“- as it be.” -.

优秀设计案例：

3D 色彩

好象所有的一切都往着三维的趋势去发展起来了呢！不管是放演的影片，还是展示的图片，就连呈现的色彩也不例外呀......

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

我们可以参考：Apple’s Big Sur OS

有处于饱和状态的三维色彩，恰似那才被摘下来的有着新鲜之感的水果，于屏幕里朝着四处飞溅着果色 。

两种并行着的颜色，突然间交互混合在了一块儿，再加以绘制出来的深度，以及阴影，这般的 3D 色彩效果，使得网页设计更富有现实主义色彩，。

渐变色彩

渐变色彩，还是有它的地位！

有着数百种色调的每种颜色，渐变是将它们展示得极具独特性的方式，而这正是渐变始终流行的缘由。

其一，渐变存在着较之其他更多的空间感，其二，渐变的设计呈现出简洁的特性，其三，渐变具备相较于其余更多的运动感 。

的渐变标志在创造力和交互性方面树立了新的标准。

渐变颜色生成器：

优秀设计案例：

3D 交互

咱们可以利用 CSS3 新特性轻松实现这一效果。

3D 交互，一直都很火爆！它能为你的网站带来惊人的创造力！

优秀设计案例：

质感设计

！

做过管理后台的同学，对这类设计风格一定很熟悉！

它起源于的那种「卡片」设计，其材质设计是基于网格的布局，还有回应动画与过渡，以及填充，还有深度效果等 。

对呀，这同样是扁平化设计的一种顺势延展续接，它所设定的目标并非仅仅局限于单纯吸引视觉注意力，而更是着重于具备实际可用性，因此特别适合作为管理后台来运用，效果相当不错呢。

暗黑模式

（暗黑，程序猿最喜欢这个了~）

实验得出证明，在低光照的环境里会更加容易去进行查看。黑色属于一种格外强烈的颜色，能够激发人们强烈的情绪，当您有想要突出显示特定类型内容的想法时，暗模式尤为有用。

所以，暗黑设计会一直流行：

它自带一种超酷炫的能给人现代感的科技感，它能够让设备电池电量得以节省，它能够把其它要素突出显明出来，它能够在强白光情形下将视觉疲劳有所减少。

这里有一篇文章关于 《为什么要使用深色背景？》

https://.com/dark-/

扁平设计

扁平设计处处体现极简的设计思想：

让导航处于隐藏状态，缔造出对用户而言具备友好特性的界面导航空间，以富有创造性的方式去运用字体，一次使用的颜色数量最多为三种，规避掉过多的诸如颜色过渡、阴影以及纹理之类的细节 。

优秀设计案例：

手绘元素

论吸引人程度，视觉效果较文字更具吸引力，照片、插图或者草图这些元素，其对于视觉设计相当地有作用！为了能够吸引用户的注意力，于项目当中引入手绘元素，这是一个具备创新性的想法！

优秀设计案例：

微交互

交互会增强网页的体验，这毋庸置疑。

微交互则会让你的网页更具趣味和体验感！

微交互分四个部分：

激发状态；规则清晰；及时反馈；循环和模式；微动画

并非微小到不值一提的动画才叫做微动画，而是微小尺寸的动画才叫微动画，有时，尺寸小的动画能发挥大作用 。

微动画带来了更好的体验！

微动画在电商购物中的应用：

文字主导

一个大胆、独特的字体足以迅速引起用户的注意。

优秀设计案例：

数据可视

在现代平面设计里头，数据可视化跟动画元素起着关键作用，把数据以互动且吸引人的样式呈现出来可不是轻易能做到的事儿 。

人属于视觉生物，视觉传递着你所要传达的讯息。使数据鲜活逼真，乃是最为流行的设计手段。

拇指移动

请仔细瞧上面那张图sketch book mobile，显著映入眼帘的是，右边输入框所处的那个位置，放置得更为恰当合适，从而使得拇指的移动幅度得以减少！的确如此，交互表现出色，这恰恰意味着更为慵懒！

留白设计

留白设计，简约精心，可以轻松传递信息。

留白优点:

提供轻松的体验;内容更突出;即兴的可读性;传达明确的信息;

优秀设计案例：

使用视频

视觉效果总是吸引人的！！

因此，如果你正在创建新网站，强烈建议在主页上使用视频。

优秀设计案例：

不对称布局

我们过去连续不断重复着阐释那个对称所具备的那种美丽，有没有思考过哟，不对称同样是存在着它自身的那种魅力的呀。

不对称的布局，打破了传统主义，朝着成功迈进，这迈进的方向是野蛮主义，是个性，是活力，是乐趣，极具独特性，且有着强大的自信。

但是，实际上，我们也需要在不对称布局中找到一种平衡感。

行了~上述便是某些极酷的网页设计指南！涵盖了现代未来主义以及创新方式，比如渐变、极具冲击力的视觉效果与颜色、3D 效果，还有重新设计的复古趋势等诸多新风格。

较多明亮的网站、较干净的网站、视觉丰富的网站以至互动的网站是我们期望看到的，这些网站借着运用动画或者视频去强化与访问者的互动性，进而改良我们的用户体验 。

这一次，web 交互设计，咱们前端仔也能来话一话事！

我身为掘金安东尼，是那有着超高人气的，一位前端技术领域的博主，其写出的文章阅读量能够达到100w+ 。

终身写作者（INFP 写作人格）

坚持与热爱（简书打卡 1000 日）

陪你一起度过漫长技术岁月吧（以梦为马）

觉得不错，点个赞吧（您的三连，我最大的动力 ）

如有侵权请联系删除！