图文结合的UI布局，如何完成？

研究主题：UI 界面中的布局应用原则

研究对象：UI 界面布局

UI 界面设计中，信息能被有效的传达，离不开良好的组织和布局，信息之间层级关系的表达非常重要，恰当的视觉设计，能够通过对界面 UI 设计元素的展现来暗喻信息之间的层级关系，能够减少用户在使用过程中产生的困惑和理解上的障碍。

而针对图文结合的 UI 布局设计，各大产品根据自己产品的定位有不同的展现方式，图文结合的 UI 布局到底怎么设计才更合理，接下来我们先从用户阅读的常用模式开始探讨。

 用户阅读的常用模式 

现如今，界面变得多样化，用户每次遇到新的（或经过改进的）界面时都需要学习。因此，让用户花费时间寻找功能就会让他们感到不愉快。

阿尔托大学（Aalto University）对视觉搜索进行了建模，试图找出人们如何选择新界面或更改界面。结果，研究人员认为，用户快速学习的关键在于3个因素：长期记忆，短期视觉记忆和眼球运动。知道用户如何感知视觉信息使 UI/UX 设计人员可以创建出不妨碍用户的高效界面（以及微调的 UI 界面）。

包括尼尔森·诺曼集团（Nielsen Norman Group）等多家研究公司已经研究了人们如何扫描页面上的信息以及眼睛如何移动的问题。根据该小组的研究表明，用户在阅读或观察内容时通常遵循以下三种模式。

-古腾堡图

古腾堡图表反映了西方的阅读文化：从上到下，从左到右。根据古腾堡（Gutenberg）图表，页面上的信息应分为4个象限，以便用户更容易感知丰富的文本内容：

古腾堡（Gutenberg）图介绍了内容安排原则，阐明了如何使用户轻松找到相关内容。

· 如上图所示，用户选择首先浏览左上象限，该象限称为主视觉区，设计时应在此处放置关键内容，例如标题和标志；

· 接下来，用户的视线移至强烈的休闲区域。可考虑在本区域提供某种后续内容，例如你之前想表达想法的图片说明；

· 然后，用户进入较弱的休闲区域，这个区域不太可能引起人们的注意，该区域是沿着用户阅读路径的“休息”；

· 最后，在右下角的一个终端区域将引导用户得出逻辑结论，建议添加CTA（行为召唤）以文字、视频或链接的形式出现。

在界面中使用古腾堡图有助于阅读节奏和阅读理解，这种模式可以让你洞察到将重要元素放置在那些最有可能被阅读或注意的地方。

-F模式

F模式表示页面上元素类似F的定位。根据尼尔森·诺曼（Nielsen Norman）的研究显示，人们通过水平移动眼睛开始接触内容。接下来，他们扫描一条垂直线，试图找到感兴趣的点，如果找到他们想看的内容，他们会继续水平浏览内容。

尼尔森·诺曼（Nielsen Norman）对200名参与者进行了研究，结果表明，扫描内容的一种流行模式是 F 型，结构模式如下：

· 如上图所示，用户首先阅读时通常在内容区域的上部进行水平移动。此初始元素形成 F 的顶部栏；

· 接下来，用户在页面上向下移动一点，然后在第二个水平移动中进行阅读，该移动通常比上一个移动覆盖的区域更短。此附加元素形成 F 的下杠；

· 最后，用户以垂直方向扫描内容的左侧。有时，这是一个缓慢而系统的扫描，在眼动图上显示为实心条纹。其他时候，用户移动得更快，从而创建了一个热点图，最后一个元素构成F的茎。

为了提高用户体验，可以使用项目符号，排版，彩色按钮，突出显示的文本等元素。这些元素赋予界面视觉效果，并指示重要点。使用 F 模式可确保页面上高效的视觉层次结构，这样用户可以快速浏览内容并找到相应问题的解决方案。

例如，Medium 以前的布局是利用了 F 模式，通过将主要内容（博客文章）安排在左侧，同时将侧边栏置于右侧。侧边栏中包含了非主要但仍然相关的内容，包括每日摘要，标签以及指向“关于我们”和“使用条款”的链接。

medium以前的布局是F模式的示例

现如今，Medium 已经不再使用带有图片预览和大标题的经典模式，而取而代之的是，新博客文章以列表的形式显示，因此它们将用户的注意力吸引到文章的作者，而不只是图片预览上。

