百都网络小编 发布于 年月日 评论() 阅读()
打开一个网站的网址，眼花缭乱的页面元素，随机插入的广告，让我们无从下手？。这时候我们大脑的第一反应可能就是点击右上角。
全屏聚焦=无聚焦
当然，事实也是如此:
我们打开一个登陆页面，一个简单明了的登陆页面会诱导我们一步步点击页面元素，最终完成我们的浏览。
上图就是一个例子。用户通过搜索引擎广告点击登陆页面，首先看到的是自己比较关注的“课程和课程特色”。下面的画面都是关于能给用户带来的价值，用户需要完成的动作都非常集中在“获得试听类”上。
当然，这个网站的设计也存在一些问题。例如，当课程的价值没有被完全引入时，用户的阅读行为被中断，并且在第二个屏幕中添加“测试”表单:
登陆页面的设计是你和访问者之间清晰直接的交互方式。
沟通过程的一部分是确保访问者受到你的积极引导，并能注意到你希望他们注意到的东西。关于上面的例子，有些读者肯定会感到困惑。市场上不是有表头加表吗？测试表格也是转化率比较高的一种表格。为什么是这个登陆页的扣费项？？
我们研究了一个顶级的登录页面，总结了两个原则，可以帮助快速优化登录页面的布局设计。只要掌握了这两个基本原则，以后无论任务有多紧急，都可以提高登陆页的转化。
什么是视觉层次？视觉层次决定了哪些页面元素会先吸引访问者，访问者会在页面上与哪些元素进行交互(以及交互的顺序)。通过建立一个视觉层次，你可以确保访问者和登录页面之间的沟通是无缝的。视觉层次可以通过以下技巧实现:格式:不同大小的元素会引导用户的注意力。与较小的组件相比，较大的组件更能吸引注意力。颜色:人们总是被大胆的对比色所吸引。对比:颜色的变化可以用来抓住人们的眼睛。一种元素的颜色与另一种元素的颜色形成对比，很容易引起人们的注意。对齐:柱形图和网格使元素对齐更有吸引力。邻近:使用它来分离或合并页面的一些元素，以帮助区分它们的位置。页面扫描模式:眼球追踪研究表明，一旦访问者到达一个网页，他们的眼睛就会聚焦在整个页面中的进度位置。以上所有的设计元素都很重要，但本文将重点关注研究证明的眼球追踪页面浏览模式的相关性& #；尤其是f和z模式。
在《模型年》中，尼尔森-诺曼集团关于眼球追踪的研究被认为是当今比较有用和被引用的研究之一。在研究过程中，他们观察了200名用户如何浏览数千个不同的网页。结果显示，在不同的网站和测试中，用户的主要阅读习惯相对一致。更具体的说，用户的阅读风格是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-04-08 00:30:54