首页

2022年网页和UI设计趋势

涛涛


设计趋势可以塑造一切,从设计师的创作方式到用户界面设计,再从网站到包装设计的未来迭代方向。因此关注现在的流行趋势很重要,这样您的设计就不会很快过时。


让我们深入探讨2022年的一些顶级网页设计趋势。我们将着眼于 2021 年末开始出现的趋势,这些趋势将为来年即将流行的设计趋势奠定基础。


阅读更多以前的趋势文章:2021 年网页设计趋势


目录:

有趣、积极乐观的设计

黑白配色方案

大胆和实验性排版布局

超大鼠标指针

三维设计元素的应用

近乎野蛮

滚动文本元素

玻璃拟物风格

更多渐变

无图片主页

图层效果

分屏美学

交互式字体

巨型页脚

包容性设计

非凡的想象力

结论

有趣、积极乐观的设计

时髦的形状、颜色,甚至面孔可以带来很多的乐趣。设计师们正在使用这一网页设计趋势,应用到公司机构、电商或个人展示类网站内容,提供趣味、乐观的设计(如上面的示例),这些设计的共同点是它们为世界注入了一点额外的快乐。


没有什么比笑脸更能表达乐观了。恰当的配图是描绘这种氛围和利用这一趋势最简单方法。注意拍摄技巧和被拍对象的整体形象,寻找与内容契合角度,例如上面来自 LegalSuper 的示例。


在经历了全球肺炎大流行的几年之后,设计师们正在为设计的项目增添一些额外的乐趣和温度。这就是我们现在都需要的感觉。


趣味和乐观的情绪被注入以面孔为载体的配图上、较细的字体、有趣的搭配,以及散发出积极情绪的颜色。为了充分利用这一趋势,请考虑较细的元素并避免选择使用较粗的字体或厚重的配色。

FOFSO用鲜艳的衣服、模特紧张但带着快乐的面孔紧盯镜头来做到这一点。


黑白配色方案

黑白配色方案是今年最鲜明的设计趋势。不使用彩色,你真的必须在限制范围内思考和设计。虽然这听起来有点吓人,但它可以释放并激发你的创造力。结果绝对是惊人的。


从另外一个角度来说,黑白配色的设计几乎无处不在。这种对比鲜明审美表明有很多设计师会关注简单和直接。

使黑白配色方案既清新又现代的关键在于应用恰当的效果和表现技巧。


在上面的例子中,悬停时有一个微妙的、流动的动画以及超大的鼠标反色指针来增强交互性。


大胆和实验性排版布局

在2022年,没有错误的字体排版方式。大、黑、粗——甚至是衬线字体——无处不在。他们看起来棒极了。在使用这种网站设计趋势时,请考虑文字将如何动态响应(在手机屏幕上一切看起来都将不同)以及如何最大限度地对访问者产生影响。许多实验性字体不仅设计有天赋,还包括动画或 flex(CSS响应字体布局) 选项等元素。


从轮廓到彩色字体,再到不断变化的形状和填充,大胆和实验性字体应用在网站设计中占据主导地位。谈到今天的网络排版,真的没有规则,设计师们在打破束缚重建一切可能。


Garcia Salmeron在主页的设计上使用了多种字体效果来体现这一趋势:混合和匹配主标题中的字符、带有实验性的字体选择以及带有图像和背景的彩色填充层。


超大鼠标指针

这是一种新的设计趋势,点击上图链接,您会看到许多超大光标的应用示例,在参与设计过程中,在网站前端交互完成之前根本看不到超大指针或鼠标悬停的实际效果,这属于页面交互效果的一种。


这个用户交互界面的应用无处不在。最常见的例子和用法是 Jade Sheng 的例子,它的圆形指针在屏幕上移动,甚至可以在穿过可点击元素时改变颜色。


这种 UI 设计趋势的伟大之处在于,它为网站访问者提供了有价值的可用性信息,并帮助他们更好地参与改进设计,提升用户体验。