-Z模式

由于 Z 模式涵盖了包括视觉层次结构，内容结构和 CTA 在内的重要方面，因此被非官方认为是着陆页面之王。与更适合于文本或内容密集页面的 F 模式不同，Z 模式以最小的复制量有效地吸引了用户对目标页面的注意。你可能已经猜到，该模式代表了用户眼睛的 Z 形运动。

简约的界面可以从Z模式中受益，以一致的布局和视觉上令人愉悦的内容结构使用户满意。

使用 Z 模式进行设计时，需遵循以下结构：

· 顶部的水平线应包含醒目的内容以及徽标和导航栏之类的元素（以便用户快速访问网站页面）；

· 遵循经典的讲故事方法，对角线应该向用户介绍主要内容，包括主要副本，引人注目的图片，幻灯片等；

· 最后，较低的水平线应具有 CTA（行为召唤），它可以刺激用户执行某些操作，例如注册，订阅或进行购买。

 图文结合的设计类型 

图文结合的设计顺序可以概括为4种，左图右文、左文右图、上图下文、上文下图。不同产品跟据其所表达侧重点的不同，以此来选择对应的排列方式。

-左图右文

将文字与图片分别排列在版面的左边与右边，从而形成左图右文的排列形式。相较于文字来讲，图片拥有更强的视觉号召力。该种排列形式在很大程度能使版面产生由左至右的视觉流程，并由此产生的流程正好与人们的阅读习惯相符。在结构上带给观者一种顺遂、流畅的视觉感受。

左图右文的排列形式大部分被用在购物、房产、出行、美食点评 APP 等应用中。主要以图片内容引发用户兴趣，让用户能够更直观地了解到商品的信息，帮助用户更快地找到想要的商品。这也与我们实体店购物体验的情景一致，先被商品实物、包装吸引，再根据标签上的价格等最终决定是否购买。

-左文右图

与左图右文相反，将之前的图文位置进行对调，还可构成左文右图的编排形式。在实际的创作中，借助图片的视觉引力，使画面产生由右至左的视觉流程，由于该视觉流程与观者的阅读习惯恰好相反，因此左文右图的编排形式能在视觉上给人带来一种新奇感。

左文右图的排列形式大部分被用在资讯推荐、新闻阅读类 APP 等应用中。主要以文案为主，图片的重要性次于文本，只是辅助用户理解。

-上图下文

分别将图片与文字置于画面的上端与下端，从而构成上图下文的编排方式。通过将文字摆放在图片的下方，从形式上增强它们之间的关联性，同时借助特殊的排列位置，还能增强文字整体给人的视觉带来的安稳、可靠的感受，从而增强顾客对版面的信息信赖度。

上图下文的排列形式大部分被用在视频网站、旅游网站、图片社交等应用中，还有国外的一些电商平台也会采用这种形式。主要是为了体现了图片的重要性，如下图就是靠图片吸引用户，文字仅起到辅助作用。通过上图下文的版式布局，使版面呈现出舒适、自然的视觉效果。

-上文下图

将文字与图片分别排列在视图的上部与下部，从而构成上文下图的排列形式。设计者将图片要素摆放在视图下端，以使它的视觉形象变得更加沉稳，与此同时，排列在图片上方的文字则在视觉上给人带来一种上升感，我们可以借助两者之间的呼应关系，以增强版面整体的表现力。

上文下图的排列形式大部分被用在资讯文章中的多图、短视频、社交等呈现类的应用中。主要是为了突出文字信息，因此在设计的时候通常会将标语或者概括性的语句摆放在上方，通过简洁明了的文字信息，打造出具有生气的版式效果。同时运用硕大的文字字号来强调标题在版面中的重要性，达到强调标题内容的目的。

图文结合的标志设计最重要的就是统一视觉风格，鲜明的图形和清晰的文字组合使标志所传达的信息、意义更为快速、明确。如何选择组合方式还得根据各自产品的具体情况来做出最优化的设计，这样才能突出各个方案的优势。

相关引用

-书籍《版式设计原理与实践》

-https://speckyboy.com/annoying-ui-changes/

-图片来自网络

欢迎关注作者公众号：微信搜索“UX辞典”，获得更多UX设计干货