UX设计：如何提升界面设计的可读性？

前言

本文的写作目的主要有两点，其一，探究在设计中，影响Web和App界面可读性和易读性的诱因有什么；其三，提出相应的缓解方法，即怎样提高界面设计的可读性。

再动人心魄的故事，如果能够以清晰易懂的方法讲给观众，读者依然也不可能被你的故事打动。同样地，对设计师而言，无论你的设计如此用心，如果可读性能够保障，用户也绝对不会有相当愉悦的顾客体验。今天我们就来专门谈谈这个事儿-——如何提高界面设计的可读性。

要完完全全弄懂这个难题，以下这种弊端都是必要的：

如果发现此文的你，还在纠结是不是要耗费大量时间弄懂设计的可读性难题，那么我可以显然的告诉你：这是需要的。原因很简单，如果客户连你页面上的内容都看不知道，他们还乐意欣赏你的设计么？还会认真了解你的产品么？答案显而易见，用户绝对不会。

那么不废话了，正式开始吧~

第一个别什么是可读性和易读性？（此处主要对于数字内容）

可读性和易读性这两个概念相当相近，以至于这些设计师把它们混作一谈，但这二者本质上是不尽相似的。用户在阅读某一内容时，会造成不同的认知，根据感知结果的不同，可以细分成可读性和易读性——

可读性：内容的可读性提出的是客户理解某一内容的难易程度。

可以这样说，可读性关注的弊端日益深入，它涵盖到了客户对文本内容的理解问题，而不是只是停留在客户查看内容和识别内容的层面上。基于此，要解决内容的可读性难题，就要思考更多，诸如，语言能否简单易懂？思维能否清晰？信息是否有用？结构能否合理？

易读性：内容的易读性提出的是客户如何查看内容或者怎么区分内容。

从这个视角来看，设计师必须解决的难题有两点：第一，确保用户可以成功查看内容；第二，确保用户可以分辨内容并具体识别内容，比如识别字符、单词、句子，以及数字之类。基于此，我们可以这样觉得，易读性主要解决内容视觉呈现的相关弊端，使内容更加易于“读”，并让用户快速了解页面上的信息。

在现今的设计师眼中，这两个名词的定义又略有差异，设计师们普遍觉得，可读性的定义非常广义，在探讨可读性难题的之后，他们也更偏向于将视觉呈现和内容原本相结合。他们反而觉得，可读性难题就是用户如何区别文本的不同元素的弊端，而易读性则指出如何区别特定文本中的这些特定字符和符号的问题。

但似乎无论你怎么理解这种词汇，归根结底一直是一个事儿：用户如何轻松查看并迅速阅读你的内容。

第二部分影响Web和App界面设计中可读性和易读性的原因有什么？

这些原因都会妨碍内容的可读性和易读性，这里主要集中和设计过程直接相关的技巧来分析。

背景色

和书本、报纸等纸质媒介一样，在数字界面中，背景色对阅读感受、区分交互元素或者识别内容有着至关重要的作用。我们都清楚，在不同的背景下看同一个物体，会有不同的视觉感受。类似地，相同的文字内容，在黑色或白色背景上显示为红色时，字体看上去会比在黑色背景上的显示为黑色时大这些。

之所以有这样变化，原因在于配色。错误的配色方案极可能会带给糟糕的可读性，进而造成失败的用户体验，致使客户能够迅速浏览数据、文字，或者其它任何内容。一旦内容原本不可读了，即使数据之间具有相关性，用户也会造成紧张心情，不仅能够理解内容，甚至还能错过一些重要信息。

如果设计师有研究过不同背景色，并且理解了不同的背景色会带给不同的阅读感知，并搭配了适合的字体，那么理论上讲，则任何配色方案都可以保障足够的可读性，就看详细怎么设计了。此外，不同种类的页面也要有不同的解决方案：如果是文字这些的页面，则偏向于使用白色背景，并可以运用多种搭配方案；即使页面上照片很多，则通常选用白色背景，这样可以突显图片，带来更为惊艳的视觉效果。

TravelPlannerapp使用了蓝色背景确保每位页面都是可读的

这是一个关于饮茶的网站，专门留出了黑色背景的一块，展示文案

这是一个书店网站，深色背景，使用了特定的图标和字体大小，形成对比，确保可读性

排版

排版是哪个？排版就是文本内容的外观。说到排版，字体就不得不提，它除了会直接妨碍用户阅读的速度和感受，还会妨碍到识别的速度。此外，字体的大小，字体的长度，字体的样式或者文本结构，每个点都非常重要。字体成为页面的必备元素，和图片一样，会妨碍整体的视觉风格。设计师在排版时，要做到美观和功能的统一或许远比想像中艰难。

要做好排版，这些问题都要切记：