三维设计元素的应用

虽然在2020和2021年有很多设计师为网站进行全面的3D化设计,但新兴趋势是将扁平的元素通过3D控制与整体有美感结合起来。


具有3D风格的元素属性包括用于创建深度和维度的阴影、动画以及拉伸和变形等图层效果。

Sennep 在上面的例子中使用一个手指插图引导用户发现来做到这一点,伸出手指扶正标题。插图使用手部动作配合阴影来完成这种好玩的设计。


Skolkovo Park


是时候思考在3D三维界面中完成所有事情了。从真实的网络模型到具有深度的视频或照片插图,三维元素有助于为设计提供更好更直观的理解,例如上面的建筑渲染,或者增强视觉刺激兴趣点。


Zoox


三维设计也延伸到视觉叙事。考虑如何以突出景深和阴影的方式讲好您的故事或产品展示。例如上面的示例使用视频,是有效传达这种风格的最可靠和最真实的方式之一。


近乎野蛮

野蛮主义是最近比较瞩目的网站设计趋势,但它对于大多数项目来说过于苛刻和尖锐。于是进入这一趋势的最新迭代——“近乎野蛮” 的出现也就不足为奇了。


这些设计沿用了许多相同的鲜明效果,但边缘处理更柔软。即使有一些明显的边界和线条,元素之间也有足够的空间,而不是锐利的硬边缘。


没有太多的装饰或其他视觉效果,留下颜色和文字来真正承载这些。其结果更引人注目,不至于太苛刻把用户拒之门外,是野蛮主义和可用性的结合体。


滚动文本元素

虽然我们总是希望文本元素可读,但它们也可以是动态的。滚动文本元素——通常使用超大字体,只有几个字,在同一个位置循环出现——可以强调关键词并激发用户的兴趣。


文本滚动通常往屏幕左侧位置缓慢移动。空心描边字体是一种流行的选择,保持可读性的关键是使用简短的常用词或短语。


引导用户关键行为召唤用语和其他消息应与滚动文本分开,以确保网站访问者可以轻松阅读它们。


Peppa Sauce


滚动文本选项不仅仅是网站设计趋势或技巧,它们实际上可以帮助鼓励用户互动增加参与度。在上面来自 Mama Joyce Peppa Sauce 的示例中,超大鼠标光标内包含滚动文本,该文本显示的是更大的滚动文本。(您甚至可能想重复观看这个互动内容。)


玻璃拟物风格

玻璃拟态风格(Glassmorphism)的最初始于2020年末和 2021 年初的新拟态风格(Neumorphism),并演变进化成现在流行的玻璃拟物效果。


Glassmorphism设计外观让人联想到玻璃。有透明、折射或光泽等元素构成。

很多设计师在追波(Dirbbble) 上展示使用这种设计风格的作品,也可以在大量已发布的网站设计中找到这种设计方法的设计。


更多渐变

渐变的应用一直很广泛。在2021年之前的设计中的大部分渐变都出现在背景中。

2022年,渐变将会增加两种新的形式:

l  文本颜色渐变填充(如上面的例子)来增加影响和突出强调

l  填充矢量插图或图标以创建渐变纹理效果


无图片主页

没照片?没问题!无需图像也可设计,让我们在2022年紧跟潮流吧。


使用不同类型的UI或设计技巧,来充分美化没有图像的主页。在此处的示例中,Kirifuda 使用了漂亮的黑白配色方案,在文本元素之间增加叠印效果。超大字体和手写风格的字体有助于将它们整合在一起。(请注意将其他设计趋势与这一趋势相结合以获得出色的效果。)


没有图片的设计也是尝试其他技术的好机会,例如动画、鼠标指针悬停状态或其他交互元素。



主页上没有图像的设计通常会导致美感缺失。但这完全没问题。使用另一种设计方法来激发用户兴趣吧,例如使用有趣的大文本字体元素。


