Z模式广告:着陆页(如网页)应始终遵循某种有组织的视觉层次结构。商业组织可能已经知道这一点,但有必要重申。
一个组织可以做的任何能够影响他们的观众,以专注于该组织希望他们注意的事情,几乎就是游戏的名称。优秀的设计师了解用户如何在线查看和处理信息。
这些知识可以指导他们的设计决策,并使他们以引起关注的方式放置最重要的元素。如果一切看起来正确,该设计将吸引访问者采取所需的措施。
设计师影响用户并吸引用户注意页面最重要元素的主要方式之一是使用Z模式设计页面。
Z模式广告布局是开始任何Web设计项目的好方法,因为它满足了任何有效网站的核心要求:品牌,层次,结构和号召性用语。
尽管经典的“ Z布局”对于每个网站都不是完美的解决方案,但它肯定是一种有效的布局,足以确保任何Web设计师都可以将其包含在布局思想中。
什么是Z模式广告?
Z-Layout的前提实际上非常简单:将字母Z叠加在页面上。将组织希望读者看到的项目放在Z的顶部。
眼睛自然会遵循Z的路径,因此目标是将其“号召性用语”放在最后。在整个过程中,企业组织可以包含大量信息,这些信息构成了号召性用语。这是设计的外观:
Z模式设计可追踪人眼阅读时所走的路径-从左到右,从上到下:
•首先,人们从左上方到右上方扫描,形成一条假想的水平线
•接下来,在可见页面的左侧下方,创建一条假想的对角线
•最后,再次回到右侧,形成第二条水平线
重要的是要注意,Z型设计不需要符合传统的Z型,并且沿图形的Z角数量可以变化。这种布局肯定没有什么复杂的-但它可以按照逻辑顺序将视线从第1点快速有效地移至第4点-最后是强有力的号召性用语。
为什么Z模式广告有效?
Z-Layout当然不一定要成为所有站点的最终具体解决方案,但正如前面所提到的,对于任何设计项目,Z-Layout都是一个很好的起点,因为它解决了有效设计的四大原则:
•品牌推广
•层次结构
• 结构体
• 行动号召
之所以可以使用它,是因为大多数西方读者将以与扫描图书相同的方式来扫描网站-从上到下,从左到右。从这个简单的基础上,您几乎可以随处去:添加多个号召性用语,缩小Z的高度,扩展Z的高度,并执行对网站目标有意义的一切。
企业组织在这些示例中要注意的一件事是Z布局如何适应。
“号召性用语”可能并不总是相同的,但必须牢记,尽管某些网站可能希望将其访问者吸引到其投资组合中,而不是希望其访问者“注册”;此外,沿着路径的内容看起来也可能与某些示例明显不同。
需要注意的是讲故事如何贯穿1、2、3,动作!通过沿Z路径移动视线,可以增加查看者最终完成业务组织希望他们做的事情的机会。
Z模式广告在目标网页中的工作原理
使用Z布局创建网页有助于创建人们可能会遵循的视觉层次结构,从而使其成为着陆页设计的理想布局选项。但是,为什么用Z模式而不是F模式设计页面?
虽然F布局更适合于内容密集的页面,但Z布局主要是用于复制最少的页面。从本质上讲,Z模式更适合于优先考虑简单性和CTA的页面。
此外,根据“ Z模式”布局创建其着陆页可以带来更多的转换,因为商业组织可以控制观看者眼睛的移动位置。
一些主要示例如下:
Z模式广告示例1:生命锁
此Life Lock登陆页面遵循Z模式,但未以CTA结尾:
一种。访客可能会从标题开始,因为其字体比副本的其余部分更大,并且与深色背景形成了鲜明的对比。
b。观看者向右扫描,然后将焦点对准该人的脸部,即第一个Z角。
C。接下来,视线将在第二个转折点沿对角线移动到鲜红色的CTA按钮。
d。最后,焦点将转向智能手机图像。
就像Z模式的设计不能形成传统的“ Z”形一样,重要的是要认识到在Z模式的角度上不需要CTA。如果将CTA放在转弯处会更好,因为这是观众的视线最终到达的地方。
Z模式广告示例2:放火
此Call Fire登陆页面是另一个示例,它没有形成传统的Z,但是模式仍然很明显:
一种。观看者将从页面标题开始,因为它比副本的其余部分大。
b。从此处,访问者将向下和向右扫描图像,重点关注表单和CTA按钮-创建第一个Z角。
C。接下来,观众向左移向视频-创建第二个Z角。
最后,观众的视线将遍及整个页面,直至出现图标和三个步骤。
Z模式广告示例3:Oracle
Oracle的页面是另一个不遵循传统Z的示例,但路径最终指向CTA:
一种。页面访问者很可能会从标题开始,因为它是页面上最大的字体,并且周围所有空白都易于阅读。
b。接下来,它们将水平移动到右侧的图像。
C。从这里,人眼自然会向下流到图形的左侧。
d。最后,观众的眼睛将扫描页面的底部到Z布局结束的CTA。
Z模式广告范例4:Flematicmatics
Fleetmatics的目标网页包含多个Z角的CTA:
一种。左上方的标题和副标题很可能会首先吸引观众的注意力。
b。从那里,访问者将浏览到右边以查看背景视频。
C。创建第一个Z形的对角线后,访问者很可能会向左扫描到第一个橙色的CTA按钮。
d。接下来,用户的视线将穿过客户徽章,并通过项目符号副本来回切换到第二个橙色CTA按钮。
e。最后,Z版式会继续向左移向图像,然后再次返回至第三个CTA按钮。
图案在页面上继续向下,创建了更多的Z角。而且,通过多次加入CTA,观众将很难忽略它们,并被说服点击和转化
--- END ---