下一个网站设计项目的10个网站布局

选择一个用户友好的布局有助于确保您的用户想要停留在周围并查看您所提供的内容。

这就是为什么我们要引导您完成10种常见的网站布局，以用于下一个设计。我们将解释每个步骤，并举例说明满足网站需求和适当布局的方式。

继续阅读有关以下内容的更多信息：

什么是网站布局？ 下一个设计的10个网站布局 3种类型的网站及其使用的布局 什么是网站布局？

首先，了解网站布局是很重要的。

网站的布局是构建和设计网站的框架。可以将其视为网站建筑的蓝图。就像蓝图如何确定建筑物的外观（房间在哪里，墙壁在哪里等）一样，网站布局可以告诉您所有资产的位置，从照片到文本再到logo。

总体而言，良好的网站布局通常会遵循以下重要原则：保持简单，友好。

根据Hubspot进行的一项研究，有76％的消费者表示简单和易于导航是网站设计中排名*的很重要因素。这意味着选择一种布局，该布局将能够获取您需要的所有资产并以简单的方式为用户传达这些资产。

看起来像什么？我很高兴你问。

下一个设计的10个网站布局

以下是您可以用于下一个设计的10个网站布局，每种布局代表不同的设计风格和用户体验。

您将能够找到无数不同网站中正在使用的这些布局。继续阅读直到*，我们将探讨如何将网站样式与设计布局配对！

1. F形
芝加哥论坛报

F形网站布局非常普遍，它是基于UX研究咨询公司Nielsen Norman Group进行的研究而建立的，该研究进行了眼球追踪研究，发现人们通常以F模式阅读文本和资产块。

尼尔森眼研究的热图揭示了一些常见发现

上图是数千张热图记录的汇总。显然，在检查侧面信息之前，读者倾向于在两条水平线上进行扫描，从而形成F或E模式。

许多网站希望提供许多不同的选项供用户单击时使用F形图案。考虑一下Google搜索结果的布局方式，或者大多数新闻网站将如何展示其内容。

提示：在设计页面之前，请先确定内容的优先级。这意味着首先要确定要向用户介绍的最重要的元素。这将决定您如何安排信息。

2. Z形（或锯齿形）

与F形一样，Z形布局也旨在跟踪用户的观看习惯。用户从左上到右上扫描，然后从对角线到左下到右下扫描，这与您阅读书籍的方式大致相同。

此形状与F形的区别在于Z形的网站布局最适合有目标的页面，例如用于注册新闻稿或服务的登录页面。

考虑到这一点，这是一个Z形网站的示例。

从Facebooklogo到登录区域，再到着陆页复制和注册区域，整个页面的视线都呈自然的Z形。

提示：Z形网站适合复制和内容最少的页面，并且当眼睛向下移动时，图像会展示出来。将其与带有多张图片的滑块配合使用，您将能够使读者的注意力集中在页面上。

3.杂志风格
大西洋组织

杂志样式的布局常用于媒体出版物。布局基于网格，该网格向用户提供了内容负载，而不会压倒它们。

这种布局还使网站管理员可以为其文章分配易于掌握的层次结构，从而帮助用户轻松地理解阅读时哪些文章更重要或最新，以及浏览页面并浸入其他内容。

如果您的网站内容丰富（例如博客或新闻出版物），请考虑采用杂志式的布局。

提示：不要在图像上睡magazine杂志风格的布局在很大程度上取决于各种优质图像以及标题，以吸引读者的眼球。确保为您的文章的每个缩略图选择*的。

4.完整照片（或精选图片）

全图片的网站布局为用户提供了较大的特色图片，其顶部还包含少量内容。如果您有想要展示的特定产品（例如餐厅食物），那就太好了。

要拍摄精美的照片和图像，这是必须的。为了正确展示您的产品，您的图片必须具有吸引力和动态性-只有这样，您才能吸引用户的注意力并将其留在网站上。

提示：请记住，您的图片也必须与移动用户兼容。在台式机上看起来不错的东西在手机上可能看起来很残酷。

5.分屏
62管理层

此布局指的是水平或垂直分割的屏幕，或者两者都分割，就像上面一样！

这种布局通常用于网站（如电子商务商店和模特经纪公司）将其报价分为男性，女性，成人和儿童。

提示：使用分屏显示时将内容保持在*限度。由于用户的关注点应该只集中在您的已拆分信息上，因此您不想将一堆内容和无关的图像挤入他们的视野。

6.卡片
YouTube的

使用卡片（另一种网格）非常适合托管大量非层次内容的网站。

该网站布局通常用于新闻，博客，投资组合和视频网站，这些网站需要以有组织，可定制的简单方式展示大量内容。