图层叠加效果

图层堆叠、元素间距和图形重叠可以在设计元素中产生景深错位效果,彼此之间建立连接。分层效果展示明显又直接,也可以简单一点。这两个选项可以一起使用或单独使用以产生整体影响。


State Creative 使用多个图层——背景、中景、前景——以视觉上有趣且有意义的方式将各种元素组合在一起。


分屏美学

分屏美学重新流行。几年前的趋势是出于可用性和响应性的原因,现在它更像是一种细分设计。

这些视觉效果可以包括水平或垂直分割的屏幕,每一侧具有相同或不同的功能或点击动作。

最好的分屏设计可以同时做两件事:

l  提供了强烈的视觉冲剂体验

l  他们使用多个入口点来深入挖掘内容


交互式字体

可变粗细的交互字体在大多数情况下,这种效果需要使用悬停状态才有效,尽管您可以尝试其他一些更复杂的效果。(带有流体字体动画也越来越受欢迎。)


在考虑交互式文本元素时,请优先考虑内容的可读性和易于理解性。文本的效果仅在其中的文字可读和可理解时才有效。(否则设计的意义就会丢失。)


当设计展示相对简单时,这种设计才最有效。这个技巧在单独使用时是最好的。


巨型页脚

谁能想到网站页脚——尤其是那些包含大量信息的页脚——会成为流行的网站设计元素?


对于包含大量信息、大量页面或多个节点入口的网站,超级页脚是 2022 年必备的设计元素之一。

世界自然基金会有一个双层页脚:

l  在粗黑条中,有三列菜单选项,便于导航,按用户可能想要在站点上执行的操作(发现、支持、联系)分组

l  黑条中还有一个完整的注册表单,用于了解订阅有关该组织的更多信息

在底部较细的白色页脚栏中是组织信息、社交媒体链接、非营利免责声明、版权声明和服务条款链接(隐私政策、披露信息和相关条款)


当存在明显具有不同目的的元素分组时,超级页脚效果很好。带有标题的列格式以及水平底部锚点帮助, Wild Souls的这个页脚看起来很棒。

巨型页脚甚至可以呈现出“近乎野蛮”的风格。诀窍是使用元素来创建独特的组织感,以便用户知道如何轻松找到他们正在寻找的信息。

包容性设计

设计师正在努力打造一个更具包容性的网络,它几乎体现在所有已发布的内容中。从图像到语言再到替代文本,没有理由不尝试让您的项目更加包容所有人。


包容性延伸到种族、性别中立、文化、可及性和能力上。共同的主题是您的网站应该以这样的方式组合在一起,以便任何想要访问内容的人都可以访问到内容,并且人们也可以在屏幕上看到他们可以与之相关的其他人。


这里的要点是,你不需要用大喊“我们具有包容性”的图像和语言。这是展示比讲述更重要,真实比蛮力更重要的设计。


非凡的想象力

真实和想象之间的界线从哪里开始?当您查看大量网站时,可能无法100%确定。没关系。


享受这种想象力带来的乐趣,融合真实和想象,创造出非凡的图像。你的想象力是这里唯一的限制。


在 K Plus Film 的示例中,人物位于屏幕周围飞舞的水果顶部。颜色和比例创造了一种引人入胜的视觉效果,这真是太棒了。

文章来源:站酷 作者:mrdoing 

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



2018年下半年的网页设计趋势

博博


人人都是产品经理 2018-06-06 16:08:27

逐渐热起来的6月,这3种设计趋势将会流行起来……

这个6月,将流行的3种设计趋势

设计趋势最有意思的地方在于,它总会有一些微妙的变化,而每一种趋势的沉寂和回归,总会伴随着不同的转变,甚至会创造出一些全新的设计模式。温度回升进入夏季,这个六月的网页设计趋势都不是全新的东西,都是熟脸,但是仔细看看,会发现在细节上又略有不同。

接下来,我们看看6月流行的这3种设计趋势:

