8 个在 2020 年仍然有效的网页设计原则
已发表: 2021-07-22您的网站设计对转化的影响比您想象的要重要。 您可以实施世界上每一种促进转化的策略,但如果您的网页设计看起来很垃圾,那对您没有多大好处。
设计不仅仅是设计师所做的事情。 设计就是营销。 设计是您的产品及其运作方式。 我对网页设计原则了解得越多,我得到的结果就越好。
免费的用户体验和可用性课程
从原则到实践。 观看有关用户体验和可用性的免费课程。

以下是您应该了解和遵循的8 条有效的网页设计原则。
1. 视觉层次
吱吱作响的车轮获得油脂,突出的视觉效果引起注意。 视觉层次结构是优秀网页设计背后最重要的原则之一。 这是人眼感知所见事物的顺序。
锻炼。 请按重要性排列圆圈:

如果不知道这些圈任何事情,你能对他们进行排名
容易地。 这是一个视觉层次。
您网站的某些部分比其他部分更重要(形式、号召性用语、价值主张等),并且您希望这些部分比不太重要的部分获得更多关注。
如果您的网站菜单有 10 个项目,它们是否都同样重要? 您希望用户点击哪里? 使重要链接更加突出。
层次结构不仅仅来自大小。 亚马逊通过使用颜色使“加入购物车”和“立即购买”号召性用语按钮更加突出:

从业务目标开始
您应该根据您的业务目标对网站上的元素进行排名。 如果您没有特定的目标,您将不知道该优先考虑什么。
这是一个例子。 这是我从 Williams-Sonoma 网站截取的屏幕截图。 他们想销售户外炊具。

最引人注目的是一大块肉(让我想要它),其次是标题(说出它是什么)和号召性用语(得到它)。 第四名是标题下的一段文字; 第五个是免运费横幅,顶部导航在最后。
这是视觉层次结构——网页设计的永恒原则——做得很好。
锻炼。 浏览网页并有意识地对视觉层次结构中的元素进行排名。 然后去看看你的网站。 某些重要的东西(即访问者寻求的关键信息)是否在层次结构中太靠后了? 让它更加突出。

2. 神圣的比例

黄金比例是神奇的数字 1.618 (φ)。 使用由黄金比例定义的比例的设计被认为在美学上令人愉悦。
然后是斐波那契数列。 每一项都是前两项的总和:0、1、1、2、3、5、8、13、21 等等。 有趣的是,这两个看似无关的话题产生了完全相同的数字。
这是黄金比例的样子:

许多艺术家和建筑师使用比例来近似黄金比例。 一个著名的例子是建于古希腊的帕台农神庙:

黄金比例可以用于网页设计吗? 你打赌。 这是推特:

这是 Twitter 创意总监 Doug Bowman 多年前发表的评论。 设计选择并非偶然:
因此,如果您的布局宽度为 960 像素,请将其除以 1.618(=593 像素)。 您知道内容区域的宽度应该是 593 像素,侧边栏应该是 367 像素。 如果网站高度为 760 像素高,您可以将其拆分为 470 像素和 290 像素的块(760/1.618=~470)。

如果您想了解更多信息,请查看有关如何将黄金比例应用于排版的文章。
3. 希克定律
希克定律说,每增加一个选择,做出决定所需的时间就会增加。
你在餐馆里无数次经历过这种情况。 菜单上有很多选择,让您很难选择晚餐。 如果它提供两种选择,做出决定所需的时间就会少得多。 这类似于选择悖论——你提供的选择越多,什么都不选择就越容易。 这两个原则都与网页设计有关。
用户在您的网站上拥有的选项越多,使用起来就越困难(如果使用过的话)。 我们需要消除选择。 为了做出更好的网页设计,在整个设计过程中专注于消除分散注意力的选项。
在无限选择的时代,人们需要更好的过滤器! 如果您销售大量产品,请添加更好的过滤器以便更轻松地做出决策。 葡萄酒图书馆出售大量葡萄酒。
他们在过滤器方面做得很好:

