「本文已参与好文召集令活动,点击检查:后端、大前端双赛道投稿,2万元奖池等你挑战!」

作为一个优异的 Web 前端开发者,假如不明白点用户领会规划(UED),任由 UI 搁那指指点点,那可真叫是:知三晓五 —— 便是不明白事(四)了!

别方,抱紧我!本篇将为我们带来 2021 最酷的网页规划攻略!

闲言少叙,直接奥力给!

宁不会真以为咱前端仔只会切图吧?!喏,给你 2021 最酷网页设计指南!

  • 译自:medium-coolest-25-web-design-trends-in-2021
  • 作者:ThemeSelectio

新拟态

新拟态,英文叫作:Neumorphism,是由「New Skeuomorphism」组合的新名词,也便是新型态的拟物化风格规划,中文称作新拟态、同化,也有规划师称其为Soft UI(软UI)。 Neumorphism 是 2020 年最抢手的新风格,它透过灯火的原理,替图形加上高光和阴影,类似于浮雕的效果,赋予元件实在和立体感。

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

宁不会真以为咱前端仔只会切图吧?!喏,给你 2021 最酷网页设计指南!

它的风格取决于整个屏幕的颜色,为用户供应一种开箱即用的领会感。合理运用阴影,风格更加明显!

宁不会真以为咱前端仔只会切图吧?!喏,给你 2021 最酷网页设计指南!

这里附更多关于 Neumorphism

规划资源:

  • Neumorphism:这也太治好了吧!!!墙裂举荐!!!
  • AdobeXD:adobe!!!yyds!!!
  • Invision
  • Sketch

优异规划案例:

  • Tesla Smart App by Gavrisov Dmitri
  • Fitness Device App by Sergi Mi
  • Spotify By Unfriend rabi
  • Neumorphism UI
  • Vuse
  • Steel UI

磨砂玻璃

磨砂玻璃规划(Frosted Glass Effects)是 2021 广受喜欢的规划之一,它用最简略的办法完结了最酷的效果。玻璃的效果增添了完美的触碰感,它的背面所呈现的半透明、迷糊的效果则更让人入神!!层次感立马就有了!!

宁不会真以为咱前端仔只会切图吧?!喏,给你 2021 最酷网页设计指南!

掩盖层后面元素的迷糊外观有助于为区域增加颜色,一起还容许文本或方针出现在图画上,并坚持可读性。

逐步的,规划师更喜欢用磨砂玻璃掩盖布景,而不是平常的骤变布景。

现如今,我们也可以轻松完结磨砂玻璃效果:纯CSS教你完结磨砂玻璃布景效果(附代码)。

优异规划案例:

  • Mooney Finance App Dashboard
  • Personal center interface
  • Wallet
  • Task Manager
  • Food mobile app

舒适配色

宁不会真以为咱前端仔只会切图吧?!喏,给你 2021 最酷网页设计指南!

“任何时候,过为己甚”

不得不说,运用夸大的字体、颜色、高亮的效果等,可能是你的网站“丑恶”的严重要素之一。

用看起来更舒适的配色一贯以来是网页规划的要点!

宁不会真以为咱前端仔只会切图吧?!喏,给你 2021 最酷网页设计指南!

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

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

优异规划案例:

  • Website visual
  • Food website
  • Smoothiely — Food and Beverage Website
  • Online Book Shop
  • Freshio
  • Deeponde:极度舒适的配色和交互!
  • Mysa Skincare
  • Swiggy
  • 46parallel Wine
  • Savage Sparkles

3D 颜色

全部如同都在往 3D 的方向开展!电影、图片、甚至是颜色……

这种趋势已经盛行了一段时间,3D 颜色也越来越传神!

我们可以参看:Apple’s Big Sur OS

宁不会真以为咱前端仔只会切图吧?!喏,给你 2021 最酷网页设计指南!

饱满的三维颜色,就像刚摘下来的新鲜生果,在屏幕中四处飞溅果色 ✨

两种并行的颜色忽然混合在一起,加上制作的深度和阴影,这种 3D 颜色效果,让网页规划更具现实主义

宁不会真以为咱前端仔只会切图吧?!喏,给你 2021 最酷网页设计指南!

骤变颜色

骤变颜色,还是有它的方位!

宁不会真以为咱前端仔只会切图吧?!喏,给你 2021 最酷网页设计指南!

每种颜色都有数百种色调,骤变是展现它们最共同的办法,这也是骤变一贯盛行的原因。

  1. 榜首,骤变有更多空间感;
  2. 第二,骤变规划简练;
  3. 第三,骤变有更多运动感;

宁不会真以为咱前端仔只会切图吧?!喏,给你 2021 最酷网页设计指南!

Instagram 的骤变标志在创造力和交互性方面树立了新的规范。

骤变颜色生成器:

  • Color Space
  • Gradient Hunt
  • Web Gradients
  • Gradienta
  • UI Gradients
  • CSS Gradient

优异规划案例:

  • Sleepiest
  • Rested
  • Delibroom

3D 交互

1_USJVxt9i0TJajJKZvtRz9w.gif

我们可以利用 CSS3 新特性轻松完结这一效果。

3D 交互,一贯都很火爆!它能为你的网站带来惊人的创造力!

宁不会真以为咱前端仔只会切图吧?!喏,给你 2021 最酷网页设计指南!