1. 全屏大图

超大的全屏图片在网页设计中已经不算太新鲜的东西了。不过,如果你仔细查看近期的这些使用高清全屏大图的网页设计,会发现设计师们开始越来越多地将其他的元素从整个首屏设计中剥离,让位于背景的图片展示性更强,将屏幕填充得更加彻底。

全屏大图以外,不再有独立的导航区域或者其他的元素,所有的前景元素都位于图片的笼罩之下,网站的一体性更加明显。由于前景元素的缺乏,整个背景图片承担了更多的视觉展示的作用,只有最好、最引人瞩目和有趣的图片才更加契合这样的设计。

下面的三个网站设计案例均是如此,导航等功能都隐藏在大图背景当中,通过汉堡图标和其他的方式来引导用户点击或者吸引用户。所以,图片的素质必须非常的过硬才行。

这个6月,将流行的3种设计趋势这个6月,将流行的3种设计趋势这个6月,将流行的3种设计趋势

而这种设计手法所面对的问题也很具体,比如说大图背景所带来的对比度和识别度上的可用性问题,前景元素和背景图片之间在视觉上的冲突等等。

其他的设计元素,比如线条和「查看更多」和箭头等元素,能够在视觉的引导上起到一定的作用,类似这样的设计细节能够很好的缓解一些上述的问题,不过需要设计师仔细斟酌。

2. 全新分屏设计

我们曾经在设计趋势相关的文章中多次提到分屏设计,而分屏式设计也多次作为月度设计趋势出现在同系列的文章当中。

分屏设计的好处在于它本身可以很好地呈现两方面的信息,并且能够针对不同尺寸的屏幕进行响应。无论是在桌面端屏幕上还是在移动端界面上,都能一次获取两种不同的信息。用户不会错过重要的信息。

不过在的网页设计作品当中,分屏设计本身在功能和形式上并没有太大的变化,不过在处理方式和细节上和以往不尽相同。

首先,这些设计保留了分屏设计的基本思路和精神,也就是将屏幕分为两个部分来呈现信息,但是在划分区域的时候,设计师换了新的思路。Reach Digital 分屏采用的是对角线方向的不对称分屏,黄白双色对比强烈,而同样采用对角线分屏的 Cap GunCup Creative 则使用了更为简约的黑白配色风格,Weima 这个网站则采用了传统的左右分屏,但是分割的比例是按照3:1来划分的,这种分割方式更加有趣。

这个6月,将流行的3种设计趋势这个6月,将流行的3种设计趋势这个6月,将流行的3种设计趋势

分屏设计的好处在于它可以应对多种多样的设计。无论是小型网站,还是大量的内容,分屏的设计都可以让用户参与进来。分屏式设计为用户提供了两种不同的选择,不难理解,功能也很直观。

3. 低透明度色彩叠加

在图片和视频上叠加色彩也不是什么新鲜的玩法,它是非常受欢迎的设计手法和趋势。这种设计技法让设计师可以更轻松地创建层次分明的效果,可以通过色彩叠加来创建更为统一的视觉效果,控制对比度,营造氛围和情绪。

这种设计当中,透明度的控制是极为关键的一个步骤。通常,设计师不会让色彩叠加层透明度太低,这样用户就可以一目了然地看到背景的图片信息。不过,在今天的这几个案例当中,用户需要仔细分辨才能看清背景中被盖住的内容,因为色彩叠加层的透明度不高,对背景图片的遮盖力很强。对于这种设计趋势,我们可以简单分析一下:

  • 这种设计看起来是很酷的,低透明度让背景以纹理的形式呈现,更加富有深度,创造出吸引人的视觉效果。
  • 这种设计趋势不适合传递背景信息,因为低透明度确实很难让背景的细节清晰地传达出来。

那么,这种设计趋势是否值得追随呢?这个就要具体问题具体看待了。

