作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
维Banjanin的头像

维Banjanin

Nemanja是一名设计师,他创造了独特且视觉上吸引人的UI/UX. 他领导着以用户为中心和结果驱动的大型项目.

工作经验

11

分享

产品设计师经常在短时间内传达大量的信息. 那些理解“可扫描性”这个词的人,常见的眼球追踪模式, 现代设计原则更适合创造易于消费的内容和“粘性ui”.”

每天,互联网都在扩展新的应用程序、网站、文章等等. 吸引信息过载的用户的注意力变得越来越困难,他们发现从不相关的内容中过滤出相关的信息是一项挑战. 市场营销专家 大卫郑 发现在过去 60%的情况下,访问者会在不到15秒的时间内放弃并离开网站.

研究表明,用户实际上并不是逐字阅读他们看到的所有内容——他们先浏览一下,然后再决定这些材料是否值得他们花时间阅读. 通过使适当的内容立即可扫描, 产品设计师可以将短期访问者转化为长期用户. 以下是一些UI设计的最佳实践,它们有助于放大可用性设计中经常被忽视的重要因素: scannability.

UI设计最佳实践的失败与成功

什么是可扫描性?

UX专家 是由尼尔森诺曼集团进行的 研究 来回答这个问题:人们是如何在网上阅读的? 他的发现很简单. 他们不.

该组织发现,只有16%的首次访问网站的人可能会逐字阅读. 另外84%的人会快速扫描钩子元素, 比如标题, 句子, 图片, 或者动画,然后再决定深入挖掘材料. 这种行为并不局限于数字界面. 例如,人们很少阅读报纸上的每一个字. 相反,它们扫描相同的元素——标题、图像等.-决定什么值得他们花时间.

因此,可扫描性是布局内容的方法,因此易于扫描. 通常只有很短的时间才能在屏幕上用有价值的内容打动访问者, 充分优化用户在网络上阅读的界面是至关重要的. 数字产品是否是一个网站, 应用程序, 或者其他类型的用户界面, 可扫描性是最重要的因素之一 用户友好的设计.

招聘美国全职自由UI设计师

可扫描界面的好处

确定数字产品可扫描性的理想方法是从用户的角度观察它,并回答以下关键问题:

  1. 页面的内容是否符合受众的期望?
  2. 页面的主要信息是否易于在短时间内理解?

虽然可扫描的界面需要努力制作, 从长远来看,它会创造出一个具有粘性的UI设计. 尼尔森诺曼集团的研究表明,针对可浏览性进行优化的页面在以下方面变得更加有效:

  • 用户完成任务的时间更快
  • 用户可以很容易地定义内容是否适合他们
  • 用户在回忆中犯的错误更少
  • 用户可以更好地了解页面的结构
  • 网站在可信度和内容质量方面获得了更有利的主观评分
  • 跳出率降低
  • 回访的可能性增加了
  • 搜索引擎优化(SEO)得到改善

Airbnb

用户习惯在扫描模式中的作用

每个人消费内容的方式都不同. 然而,通过研究,明确的眼球追踪模式已经出现. 了解用户在最初几秒钟内如何与界面交互可以帮助设计师优先考虑内容, 将重要信息放在主要可见区域, 并建立一个强大的视觉层次.

从眼球追踪热图中得出的扫描模式

根据 尼尔森诺曼集团, 用户扫描界面有七种常见模式:

  • 著名的F型: 在它被发现12年后,这种模式仍然是最常见的扫描模式——即使在 扫描移动接口. 眼睛水平移动,这是阅读时的典型特征,然后跳到下面的内容. 这可以缓慢而系统地完成,也可以通过点状热图快速完成.
  • Z模式: 锯齿形模型在信息呈现统一、视觉层次较弱的网页中是典型的.
  • 层饼图案: 用户在浏览标题和副标题时遵循这种模式,以快速确定他们要查找的信息在页面的什么地方(以及是否)可以找到.
  • 发现模式: 创意人员通常遵循这种扫描模式, 他们跳过大块的文本,扫描视觉组件,如颜色, 形状, 并将异常比例化以找到特定的信息.
  • 标记模式: 就像舞者在旋转时盯着一个物体保持平衡一样, 在滚动时,用户的眼睛会集中在一个地方——这是移动用户体验中非常常见的模式.
  • 绕过模式: 当列表中的多行文本都以相同的单词开头时,用户会故意跳过一行的第一个单词。.
  • 承诺模式: 这是一种罕见的模式,只有当用户对内容非常感兴趣并有动力消费所有内容时才会出现.