优异规划案例:

  • Food Delivery
  • Website 3d illustrations
  • Landing Page Design
  • Zenly
  • Sapiens
  • GetUniq

质感规划

Material Design!

宁不会真以为咱前端仔只会切图吧?!喏,给你 2021 最酷网页设计指南!

做过办理后台的同学,对这类规划风格一定很熟悉!

它源自 Google 的「卡片」规划,原料规划基于网格的布局、回应动画与过渡、填充、深度效果等。

Material Design 也是 扁平化规划 的接连,它的方针不只是为了吸引视觉,更多的是为了可用,所以作办理后台极佳。

暗黑方式

宁不会真以为咱前端仔只会切图吧?!喏,给你 2021 最酷网页设计指南!

(暗黑,程序猿最喜欢这个了~)

试验证明,低光环境下更简略进行检查。黑色是一种特别激烈的颜色,可以激起人们激烈的心情,当您想要出色显现特定类型的内容时,暗方式特别有用。

所以,暗黑规划会一贯盛行:

  1. 它有一种酷炫的科技、现代感觉;
  2. 它可以节省设备电池电量;
  3. 它可以出色显式其它元素;
  4. 它可以削减强白光下的视觉疲惫;

这里有一篇文章关于 《为什么要运用深色布景?》

扁平规划

宁不会真以为咱前端仔只会切图吧?!喏,给你 2021 最酷网页设计指南!

扁平规划处处表现极简的规划思想:

  1. 躲藏导航;
  2. 用户友爱的界面
  3. 导航空间;
  4. 创造性地运用字体;
  5. 一次最多三种颜色;
  6. 避免过多的细节:颜色过渡、阴影、纹路;

优异规划案例:

  • coaxsoft
  • Sperry
  • Nike
  • Kamu

手绘元素

宁不会真以为咱前端仔只会切图吧?!喏,给你 2021 最酷网页设计指南!

视觉效果比文字更吸引人,相片、插图或草图的这些元素对视觉规划非常有用!为了吸引用户的注意力,在项目中引进手绘元素是一个立异的主意!

优异规划案例:

  • Handwrytten
  • Metamusic
  • Equalparts

微交互

交互会增强网页的领会,这毋庸置疑。

微交互则会让你的网页更具兴趣和领会感!

宁不会真以为咱前端仔只会切图吧?!喏,给你 2021 最酷网页设计指南!

微交互分四个部分:

  1. 激起情况;
  2. 规则明晰;
  3. 及时反馈;
  4. 循环和方式;

微动画

微动画并不是指微乎其微的动画,而是指细小的动画,有时候,小动画有大效果;

微动画带来了更好的领会!

宁不会真以为咱前端仔只会切图吧?!喏,给你 2021 最酷网页设计指南!

微动画在电商购物中的运用:

宁不会真以为咱前端仔只会切图吧?!喏,给你 2021 最酷网页设计指南!

文字主导

一个斗胆、共同的字体足以迅速引起用户的注意。

宁不会真以为咱前端仔只会切图吧?!喏,给你 2021 最酷网页设计指南!

优异规划案例:

  • Muteza
  • Google Pixel
  • Viesus

数据可视

1_WzY8EE0ryNwl7mBwNxjBMw.gif

数据可视化和动画元素在现代平面规划中发挥着重要效果,以互动和引人入胜的办法展现数据并不是一件简略的事。

人是视觉生物,视觉传达着你需要传达的信息。让数据栩栩如生是最盛行的规划办法。

拇指移动

宁不会真以为咱前端仔只会切图吧?!喏,给你 2021 最酷网页设计指南!

请仔细看上图,明显右边输入框的当地放的方位更合适,削减了拇指的移动!没错,交互好,便是意味着更懒!

留白规划

留白规划,精约精心,可以轻松传递信息。

宁不会真以为咱前端仔只会切图吧?!喏,给你 2021 最酷网页设计指南!

留白优点:

  1. 供应轻松的领会;
  2. 内容更出色;
  3. 即兴的可读性;
  4. 传达清晰的信息;

优异规划案例:

  • Quip
  • Apple
  • Dropbox
  • OwlLabs
  • Squarespace

运用视频

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

因而,假如你正在创建新网站,激烈建议在主页上运用视频。

宁不会真以为咱前端仔只会切图吧?!喏,给你 2021 最酷网页设计指南!

优异规划案例:

  • Sparks44
  • Answerthepublic
  • pp-performance
  • Hondersalting
  • Yinmindfulness

不对称布局

我们一贯在着重对称的美丽,可是可曾想过,不对称也有它的魅力。

不对称布局打破了传统主义,朝着成功的粗野主义、特性、生机和乐趣跨进,极具共同性和健壮的自傲。

宁不会真以为咱前端仔只会切图吧?!喏,给你 2021 最酷网页设计指南!

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


好啦~以上便是 2021 年一些最酷的网页规划攻略!包含了现代未来主义和立异办法,骤变、夺目的视觉效果和颜色、3D 效果以及重新规划的复古趋势等等新风格。

我们希望看到更多亮堂、洁净、视觉丰厚和互动的网站,这些网站运用动画或视频来增强与访问者的互动性,并改善我们的用户领会。

这一次,web 交互规划,我们前端仔也能来话一话事!

都看到这儿了,点个赞吧~

安东尼,输出露出输入,技能洞见生活,再见~