首页 生活指南 正文内容

五种拥有持久生命力的优秀网页布局,也许你的下一个

阿立指南 生活指南 2022-09-06 17:09:04 233 0

网页布局命名_网页布局的技巧_网页布局重构

当开始一个新的网页设计项目时,不知道你会不会犹豫片刻:“这个项目应该从哪里开始?”伴随着这种犹豫的是“做一些前所未有的事情。工作”的冲动。但在很多情况下,这些冲动和犹豫在需求的磨合和设计的细化中逐渐减弱。与大家相比,我们发现网页在很多情况下都是类似的,甚至可以说有些布局模式经久不衰。

这些布局模式,或者说框架,几乎是“常规”的,它们为用户所熟知,它们本身也更符合用户对内容的识别模式和使用习惯。在今天的文章中,我们来谈谈五个具有持久生命力的优秀网页布局。或许你的下一个网页设计项目可以直接从这五种布局模式开始,无需过多的犹豫和纠结。

1、顶图+简单网格

网页布局命名_网页布局的技巧_网页布局重构

无论屏幕大小,这种布局都提供了足够的内容供用户浏览和探索。虽然这种布局因屏幕和设备而异网页布局的技巧,有些设计师倾向于设计固定宽度或跨越整个页面的布局,但整体格局大同小异。

·导航栏

·顶部的大图,上面覆盖了文字标题

·2~4列,承载不同类型的信息,有的会有图标

·主要内容区

·页脚

这种布局设计干净清爽,视觉表现力足够强,常用于响应式设计,断点控制也不错。顶部面积较大的轮播,也可能有很多插件或应用帮助你实现。

网页布局命名_网页布局重构_网页布局的技巧

原则:在这种布局中,每个元素都各司其职,整个过程是合乎逻辑的。顶部的大图足以营造氛围并为用户提供特定体验。下面的下一级元素可以做很多事情。很好的支持。

相关趋势:越来越多的此类页面开始使用彩色插图图标,而扁平化设计非常适合这种布局页面。

2、单页设计,单栏布局

网页布局的技巧_网页布局重构_网页布局命名

单页设计近年来非常流行。它非常适合显示最少的内容或专注于主题。当网站的主题比较集中,内容比较固定的时候,不需要复杂的布局来呈现,单页单栏的布局就足以应付一切。

·导航

·主要内容区,主要是文字+图片

·页脚

在使用这种布局模式时,空间的控制非常重要,这将考验设计师设计留白和布局平衡的能力。元素之间密密麻麻的关系,需要设计师反复推敲。如果空间控制不合理,会给用户带来混乱感,如果太近,又会产生局促感。

原则:单页设计适合小型网站或小型项目的展示。可以用来制作简单的介绍页面,让简单的内容不那么单调,增强内容的形式感和分量感。对于内容简单的博客网站来说,单页设计也是不错的选择。

相关趋势:与单页设计结合最紧密的应该是动效设计和视差滚动。它们可以让单页设计更加生动有趣,淡化单调的设计,赋予页面更强的生命力。

3、自定义网格

网页布局的技巧_网页布局重构_网页布局命名

那些整齐分割的网页布局永远不会过时。无论是精细划分的网页区域还是大的页面块,大部分都需要一组干净整洁的网格来支撑。在此基础上,将内容分步放置在不同的区块中,精心组织展示。

在设计师的作品集页面上,您可以找到各种自定义网格布局。自定义网格展示内容的优点是可以同时呈现大量的视觉内容,看起来足够丰富而不逊色。下面这个画廊的效果看起来相当震撼。

用颜色填充网格,也可以用来承载文本内容。不同的块不必按行划分。有很多选项可供选择,但一定要控制网格大小和间距。如果细节控制不佳,可能会破坏整个设计的平衡。

原则:网格的优势在于它的组织性,它对用户来说是有规律的和可预测的。漂亮的网格系统可以让用户更快地找到他们需要的东西,并且视觉上更加协调和自然。

相关趋势:网格很容易被视为像卡片一样的元素,可以通过各种翻转和其他效果进行动画处理,以呈现更多信息和视觉层。

4、经典 F 布局

网页布局重构_网页布局的技巧_网页布局命名

研究表明,在浏览网页时,用户习惯于沿着 F 形的阅读轨迹浏览信息,即用户更喜欢从左向右阅读,然后向下移动,从左向右继续阅读。

这种F式阅读模式对应的网页布局就是F式布局。最关键的信息显示在左侧,并尽可能保持从上到下的一行。

·标题和导航

·左栏比较宽,显示主要内容

·右侧往往是侧边栏,显示相关链接等内容

·页脚

原理:人的行为很容易受到习惯的影响,研究也证实了人的思维和行为确实是有规律的。从左到右,从上到下,人们大多习惯于这种行为模式。 F风格的布局模式适用性好,易于用户理解和交互。

相关动向:F式布局有很多侧面玩法。一些设计师会将导航与它结合起来,或者在页面顶部添加一张大图。

5、最少的分层

网页布局重构_网页布局命名_网页布局的技巧

极简设计一直很流行,这并非没有道理。开放的空间让用户感觉更放松,也让展示的内容更容易集中。如果在极简页面中添加几个并列的内容层,信息可以更有层次,极简页面有细节。

这种设计并不复杂,但让页面更有趣,可以适应更多不同类型的项目。这也解释了为什么用户如此钟爱苹果官网这样的设计。

网页布局的技巧_网页布局命名_网页布局重构

原理:在极度简化的页面上添加几个简单的图层,让页面有视觉上的焦点,尤其是当设计师想要引导用户关注某个关键内容时,这种页面布局非常很容易做到这一点。

相关趋势:微妙的阴影和渐变通常用于此类页面,以增强元素之间的层次感。这些设计手法虽然曾经“过时”,但如今正在大举卷土重来,这样的设计风格就是它们的冲锋号。

结论

很多设计技巧和设计趋势经常被质疑,但如果抛开情感因素,从最基本的设计原则推导出这些趋势网页布局的技巧,就可以从根本上判断这些设计技巧是否真的有价值。 .

今天讨论的布局是经过时间改进的经典设计。选择正确的设计趋势与这些布局相结合通常可以带来良好的效果。

欢迎 发表评论:

文章目录
    搜索
    111