4. 费特定律
菲特定律规定,移动到目标区域(例如单击按钮)所需的时间是到目标的距离和目标大小的函数。 换句话说,物体越大,距离越近,使用起来就越容易。
Spotify 比其他按钮更容易点击“播放”:

在手机应用程序上,他们还将播放按钮放置在易于点击的位置。
更大并不总是更好。 占屏幕一半的按钮不是一个好主意,我们不需要数学研究来告诉我们。 即便如此,费特定律还是一个二元对数。 这意味着对象可用性的预测结果沿曲线运行,而不是直线。
当大小增加 20% 时,一个小按钮更容易点击,而一个非常大的对象,在大小增加 20% 的情况下,不会提供相同的可用性优势。
这类似于目标大小的规则。 按钮的大小应该与其预期的使用频率成正比。 您可以使用鼠标跟踪来查看人们使用最多的按钮,然后将常用按钮放大(更容易点击)。
让我们想象一下您希望人们填写的表格。 在表单的末尾,有两个按钮:“提交”和“重置”(清除字段)。

99.9999% 想点击“提交”。 因此,按钮应该比“重置”大得多。
5. 三分法
在您的设计中使用图像是个好主意。 视觉效果比文本更快地传达您的想法。
最好的图像遵循三分法则:一张图像应该被两条等距的水平线和两条等距的垂直线分成九个相等的部分。 重要的组成元素应该沿着这些线或它们的交叉点放置。
下面,看看右边的图像如何更有趣? 这就是行动中的三分法则。

使用漂亮的大图像有助于良好的网页设计。 如果您的图片更有趣,您的网站将更具吸引力。
6.格式塔设计法
格式塔心理学是一种关于心灵和大脑的理论。 它的原理是人眼在感知物体的各个部分之前先看到物体的整体。
这就是我的意思:

请注意您如何在不关注狗的每个黑点的情况下看到狗? 格式塔主义的创始人库尔特·科夫卡 (Kurt Koffka) 是这样解释的:“整体独立于部分而存在。”
由于它与网页设计有关,因此人们首先会看到您的整个网站,然后再区分页眉、菜单、页脚等。
有八项所谓的格式塔设计法则可以让我们预测人们将如何看待某事。 以下是每个与网页设计的关系:
1. 邻近法则
人们将空间中靠得很近的事物组合在一起。 它们成为一个单一的感知对象。
对于有效的网页设计,请确保不融合在一起的事物不会被视为一个整体。 类似地,您将相关的设计元素(导航菜单、页脚等)组合在一起,以传达它们形成一个整体。

Craigslist 使用这条法律来使人们更容易理解哪些子类别属于“待售”:

2. 相似法则
我们将相似的事物归为一组。 这种相似性可以以形状、颜色、阴影或其他品质的形式出现。

在这里,我们将黑点归为一组,将白点归为另一组,因为相同颜色的点看起来彼此相似。
当应用于网页设计时,这看起来像什么? Mixpanel 对案例研究的链接使用了类似的设计,因此我们将它们视为一个组,每个组都相互加强:

3. 封闭法则
我们寻求完整性。 当未闭合的形状或图片的某些部分缺失时,我们的感知会填补视觉空白。 我们看到一个圆形和一个正方形,尽管下图中实际上并不存在任何形状。

如果没有闭合定律,我们只会看到不同长度的不同线。 但是闭合定律将线条组合起来形成整体形状。
使用闭合定律可以使徽标或设计元素更有趣。 一个很好的例子是世界自然基金会标志,它是由彼得·斯科特爵士于 1961 年设计的:

4. 对称定律
头脑认为物体是对称的,围绕一个中心点形成。 将物体分成偶数个对称部分在感知上是令人愉悦的。
当我们看到两个不相连的对称元素时,大脑会在知觉上将它们连接起来,形成一个连贯的形状。

当我们查看上图时,我们倾向于观察到三对对称的支架,而不是六个单独的支架。
人们更喜欢对称的外观而不是不对称的外观。 图像和文本的交替列、居中的滑块和三列列表增加了 Trello 主页设计的视觉享受:

