恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
UX设计:如何使用户界面易读
0.0°
2019-12-29 自译外文 经验/观点 原作者: tubik博客 举报 1228 3 1 0

您为什么要阅读所有这些内容?原因很简单,但很大:如果应用程序用户或网站访问者看不清楚内容,就不会阅读它们。

什么是数字内容的可读性和可读性?

让我们从基础开始,定义易读性和可读性的现象。尽管设计人员经常将这些术语用作同义词,但实际上,它们与用户对内容的感知不同。

内容的可读性集中于人们如何看待内容以及如何将元素彼此区分。因此,从这个角度来看,您要处理人们如何查看页面或屏幕上的内容,区分其元素并对其进行识别(例如,字符,单词,句子,数字等)。基于此,我们可以说易读性更多地是关于视觉内容的呈现,使内容变得可食用,并使用户可以快速了解页面或屏幕上的内容。

至于可读性的定义,很容易以现象的名义找到:可读性是对书面内容的理解的容易程度。按照其经典理解,可读性是对文本内容理解的下一个层次。它涉及单词和句子的简单性,思想的清晰性,信息的易用性以及文本块的可理解的结构。

无论如何,近来UX设计人员经常对可读性进行更广泛的理解,将视觉性能和文本本身的清晰度结合起来:该术语通常用于定义人们如何轻松区分文本的不同元素,而易读性则集中于区分文本中的特定字符和符号。特定字体的特定单词。无论您对这些术语使用什么含义,它们始终与一件事结合在一起:用户如何查看和阅读您的内容。


影响可读性和易读性的因素

有许多因素会影响内容的可读性和可读性。让我们回顾一下与设计过程直接相关的内容。

背景

与印刷书籍和报纸一样,在数字界面中,背景色对阅读和区分交互元素和内容的能力有很大的影响。例如,类似于在不同背景上感知的物理对象,在白色或浅色背景上显示的黑色副本似乎比在深色背景上的白色副本大。错误的配色方案可能会导致可读性差,进而导致糟糕的用户体验:用户无法扫描数据,甚至更多。即使数据相关但不可读,用户仍会感到无法理解的紧张状态发短信甚至错过一些重要信息。

如果设计者研究不同背景下的复制感知的特性并仔细选择字体,则任何颜色方案都可能足够可读。界面中呈现的内容的性质也起到了一定作用:旨在阅读的基于文本的界面是核心活动,因为它倾向于使用基于浅色背景的更多配色方案,而基于图像的界面通常应用深色背景来增强图片性能和给他们更深的眼光。

Travel Planner应用程序使用浅色背景,即使在旅途中也可以阅读副本内容。 

Tea Club网站的网页用颜色分割屏幕,并在浅色背景上复制内容。 

书店网站的页面基于深色背景,因此字体,大小和对比度的选择不同,以确保可读性 


版式

从根本上讲,排版是文本内容的外观。字体的选择直接影响用户感知和解码副本的速度和便捷程度。字体大小,宽度,颜色和文本结构–每个特定点都很重要。此外,字体,图像以及字体还可以通过其视觉样式为书面消息增添气氛。设计中的排版是平衡美学文字和快速阅读能力的艺术-此游戏并不像您想象的那么容易。

在使内容清晰的方面,有几个影响点,例如:

  • 空白空间(负空间):设计构图中元素之间的区域
  • 对齐方式:放置和对齐文本
  • 跟踪:调整用于形成单词和文本块的一组类型字符的空间
  • 字距调整:调整两个字符之间的间距
  • 前导:文本基线之间的间距
  • 行长:在一块文本中用于一行的字符数。

设计人员根据提到的特征来调整文本的性能,使其不仅令人赏心悦目,而且易于阅读。单词之间没有足够的空间,线条或字母之间的距离太小,字体大小或颜色太小而无法与背景形成对比-所有这些东西使文本难以阅读,并且使用户感到紧张通常甚至无法解释出什么问题。行的平衡长度使用户更容易阅读和消化大量文本。这就是为什么设计师在创作过程中非常注意版式问题的原因。 


在《自然百科全书》应用程序中,设计人员选择可读的无衬线字体,以使文本易于阅读。此外,对于具有更多文本的慈善页面,背景将更改为浅色。这种对比既提高了可读性,又标志着屏幕的不同性质和目标。 


视觉层次

视觉层次结构是一种内容组织的方法,可以使内容优先级明确。它基于格式塔理论,涉及对元素视觉感知的心理学,并展示了人们如何趋于统一视觉元素。它组织UI组件,以便大脑可以根据对象的物理差异(例如大小,颜色,对比度,样式等)区分对象。