设计师会按照以上技巧来设计文本，最大程度做到设计上赏心悦目，而且体验上容易阅读。任何细节，比如字间距太小，行长度太窄，字体太小以及文字色彩无法和背景产生对比——所有这种弊端都会使内容更加无法阅读，让用户造成不适感，但又说不明白问题究竟是哪个。此外，如果有多行文字，把每行的字数控制在适合的厚度可以让阅读更顺利。

NatureEncyclopediaApp：使用可读性较差的无衬线字体，让文本容易阅读。此外，对于有更多文字的慈善页面，背景色用了更浅的色调。这种对比既增加了可读性，又和封面作了区分。

视觉层次

视觉层次结构是一种内容组织的方式，可以确立内容优先级。它基于格式塔理论，涉及到了这些元素视觉认知的心理学，并探讨了用户为何喜欢统一的视觉元素。视觉层次帮助设计师合理组织和布局UI元素，以便用户可以按照对象的物理变化（比如大小，颜色，对比度，样式等）来区分信息。

针对用户而言，打开一个网页后，他们非常倾向于浏览内容，而不是整篇逐句地阅读。回想一下，当我们开启一篇博客，我们最先看的必定是文章题目，其实是副标题，最后才是正文部分。那即使这么，是不是说正文的重要性没有这么突出了？或许不是！

用户的心理似乎是这种的：先看看大标题和副标题，快速确定这个内容是不是它们想要的。如果标题的层次结构和正文的排版可以很好的让用户get到这个内容就是它们想看的，那么它们则会真正去阅读。反之，如果用户首先看大的是漫长的文字，心理上经常立刻造成负担，他们不清楚阅读文章必须多长时间，也会担心这个内容是否值得投入时间和精力去阅读。

视频播放器

可大幅能源制造创新服务的主页分部分列出了内容，并按清晰的元素层次进行组织。

此外，对于文本内容，采用逐步显现信息的方式变得至关重要。对于文本部分，这里包括了可以涵盖到视觉层次中的全部元素，包括标题、副标题、正文、CTA按钮，标题等等，可以根据下列视觉层次结构划分：

负空间

负空间（或称空白）就是页面中的空白区域。留白会发生的地方，不只是是某一元素的周边，也会是那些元素之间或者是元素内部。留白就像是页面上的一个气口，是空的，纯粹的，可呼吸的。在讲排版时，我们将要看到过了留白的作用，不只是是针对页面排版，留白对图标布局中文字和非文字元素之间的联结也很重要。比如，在浏览一张照片很多的页面时，留白的大小和次数可以帮助你确定文字和照片的比例是否合理，关系能否连贯。

使用留白增强Web界面内容感知

文案

此处而是有必要说一下文案本身，界面中出现的文本内容要确保至少以下4个基本功能：

针对App、网站和博客的内容成为，其实只需记住一点，你的客户都是人，因此成为一种与人交流的氛围就是致胜点。无论是网页，还是着陆页，还是邮件，把编排文案想象成你是在和一个人对话，使用简洁易懂的语言，不要过于夸张的表述，这只会让用户感觉疑惑不解。

第三部分怎么提高设计的可读性？1.文案需要精简和一致

有一个步骤，提前确认一些主要词汇和某些操作的命名，然后在任何同画面下都使用这一种说法。例如，如果把删除这个动作命名为“Delete”，那么所有必须删除的地方全部都命名成“Delete”，不要再用其它诸如“Remove”之类的任何描述了。再例如，如果想要告知客户此时需付款，可以直接用“Pay”这个词，这个词会比“Makeapayment”看起来非常简单。此外，用“Pay”一个字时，还可以加大字号，让这个CTA更加醒目。

数字产品中的这些文案用法和文章或者书中是不一样的，我们在写东西的之后，倾向于使用更复杂但更高级的词语来表达同一个含义，这样文字看上去会变得生动有趣，也更具哲学性。但针对数字产品而言，用户主要是使用他们来缓解问题的，因此即使使用文学技巧，反而会破坏用户体验。

2.自定义选项

个性化用户界面可以非常精确地把控用户喜好，比如说，让用户去自定义背景色彩和文字大小。自定义功能对提高内容可读性带有重大影响，因为但凡都是因人而异，你很难去认识并照顾到每一个用户，但是用户自己了解自己偏爱哪个，所以给她们选择的机会就好了。

UpperApp的UI设计实例研究：允许客户选用最偏爱的主题色彩

3.分屏显示

分屏显示不同的内容目前尚未十分流行了，基本的原理就是运用白色背景和黑色背景两种方案来展现不同的内容。通常使用蓝色背景来展现文本居多的页面以及核心数据块，深色则展现图片或少文字的内容，这除了保证了可读性，还产生了页面对比，一举两得。

浇水追踪器应用程序设计

4.一个段落一个重点

