我们周围无论是线上还是线下每天都充斥着大量的信息。多亏了新兴科技和快速发展的互联网，人们消化的信息远比想象的多。在浏览大量网站和app时，人们不会逐字逐句地阅读——他们一开始通常只关注对自己有用的信息。所以怎样让用户可以快速浏览并发现关键信息对产品设计来说是很重要的。下文探索了这一现象并且就怎样能让网页更易于浏览给出了一些建议。
什么是易于浏览性
字典里”浏览“意为一瞥，或快速扫视。所以易于浏览性是作为排布方式让内容内容和导航元素更易阅读。在浏览网页的时候，特别是第一次浏览，用户会快速翻阅内容来分析什么是他们需要的信息。在这个过程中：文字、句子、图片或者动画都是元素。
顺便说，这个行为并不是用户的新行为：数十年以来，人们看报纸杂志都是先看最吸引他们的文章。而且，在屏幕上看文字对用户来说更疲惫，所以人们用屏幕浏览网站时会更偏向于浏览吸引他们的部分。
为什么这很重要？大约十年前 Jacob Nielsen 回答了这个问题 “人们怎么在网页上阅读？” 他简单说到：“他们更不不会再网页上逐字逐句阅读，他们会大致浏览一下页面，只挑一些单词和句子看。” 十年之后这种现象也没有改变很多：如果我们不确定那个网站是符合我们需求的，我们就不会花时间和精力去浏览它。因此，如果在第一分钟没有抓住用户的眼球，那么用户离开的风险会很高。无论网站的类型是什么，易于浏览性都是用户体验友好的重要因素之一。
我们怎么检查这个网页是易于浏览的？试着把自己当做首次使用者，问自己下面两个问题：
- 你在前几分钟看到的内容是否符合目标受众对此页面的期望？
- 你能在第一分钟或第二分钟了解页面上的信息吗？
如果你的答案不确定，那么是时候考虑加强页面的可浏览性了。精心浏览的页面会在以下几个方面变得更高效。
1）用户完成任务并且更快地实现目标
2）用户在搜索他们需要的内容时会犯更少的错误
3）用户可以更快地了解网站的结构和导航
4）跳出率降低
5) 留存用户的水平越来越高
6）该网站看起来和感觉更可信
7）SEO率受到积极影响
流行的浏览模式
UI设计师必须意识到眼睛的浏览模式是很重要的，它展示了用户在最初几秒内如何浏览网页信息。当你了解用户如何浏览页面或屏幕时，你可以优先考虑将用户需要的内容放入最明显的区域。
收集了关于用户动眼数据的不同实验，访客会如何扫描网页，有以下几种典型的模型：
Z字形浏览对于具有统一信息呈现和弱视觉层次的网页而言是非常典型的。
另一种是 zig-zag 图案，该图案通常用于具有视觉上分割的内容块的页面。 同样，读者的眼睛从左上角开始从左到右移动，并在整个页面上左右移动，以扫描这个区域中的信息。
另一个模型是 Nielsen Norman Group 在探索出的“ F ”字形，并研究出用户用以下方式浏览：
1）用户首先水平移动浏览信息，通常跨越内容区域的上部。 这个方式构成了“F"字母的上部分
2）接下来，用户稍微向下移动页面，然后在第二个水平移动中读取，该移动通常覆盖比先前移动更短的区域。 这个方式构成了“F"字母的下半部分
3) 最后，用户以垂直移动扫描内容的左侧。 有时这是一个相当缓慢和系统的扫描，在眼动追踪热图上显示为实心条纹图形。 其他时候用户移动得更快。在眼动追踪热图上显示的是斑点状图形。 这个方式构成了“F”的全字母。
提高可浏览性的技巧
1.使用视觉层次结构对内容进行优先级排序
视觉层次结构是以对人类感知最自然的方式在页面上排列和组织内容的方式。 它的主要目标是让用户了解每个内容的重要性级别。 因此，如果应用了可视层次结构，用户将首先看到关键内容。
例如，当我们在博客中看文章时，我们首先看到的是标题，然后是副标题，最后是正文。 这是否意味着正文的信息没那么重要？当然不是，但用户可以靠扫描标题和副标题，以了解文章是否对他们有用，而不是阅读所有文本。 如果标题和副标题完全告知了文章的结构和内容，那么用户阅读起来将会非常轻松。 另一方面，如果用户看到冗长的文本没有分成块，他们将会非常手足无措，无法评估阅读本文需要多长时间以及是否值得投入时间和精力。
下面是几个有助于建立视觉层次结构的元素：
1）尺寸
2）颜色
3）对比
4）相似性
5）负空间
6）重复性
所有这些都有助于设计师将文字、链接、图片等转换为页面布局中可提高浏览性的方式。
2.将核心导航放入网页头部
所有提到的眼睛浏览模式，无论用户用何种模式浏览，用户都会从网页的顶部水平区域开始。网站顶部通常是展示交互和品牌的关键区域。
另一方面，网站头部不应该放太多信息，太多的信息使得无法集中注意力。 因此，在特定情况下，必须分析受众的核心目标，再来确定什么信息放在网页顶部才是最重要的。 例如，如果它是一个大型电子商务网站，搜索功能必须显而易见，并且通常可以在网页顶部中找到。 对于小型企业网站而言，搜索功能根本不需要，但是直接看到企业能提供哪些服务是至关重要的。
3.保持负空间（留白）
负空间，或者通常称为空白区域，是布局的空白区域，不仅在布局中的对象周围，还在对象中间和对象的内部。 负空间是页面或屏幕上所有对象的一种呼吸空间。 它定义了对象的界限，根据格式塔原则在对象和负空间之间创造了必要的联系，并建立了有效的视觉表现。 在用于网站和app的UI设计中，负空间是提高可页面可浏览性的一个重要因素：如果没有足够的空隙，用户可能会错过他们真正需要的东西。太密集的布局会让用户的眼睛和大脑高度紧张。 适量的留白，有效缓解了这种紧张。
4.检查CTA按钮是否明显
显然，绝大多是网页为了让用户完成特定的操作都设计了CTA按钮。CTA 全称 Call-To-Action ，它是 Web 和 App 上的关键 UI 元素，例如购买，联系，订阅等，其主要目的是引导用户采取某些行动，使页面提升转化。在黑白模式和模糊模式下测试CTA按钮，如果按钮明显且易于识别，那么转化率就会高很多。
5.测试内容的可读性
可读性定义了用户阅读单词，短语和长文本的易读程度。 易读性衡量用户如何快速直观地区分特定字体中的字母。在长文本中应该仔细考虑字体的易读性。背景的颜色，文本的行间距、字间距，字体类型等所有因素都会影响易读性。 为了解决这个问题，设计师必须检查是否遵循排版法则以及所选字体是否支持一般的视觉层次和可读性。
6.多用数字
Nielsen Norman Group 的一项调查显示：在浏览网页的过程中，数字通常会更吸引用户的注意力。用户潜意识地认为数字与有用的数据相关联，因此用户会更注意包含着数字的词句。
7.列举条目
使文本更易于浏览的另一个方法是使用带有数字或项目符号的列表，它们看起来更加简洁明晰。 此外，它们会更吸引用户的注意，因此用户不大会漏看。
最后，提高网页的可浏览性， 就可以节省用户的时间和精力，为他们提供有组织，有价值和有吸引力的网页内容。
原文作者：Tubik Studio
本文翻译：Ever
原文链接：https://uxplanet.org/ux-design-practices-how-to-make-web-interface-scannable-2010125c710e
相关文章推荐：
网友评论