网页设计的层次结构

很多时候,设计师会从其他伟大的设计中寻找灵感、流行趋势或灵感来源。行业诀窍“勉强过得去。然而,学习基本的设计原则,并了解如何将它们应用到web设计中,对于任何设计师的职业生涯都是至关重要的。在这篇文章中,我们将仔细看看其中的一个基本设计原则,以及它如何具体应用于网页设计。

网页设计层次结构

网页设计层次结构

层次结构是让用户查看他们在何处以及何时进行操作的元素。用户首先看到的是web页面上最上面的层次结构元素,最后看到的是最下面的层次结构元素。很容易理解为什么层级结构对网页设计有如此深远的影响——它完全关乎用户体验,以及任何网站对用户的呈现。在这篇文章中,我们将介绍使用正确的层次结构的一些基础知识,以及它是如何具体应用于web设计的。

什么是等级制度?

等级制度是等级的划分;事情从最重要到最不重要的顺序。虽然层次结构可以应用于许多情况——社会阶层、等级、宗教——但在设计世界中,它适用于用户体验。它是设计中最重要的部分和最不重要的部分的排序。使用正确的层次结构也知道如何创建最高排名的项目最突出的设计。

层次结构应用于网页设计

就像所有其他形式的设计一样,层次结构是网页设计和整个用户体验的基本特征。层次结构对我们来说是一种方式,作为网页设计师,我们通过告诉用户去哪里,什么时候做某些事情来创造用户的体验。它是用户体验难题的一个主要部分。

网页设计层次结构

网页设计层次结构

通过规划层次结构和用户流,无论是客户端web设计还是个人项目,web访问者将会更高兴,因为他们会发现事情变得更容易。此外,转化率可能会增加,这当然会让客户更满意。层次结构是设计元素之一,它可以使一个设计从仅仅是美观,到功能和有用。

规划用户体验

在开始设计阶段之前,规划阶段是必不可少的。规划出一个线框图,或一组线框图,在整个设计过程中是一个巨大的步骤。线框图设置导航结构,确定用户将如何使用网站,并规划出最佳的视觉层次结构以获得所需的结果。

定义网站的目标

记住:所有的网站都有一个主要的目标。作为设计师,实现这个目标是你的工作。

对于在线商店来说,它可能是为了增加销售额。对于一个信息网站,它可能是建立联系。或者,对于一个在线应用程序,它可以创建更多的注册——免费或付费。知道这个网站的主要目标是什么,它可以很容易地创建一个正确的线框与优秀的层次结构。

除了主要的目标之外,网站很可能还有其他的目标。例如,psd2html(下图)显然,他们的主要目标是提高服务的销售额。然而,psd2html也有一些其他的“子”目标:获得回头客,令人难忘,并获得吸引力作为一个优质的服务。所有这些目标都可以帮助企业成长。

PSD2html

在上面的重新设计中,我们可以看到这些目标通过可视层次结构被调用到行动中。我们眼睛看到的第一个地方是点菜了按钮。因为它的大小、对比度和周围的空白(排除其他一切),我们可以看到这是很重要的。还有一些额外的抛光图像周围的按钮,一个更大的突出。请记住,这个网站的首要目标是增加销售,所以相关的呼叫行动按钮是在网站的视觉层次的顶端。毕竟,这是他们在商界生存的方式。

访问者立即知道这是一个服务型的网站,只需要稍微看一下上面的标志和标语就可以知道这是什么类型的服务。根据位置、大小和周围的空白,这是排名第二的层次结构点。

他们也非常注重客户服务和他们为知名品牌所做的工作。通过提供顶级品牌和关注公司的电话号码,我们开始看到我们的一个子目标正在形成:能够将psd2html识别为一种优质服务。这直接影响他们的价格,并可以获得回头客。与有信誉的公司一起工作总是感觉更安全。

在我们进入如何使事物脱颖而出的最佳实践之前,请用简单明了的语言组织一下设计的目标是什么,以及它们的重要性顺序。然后,计划出“行动号召”是什么。例如,呼吁采取行动,以获得更多的客户以上是一个点菜了按钮。然后,我们终于可以将重点放在围绕这些web页面元素的设计元素上,使其在预期的排名中突出。

