百都网络小编 发布于 年月日 评论() 阅读()
打开一个网站的网址，眼花缭乱的页面元素和随意插入的广告让我们无从下手？这时候我们大脑的第一反应可能就是点击右上角。
全屏聚焦=无聚焦
当然，也有这样的情况:
当我们打开一个登陆页面时，一个简单明了的登陆页面会诱导我们一步步点击页面元素，最终完成我们的浏览。
上图就是一个例子。当用户通过搜索引擎广告点击进入登陆页面时，首先映入眼帘的是他所关心的“课程及课程特色”。下面的画面都是关于能给用户带来的价值，用户需要完成的动作都非常集中在“接收试听类”上。
当然，这个网站的设计也存在一些问题。例如，当课程的价值没有被完全引入时，用户的阅读行为被中断，在第二个屏幕上添加一个“测试”表单:
登陆页面的设计是你和访问者之间清晰直接的交互方式。
沟通过程的一部分是确保访问者受到你的积极引导，并能注意到你希望他们注意的内容。关于上面的例子，一些读者肯定会感到困惑。在市场中，总有一个表头加一个表。测试形态也是转化率很高的形态。为什么是这个登陆页的扣费项？/[K19/]
我们研究了一个顶级的登录页面，总结了两个可以帮助快速优化登录页面布局设计的原则。只要掌握了这两个基本原则，再紧急的任务也能提高登陆页转化。
什么是视觉层次？视觉层次决定了哪些页面元素会先吸引访问者，访问者会在页面上与哪些元素进行交互(以及交互的顺序)。通过建立视觉层次，你可以确保访问者和登录页面之间的沟通是无缝的。视觉层次可以通过以下技术实现:格式:不同大小的元素会引导用户的注意力。与较小的组件相比，较大的组件更能吸引注意力。颜色:人们总是被大胆和对比强烈的颜色所吸引。对比:颜色的变化可以用来抓住人们的眼睛。一种元素的颜色与另一种元素的颜色形成对比，很容易引起人们的注意。对齐:柱形图和网格使元素对齐更有吸引力。邻近:使用它来分离或合并页面上的一些元素，以帮助区分它们的位置。页面扫描模式:眼球追踪研究表明，访问者一旦到达一个网页，他们的目光就会聚焦在整个页面中的进度位置。上述所有的设计元素都很重要，但本文将重点关注研究证明的眼球追踪的页面浏览模式的相关性& #；尤其是f和z模式。
在F车型年，尼尔森-诺曼集团关于眼球追踪的研究被认为是当今最有用和被引用的研究之一。在研究过程中，他们观察了100名用户如何浏览数千个不同的网页。结果显示，在不同的网站和测试中，用户的主要阅读习惯相对一致。更具体地说，用户的阅读方式是F模式。模式F是访问者先横向阅读页面，主要是沿着内容区的上半部分，然后向下移动页面到第二条水平线以上阅读。之后，访问者垂直浏览左侧页面。上图中的三张热图来自于三个不同网站的用户眼球追踪研究。值得一提的是，F模式并不一定遵循严格的二维水平模式(见上图右侧热图)。这是一个典型的轨迹(色键如下):红色=视图数量多，固定率高的区域黄色=部分视图，但固定率较低蓝色=视图较少，固定次数较少灰色=视图很少，无固定率。这里要记住的重点是，用户的目光从左上角移动到整个页面，然后向下扫描页面，找到他们认为吸引人的组件。对于那些你希望访问者在文本密集的页面上注意到的元素(比如图片)，把它们放在F模式下可以保证这些元素是可见的。在他们的登陆页面上，他们使用F模式引爆这些元素(折叠上方)。首先，访问者的眼睛首先会看到标题和副标题。接下来，他们将扫描原点(图标)的好处。之后访客会看到两个CTA按钮在登陆页面上使用了F模式(折叠上方)如下图所示，页面上的标题是大字体，很可能是先看到的。然后就是相应的字幕。接下来是要点的复印件。安排您的登录页面组件，使它们符合这种特定的视觉顺序，以确保访问者通过您的页面并单击CTA按钮。f模式通常适用于内容较多的页面，当然也适用于内容较少的页面。
Z模式Z型布局通常用于内容不多的页面。它的设计模仿了人眼在阅读时的路线&#;从左到右，从上到下的模式。访客首先从左上角扫描到右上角，形成一条假想的水平线接下来，他们向下和向左扫描，形成一条假象中的对角线较后，他们再次向右看去，形成第二条水平线这就是由这些眼球运动产生的观看模式。就像F型图案一样，Z型图案的布局不一定是一个精确的Z型图案。水平线不必完全是水平的，它们也可以是有角度的。此外，整个页面可以有多个Z字。只是要确保以下方面：顶部的水平线包括你希望访问者首先关注的主要组成部分对角线应该突出任何能导致你的按下CTA按钮的信息底部的水平线应该突出CTA在这条线上的任何一点
Lyft（Uber较大的竞争对手）落地页的特点是Z型模式的一个很好的例子：访客首先看到的是顶部横线上的标志和 &#;报名骑行 &#;CTA按钮。接下来，他们沿着对角线前进，扫描表格的标题。较后，他们看底部的横线，那里有Lyft与Uber的标题和通往CTA按钮的副标题。
我们的较后一个例子是领英使用Z型模式：第一条横线包括 &#;开始招聘 &#;的标题和女人的脸。向左下方扫描，访问者就会看到两个蓝色CTA按钮上方的副本。在第二条对角线上，目光移到%的统计数字上，并从左到右横跨整个页面，看到其他两个统计数字。较后，你可以使用Z型模式来让访客关注那些说服他们向转化目标靠近的元素。来源于灵蹊 ，作者堃堃微海报
免责声明：本网站内容来源网络，转载是出于传递更多信息之目的，并不意味赞成其观点或证实其内容真实性。转载稿涉及版权等问题，请立即联系网站编辑，我们会予以更改或删除相关文章，保证您的权利。
作者：徐州百都网络 | 来源： | 发布于：2022-03-21 16:30:13