出色的网站布局是一个难题:通常最好在完全不被注意的情况下使用。也就是说,如果设计师正确完成了自己的工作,则用户将无需查找产品就能找到产品规格,购物车,促销优惠以及最重要的是“购买”按钮。毕竟,花更多的时间弄清楚如何使用网站意味着对实际内容的关注减少。

设计师在办公桌和笔记本电脑上工作,创建网站布局
布局设计为任何出色的网站奠定了基础。由OrangeCrush绘制

网站布局设计是要在美观与实用性之间取得平衡。该站点绝对应该看起来不错,但是更重要的是,它应该尽可能高效地向用户提供他们所追求的目标。用户对困难的网页几乎没有耐心,这就是为什么最高的网页 跳出率在前十秒内发生 网站访问。没错,良好的网站布局不会总是让访客留下(特别是如果内容令人沮丧),但是您当然不希望它成为访客离开的原因。

为确保您获得一个不会吸引访问者反弹的网站,我们整理了本指南,介绍了网站布局设计的基本原理。我们将介绍优质设计应完成的基础知识,有效的网站布局的关键技术以及最常见的网站布局类型。

网站布局的目标

听起来很简单,网站布局的唯一目标是支持网站的目标,无论是转化,品牌知名度,娱乐还是其他目标。但是网站的目标是通过内容表达的,而布局设计则描述了如何有效地传递内容。话虽如此,以下是网站布局可以提供的一些常见功能:

  • 信息展示:良好的网站布局可以组织信息,使信息以明显的顺序组合在一起,易于扫描,可以权衡最重要的元素,并可以使用户的工具直观地查找和使用。
在网站上显示图形和数据的动画插图
网站布局应针对既定目标。由Adam Muflihun设计。
  • 用户参与度: 良好的网站布局可以使页面更具视觉吸引力,引导用户的眼睛指向感兴趣的点,并鼓励他们继续浏览该站点。
  • 品牌: 良好的网站布局在品牌塑造中也起着一定的作用,它以与公司品牌一致的方式使用间距,对齐方式和缩放比例。

这些高水平的目标是驱动网站布局设计的因素,但是在我们研究特定的网站布局之前,让我们详细讨论如何实现这些目标。

网站布局设计过程

绘制网站布局的过程应在创建网站的早期阶段进行,即在制定网站策略之后但进入图形程序创建界面之前的某个时间。

网站布局通过线框可视化,线框是显示内容如何组合在一起的基本骨架图。将线框图与Web设计区分开来很重要,这是创建Web前端图形和其他视觉效果的整个过程。网站布局设计是Web设计的重要组成部分,它从线框图开始。理想情况下,视觉设计应遵循线框布局,以使图形元素具有战略性的定位,而不是一味的审美偏好。

搜索页面的线框原型的屏幕截图
用于99designs的“设计师搜索”页面的准系统线框

通过这种方式,以下是创建网站布局的步骤:

  1. 识别所有内容区域。 线框通常用简单的正方形和矩形表示内容,无论是图像还是文本块。请务必提前知道您拥有多少内容,以及每件作品的近似大小(或字数),以便您可以准确地将元素组合在一起。
  2. 创建一系列线框和原型。 布局可以像纸笔画一样简单,但是也有很多程序(例如 异想天开)致力于简化流程。由于线框并不是要成为精美的艺术品,因此您一次可以生产出几种。即使您爱上了第一个想法,也应该设计更多的线框以扩展您的想象力并为自己提供选择。没有花哨的图形来吸引您的注意力,您可以自由地专注于用户的体验,并探索哪种安排对他们而言是最直观的。请务必考虑所有屏幕尺寸-建议您从移动设备的布局开始,然后从那里开始构建。

>>这里是用户体验设计原则的指南

  1. 测试,收集反馈并进行迭代。 一旦有了一些选择,请确保您收集了同事的反馈。类似的应用 视力菲格玛 允许您创建交互式原型,这样就可以轻松测试按钮和导航,而无需构建实际的网页。让试用用户在浏览原型时对其屏幕进行记录可以揭示UX的绊脚石。备忘后,请回到第二步并进行迭代,直到完美为止。

尽管这些是创建网站布局的基本步骤,但是当您刚入门时,可能很难知道是什么使布局有效或无效。在下一节中,我们将介绍可用于指导设计决策的特定技术。

有效的网站布局的关键技术

网站布局设计已经有数十年的历史了,这意味着多年来已经建立了许多设计惯例和原则来指导设计师的工艺。以下是这些技术中最有用的一些:

视觉层次

视觉层次结构是一种样式化六个设计元素以增强对比度的方式,以强调所选内容的优先级。为此,布局的最重要部分是用户需要立即识别的部分,具体取决于页面的目标。这些通常包括标题,价值主张,号召性用语和导航之类的用户工具。

用于医疗产品的黑白网页设计
该网站布局使用简单的黑白方案,比例和字体选择来创建视觉层次结构,以吸引人们注意页面上的不同重要地标。由Shivom设计

视觉层次可以多种方式表现出来,例如字体选择(大小,粗细甚至不同的字体配对),在页面上对齐重要元素或使用互补色使元素脱颖而出。

查看本指南,了解视觉层次结构的六项原则>>

阅读方式

阅读模式描述了用户扫描页面的最常见方式,并以有向线(矢量,表示那里的数学家)进行了描述。以来 研究显示 79%的网站访问者仅浏览过该页面,因此必须使扫描尽可能容易。考虑到特定的阅读模式来设计布局是一种有效的方法。