用户所采用的模式主要与访问网页的动机有关:他们在寻找什么类型的信息? 他们愿意花多少时间去寻找它? 有没有其他网站可以更快地提供这些信息?

通过用户研究和扫描模式传递价值

Dr. 唐纳德·诺曼,认知科学研究者,他创造了"以用户为中心的设计,写道:“, 他说:“仅仅制造功能齐全的产品是不够的, 这是可以理解和可用的, 我们还需要制造能带来快乐和兴奋的产品, 快乐和乐趣, 是的, 美丽的人的生活.”

用户研究 是以用户为中心的设计和UI设计最佳实践的基石. 随后,为了提高数字接口的可扫描性 设计师 必须了解最终用户. 当UI模式从最终用户的角度设计时, 一种自然而直观的体验就产生了.

有效的解决方案不是由抽象组成的. 以下是一组美观、实用、可持续的数字产品. 每个设计团队都定义了主要受众, 使用眼动追踪模式, 并设计了内容布局,以产生粘性的UI.

Instacart

Instacart 通过他们的UI设计模式利用以用户为中心的设计. 他们的用户中有很大一部分是老年人和有视觉障碍的用户, 因此,这些项目被列在一个高对比度的网格中,并明确强调了主要的cta. 该设计允许斑点图案扫描模式,以适应长期的游客.

Yelp

Yelp 为用户搜索绝对最好的餐馆,购物,夜生活,食物等. 人们可能会根据自己的个人标准和彻底的研究来评估评论, 使F型成为最适用的扫描模型. Yelp, 因此, 以易于浏览的方式呈现内容, 强调特定的元素,比如评级, 图片, 和地址.

Airbnb

Airbnb 可以说是最受欢迎的应用之一,这在很大程度上要归功于他们的用户研究. 因为他们知道他们的用户经常在线 移动设备,他们设计以适应标记模式. 干净直观的界面布局是为了强调大, 全幅公寓图像. 他们有意将每个屏幕的封面图片数量限制在两张,这样用户就可以合理地投入时间,看看这个列表是否吸引了他们的眼球.

粘性UI是通过战略性地放置UI设计元素来实现的

在提高数字产品的可扫描性时,需要记住的一个因素是定义可以查看产品的设备类型. Airbnb的移动平台获得了可观的流量. 正如拇指使用的热图所示, Airbnb策略性地放置了最常用的UI元素, 比如“探索”和“保存搜索”,,在滚动和扫描时可以轻松访问.

提高可浏览性的UI设计最佳实践

创建一个合适的视觉层次结构

视觉层次结构 数字界面的设计是指用户界面的排列和呈现 设计元素 传达重要程度,以便用户可以快速浏览所需的信息. 在设计具有适当视觉层次的布局时,有几个因素:

  • 大小
  • Color
  • 对比
  • 接近
  • 对齐
  • 负空间
  • 重复

通过在创建UI布局设计时考虑这些UI设计模式 设计师 将确保最终产品有一个伟大的外观,和谐,直观可扫描的布局.

谷歌

谷歌的搜索结果页面使用了所有的视觉层次因素来增加可浏览性. 标题通过使用颜色、大小以及随后的对比度来强调. 每个标题周围的负空间有助于它成为用户浏览的第一件事.

当用户找到相关标题时, 他们可能会检查链接的可信度——一个由于颜色和接近度很容易识别的元素. 下一个, 以便更好地评估结果, 他们会深入研究颜色一致的内容副本, 大小, 和距离. 除了这些因素, 重复和对齐使得谷歌搜索结果通常很容易扫描.

利用负空间

杰出的德彪西曾经说过:“音乐是音符之间的空间.同样的观点也适用于可扫描性负空间 元素之间是布局成功的关键. UI元素周围适当的负空间(白色)将焦点放在元素本身. 它强调了内容,并提供了必要的喘息空间,以确保布局不会显得杂乱. 没有呼吸的空间, 人类的大脑不太可能扫描感兴趣的点,更容易感到困惑.

文本布局反映了用户在网络上的阅读方式

使用副标题来总结内容

人们通常会对大段文字做出负面反应. 这可能会引发这样的假设:如果段落不符合他们的兴趣,他们就会浪费时间. UI设计最佳实践为这个问题提供了解决方案. 在长篇文章的开头加上简短的副标题, 用户对主题有最终的洞察力.