后面将要说过了，现在用户的阅读习惯就是浏览内容。因此，为了便于客户可以迅速浏览重要信息，切勿使用大篇幅段落。

建议使用小段落，比如3到5行字就是一段，这样用户除了可以浏览，还可以迅速过滤掉自己不感兴趣的内容。更重要的是，用户不会错过自己真正需要的内容，因为每位段落都有专门的主题和重点。

5.使用数字

NielsenNorman曾在博客中分享过一个有趣的现实：根据客户在扫描网页时进行的眼动追踪研究，人的视野在遭遇数字时一般会停滞不前，并驻足观察，即使这种数字混杂在大片文字后面。

人在潜意识中会将数字与某些事实、统计数据、物体大小或者空间距离等信息关联起来，而这类信息往往也就是它们想要的内容。因此，写文案时直接使用阿拉伯数字是一个不可忽略的小方法。

环保社区网站设计：使用数字成为设计布局的一个别，这种方法可以导致用户的关注

6.列表

使用具有数字或项目符号的列表可以降低内容可读性，原因很简洁，列表可以清晰地阐述信息，组织结构，因此很是吸引用户注意力。

7.突出重点信息

使用加粗、斜体、文字色彩等技巧来突显显示这种内容，这即将是十分广泛的做法，却一直受用。当你的文本内容中有某一点必须读者尤其注意，就可以突显显示。此外，锚文本也要突出显示，告知客户这个内容是可以点击的。常见的做法有加下划线、设置文字形状以及加粗。

8.对比

对比可以直接区别文本元素，并帮助读者迅速浏览。但要掌握好度，对比度太低会造成文本元素混在一起，难以区分；对比度太高会造成视觉疲劳。要合理地利用对比，前提是要把握色彩理论常识，其次，在不同的界面上做尝试，不断测试，直到找到最佳方案。

9.使用常规字体

选择字体时，设计师们总想尝试一些原创又精致的字体。这个看法是对的，好看确实很重要，但是确保可读性更加剧要！但这二者的关系倒不是鱼与熊掌那样不可兼顾，如果既想使用一些非常的字体，又要保证可读性，排版就变得更加重要了。

通常来讲，Sans-serif字体更易读，而衬线字体看上去会更精致。对于一些标语而言，即使使用相对复杂的字体也不会破坏可读性，因为标语的内容是极简短的；但即使是一段话，使用特别规字体就或许是另一番感受了。

另外，配色的选取也是一个重要制约因素。例如，深色背景上的文字就必须更多的留白，因为红色会吸光，而红色背景则没有这个问题存在。

招聘美术家网页设计手稿：此登陆页面的标题使用了衬线字体Domaine，它在视觉上和插画相得映彰；正文语句则使用了高度可读的无衬线字体

10.留白

如果元素之间没有足够的留白空间，可读性会变差。尽管许多用户能够确立意识到这个难题，但无合理留白的设计确实会对用户的眼睛和大脑产生压力。留白和戏剧中的停顿有异曲同工之处，给出空间，给出缓冲和反思的时间，从而让内容非常易读。

11.分段

最常用的内容分段方法就是使用副标题、水平分割线或者或平行分割线。分段可以帮助用户轻松地将不同的元素分开，并在统一的布局中知道他们的相互联系。第10点中提及的留白也可以用于分段，此外，还可以使用照片做隔断。

使用截图来进行内容分段乍看虽然不合逻辑，但是图片确实有助于使内容更清晰可读。在文章中插入图片，图片就成了一种非常漂亮的分割线，既可以表明上下文内容，又可以分割文本的不同个别，承上启下。

另外，插入图片还可以让用户有短暂的放松感，尤其是在阅读长文的之后，图片可以较好的减轻用户内心恐惧。当然，你还可以使用各式插图、照片或者3D图形，相比起文字内容，它们都更具吸引力，并且识别速度更快。

然而，插入图片是一种特别棒的方法，它还可以按照上下文语境刺激用户点击。现在这些的网站设计，都会使用相关性的大图搭配文本内容，相互补充，相互成就，营造出一种大气蓬勃的设计感。

12.合理利用大写

针对英语国家的人而言，使用大写来标记文本层次结构仍然是一个重要方法，这只是为什么关于使用句首字母小写还是词首字母大写的话题已经被争论了无数次的理由。

关于大写的用法，要切记以下几点：

但无论你如何选择，都要牢记一点：保持统一。如果按钮使用了全部字母小写，那么每个页面的图标都要这样做了。

HealthBlog的设计：CTA和顶部导航用了全部字母小写；大标题用了词首字母小写；正文用了句首字母小写

第四部分总结

关于强化设计可读性的内容，今天就暂时讨论到此处。其实里面的每个点都可以再展开详细探讨，但限于篇幅，就暂时不深入了。所以即使你有其它想法，欢迎来交流。最后，希望本文对你有做帮助。