进入网页用户不会开始按原样阅读所有内容并不是秘密,他们从扫描开始它。例如,当我们在博客中看到该文章时,我们将首先获得标题,然后是副标题,然后才是复制块。这是否意味着复制块中的信息的重要性较低?不,一点也不,但是通过这种方式,用户将可以扫描标题和子标题,以了解该文章对他们是否有用和有趣,而不是尝试阅读所有文本。并且,如果标题和副标题正确完成并告知用户文章的结构和内容,这将是令人信服阅读更多内容的因素。另一方面,如果用户看到庞大且冗长的文本,他们将感到害怕,因为他们不知道阅读文章需要多长时间,以及是否值得投入时间和精力。


因此,对于文本内容,逐渐呈现信息至关重要。对于复制,我们讨论的是印刷层次结构,其中包括不同的元素,例如标题,副标题,正文复制,号召性用语,标题等。为了建立有效的视觉层次结构,所有元素都需要细分为不同的层次。

初级水平。 它包括头条新闻中最大的类型。它旨在提供核心信息或引起人们对主要利益的关注。

中学水平。 这是支持可扫描性的元素类型,例如可帮助用户快速浏览内容的副标题或标题。

第三级。 这是用于正文和其他数据的。它具有相对较小的类型,但仍应保持可读性。

负空间

负空格(或空白,也称为空白(留白))是版式的空白区域。它可能不仅在您放置在布局中的对象周围,而且可能在它们之间和内部。负空间是页面或屏幕上所有对象的呼吸空间。上面已经提到它是有效排版的因素之一,但是在一般用户界面布局中设置文本和非文本元素之间的连接也很重要。例如,负数的空间将帮助您查看文本和图片是否与一条消息相连,例如在图像标题的情况下


写作

正如我们最近在有关UX写作的文章中所讲的那样,界面中的文本内容基于4个基本功能:

  • 清晰  (用户理解您在说什么,核心信息没有模糊或复杂)
  • 简洁  (一段文字有意义,简洁且专注于目标,不包含空谈)
  • 有用  (副本为用户提供了必要的信息或有助于进行交互)
  • 一致  (一种数字产品的界面内的副本保持相同的样式,音调,语音和术语)。

对于应用程序用户,网站访问者和博客读者而言,使用书面内容可以做的一件好事就是营造类似于人的交流氛围。使您的界面,登录页面或电子邮件像一个乐于助人且友好的人,以清晰的风格和沟通的声音进行交谈,而不会试图使对话者感到敬畏和震惊。

更好的可读性和易读性的提示

1.界面副本要简短一致

确定操作的主要术语和名称,并在消息和通知中使用它们。例如,如果您选择了“删除”一词来标记特定的动作,则在每次需要执行此动作时都使用它,如果某些动作相同,则不要在某些屏幕上将其替换为“删除”。 。要求用户“付款”而不是“付款”-这更易于扫描,阅读更快,并且您可以使一个单词看起来比按钮显微镜的短语大。同义词和详尽的短语有助于使文章或书籍中的语言明亮生动,但它们可能会破坏用户体验,使用户无法找到同义词来代替它们仅使用产品来解决其问题。

2.应用内容个性化

个性化用户界面并使其更接近用户偏好的方法之一是让用户更改背景颜色并设置字母的大小。这种功能对使内容更具可读性具有重大影响,因为没有人比用户更了解什么对他们来说更方便。

Upper App允许用户选择最方便的主题颜色 

3.考虑分屏显示不同类型的内容

分屏在基于深色或明亮背景方案的界面中特别受欢迎。它采用了另一种方法来确保适当的可读性:将带有浅色背景的框或空间应用于核心数据块,设计师使内容更具可读性,并在屏幕或页面上添加优雅的对比度。

4.将一个想法放到一块文本中


在可扫描性方面处理内容时,请尽量不要使文本片段过长。如果信息对读者没有价值,则简短的段落看起来更易于理解,可以轻松跳过。因此,当您在一个段落中提出一个想法并开始另一个想法时,请遵循规则。

5.使用数字

Nielsen Norman博客

  分享了一个有趣的研究发现:基于用户在扫描网页时进行的眼动跟踪研究,数字常常使人流连忘返并吸引注视,即使它们嵌入了用户原本会忽略的大量单词中。人们在潜意识中将数字与事实,统计数据,大小和距离相关联-这可能对他们有用。因此,使用数字而不是文本数字会影响文本的可读性和可扫描性。

环境保护社区的网站设计使用数字作为设计布局的一部分,这种方式引起了对重要数据的注意。 

6.不要忘记列表

使文本更清晰易读的另一个好技巧是应用带有数字或项目符号的列表。它们有助于清晰地组织信息。而且,它们引起了用户的注意,因此信息不会在文本的正文中丢失。

7.直观地标记文本中的关键信息

文本中的粗体,斜体和颜色突出显示的单词或短语虽然很老套,但仍然可以成功使用。这样,您可能会引起对段落中包含的特定数据的关注。此外,必须在视觉上标记文本的  可点击部分(指向其他页面的链接)。我们经常看到它们带有下划线,但仍然用颜色或粗体突出显示它们会更加有效。