在写副标题的时候,切中要害是很重要的. 简单地传达以下内容所提供的关键信息.

创建项目符号和编号列表

人类的大脑是非常系统化的——它观察内容,然后将其分成有意义的单元. 因此, 用户更容易理解项目符号或编号列表,而不是将几个要点合并到文本段落中.

列表创造的负面空间让用户更容易浏览, 因此,仔细寻找机会是有益的. 如果一篇文章中有两个以上的点彼此平行,并且每个点不超过两句话来描述, 这是一个强有力的候选名单. 尼尔森诺曼集团甚至提供了更多 洞察力 创建项目符号数字内容.

可视化内容

现代数字用户天生是视觉的,并不总是可能对文本内容有很好的反应(即使它是完美的结构,并遵循了理想的可扫描性的所有UI设计技巧)。. 外部环境永远是一个因素. 因此, 以抵消文字过多的布局, 图像和图形的使用提供了信息和情感上吸引人的视觉休息. 俗话说,一幅图胜过千言万语!

原创的视觉效果(插图,引人入胜的照片等).)可以很容易地抓住用户的注意力,并支持一般的风格概念. 更重要的是,它们可以改善视觉层次,使文本更容易消化. 然而,如果使用不当,图形可能会产生相反的效果,这是有危险的. 在将关键理念转化为图像之前,有一点很重要 设计师 完全理解他们正在设计的内容.

苹果遵循UI设计技巧来创建视觉层次

适当强调cta

大多数数字体验都是为了激发用户的特定行为. 尽管CTA按钮通常看起来很简单, 它们被策略性地设计用来帮助用户完成一个动作,比如购买, 放入篮子, 或者直接转到另一个页面.

UI设计最佳实践 建议将CTA定位在描述动作的内容附近, 为用户提供直观的体验. 一种检验CTA是否均衡的有效方法, 彩色的, 而定位是暂时将最终设计转换为灰度. 如果CTA仍然清晰可见,那么粘性UI就做得很好.

Uber使用简单的UI设计模式来制作有效的cta

可扫描性的重要性

有很多因素决定了UI布局设计是否会受到人们的欢迎,比如内容相关性, 竞争对手的解决方案, 以及业务逻辑. 根据 《欧博体育app下载》,可扫描性可能是内容营销中最容易被忽视的因素. 通过创建可扫描的内容,短期访问者可以成为长期用户.

可浏览的内容向最终用户展示了他们的时间是有价值的,并提供了通过简单地浏览布局设计来理解核心信息的机会. 病毒博客和新闻学教授 金姆·凯勒 向设计师指出:“你是在与你想成为客户的人开始对话. 这是一段感情,如果你们不花时间在一起,任何感情都无法维系. 尊重他们的时间,让它有价值.”

了解基本知识

  • 什么是UI模式?

    UI设计模式是用于可视化用户界面设计的UI设计最佳实践的集合. 它们为产品设计师面临的常见问题提供了指导. 它们指示如何处理通知等元素的设计, 画廊, 用户聊天, 以及其他常见的UI设计.

  • 什么是用户体验模式?

    UX设计模式是设计的用户体验的最佳实践的集合. 它们为产品设计师面临的常见问题提供了指导. 结合UI设计模式, 它们为用户体验中的交互提供一致性和熟悉度.

  • 眼动追踪的用途是什么?

    眼动追踪有很多用途,尤其是在心理学研究中. 在用户体验设计中,眼动追踪指示用户如何在设计中移动. 眼球运动反映了用户的思维过程,否则很难表达出来. 它通知布局设计创建粘性UI.

  • 什么是可扫描的内容?

    简单地说, 可扫描的内容是文本和图像的布局,用户一眼就能快速阅读. 这是通过内容的战略性布局来实现的. 它创造了粘性UI,并在UI设计最佳实践中使用,有效地将短暂的访问者转变为长期用户.

就这一主题咨询作者或专家.
预约电话
维Banjanin的头像
维Banjanin

位于 巴尼亚卢卡,塞族共和国,波斯尼亚和黑塞哥维那

成员自 11月19日

作者简介

Nemanja是一名设计师,他创造了独特且视觉上吸引人的UI/UX. 他领导着以用户为中心和结果驱动的大型项目.

Toptal作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.

工作经验

11

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

Toptal设计师

加入总冠军® 社区.