您的位置:首页 > 设计资讯 > 平面设计 > 内页

UX设计:如何提升界面设计的可读性?

核心提示: 可读性和易读性这两个概念非常相似,以至于很多设计师把他们混作一谈,但这两者本质上是不尽相同的。

4. 一个段落一个重点

前面已经说过了,现在用户的阅读习惯就是浏览内容。因此,为了方便用户可以快速浏览重要信息,切勿使用大篇幅段落。

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

 

5. 使用数字

Nielsen Norman曾在博客中分享过一个有趣的现实:根据用户在扫描网页时进行的眼动跟踪研究,人的视线在遇到数字时通常会停滞不前,并驻足观察,即使这些数字夹杂在大片文字中间。

人在潜意识中会将数字与某种事实、统计数据、物体大小以及空间距离等信息关联起来,而这类信息通常也就是他们想要的内容。因此,写文案时直接使用阿拉伯数字是一个不可忽视的小技巧。

UX设计:如何提升界面设计的可读性?

环保社区网站设计:使用数字作为设计布局的一部分,这种方式可以引起用户的关注

 

6. 列表

使用带有数字或项目符号的列表可以增加内容可读性,原因很简单,列表可以清晰地罗列信息,组织结构,因此很是吸引用户注意力。

 

7. 突出重点信息

使用加粗、斜体、文字颜色等手法来突出显示某些内容,这已经是非常广泛的做法,却始终受用。当你的文本内容中有某一点需要读者特别注意,就可以突出显示。此外,锚文本也要突出显示,告知用户这个内容是可以点击的。常见的做法有加下划线、设置文字颜色或者加粗。

 

8. 对比

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

 

9. 使用常规字体

选择字体时,设计师们总想尝试一些原创又精美的字体。这个想法是对的,好看确实很重要,但是保证可读性更加重要!但这两者的关系倒不是鱼与熊掌那样不可兼得,如果既想使用一些特别的字体,又要保证可读性,排版就显得愈发重要了。

一般来讲,Sans-serif字体更易读,而衬线字体看起来会更优雅。对于一些标语而言,即使使用相对复杂的字体也不会破坏可读性,因为标语的内容是极简短的;但如果是一段话,使用非常规字体就可能是另一番体验了。

此外,配色的选择也是一个重要影响因素。例如,深色背景上的文字就需要更多的留白,因为深色会吸光,而浅色背景则没有这个问题存在。

UX设计:如何提升界面设计的可读性?

招聘艺术家网站设计插图:此登录页面的标题使用了衬线字体Domaine,它在视觉上和插画相得映彰;正文段落则使用了高度可读的无衬线字体

 

10. 留白

如果元素之间没有足够的留白空间,可读性会变差。尽管许多用户无法明确意识到这个问题,但无合理留白的设计确实会对用户的眼睛和大脑造成压力。留白和音乐中的停顿有异曲同工之处,给出空间,给出缓冲和思考的时间,从而让内容更加易读。

 

11. 分段

最常用的内容分段办法就是使用副标题、水平分割线或者或垂直分割线。分段可以帮助用户轻松地将不同的元素分开,并在统一的布局中了解它们的相互联系。第10点中提到的留白也可以用于分段,此外,还可以使用图片做隔断。

使用图片来进行内容分段乍看似乎不合逻辑,但是图片确实有助于使内容更清晰可读。在文章中插入图片,图片就成了一种更加好看的分割线,既可以说明上下文内容,又可以分隔文本的不同部分,承上启下。

此外,插入图片还可以让用户有短暂的放松感,尤其是在阅读长文的时候,图片可以很好的缓解用户内心焦虑。当然,你还可以使用各种插图、照片甚至3D图形,相比起文字内容,它们都更具吸引力,并且识别速度更快。

总之,插入图片是一种非常棒的办法,它还可以根据上下文语义刺激用户点击。现在很多的网站设计,都会使用相关性的大图搭配文本内容,相互补充,相互成就,营造出一种大气蓬勃的设计感。

 

12. 合理利用大写

对于英语国家的人而言,使用大写来标记文本层次结构依旧是一个重要手段,这也是为什么关于使用句首字母大写还是词首字母大写的话题已经被讨论了无数次的原因。

关于大写的用法,要注意以下几点:

  • 词首字母大写:标签、CTA,菜单以及页面标题
  • 句首字母大写:较长的文本,例如页面或字段描述以及工具提示
  • 全部字母大写:但仅适用于非常重要的内容,比如简短的标语,品牌名称,网站的核心导航点,简短的CTA按钮文字以及OK的缩写等等。

但无论你怎么选择,都要记住一点:保持统一。如果按钮使用了全部字母大写,那么每个页面的按钮都要这么做了。

UX设计:如何提升界面设计的可读性?

 

文章源自 设计联盟 www.DesignLinks.cn 中国最具影响力的创意设计综合网站

编辑:红动天下

搜索推荐
设计联盟官方微信
设计联盟官方微信
微信公众号:designlinks
扫一扫 订阅最新资讯
回到顶部