9 个最佳网站布局示例以及何时使用它们

已发表: 2020-12-04

每个专业设计师都清楚网站布局在影响设计质量方面的作用。 网站的模式和结构是我们在设计过程的最早阶段首先考虑的事情。 在确定我们网站的目标及其应包含的元素后,页面布局设计有效地开始了将想法写在纸上的第一阶段。

只有在您决定了网站的结构以及如何相应地绘制您的内容之后,您才能构建低保真线框并探索最适合您想要实现的目标。

它是一个高度可视化的主页,以全屏媒体布局的形式最适合您的内容策略吗? 还是以更均匀的格式分布信息层次结构更有意义,使用分屏布局来显示具有相互重要性的多个内容部分?

通过查看我们精心挑选的九个专业设计师最常使用的网站布局设计示例,这正是我们将要探索的内容。

评估这些示例将帮助我们了解每种布局类型在构建实现​​我们设计目标的网站内容中所扮演的角色。 最终,知道何时以及如何为我们的网站利用正确的布局 - 将使我们能够构建更强大的设计策略并制作更漂亮的网站。

使用网站网格构建页面布局

目录

  • 什么是网站布局?
  • 每个网站布局必须包含的内容
  • 9 种最有效的网站布局
  • 1.单栏布局:世界名牌iPad
  • 2. 两栏布局:Earmark
  • 3. 三盒布局:KatchMe
  • 4.分屏布局:Bose
  • 5. 不对称布局:下腹部
  • 6. 固定侧边栏:Arbor 餐厅
  • 7. 全屏媒体布局:荷兰国家歌剧院和芭蕾舞团
  • 8. 网格布局:Malika Favre
  • 9. 盒子布局:多伦多证券交易所百老汇
  • 准备、设置、构建

什么是网站布局?

网站布局是定义网站结构的框架。 布局将网站的关键元素放在前面和中间,为用户提供清晰的导航路径。 网站布局是决定网站成功与否的关键因素。

网站布局的目标是提高用户参与度,使网页具有视觉吸引力,并组织网站内容,使其以清晰的顺序组合在一起

每个网站布局必须包括的内容

虽然我们当然看到了专业网页设计中有多少布局可供选择的美妙之处,但每种布局类型也必须包含一些基本组件,即使以非常规的方式包含在内。 正如我们从雅各布定律中知道的那样,网页设计中最基本的原则之一是界面布局和导航流应该具有引人入胜的独特性,同时与用户的合乎逻辑和直观的熟悉度相平衡。

本质上,我们在规划页面布局时绝不能忘记包括:

  • 网站标题,它应始终捕获最简单的导航元素,传达您网站的基本结构以及如何找到您要查找的内容
  • 页面正文,网页的核心部分,例如视觉内容、主要消息等。
  • 导航菜单,无论是侧边栏、汉堡菜单、子标题、大型菜单、滚动触发、粘性或固定菜单,还是其他形式。
  • 网站页脚,无论多短或多高,页脚通常包含社交频道链接、版权声明和隐私政策链接,以及其他可选项目,例如页眉菜单内容的副本、号召性用语,例如“订阅”、 “联系我们”,甚至是提交表格。

现在,对于我们一直在等待的网页设计灵感,我们最喜欢的一些最常用的网站布局示例。

了解如何使用 Elementor 优化您的网站布局