创建用户流

我们已经列出了需要突出显示的内容,但是我们仍然需要定义用户查看这些信息的顺序。我们已经完成了一半:我们应该遵循目标的重要性来决定什么是最重要的,什么是最不重要的。然而,还有其他因素在起作用吗?

例如,怎样才能最好地把产品卖给一个不那么信服的顾客?答:创建一个信息流,一个布局,来说服他们。

Freshbooks

注意Freshbooks是如何做到这一点的。上面我们已经为用户列出了预期的信息流。最上面的是主要的注意力吸引者,以及最主要的行动号召。对于那些不相信的人,再往下列出特性和推荐,以一种用户可以快速浏览并获得最多信息的方式排列。在对这些内容进行一些更有说服力的处理之后,将应用相同的call-to-action链接。

使事物引人注目的艺术

因此,我们已经在上面的例子中提到了一些使事情更值得注意的方法。现在让我们更详细地看看如何实现正确的层次结构。在规划出一个网站设计的用户体验后,使用这些设计技术来创建正确的效果。

颜色

色彩的运用是最有力的视觉元素之一。它会立即引起注意,并且通常是将注意力转移到最高层次元素的主要实践。尝试使用对比(如下所示),或者只是在一个均匀色调的网页设计上使用一种流行的颜色。

颜色

我们生活在一个3D的世界里,自然会被视觉设计中更有深度的元素所吸引。要增加深度,可以使用渐变、阴影、高光、凸版印刷等。

维

大小

越大越重要,越小越不重要。我们的眼睛会自然地先挑出大的碎片,然后用它们来帮助我们找到小的碎片。在网页设计中最常使用的一个例子是排版和大小。更大的标题标记更大,而更小的标题标记更小。然后,段落、区块引用等是下一个大小,标题或脚注是最小的。这就创建了一个排名系统,允许用户以正确的顺序查看内容,并根据重点组织内容(标题)

大小

放置

物品摆放的位置会对其被注意的时间产生巨大的影响,同时也会影响到物品的重要性。通常,层次结构使用F模式。(想象一下屏幕上有一个大大的“F”。)左上,然后向右,然后向下一点,再向右。通过遵循这种布局模式,我们可以估计用户将首先查看和最后查看的位置。

放置

对比

以上在“颜色”一栏中简要提到了这一点,但同样的道理也适用于颜色对立之外的其他形式的对比。想想黑色和白色,黑暗和光明。对比度越高,一个元素得到的关注就越多;对比越低,注意力越少。

对比

这在社区中是很好的例子

下面是一些在我们的设计社区中很好的例子。注意,我们已经在图像的右边标记了层次化标签。每个标签代表web页面的一个等级区域,按照用户看到它的顺序,以及它的重要性的顺序。看看你是否能说出我们是如何得出这些等级的;是颜色、图像、对比、空白还是其他什么?

由沙发

沙发

Josh Tilton

Joshtilton

Ten24Media

Ten24

杰夫Sarmiento

Jeffsarmiento

Zee设计师

Zee

结论

希望这个快速指南可以帮助那些谁是新的设计,或谁可以改善他们的应用基本原则在他们的日常设计。为了更好地理解,请务必阅读上面的设计,并在web设计的其他地方寻找其他示例。要真正理解层次结构,可以研究其他伟大的设计,甚至一些糟糕的设计。设计你自己的模型时要考虑到层次结构,然后得到反馈或者找到其他方法来改进它的元素顺序。

在用户体验和总体设计中,层次结构可能是一个强大的工具。通常情况下,它可能是使设计“流行”的唯一因素。它也可以是让设计变得有效的一个因素,对你的客户或你自己都是如此。通过了解设计人员的层次结构,可以更好地了解如何在web页面或任何设计中放置内容。永远不要把东西放在任何地方——要有一个专注于最好结果的计划。

2020-03-16 17:16
相关热门