FZ模式助力网页设计

　　FZ方式便是以清楚立即的方法向来访者传递合理的信息内容，通讯全过程的一部分是保证您危害大家留意您期待她们干什么，应用空格符来梳理网页页面并加上比照的CTA按键仅仅完成此目地的几类方式。

　　但最终，网页制作不仅是有关原素的外型，也有他们向来访者传递的信息内容，视觉效果诱惑力仅仅网页制作的一个层面- 网页页面原素怎样互相互动而且流动性在一起决策了您的网页页面是不是会取得成功吸引住来访者，这就是视觉效果结构分析充分发挥的地区。

　　什么叫视觉效果层级?

　　可视性结构分析明确什么网页页面原素最先与来访者互动交流，及其他们在网页页面上与什么原素互动(及其以哪种次序)。根据创建数据可视化结构分析，您能够 保证 来访者和登陆页面中间的通讯是无缝拼接的。

　　能够 应用下列技术性完成视觉效果结构分析：

　　占比：不一样规格的原素将正确引导客户留意-与较小的原素对比，很大的原素吸引住大量的专注力。

　　色调：大家被胆大，比照独特的色调吸引住到。

　　饱和度：色调的转变 能够 用于吸引住专注力。

　　两端对齐：

　　列和网格图能够 在原素中间建立两端对齐，并使来访者注意到。

　　相邻度：这有利于将一些网页页面设计风格分离并排序(或分离)，以协助区别。

　　页逐行扫描：科学研究表明，游人在这儿集中化她们的眼光，一旦她们抵达的网页页面上，并在那里她们将执行全部网页页面。

　　全部以上设计风格都很重要，但本文将重点关注眼球追踪研究表明与网页页面上的內容有关的网页页面逐行扫描- 尤其是F和Z方式。

　　F方式

　　2006年，阿尔特曼诺曼集团公司开展了被觉得是现如今最有效的眼动跟踪科学研究之一。在科学研究期内，她们观查了232位客户怎么查看数千个不一样的网页页面。调研数据显示，客户的关键阅读文章个人行为在每个网站和每日任务中相对性一致。

　　更具体地说，客户以F方式阅读文章。

　　F方式要求来访者最先在水平方向上阅读文章网页页面，主要是顺着內容地区的上端，随后向下移动网页页面并载入第二条直线，游人扫描仪內容的左边竖直健身运动。

　　这就是健身运动一般的模样：

　　图中所显示的三张热点图来自三个不一样网址的客户眼动跟踪科学研究。值得一提的是，F方式无须遵照严苛的双杠水准方式(参照右上图的热点图)。

　　色调键以下：

　　鲜红色=收看频次数最多，固定不动数最多的地区

　　淡黄色=一些见解，但固定不动较少

　　深蓝色=收看频次至少，专注力非常少

　　深灰色=很少的主视图和沒有凝视

　　这儿要记牢的关键是客户的眼球运动从左上方逐渐并在网页页面上挪动，随后往下扫描仪网页页面以检索她们发觉有诱惑力的原素。针对原素你要游人到注意到在文本为主导的网页页面(如图象)，将他们置放在F方法保证 原素被见到。

　　Hootsuite在其落地页上应用F图案设计来突显最重要的原素(在主页上边)：

　　最先，访问者的双眼第一次去的文章标题和副标题。

　　下面，她们将扫描仪bullet-point的益处(标志)。

　　以后，来访者会见到2个CTA按键。

　　BigCommerce也在其网页制作应用F方式(在主页上边)：

　　文章标题是网页页面上较大 的字体样式，因而很有可能最先见到。

　　随后将子标题超越到图象。

　　下面是项目符号中的团本。

　　最终，在客户扫描仪左至右收看2个CTA按键。

　　分配您的降落网页页面原素新号，使她们深陷这类独特的视觉效果为了更好地保证 游人根据你的网页页面，随后点一下按键CTA。

　　F方式一般适用內容偏重的网页页面，但当然可以运用于內容较少的网页页面。

　　Z方式

　　在Z-图案设计合理布局一般用以对不重內容的网页页面，它的设计方案效仿当人的眼睛行驶的线路就载入-左到右，坎坷从上向下：

　　观看者最先从左上方扫描仪到右上方，产生一条幻想的直线

　　下面，他们往下扫描仪并往左边扫描仪，建立一条幻想的直线

　　最终，她们再度向右看，产生第二条直线

　　这是以这种眼球运动中发生的观查方式：

　　如同F图案设计一样，Z图案设计合理布局不一定是精准的Z图案设计。直线无须彻底水准 – 他们还可以成视角。除此之外，能够 有好几个z的全部网页页面。请保证 ：

　　顶端直线包含您期待访问者最先关心的关键部件。

　　直线应包括造成您的CTA按键的一切信息内容。

　　底端直线应突显沿图线的一切点的CTA。

　　Lyft落地页选用了Z-方式的一个非常好的事例：

　　访问者最先在顶端水平线查询logo和“Sign up to ride”CTA按键。

　　下面，她们沿直线往下行并扫描仪报表的文章标题。

　　最终，看一下底端直线，在其中Lyft vs. Uber标题和副标题通往CTA按键。

　　大家的最后一个实例应用Z方式的LinkedIn：

　　第一条直线包含“Start hiring”文章标题和女士的面部

　　往左边扫描仪，来访者随后见到2个深蓝色CTA按键上边的团本

　　在第二个直线中，双眼挪动到40%数据统计并在网页页面上从从左往右挪动以查询别的2个数据统计

　　最终，您能够 应用Z方式让来访者致力于说动她们更贴近变换总体目标的原素。

　　应用F和Z方式建立扣人心弦的登陆页面感受

　　将最重要的总体目标网页元素置放在来访者的当然双眼途径上，不论是F或是Z方式，都能够保证您建立扣人心弦的落地页感受。

　　在总体目标网页页面上应用可视性结构分析的强劲作用，以保证 来访者消化吸收您的电子邮件并采用您期待她们采用的实际操作。