尼尔森诺曼（Nielsen Norman）对200名参与者进行了研究，结果表明，扫描内容的一种流行模式是 F 型，结构模式如下： 如上图所示，用户首先阅读时通常在内容区域的上部进行水平移动。此初始元素形成 F 的顶部栏；接下来，用户在页面上向下移动一点，然后在第二个水平移动中进行阅读，该移动通常比上一个移动覆盖的区域更短。此附加元素形成 F 的下杠；最后，用户以垂直方向扫描内容的左侧。有时，这是一个缓慢而系统的扫描，在眼动图上显示为实心条纹。其他时候，用户移动得更快，从而创建了一个热点图，最后一个元素构成F的茎。
为了提高用户体验，可以使用项目符号，排版，彩色按钮，突出显示的文本等元素。这些元素赋予界面视觉效果，并指示重要点。使用 F 模式可确保页面上高效的视觉层次结构，这样用户可以快速浏览内容并找到相应问题的解决方案。 例如，Medium 以前的布局是利用了 F 模式，通过将主要内容（博客文章）安排在左侧，同时将侧边栏置于右侧。侧边栏中包含了非主要但仍然相关的内容，包括每日摘要，标签以及指向“关于我们”和“使用条款”的链接。
medium以前的布局是F模式的示例现如今，Medium 已经不再使用带有图片预览和大标题的经典模式，而取而代之的是，新博客文章以列表的形式显示，因此它们将用户的注意力吸引到文章的作者，而不只是图片预览上。-Z模式由于 Z 模式涵盖了包括视觉层次结构，内容结构和 CTA 在内的重要方面，因此被非官方认为是着陆页面之王。与更适合于文本或内容密集页面的 F 模式不同，Z 模式以最小的复制量有效地吸引了用户对目标页面的注意。你可能已经猜到，该模式代表了用户眼睛的 Z 形运动。
简约的界面可以从Z模式中受益，以一致的布局和视觉上令人愉悦的内容结构使用户满意。使用 Z 模式进行设计时，需遵循以下结构： 顶部的水平线应包含醒目的内容以及徽标和导航栏之类的元素（以便用户快速访问网站页面）；遵循经典的讲故事方法，对角线应该向用户介绍主要内容，包括主要副本，引人注目的图片，幻灯片等；最后，较低的水平线应具有 CTA（行为召唤），它可以刺激用户执行某些操作，例如注册，订阅或进行购买。图文结合的设计类型 图文结合的设计顺序可以概括为4种，左图右文、左文右图、上图下文、上文下图。不同产品跟据其所表达侧重点的不同，以此来选择对应的排列方式。-左图右文将文字与图片分别排列在版面的左边与右边，从而形成左图右文的排列形式。相较于文字来讲，图片拥有更强的视觉号召力。该种排列形式在很大程度能使版面产生由左至右的视觉流程，并由此产生的流程正好与人们的阅读习惯相符。在结构上带给观者一种顺遂、流畅的视觉感受。左图右文的排列形式大部分被用在购物、房产、出行、美食点评 APP 等应用中。主要以图片内容引发用户兴趣，让用户能够更直观地了解到商品的信息，帮助用户更快地找到想要的商品。这也与我们实体店购物体验的情景一致，先被商品实物、包装吸引，再根据标签上的价格等最终决定是否购买。
评论区 (0)
最新评论登录后发布评论并参与互动。
暂无评论，欢迎抢沙发。