不要使用这种趋势来呈现关键性的图片信息,如果你仅仅只是要借助图片搭配色彩叠加来强化层次感、增加信息量,那么另当别论。

在下面的每个案例当中,前景的元素都足以传递出清晰的内容和信息,彩色叠加层后的图片内容更多是装饰性的。图片虽然都提供了一些附加的信息,但是这些信息都不是关键,它们更多的是强化视觉。

这个6月,将流行的3种设计趋势这个6月,将流行的3种设计趋势这个6月,将流行的3种设计趋势

这是一个适用范围相对较窄的趋势,如果你想使用的话,同样需要控制好透明度。

结语

跟随设计趋势是一个非常有趣的事情,它可以让你的设计保持新鲜,让你的设计在激烈的竞争中脱颖而出,它同时可能还存在一些风险,需要你在使用的时候仔细衡量。


悄然流行的混合型视差网页设计趋势

博博

如果你仔细观察那些的使用了视差技术的网页,你会发现这些网站所采用的视差设计已经似是而非了。这些网页中的可动元素非常之多,但是并非动画;配色风格和视觉元素趋近于扁平风,并且借用了来自Material Design的物理隐喻,融合了许多微妙的交互细节。诸多时下流行的设计手法和新趋势开始被打碎分解揉合到一起,形成了新的混合型视差滚动网页。

了解新趋势

不能落伍!2014年网页设计趋势预测

蓝蓝设计的小编

年尾总结年初预测已经成为了多数人的习惯。2013年很多人以为世界真的会末日,我们真的看不到2014年的日出,但是事情并没有发生, 我们顺利的活到了2014年,那么今年的网页设领域又有什么新的发展呢?是延续经典还是推陈出新?通过大师的预测,我们发现了一些蛛丝马迹,那么今天蓝蓝设计就来给大家分享一下这些宝贵的信息!如果你有什么想法记得在下方的评论里告诉我们呦~

01. 先进的杂志式布局

来看看2014年网页设计趋势预测

年终特典!当下最热门的网页设计趋势总结

蓝蓝设计的小编

11

 

本文总结了最近网页设计领域比较热门的几种技术,代表了一定的趋势,设计师们要跟市场接轨,紧跟潮流的脚步,可以阅读这篇总结,肯定大有裨益。

腾讯cdc:技术的革新带动了设计行业的的迅猛发展,这使得设计师和开发者有了更广阔的的探索天地。而网页设计也越发不再那么循规蹈矩,许多团队和公司都做了很多思考和创意。所以在我们适应着现代设计潮流的同时,不妨也来看看现阶段网页设计大致的趋势和风格吧。

我不敢大言不惭的说这就是网页设计的必然趋势,这只是本人对当下网页设计做出的一些小总结。希望这样的归类总结能给你带来更多的思路和想法。

01. 响应式网页设计(Responsive Web Design)

现在越来越多用户都拥有多种终端:台式机,笔记本,平板电脑,手机,能够适应不同尺寸显示屏的网页是现在的潮流,甚至是未来很长一段时间的设计趋势。那么响应式网页设计就是来解决这个问题的。这种特别的开发方式能保证网页适应不同的分辨率,让网页要素重组,使其无论在垂直的平板电脑还是智能手机上,都能达到最好的视觉效果。

除了多终端的多样化,我们还可以看到我们的电脑屏幕,手机屏幕都在不断变大,而在对未来生活的预测、概念设计里,”屏幕”这个产物更是被运用到多种新平台上。例如微软发布的”未来生活概念视频”里,厨房、室内墙壁、办公室玻璃墙面都成为了交互平台。所以我们可以发现,响应式网页设计所具备的良好的适应性和可塑性,在未来的网页设计里将占有举足轻重的位置。

8个在网页设计中即将被淘汰的趋势

蓝蓝设计的小编

时代一直在变,一个又一个的创新让我们感到惊讶万分。网页设计的趋势如同流星,光芒耀眼,但来得快、去得也快。虽然跟风很不好,显得毫无设计主见,但很多设计潮流确实值得追随。就像当下响应式设计、扁平化设计、以及滚动视差等。

