返回  

2023年18+网页设计趋势(上篇)

2022/11/29 9:26:21 来源:深圳网站设计南隼互动

一个网站的平均使用期限一般是三年。而一些设计元素(比如颜色和字体)更新的频率往往比这要高得多。这就是为什么跟上网页设计趋势是如此重要。


对趋势保持关注,可以让你在当下即便是对你的设计进行的小调整,也可以让他不管在视觉还是在使用上都不会显得过时。

今天,我们就盘点一下全年的设计趋势,其中也包括在2023年可能以及已经变得流行的设计趋势。


1. 复杂的插图(Intricate Illustrations)

Intricate Illustrations

如果你想在你的网站设计中添加艺术感或个人风格,这可能是你需要的趋势。复杂的插图增加了网页设计的细节和真实性的层次。

这些设计可能是美丽的、迷人的以及需要投入很多精力,因为它们通常包含精细的线条,隐藏的细节,渐变或大量的场景。

我们喜欢使用这种设计趋势作为一个完整的网站视觉,但它同样可以用于单个图像,甚至是团队照片。有趣的是,风格可以有很大的不同,但有一个共同点——插图包含了高级的细节。

这种设计趋势有时候还包括颜色、纹理、现实主义元素、复杂的场景、卡通外观和风格以及极简动画。


例子:Coffee Shop Vector Illustration

Coffee Shop Vector Illustration


2. 创意滚动箭头(Creative Scroll Arrows)

Creative Scroll Arrows

滚动是一种长期存在的东西。所以为什么不让你的滚动箭头和指示更有趣和有创意呢?

这里没有明确的规则可以遵循——只要足够创意,有创意就可以了!你的滚动箭头和动画越有趣,就越有可能产生用户粘性。常见的设计元素和效果包括动画、颜色、形状和其他元素,这些元素将箭头与设计的其余部分联系起来,同时帮助引导用户。

考虑将悬停状态与箭头连接起来,这是一种更深入的粘性元素。


例子:Handdrawn Arrows Collection

Handdrawn Arrows Collection


3. Risograph风格的背景(Risograph Style Backgrounds)

Risograph Style Backgrounds

从双重曝光到其他基于平面灵感的背景,Risograph风格正在网站设计中留下印记。这些背景是由丰富和深刻的颜色和迷人的纹理共同组合而成的。

色彩是这一趋势的关键设计元素,Risograph风格的出现很可能是源于最近的一些色彩趋势。Risograph风格的调色板通常相当有限,甚至可能让人联想到双色调或包括点纹或半色调效果。

这一趋势中最有趣也最迷人的部分可能是,这些背景通常包含大量设计上的小瑕疵。这可能包括看起来像手绘的元素或线条,以及不完全完成或与背景中的其他元素相匹配的元素。


例子:Risograph Double Exposure Effect

Risograph Double Exposure Effect


4. 只有文本的英雄图(Type Only Heroes)

Type Only Heroes

当你没有发现完美的图像或视频时,使用漂亮的字体以及排版可能同样会让你抢尽风头。这一设计趋势专注于令人惊叹的排版组合,以帮助推动设计向前发展。

只有文本元素和英雄区域的一些色块,这些项目专注于让人们立即从设计中获得什么。

漂亮的字体风格和次要的字体如何组合在一起很重要,这是使这一趋势工作的关键。所有内容需要高度可读,字体需要有独特的风格,而不是过于夸张。

寻找一个充满个性的无衬线或可读性新颖的选项,并与中性的元素搭配,最具冲击力。


例子:Causten Font Family

Causten Font Family


5. 电影风格的主页(Cinema-Style Homepage)

Cinema-Style Homepage

最近比较流行的还有电影风格的主页,它的特色是使用全屏视频,几乎没有其他内容。

这种风格的设计让用户觉得他们是视频的一部分,沉浸在眼前的场景中。其他元素(从文本元素到导航)通常都被最小化,并放置在屏幕的角落里,以便给视频留出足够的空间。

这些项目的另一个共同点是:它们使用电影风格的效果,如慢动作、小插曲或其他通常感觉是视频或电影特有的效果。


6. 网格和块(Grids and Blocks)

Grids and Blocks

拥有大量内容,或者缺乏真正艺术元素的设计可以从强大的块或网格模式中受益,从而将所有内容整合在一起。

这种趋势的有趣之处在于,它可以采用许多不同的选项,从仅仅带有文本的极简样式(如上),到将视觉元素拼接在一起的更复杂的图像网格。

要充分利用这一趋势,可以考虑如何将块或网格组合在一起,并帮助组织信息。使用设计来创建额外的点击元素、入口点、或网站交互的方式。


例子:Grid Shape Masks

Grid Shape Masks


7. 亮 / 暗模式切换(Light/Dark Mode Toggle)

Light/Dark Mode Toggle

在暗模式和亮模式之间切换是一个很受欢迎的功能,但你可能不知道自己需要它。用户喜欢能够控制网站或应用程序的核心视觉基础,大多数手机都支持这一点。为你的网站添加一个切换只会增强用户体验。

记住,当涉及到明暗模式时,仅仅从黑色切换到白色或反过来是不够的。你的设计方案应该包含两种模式对应的色彩方案。


例子:Fitness Statistics Mobile App Kit

Fitness Statistics Mobile App Kit


8. 现代屏幕分割(Modern Split Screens)

Modern Split Screens

分屏设计是一个持续发展的趋势。

现代屏幕分割的优势之处在于,它们提供了更多的交互性,鼓励用户参与其中。上面的例子很好地展示了如何将这种设计美学与大量具有视频和三维元素的交互元素结合起来。

驾驭这种潮流的诀窍就是让它成为你自己的潮流。分屏可以为用户提供这样或那样的交互选择,或者只是在文本和图像元素之间提供一点视觉平衡。


例子:Split IOS UI Kit

Split IOS UI Kit


9. 屏幕外元素(Off-Screen Elements)

Off-Screen Elements

有时候,让设计变得有趣的是你可能看不到的东西。

屏幕外元素趋势就是利用了这一理念,使用移动的图像、文本或其他可以移动到屏幕外的元素。运动可以是自身发生的,也可以是悬停或滚动交互的结果。

这种趋势的伟大之处在于,它鼓励网站访问者通过不断操作来查看完整的设计,并思考他们所看到的和它意味着什么。相反,如果发生太多事情,信息就会丢失。所以这种趋势最适合简单易懂的元素。


例子:Lewis-Creative Portfolio & Agency HTML Template

Lewis-Creative Portfolio & Agency HTML Template


(待续)


总结

你是否经常对你的网站设计进行小的改动以保持新鲜感?虽然这可能是一个令人生畏的想法,但一直进行小的更改实际上应该成为你日常工作的一部分,一遍帮助保持设计的新鲜感(这也能让你不那么快就厌倦)。

时刻对当下以及可能流行的趋势保持敏感,并在日常的项目中尝试和实验,这样你就可以毫无顾虑地跟上潮流!









----图文来自:design shack 

----由深圳网站建设公司-Clh翻译编辑整理,为您提供更多有关深圳网站建设网站设计网页设计及其他互联网应用服务