↓所推荐高度关注↓
做为两个杰出的 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 色彩效用，让页面结构设计更具现实主义 🤠
渐变色彩
渐变色彩，还是有它的地位！
每种色调都有数百种色调，渐变是展示它们最独特的方式，这也是渐变一直流行的原因。
第一，渐变有更多空间感；第二，渐变结构设计简洁；第三，渐变有更多运动感；Instagram 的渐变标志在创造力和交互性方面树立了新的标准。
渐变色调生成器：
Color Space[23]Gradient Hunt[24]Web Gradients[25]Gradienta[26]UI Gradients[27]CSS Gradient[28]杰出结构设计案例：
Sleepiest[29]Rested[30]Delibroom[31]3D 交互
咱们可以利用 CSS3 新特性轻松实现这一效用。
3D 交互，一直都很火爆！它能为你的网站增添惊人的创造力！
杰出结构设计案例：
Food Delivery[32]
Website 3d illustrations[33]
Landing Page Design[34]
Zenly[35]
Sapiens[36]
GetUniq[37]
质感结构设计
Material Design！
做过管理后台的同学，对这类结构设计艺术风格一定很熟悉！
它源自 Google 的「卡片」结构设计，材质结构设计基于网格的布局、回应动画与过渡、填充、深度效用等。
Material Design 也是扁平化结构设计 的延续，它的目标不只是为了吸引视觉，更多的是为了可用，所以作管理后台极佳。
暗黑模式
（暗黑，程序猿最喜欢这个了~）
实验证明，低光环境下更容易进行查看。黑色是一类特别强烈的色调，可以激发人们强烈的情绪，当您想要突出显示特定类型的内容时，暗模式特别有用。
所以，暗黑结构设计会一直流行：
它有一类酷炫的科技、现代感觉；它可以节省设备电池电量；它可以突出显式其它元素；它可以减少强白光下的视觉疲劳；扁平结构设计
扁平结构设计处处体现极简的结构设计思想：
隐藏导航；采用者友好的界面导航空间；创造性地采用字体；一次最多三种色调；避免过多的细节：色调过渡、阴霾、纹理；杰出结构设计案例：
coaxsoft[38]Sperry[39]Nike[40]Kamu[41]手绘元素
视觉效用比文字更吸引人，照片、插图或草图的这些元素对视觉结构设计非常有用！为了吸引采用者的注意力，在项目中引入手绘元素是两个创新的想法！
杰出结构设计案例：
Handwrytten[42]Metamusic[43]Equalparts[44]微交互
交互会增强页面的新体验，这毋庸置疑。
微交互则会让你的页面更具趣味和新体验感！
微交互分四个部分：
激发状态；规则清晰；及时反馈；循环和模式；微动画
微动画并不是指微不足道的动画，而是指微小的动画，有时候，小动画有大作用；
微动画增添了更好的新体验！
微动画在电商购物中的应用：
文字主导
两个大胆、独特的字体足以迅速引起采用者的注意。🤩
杰出结构设计案例：
Muteza[45]Google Pixel[46]Viesus[47]数据可视
数据可视化和动画元素在现代平面结构设计中发挥着重要作用，以互动和引人入胜的方式展示数据并不是一件容易的事。
人是视觉生物，视觉传达着你需要传达的信息。让数据栩栩如生是最流行的结构设计方式。
拇指移动
请认真看上图，显著右边输入框的地方放的位置更合适，减少了拇指的移动！没错，交互好，是意味着更懒！
留白结构设计
留白结构设计，简约精心，可以轻松传递信息。
留白优点:
提供更多轻松的新体验;内容更突出;即兴的可读性;传达明确的信息;杰出结构设计案例：
Quip[48]Apple[49]Dropbox[50]OwlLabs[51]Squarespace[52]采用视频
视觉效用总是吸引人的！！
因此，假如你正在创建新网站，强烈建议在主页上采用视频。👍🏻
杰出结构设计案例：
Sparks44[53]Answerthepublic[54]pp-performance[55]Hondersalting[56]Yinmindfulness[57]不对称布局
我们一直在强调对称的美丽，但是可曾想过，不对称也有它的魅力。
不对称布局打破了传统主义，朝着成功的野蛮主义、个性、活力和乐趣迈进，极具独特性和强大的自信。
但是，实际上，我们也需要在不对称布局中找到一类平衡感。
好啦~以上便是 2021 年一些袖珍的页面结构设计手册！包含了现代未来主义和创新方法，渐变、醒目的视觉效用和色调、3D 效用以及重新结构设计的复古态势等等新艺术风格。
我们希望看到更多明亮、干净、视觉丰富和互动的网站，这些网站采用动画或视频来增强与访问者的互动性，并改善我们的采用者新体验。
这一次，web 交互结构设计，咱们前端仔也能来话一话事！
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
参考资料
[1]Neumorphism: https://neumorphism.io/
[2]AdobeXD: https://www.adobe.com/in/products/xd.html
[3]Invision: https://www.invisionapp.com/studio
[4]Sketch: https://www.sketch.com/
[5]Tesla Smart App by Gavrisov Dmitri: https://dribbble.com/shots/10196092-Tesla-Smart-App
[6]Fitness Device App by Sergi Mi: https://dribbble.com/shots/9800109-Fitness-Device-App
[7]Spotify By Unfriend rabi: https://dribbble.com/shots/14286744-spootifyLogin
[8]Neumorphism UI: https://demo.themesberg.com/neumorphism-ui/
[9]Vuse: https://vuse-dark-preview.hexesis.com/dashboard/operational
[10]Steel UI: https://www.bootstrapdash.com/demo/steelui/template/demo/vertical-default-light/index.html
[11]Mooney Finance App Dashboard: https://dribbble.com/shots/14538026-Mooney-Finance-App-Dashboard
[12]Personal center interface: https://dribbble.com/shots/6083702-Personal-center-interface
[13]Wallet: https://dribbble.com/shots/14693117-Wallet-Hero-Header
[14]Task Manager: https://dribbble.com/shots/14735446-QERJA-Task-Manager
[15]Food mobile app: https://dribbble.com/shots/12998351-Food-Mobile-APP-Landing-UX-UI-Design
[16]Freshio: https://demo2.pavothemes.com/freshio/home-2/
[17]Deeponde: http://deeponde.com/
[18]Mysa Skincare: https://mysa-skincare.com/
[19]Swiggy: https://www.swiggy.com/
[20]46parallel Wine: https://46parallel.wine/
[21]Savage Sparkles: https://Fwww.savagesparkles.co.za/
[22]Apple’s Big Sur OS: https://www.apple.com/newsroom/2020/06/apple-introduces-macos-big-sur-with-a-beautiful-new-design/
[23]Color Space: https://mycolor.space/
[24]Gradient Hunt: https://gradienthunt.com/
[25]Web Gradients: https://webgradients.com/
[26]Gradienta: https://gradienta.io/
[27]UI Gradients: https://uigradients.com/23SweetMorning
[28]CSS Gradient: https://cssgradient.io/
[29]Sleepiest: https://www.sleepiest.com/
[30]Rested: https://rested.co/
[31]Delibroom: https://delibroom.com/
[32]Food Delivery: https://dribbble.com/shots/14707666-Delivery-Landing-page-UI-UX-Design
[33]Website 3d illustrations: https://dribbble.com/shots/14510815-Web-site-3D-illustration
[34]Landing Page Design: https://dribbble.com/shots/12031525-Landing-Page-UX-UI-Design
[35]Zenly: https://zen.ly/
[36]Sapiens: https://sapiens.ui8.net/6f3c3c2
[37]GetUniq: https://getuniq.me/en/
[38]coaxsoft: https://coaxsoft.com/
[39]Sperry: https://www.sperry.com/en/home
[40]Nike: https://www.nike.com/
[41]Kamu: https://www.kamu-breda.nl/
[42]Handwrytten: https://www.handwrytten.com/
[43]Metamusic: https://metamusic.ca/
[44]Equalparts: https://www.equalparts.studio/
[45]Muteza: https://abhishekjha.me/muteza/
[46]Google Pixel: https://store.google.com/us/product/pixel_5
[47]Viesus: https://www.viesus.com/
[48]Quip: https://www.getquip.com/
[49]Apple: https://www.apple.com/macbook-air/?ref=land-book.com
[50]Dropbox: https://www.dropbox.com
[51]OwlLabs: https://www.owllabs.com
[52]Squarespace: https://www.squarespace.com
[53]Sparks44: https://spark44.com
[54]Answerthepublic: https://answerthepublic.com
[55]pp-performance: https://www.pp-performance.de
[56]Hondersalting: https://www.hondersalting.nl
[57]Yinmindfulness: https://www.yin-mindfulness.com
转自： 掘金安东尼
https://juejin.cn/post/6979821352576352269
– EOF –
所推荐阅读 点击标题可跳转2、纯 CSS 创建五彩斑斓的智慧阴霾！
3、十几个CSS高级常见技巧汇总（虚线框、三角形、优惠券卡券、滚动条、多行溢出…）
觉得本文对你有帮助？请分享给更多人
所推荐高度关注「前端大全」，提升前端技能
点赞和在看是最大的支持❤️
