加入收藏 | 设为首页 | 会员中心 | 我要投稿 辽源站长网 (https://www.0437zz.com/)- 云专线、云连接、智能数据、边缘计算、数据安全!
当前位置: 首页 > 运营中心 > 建站资源 > 优化 > 正文

如何科学提高文本易读性?

发布时间:2017-10-10 01:16:32 所属栏目:优化 来源:金蝶云之家体验中心
导读:副标题#e# 排版设计是ui设计师的基本功。但或许是因为它太基本了,很多时候很多设计师都会直接忽略它的存在,导致最后的实现效果不够理想。或许就是这些细节导致手中的产品看起来总是差那么一点点。尤其是对于一些注重阅读体验的页面来说,每一个细节都可能

段间距的设定:段落与段落之间需要有一定的距离,如果这段距离过小,同样影响视线的移动,过大则容易导致上下文的联系变得松散。普遍做法也是将段间距设定为2.0em。

如何科学提高文本易读性?

对齐方式

文本的对齐方式主要有四种:左对齐、居中对齐、右对齐以及两端对齐。一般来说,移动端文本的对齐主要采用的是左对齐或两端对齐,这里简要谈一谈这两种对齐方式的优劣。

左对齐:代表应用主要是「豆瓣、简书、知乎」。左对齐容易造成右端留白过多,整体视觉失衡,但是这种对齐方式不破坏文字本身的起伏和韵律,能保证较好的阅读体验。

两端对齐:代表应用是「微信读书、部分微信公众号」。两端对齐可以保证段落文字整齐划一,成规整的块状,但是打破了文字和字间空白之间形成的韵律,阅读起来未必舒适。(特别是在大量使用英文的情境下)

如何科学提高文本易读性?

对比度

一个优质的页面需要有足够的文本对比度。对于阅读的内容来说,对比度过于激烈和过弱都是不利于阅读的,material design中推荐的文本对比度为7:1,最小值为4.5:1。

前段时间我在产品的某个不知名的角落发现了这样一个页面,看起来不是十分舒适,文字和背景的颜色对比度太低。

于是我开始探索有什么方法可以去科学地衡量这个对比度,而不是单纯凭靠感觉。最近终于发现有许多网站可以对色彩对比度进行检查。我用其中一个网站对这个页面进行了测试,可以看到它的文字对比度是3.96:1,除非加大字重,否则它就是不合格的。(所以,设计师的眼睛就是雪亮的啊)

如何科学提高文本易读性?

制定你的排版风格指南

说了这么多,其实最重要的还是规范。制定一个团队中每个设计师都信服并且遵循的排版风格指南,来标准化团队设计师的文字。如果设计仅仅凭靠感觉,团队中每个设计师会有不同的感觉,最后做出来的页面也有五花八门的“感觉”,这是很可怕的。

如何科学提高文本易读性?

最后,优秀的设计还离不开设计师负责到底的精神。前文所提到的大小、间距、对比度,在前端和产品经理的眼里只是一个数值,他们并不知道一个数值的微小区别对一个页面来说会有多大的影响,可能会因为种种因素调整你的设计。所以,设计师必须用一丝不苟的精神对你的页面负责到底,这样才能最终产出一个充满设计质感界面。

作者:丁珍,云之家用户体验部视觉设计师。只想安安静静做个野生的我。本文来源于 金蝶云之家体验中心(微信ID:UXD-Cloudhub)。

(编辑:辽源站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

推荐文章
    热点阅读