5. 共同命运法则
我们倾向于将物体视为沿着路径移动的线。 我们将具有相同运动趋势并因此在同一路径上的对象组合在一起。
在心理上,人们将棍子或举起的手聚集在一起指向某个地方,因为它们都指向同一个方向。 在您的网站设计中,您可以使用它来引导用户注意某些内容(例如注册表单、价值主张等)。

例如,如果有一组点,其中一半点向上移动,另一半点向下移动,我们将向上移动的点和向下移动的点视为两个不同的单位。

6. 连续性法则
人们倾向于将一条线视为继续其既定方向。 当对象(例如线)之间存在交集时,我们倾向于将两条线视为两个单一的、不间断的实体。 即使有重叠,刺激仍然是不同的。

Fixel 使用它来将面部连接到 bios:

还有其他格式塔定律,例如图形和背景或良好格式塔定律。 (如果对象形成规则、简单和有序的模式,则它们往往会在感知上组合在一起——就像奥运五环一样。)然而,上面介绍的那些是网页设计的最佳指导原则。
7.留白和干净的设计
空白(也称为“负空间”)是网页中保持“空白”的部分。 它是图形之间的空间、边距、装订线、列之间的空间、类型行之间的空间或视觉效果。
它不仅仅是“空白”空间——它是网页设计的一个重要元素。 它使其中的对象能够存在。 空白是关于信息、排版、颜色或图像的层次结构的使用。
没有空白的页面,塞满了文本或图形,可能会显得很忙或杂乱无章。 通常,它很难阅读。 (人们甚至不会打扰。)这就是为什么简单的网站在科学上更好。
适量的空白使网站看起来“干净”。 虽然干净的设计对于传达清晰的信息至关重要,但它不仅意味着内容减少。
干净的设计可以最好地利用它所在的空间。要创建干净的网站设计,您需要知道如何明智地使用空白来进行清晰的交流。 Made.com 很好地使用了空白:

对留白的巧妙利用,可以轻松地将注意力集中在主要信息和视觉效果上,并且正文易于阅读。 一般来说,留白促进优雅和精致,提高易读性并推动注意力。
阅读更多关于留白和简约的信息。
8. 奥卡姆剃刀
当给出几个相互竞争的假设时,奥卡姆剃刀会敦促您选择假设最少的一个,从而提供最简单的解释。 把它放在网页设计的背景下,奥卡姆剃刀认为最简单的解决方案通常是最好的。
在一篇关于他们的 Angelpad 体验的帖子中,Pipedrive 的团队写道:
Angelpad 团队和导师以多种方式向我们提出挑战。 “你的主页上有太多东西”是我们最初不同意的,但我们很乐意测试。 事实证明我们确实错了。 我们删除了 80% 的内容,并在主页上留下了一个注册按钮和一个“了解更多”链接。 注册转化率增加了 300%。

这不仅与外观有关,还与它的工作原理有关。 一些公司——比如 37Signals——已经把“简单”变成了一种商业模式。 这是创始人杰森·弗里德 (Jason Fried) 撰写的《返工》(Rework)一书中的引述:
很多人讨厌我们,因为我们的产品比竞争对手做得少。 当我们拒绝包括他们的宠物功能时,他们受到了侮辱。 但我们为我们的产品没有做什么而感到自豪,因为我们为他们做了什么而感到自豪。 我们将它们设计得很简单,因为我们认为大多数软件都太复杂了:功能太多、按钮太多、混乱太多。
简单、极简的设计并不能保证设计会奏效。 但是,根据我的经验,简单总是比相反要好——因此,我们应该努力简化我们的网页设计。
结论
有效的网页设计和艺术是不一样的。 但是许多心理学和设计原则适用于网站。 您可以通过将这些法律的相关方面应用于您的布局、排版和图像来设计一个出色的网站。
为用户和您的业务目标而设计。 好的网页设计可以提供美观和经济上有益的结果。