指甲油产品的粉红色网站设计
该网站布局将元素排列成微妙的Z字形,以支持Z模式读取。由JPSDesign设计

将阅读模式整合到您的布局中,需要策略性地将元素沿观看者的视线放置。最常见的模式是Z模式(锯齿形矢量;对于图像繁重的布局有用)和F模式(逐行矢量;对文本繁重的布局有用)。

查阅本指南,了解如何在网页设计中使用阅读模式>>

高于或低于折痕

在网页设计中,“折痕”是由于屏幕尺寸的限制而截断网页的行。页面加载时可见的内容被称为“折叠后”,而要求用户向下滚动以显示页面的内容被称为“折叠后”。

海滨房地产网站设计
该网站布局会在屏幕底部(“折页”)上截断图形,以吸引访问者向下滚动。迈克·巴恩斯(Mike Barnes)设计

在网站布局设计中,最重要和/或最具说服力的内容(例如价值主张和CTA)应安全地放置在折叠上方,以便用户不必去寻找它。这个空间是 大多数屏幕尺寸估计为1000 x 600像素。话虽如此,设计人员还可以使用折叠来切断有趣的图形并进行复制,以鼓励用户向下滚动,从而继续与网页互动。

网格系统

网格系统是基于刚性测量和准则的布局。网格由列(用于内容放置的指定空间)和装订线(列之间的空白空间)组成。

尽管网格系统起源于印刷杂志和报纸,但它们在Web设计中无处不在,因为它们面对大量内容时所产生的数学顺序和一致性。同时,设计人员还需要注意网格设计中的单调性,并且必须使用这些约束在网格内创建意外的布置。

查看此历史记录和资源网格设计指南>>

空格

空白空间(有时称为负空间)只是设计中没有任何内容的区域,即空白区域。尽管很容易被忽略,并且往往很想填充内容,但是空白可能是网站布局中最重要的资产。

极简的网站设计,为编码教育品牌提供了很多空白
该网站布局以有效的空白吸引了人们的眼球。 masiko设计

考虑一下在空白页面上的一行文本比在内容混乱的页面上更有效地吸引您的眼球的方式。充足的空白空间会突出重点,同时使整个构图的阅读难度降低。与打印页面不同,网页可以放置多长时间没有限制,这为设计人员提供了更大的自由,使其可以在战略性和慷慨的空白空间上使用。

查看这10种有效利用空间的方式>>

网站布局的常见类型

网站布局很少是从头开始创建的;实际上,通常建议不要这样做。大多数现代网站都是基于常见的布局方案,在整个Internet上一遍又一遍地使用,并且变化很小。

尽管在任何设计中一定程度的独创性都很重要,但网站应立即被理解和使用。因此,当用户多年来习惯了某些类型的布局设计时,对于设计师而言,坚持使用它们是很有意义的。请记住,布局必须最终可行,并且用户花在学习新布局上的时间越少,他们投入到实际使用该网站上的时间就越多。除此之外,以下是一些最常见的网站布局:

单列布局

单列布局是一种内容,其中内容通常按居中对齐顺序排列在一列中。

数字营销品牌的黑白单列网站布局
Hiroshy的单列网站布局设计

鉴于移动优先设计是一种长期推荐的方法,并且由于大小限制,移动网站通常排列在单个列中,因此许多网页布局都是从这里开始的。这种布局对于登陆页面或基于提要的内容(例如社交媒体和博客网站)最有用,因为它减少了页面元素的数量并鼓励了滚动。

两列布局

两列布局有时以分屏形式显示,并排显示内容。

环保品牌的彩色摄影两栏式网站布局设计
由DesignExcellence设计的两列网站布局

这对于突出显示两个要素之间的二分法很有用(例如,服装网站上的不同受众,服务之前/之后的风格或定价的双重选择)。在巧妙地支持Z模式读取的同时,还可以平衡带有副本的图形。

多列布局

多列布局通常称为报纸或杂志布局。它可以在同一页面中容纳大量站点内容。

用户仪表板的平面设计多列网站布局
BeeDee的多列网站布局设计。

通常使用网格来维护顺序和层次结构,为更重要的元素(如正文)提供更大的列空间,而对不那么重要的元素(如导航菜单,侧边栏或横幅广告)获得较少的比例空间。对于公司主页,大量包含图像或视频的网站,在线出版物,用户仪表板和购物网站(即,具有很多内容和类别以将用户定向到的网站)有用。

不对称布局

非对称布局是指元素以不相等的比例和接近度进行排列的情况-简单来说, 对称地。但是,尽管它是基于网格的系统的对立面,但不对称并不意味着混乱

金融品牌的现代不对称网站布局设计
Ian Douglas的不对称网站布局设计

平衡在任何设计中都是必不可少的,非对称布局只是以意想不到的方式实现了这一点,例如,将一侧的大型视觉效果与另一侧的许多较小元素配对。通过将某些元素(通过字面大小,颜色或位置)夸大一些,可以增强重点。它还可以支持自定义的阅读模式(与前面提到的常见模式相反)。

能够承受非常规设计方式的品牌将发现这种布局风格的理想选择-也就是说,从事艺术交易,具有冒险精神的观众或想要强调创新或颠覆性产品的网站。

网站布局全部布局

出色的网站布局设计不仅使您的网站更具视觉吸引力,而且使其直观。这是赢得用户第一印象的第一步,鼓励他们坚持不懈,查看您的网站必须提供的所有内容。

尽管网站布局设计的这些基础知识可以为您提供一个起点,但您仍应追求超越并为网站访问者提供卓越的体验。最好的网站布局设计方法就是确保您与专业设计师合作。