您在使用一个旧版本的浏览器。请 更新你的浏览器 来更好的体验本网站.

让互联网为企业赋能

将理念与创想通您一起分享

时刻与你分享互联网最前端信息

什么是网站设计布局?

发布日期:2021-09-13

什么是网站布局?

网站布局是一种定义网站结构的模式(或框架)。它具有为网站所有者和用户构建网站上存在的信息的作用。它为网页内的导航提供了清晰的路径,并将网站最重要的元素放在前面和中间。

网站布局定义了内容层次结构。内容将引导访问者浏览网站,并且必须尽可能向他们传达您的信息。 

 

image.png

简而言之,网站布局是使网站成功或失败的关键要素。

为什么要选择一种布局而不是另一种布局?

您应该仔细进行选择。这就是为什么:

  • 良好的布局让用户留在网站上,因为它使重要信息易于访问且易于查找。糟糕的布局会让用户感到沮丧,然后他们很快就会离开网站,因为他们找不到他们想要的东西。

出于这个原因,最好花尽可能长的时间来找到一个好的布局,因为用户不会给你超过几秒钟的时间。

  • 布局与用户对网站的参与度之间有着密切的关系。它决定了他们在网站页面上停留的时间、浏览的页面数量以及返回网站的频率。因此,除了克服瞬间选择的问题外,良好的布局还带来了额外的好处。吸引访客可能是一项有益的努力。

  • 在选择布局时,还可以考虑Gestalt 闭包定律。它说,即使图像形状不完整,人眼也倾向于填补视觉空白并将图像识别为一个整体。这对你有什么用?

  • 您不会关注细节,而是专注于构成网站的页面的全局视图;用户会发现自己的意义路径。

  • 您关注细节,使用一些额外的时间来成倍地增加参与度。

  • 你刻意不去注意细节,让创意不言自明;用户会发现自己的意义路径,他们会对您的网站保持强烈的记忆。


格式塔闭合定律如何运作的示例

熟悉布局设计最佳实践

要花大量时间选择布局设计,熟悉一些与网站布局相关的基本概念很重要。我们收集了大量概念,可帮助您了解大量预定义的网站布局。

视觉重量和负空间

当网站上的某些对象具有更强的视觉力时,人们会感觉到视觉重量。这种视觉力可以通过不同的技术在特定元素中产生。其中,负空间是我们在这里直接感兴趣的空间。

负空间(没有任何元素的空间)通过集中在它们身上的视觉力量将注意力吸引到超过其他元素的元素上。

通过负空间创建的视觉重量示例

黑色方块和白色方块之间的空间将眼睛引导到左侧元素。但是左边的元素被 4 个较小的白色方块压倒了。黑色方块承载着更强的视觉冲击力。

平衡的网站布局

在平衡的网页设计中,构成布局的元素相互支持,以便用户看到同等重要的文本内容。此外,这些元素在一个布局中很容易扫描,可以有效地呈现它们。设计给人一种稳重的感觉,从审美的角度来看,感觉真的很令人愉悦。

最流行的平衡设计之一是对称平衡,类似于镜像,中心两侧的视觉元素看起来相同。在观察某些建筑物、花园甚至蝴蝶的翅膀时,您可能也有这种感觉。

针对特定受众或功能的部分

可以更改的元素排列意味着用户可以轻松切换到其他网站部分。为了帮助您弄清楚这是如何实现的,我们建议您考虑针对男性和女性的时尚网站。

该布局支持网站内的 2 个不同部分,一个专用于男士服装,另一个专用于女士服装。布局拆分提供功能性内容,对 2 个不同的目标受众非常有用。

走出标准布局

有些布局遵循传统路径,旨在最大限度地提供功能,而其他布局则使用大胆的设计和结构,目的是对用户产生影响。打破常规意味着网页中元素的意外排列,它引发的体验在标准网站的海洋中脱颖而出,用户不禁记住您的网站。

image.png


请记住,用户体验胜过设计。始终为最终用户着想。在发布任何东西之前进行测试。

 

为引人注目的刺激布局创造视觉张力

在网页设计中,视觉张力将用户的注意力集中在网站的关键点上。视觉张力通过空间、颜色或亮度的对比产生,如果交织在元素的完美整体平衡中,它很容易被注意到。

它的作用是在视觉上刺激用户摆脱网络冲浪的常规,以全新的方式处理网站上的信息。

image.png


使用焦点来引起对某些元素的注意

号召性用语按钮可以成为焦点。图像可以是焦点。标题也可以是焦点。这完全取决于它们如何融入网站布局,因此它们成为网站上最大的兴趣点,吸引用户的注意力。

image.png

由于焦点的存在,您的用户将进行一半的转化(无论您的特定网站的“转化”是什么)——用户会将注意力集中在这些焦点上,并且更倾向于采取您希望他们采取的行动。

设计实现网站目标的布局