8.检查对比度

对比度直接影响区分文本元素并快速阅读它们的能力。对比度太低会导致文本元素合并成难以辨认的斑点,对比度太高会导致眼睛紧张并导致阅读困难。因此,首先,请记住有关颜色理论的知识,它将帮助您选择具有良好对比度的调色板,其次,在不同屏幕上测试界面以确保对比度在不同条件下均能正常工作

9.使用常识玩字体

选择字体时,设计师经常想应用原创而又精美的东西。没错:为了美观,可读性不应该受到影响。尽管如此,这并不意味着您应该放弃漂亮而吸引人的字体:印刷层次结构有助于充分利用它们。Sans-serif字体通常更易读,而衬线字体看起来更优雅。对于复杂的标语,使用大写字母的简短标语使用复杂的字体或实验字体,不会因复制内容的大小而影响其快速读取的能力。但是,如果为较长的副本片段选择它,则对可读性的影响可能会导致不良的用户体验。另外,请注意配色方案:例如,深色背景 吸收其他元素的部分光,因此元素之间应有足够的空白空间,这与在浅色背景上的工作空间不同。


10.给文本足够的空气

正如我们在有关用户界面中负空间的文章中提到的那样,如果元素之间没有足够的空间,则它们将变得难以阅读并且需要额外的精力。尽管许多用户无法解决问题,但这可能是眼睛和大脑紧张的强烈原因。适当数量的负空间(尤其是微空间)可以解决此问题并使过程更自然。因此,负空间直接影响页面或屏幕上的排版效率。在音乐中,暂停起着与声音相同的作用。在阅读中,其工作方式相同:正确放置空格使文本更易于阅读。

11.划分内容块

划分内容块的一种自然方法是使用副标题或使用水平或垂直线的传统分隔符。通过这种方式,读者或用户可以轻松地将不同的元素分开,并在一种布局中了解它们的相互联系。前面提到的负空间也可以有效地用作分隔符。另一种方法是使用图像。乍一看似乎不合逻辑,但图像确实有助于使内容可读且清晰。例如,在文章中使用它们时,它们充当了优雅而内容丰富的分隔符,既可以说明文本内容,又可以分隔文本的不同部分。使用图片,您可以使用户在阅读时得到短暂的休息,甚至长篇文章看起来也不会像没有图片时那样令人不知所措。插图,照片和3D图形比文本更快地吸引了用户的眼球,并且解码速度更快。因此,图像可以用作方向提示,并可以将用户导航到以文本形式呈现的消息或号召性用语。另外,建议使文本与页面或屏幕上的关键图像和谐地协同工作:这样,它们可以相互放大效果。

12.利用标题的力量

尽管有很多关于使用句子大小写而不是标题大小写来使文本显得更加随意的讨论,但是对于英语使用者来说,它仍然是语言的自然特征,它标志着文本层次结构的层次。因此,请考虑以下有关大写的提示:

  • 使用  标题样式上限  标记字段标签,操作,菜单项和页面标题
  • 选择  句子样式上限  以获取更长的副本,例如页面或字段描述和工具提示
  •  适度应用  ALL-CAPS,仅适用于非常重要的项目(简短的标语,品牌名称,网站标题中的核心导航点  ,简短的号召性文字和OK之类的缩写)。

无论您做出什么选择,真正重要的是:保持一致。如果决定对所有按钮使用标题大小写,请在所有屏幕上遵循该规则。

Health Blog的着陆页使用全大写字母表示按钮的显微镜和标题元素,标语中的标题大小写,描述中的句子大小写。 

当然,可以对所有提到的问题进行更深入,更深入的讨论,并揭示出更多方法来增强页面或屏幕上内容的清晰度。仍然希望,今天的文章将成为有用的清单,以帮助UX设计人员使界面不仅美观而且易于阅读。 


作者:Tubik 
链接:https://tubikstudio.com/ux-design-readable-user-interface/
译者:Alibaba小方,公众号「小方的设计笔记」
本文由 Alibaba小方 小方翻译发布于UI中国,未经许可,禁止转载!




Powered by Froala Editor

更新:2019-12-29

收藏

3人已收藏

小方的设计笔记

爱与设计不可辜负

  • 35

    作品

  • 86

    粉丝

  • 57

    关注

  • 你好·2021-UI新趋势设计杂集
  • 2020 UI/UX设计作品集总结
  • 第三季度关于产品设计、用户体验、UI等笔记整理
  • 增长思维做设计—7种方法提高功能入口点击率

    猜你喜欢

      2019-12-29 自译外文 经验/观点 原作者: tubik博客 举报 1228 3 1 0

      UX设计:如何使用户界面易读

      0.0°

      你确定要举报UX设计:如何使用户界面易读

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年12月29日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      1
      3
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录