提示：请确保提供足够的空格。不够，您的用户将不知所措，并且会错过您尝试突出显示的所有内容。

[标题：天哪。为什么？]

7.不对称
章鱼八达通

正如弗兰克·辛纳屈（Frank Sinatra）曾经说过的：“戴上帽子-角度就是态度。” 除了是个蓝眼睛的骗子，他似乎还是不对称网站布局的拥护者。

不对称非常有助于在网站布局中增加张力和动力，并且可以帮助设计人员将用户的注意力吸引到网站布局的特定部分。

这种布局通常利用对比色来突出显示内容。另一个显着特征是它可以提供给页面的深度级别。它最常用于希望与众不同的投资组合网站以及创新大胆的品牌。

提示：请确保不对称的布局不仅适合您的品牌，还适合您的内容资产。此布局最适合内容较少的网站。

8.单列
使命

单列网站就这么简单。

您的所有资产都放在您网站上的一栏中。而已。它只需要一列，所有用户需要做的就是向下滚动以查看更多内容。

它是Tumblr和Medium等极简博客平台或Instagram和Twitter等社交媒体平台的流行网站布局，其中帖子按以下一个因素自动排序：日期。

提示：在您自己的网站上使用此布局时，请考虑放置浮动导航按钮，以便您的用户可以轻松地浏览该网站，无论它们在页面上的什么位置。

9.方框（或缩略图）
SBNation

这种基于盒子的网站布局非常适合强调不同内容的博客和新闻网站。

它通常以三种不同的内容资产的形式排列在盒子中，其中一个较大的内容资产位于其他两个内容的顶部。较大的“功能”框有时带有滑块，可在不同图像之间滚动。

微软

提示：使用您的盒子将它们编织在一起即可促销产品。在上图中，Microsoft使用每个框来升级Surface。每个盒子都可以通过展示配件产品或将用户定向到他们可以了解更多有关Surface的地方来工作。

10.固定的侧边栏（或固定的导航）
2创意

固定的侧边栏网站布局具有以下确切含义：左侧或右侧的固定导航栏，使用户无论在网页上的位置如何，都可以轻松地导航该站点。这是在设计网站时牢记用户需求的一个很好的例子。

但是，这样做确实要付出代价：固定的侧边栏将占据页面的更多空间，这意味着其他资产的空间将减少。尽管如果导航栏消失，直到用户将光标移到该导航栏上，也可以在某种程度上缓解此问题。同样，在2000年代初期的iframe时代，这是一件大事。

Protip：请记住，侧边栏可以帮助导航当前页面上的资产，以及将读者带到其他地方，例如您的社交媒体供稿和About页面。

3种类型的网站及其布局

既然您已经知道可以在下一个项目中使用的一些常见网站布局，那么我们将逐步指导您进行操作。

以下是网站的三种示例类型：

SaaS 社论 个人

对于每个网站，我们还提供了五个网站及其使用的布局的示例。希望它们能帮助激发您的项目，无论其形状如何。

SaaS布局

SaaS产品的网站通常遵循一种布局：Z形。这有助于吸引用户注意页面的CTA。

对于以下内容，通常是为了注册该网站提供的服务。

Evernote（Z形）
Mailchimp（Z形）
集线器（Z形）
松弛（Z形）
Salesforce（Z形）
编辑版面

出版物倾向于倾向于读者友好的网站布局，例如杂志风格或F形。这些布局使网站所有者可以确定内容层次结构，同时让用户可以自由选择他们想要浏览的内容。

边缘（杂志风格）
有线（杂志风格）
洛杉矶时报（杂志风格）
个人网站布局

特别是在设计自己的网站时，网站布局的选择应反映您的身份，这对您和您的目标都是*的。

例如，如果您有一个博客，则可能要使用单列或框式布局，因为这些布局特别适合展示内容。如果您有要销售的产品，则可能要使用完整照片或Z形，因为它们非常适合展示产品并呼吁用户采取行动。

杰拉尔丁·德鲁特（Geraldine DeRuiter）（完整照片/特色照片）
加里·盛（完整照片/精选图片）
托尼·德奥里奥（完整照片/精选图像）
尼克·琼斯（网格）
选择适合您的布局

现在我们想知道：您喜欢的网站布局是什么？为什么？请联系我们。我们可能会在以后的网站设计文章中添加它。

文章名称：下一个网站设计项目的10个网站布局
分享URL：https://www.cdcxhl.com/news/208036.html

成都网站建设公司_创新互联，为您提供网站建设、微信公众号、网站营销、虚拟主机、App设计、小程序开发

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联