最佳做法是,在开始设计布局/浏览布局模板之前,您应该定义网站目标是什么。他们可能是为了销售产品、聚集流量,或者只是用一些艺术品来吸引用户。应根据网站目标选择网站布局。它将触发导致完成这些目标的某些用户行为。

image.png


讲故事的布局

设计布局/搜索布局,使其融入您必须传输的消息。部分区域应该聚集在一起来讲述一个完整的故事。此链中的每个元素都是您故事中的另一章。


image.png

布局由功能部分组成,充分说明了应用程序的价值

已证明成功的最佳网站布局

您将在下面找到世界各地的设计师用来制作网站的最流行和最有效的网站布局。

1.之字形布局

研究揭示了用户如何使用扫描网页内容:眼睛沿着 Z 字母方向沿着页面移动。

  • 首先,眼睛从左到右

  • 接下来,眼睛向下,向左

  • 最后,他们的眼睛再次向右移动

由于它与一些常见的网络冲浪行为有着错综复杂的联系,锯齿形布局适用于不同活动领域的各种网站。


image.png

2. F 布局

F 形布局遵循另一种广为人知的扫描行为,其中眼睛以 F 字母模式在页面上移动。
由于其与广为人知的用户行为的联系,这种布局适用于范围广泛的网站,从电子商务网站到投资组合网站。
image.png

3. 全屏照片

在这种情况下,布局意味着在全屏照片/图像上展开内容。因此,文本部分或菜单部分是为了支持“活的”图像。适用于希望立即将网站主题定位在访问者脑海中的网站。 

image.png

4. 网格布局

信息被组织成网格,便于浏览。人们可以停下来寻找感兴趣的特定主题。网格允许将文本、照片、视频平均分配到网页上,让用户决定每个单元的重要性。适用于报纸、视频博客等。

image.png




5. 一栏布局

这种布局将信息组织到一列中,它是最简单的布局之一。内容(文本、照片、视频)易于理解,扫描的需要无非是将感兴趣的关键点识别到该单列中。非常适合用于研究论文和长篇文章。

此外,单列布局非常适合移动体验。

image.png


6. 特色图片布局

当今最常见的布局之一意味着设置代表网站中每个页面的特色图像。该图像用于将注意力和兴趣集中在表达页面主题的焦点上。此外,图像是从这个焦点发出的意义之源。适合小众博客、自由职业者和专业人士使用。 

image.png

设计师作品集网站演示 – 使用Mesmerize 主题创建

7. 不对称布局

不对称的布局与对称规则相得益彰,以至于弯曲它们以支持独特的承诺:我们必须提供的不仅仅是完美。诀窍是创造活跃的空间,并使空白空间更加生动。

非常适合用于此类网页设计网站、不寻常的投资组合演示和创新的商业网站。

image.png

资料来源:Kiwi.com

8. 分屏布局

这种布局既指垂直分屏,也指水平分屏。通常,垂直分屏在向 2 个或更多不同区域传达双重重要性方面起着重要作用。这里的目的是支持快速选择,以便立即更好地与网站互动。

下面的示例在某种程度上有所不同,因为它在同一页面上同时包含垂直拆分和水平拆分。只看垂直分割,它不会邀请做出选择,而是通过另一种体验来增强一种体验。

image.png



来源:RedLight.dev

9. 标题和缩略图库布局

在一个越来越注重视觉的网络世界中,这种布局可能会产生奇迹。它由导致这些主题的完整描述的图像缩影和作为整个图像相册指南的标题(+ 简短介绍)组成。

适用于旅游网站、博客和杂志。


image.png


10.模块化布局(也称为卡片布局/块布局)

这种布局与 Google 推出的设计协议 Material Design 密切相关。由于其灵活性和响应能力,它正变得越来越流行。模块化布局意味着每个内容单元(文本、图像、视频、按钮)都包含在卡片或模块中,具有自己的专用空间。

将模块化布局应用于网站时,效果是网页中项目的流线型外观和高度连贯的组合。

适用于商业网站,清晰连贯的演示是专业在线形象的基础。

image.png


11.杂志布局

杂志版面,正如现在所遇到的,往往是其他一些版面的混搭,所有这些都为新闻增添了光彩。
下面的示例结合了标题 + 缩略图画廊布局和特色图像布局,加上纯 F 形布局,以保持杂志的魅力达到标准。
image.png

这种组合适用于但不限于在线杂志。

12. 单页布局

虽然在常见的网站布局中没有那么广泛地传播,但我们想在这里列出这种布局,因为它具有相当有趣的特性。它将多个操作合并到一个页面中(例如 Gmail)。内容使用 JavaScript 动态加载。它的构建是为了为每个视点生成唯一的 URL。

13. 径向对称布局

另一种不太常见的布局类型是径向对称。有一个中心点,以圆形形式辐射相关项目:

image.png