可是呢,还有很多极为”糟粕”的设计趋势,本文一一列举,请君对号入座。

相关推荐:
《年终特典!当下最热门的网页设计趋势总结》
《网页:滚动视差设计指南》

1. 除了电话线时代的老顽固,现在已经没人喜欢页面跳转了

webdesign-annoying-trends

“下一页”、”下一张”,明明一页就能展现的内容,非要跳转20多次才能看全,你把用户当傻子?操作繁琐、浪费时间、效率低下,没人喜欢页面跳转过于频繁的网页。

2. 十面埋伏的广告

webdesign-annoying-trends

确实有很多网站的维持依赖广告收入,但是广告的位置一定要合理,不要妨碍用户浏览信息,用户体验永远位于广告之上。没有用户访问量,也就没人找你打广告。

网页设计新趋势!25例出众的响应式导航设计

蓝蓝设计的小编

响应式设计是当前网页设计的趋势,针对不同的设备,提供布局解决方案。
而且很多技术狂人正在不断的进行各种实验,争取让响应式设计越来越好。

响应式设计的难点是导航菜单。可不能像缩放页面那样缩放导航菜单。在设计之前,要谋划好导航菜单在手机、平板、桌面上的布局。

更多超炫的网站:
《想让网站动感十足?试试网页设计中的韵律线条》
《想设计自己的网站?先来看这15个优秀设计师的酷站》

本文收集了25例出众的响应式设计,大家可以使用响应式在线测试工具Responsinator来看看,他们的导航菜单,是怎样设计的。

Ableton 

Music production with Live 9 and Push | Ableton

 

年终特典!当下最热门的网页设计趋势总结

蓝蓝设计的小编

11

 

本文总结了最近网页设计领域比较热门的几种技术,代表了一定的趋势,设计师们要跟市场接轨,紧跟潮流的脚步,可以阅读这篇总结,肯定大有裨益。

腾讯cdc:技术的革新带动了设计行业的的迅猛发展,这使得设计师和开发者有了更广阔的的探索天地。而网页设计也越发不再那么循规蹈矩,许多团队和公司都做了很多思考和创意。所以在我们适应着现代设计潮流的同时,不妨也来看看现阶段网页设计大致的趋势和风格吧。

我不敢大言不惭的说这就是网页设计的必然趋势,这只是本人对当下网页设计做出的一些小总结。希望这样的归类总结能给你带来更多的思路和想法。

01. 响应式网页设计(Responsive Web Design)

现在越来越多用户都拥有多种终端:台式机,笔记本,平板电脑,手机,能够适应不同尺寸显示屏的网页是现在的潮流,甚至是未来很长一段时间的设计趋势。那么响应式网页设计就是来解决这个问题的。这种特别的开发方式能保证网页适应不同的分辨率,让网页要素重组,使其无论在垂直的平板电脑还是智能手机上,都能达到最好的视觉效果。

除了多终端的多样化,我们还可以看到我们的电脑屏幕,手机屏幕都在不断变大,而在对未来生活的预测、概念设计里,”屏幕”%

八个网页设计的趋势

蓝蓝设计的小编

本文译自网站设计公司weavora.com ,介绍了在他们眼里8个Web设计趋势:单页面、用照片做背景、色块设计、超大号的图片、聚焦简洁、响应式设计、视差滚动、强调字体,每个趋势后面都附了数个案例,相信对网站设计师会有一定的参考价值。

单页面

单个长页面的设计一度不受人待见(无论是客户还是设计师),但现在整个互联网随处可见。一个合理的解释是,用户现在早已习惯于使用鼠标滚轮了,比起在多个页面间来回查看,用滚轮上下浏览要省事得多。

包括苹果在内的一些知名大公司也使用了相当长的页面来展示产品,获得了很不错的效果。

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档