第一站 - 轻松上网从此开始!

上网第一站

当前位置: > SEO >

超强干货!如何更加科学地提高文本可读性?

时间:2017-08-31 10:17来源:我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
在日常的UI设计工作中,文本作为最重要的信息载体之一,其能否被用户清晰识别显得尤为重要。新手设计师在选择字体颜色时往往找不到依据、不够自信。本文旨在分析目前在这方面比较科

  在日常的UI设计工作中,文本作为最重要的信息载体之一,其能否被用户清晰识别显得尤为重要。新手设计师在选择字体颜色时往往找不到依据、不够自信。本文旨在分析目前在这方面比较科学的做法,剖其缘由,希望能够抛砖引玉,给大家带来新的思路与思考。

  背景

  早在 1862 年荷兰眼科医生斯奈伦 (Hermann Snellen) 为了定义视力标准发明了视力表,经不断优化现已成为世界标准,我们常见的 E 字形的视力表也是由此演变而来。视力表由从大到小的字母行组成,每行对应一个分数,受检者在距离视力表 20 英尺(约 6 米)处,所能看清的最小字母行对应的数值即为视力值。视力水平 = 测试距离 / 字母大小。

  

超强干货!如何更加科学地提高文本可读性?

  

超强干货!如何更加科学地提高文本可读性?

  据世界卫生组织2014年统计数据:

  世界范围内视力受损的人数约为 2.85 亿,其中 3900 万人患有盲症,2.46 亿人患有弱视。

  全世界大约 90% 的视力受损者生活在低收入国家。

  82% 的盲症病人年龄在 50 岁及 50 岁以上。

  在全球范围内,未经矫正的屈光不正是中度和重度视力损害的主要原因,在中、低收入国家,白内障仍然是致盲的主要原因。

  对比 2014 年全球人口数量 72 亿粗略换算一下患有眼疾的人群占比约为 4%,这是个相当高的数字了。

  如今互联网产品涉及面广,用户群体庞大且多样化;显示设备种类繁多,色彩差异较大,同时移动设备比台式机、笔记本电脑更有可能在包括户外的各种环境中使用,户外使用的情况下难免会遭到太阳或其他光源的眩光干扰。在这种背景下,低视力用户在阅读时会遇到极大挑战。鉴于此,产品设计中应充分考虑各种使用场景及视障人群的使用体验。

  规范

  我们知道,内容对比度过于激烈和过弱都是不利于阅读的,万维网联盟针对这个问题通过大量研究在 WCAG 2.0 (Web Content Accessibility Guidelines 网络内容可用性规范) 中制定了相应标准,目前包括 Google、Apple 在内的很多大型互联网公司都已遵守这个规范。

  WCAG 针对字体大小及对比度规定了两个级别:

  

超强干货!如何更加科学地提高文本可读性?

  大号文本:字号大于14磅且加粗,或字号大于18磅。

  常规文本:字号小于18磅,或字号小于14磅且加粗。

  用于识别的图形如 Icon 等至少需满足 Level AA 。

  注:磅(pt)为长度单位,1pt=1/72inch。分辨率为 72px/inch 图像上的文字 100% 显示时 1pt=1px=1dp (条件:显示器的dpi=72,鉴于目前绝大部分屏幕分辨率已远超这个数值,请大家借助矢量软件对比,或在软件设置后借助打印尺寸预览功能对比。单位这块不同平台有不同的处理方式,其共同的特点就是要保证文本的物理尺寸,这里就不展开说了)。

  笔者根据规范简要的画了张图:

  

超强干货!如何更加科学地提高文本可读性?

  △ 大号字体对应的是在手机上查看时的大致尺寸,对比度值是在纯白背景上的测试结果。

  如何计算对比度

  相对亮度定义

  了解对比度首先要知道相对亮度(relative luminance)的概念:相对亮度表达的是单位面积内光线通过的数量。在一个色彩空间内,最暗到最亮的点相对亮度取值范围为 0-1(这种取值方法很常见,比如摄氏度取值范围是规定标准大气压下冰水混合物到沸水温度的取值范围为 1℃-100℃),拿我们日常设计工作中接触最多的色彩空间 sRGB 举例,相对亮度的计算方式为 L = 0.2126 * R + 0.7152 * G + 0.0722 * B (此公式为理论值,RGB 分别对应 8bits/Channel 时的数值,即 0-255)。

  由于 sRGB 色彩空间范围小于 RGB,所以每通道的实际数值会受到限制,对应关系如下:

  

  

超强干货!如何更加科学地提高文本可读性?

  对比度计算方法

  现有亮色点 L1 和暗色点 L2,那么 L1 和 L2 的对比度即为:L1 : L2 = (L1 + 0.05) : (L2 + 0.05)。对比度用于衡量两个颜色的明度对比强弱,比值越大对比越强烈。

  上述方法是基于笔者的理解和总结,如想了解更详细的介绍请查看 W3C Guideline。

  发散与启发

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发布者资料
第一站编辑 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2012-05-22 19:05 最后登录:2014-08-08 03:08
栏目列表
推荐内容
分享按鈕