UI设计中如何更加科学地提高文本可读性？
作者：优漫动游设计部
2022-12-07 17:58
查看: 448
在日常的UI设计工作中，文本作为最重要的信息载体之一，其能否被用户清晰识别显得尤为重要。新手设计师在选择字体颜色时往往找不到依据、不够自信。本文旨在分析目前在这方面比较科学的做法，剖其缘由，希望能够抛砖引玉，给大家带来新的思路与思考。
背景
早在1862年荷兰眼科医生斯奈伦(Hermann Snellen)为了定义视力标准发明了视力表，经不断优化现已成为世界标准，我们常见的E字形的视力表也是由此演变而来。视力表由从大到小的字母行组成，每行对应一个分数，受检者在距离视力表20英尺（约6米）处，所能看清的最小字母行对应的数值即为视力值。
如今互联网产品涉及面广，用户群体庞大且多样化；显示设备种类繁多，色彩差异较大，同时移动设备比台式机、笔记本电脑更有可能在包括户外的各种环境中使用，户外使用的情况下难免会遭到太阳或其他光源的眩光干扰。在这种背景下，低视力用户在阅读时会遇到极大挑战。鉴于此，产品设计中应充分考虑各种使用场景及视障人群的使用体验。
规范
我们知道，内容对比度过于激烈和过弱都是不利于阅读的，万维网联盟针对这个问题通过大量研究在WCAG 2.0(Web Content Accessibility Guidelines网络内容可用性规范)中制定了相应标准，目前包括Google、Apple在内的很多大型互联网公司都已遵守这个规范。
如何计算对比度
相对亮度定义
了解对比度首先要知道相对亮度（relative luminance）的概念：相对亮度表达的是单位面积内光线通过的数量。在一个色彩空间内，最暗到最亮的点相对亮度取值范围为0-1（这种取值方法很常见，比如摄氏度取值范围是规定标准大气压下冰水混合物到沸水温度的取值范围为1℃-100℃），拿我们日常设计工作中接触最多的色彩空间sRGB举例，相对亮度的计算方式为L=0.2126*R+0.7152*G+0.0722*B（此公式为理论值，RGB分别对应8bits/Channel时的数值，即0-255）。
对比度计算方法
现有亮色点L1和暗色点L2，那么L1和L2的对比度即为：L1:L2=(L1+0.05):(L2+0.05)。对比度用于衡量两个颜色的明度对比强弱，比值越大对比越强烈。
上述方法是基于笔者的理解和总结，如想了解更详细的介绍请查看W3C Guideline。
如何验证
在IxDC的一次分享中，Airbnb的设计负责人 Vivian Wang Alex Schleifer在《如何在全球化设计理念和本土化需求中找到平衡》的主题中给出了视力水平与内容对比度的对应关系。本文末尾的附件中提供了斯奈伦标准视力表文件，感兴趣的同学给自己测一下即可得到自己的视力水平。再根据上文我提到的对比度相关知识多设置几组对比度样本，可以多找些同学多获取些数据，根据得到的结果统计出平均值。注意，结论应充分考虑眼疾患者和室外环境的使用场景。
调色
Color Tool预置了全色相色彩模板，并支持自定义颜色。通过在右侧调色面板可设置主色和辅色，在左侧的预览窗口可直接查看不同布局的显示效果。
以上就是小编今天为大家分享的关于UI设计中如何更加科学地提高文本可读性？希望本篇文章能够对想要零基础学习UI设计的你有所帮助，学习是一个漫长的过程，如果你想更快的学习UI设计，可以来优漫UI设计培训班进行学习，让你更快的掌握UI设计技术，7天免费试学体验。
预约申请试听课
填写下面表单即可预约申请试听！怕钱不够？可就业挣钱后再付学费！ 怕学不会？助教全程陪读，随时解惑！
担心就业？一地学习，可全国推荐就业！
-
上一篇：
-
下一篇：
IT培训问答
开班时间
