UI设计中如何更加科学地提高文本可读性？-红喵教育

UI设计中如何更加科学地提高文本可读性？

发布时间：2024-06-06 09:20:31

在日常UI设计中，文本作为最重要的信息载体之一，能否被用户清晰识别尤为重要。新手设计师在选择字体颜色时往往找不到依据和信心。本文旨在分析这方面的科学做法，剖析原因，希望能给大家带来新的思路和思路。

背景

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

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

规范

众所周知，内容对比度过于激烈和薄弱，不利于阅读。万维网联盟通过对WCAG的大量研究来解决这个问题 2.0(Web Content Accessibility 在Guidelines网络内容可用性规范中制定了相应的标准，目前，Google包括Gogle、包括Apple在内的许多大型互联网公司都遵守了这一规范。

如何计算对比度？

定义相对亮度

了解对比度首先要知道相对亮度（relative luminance）概念：相对亮度表示单位面积内光线通过的数量。在一个颜色空间中，最暗到最亮点的相对亮度值范围为0-1(这种值方法很常见，比如摄氏度值范围是指标准大气压下冰水混合物到沸水温度的值范围为1℃-100℃)，以我们日常设计工作中接触最多的颜色空间SRGB为例。L=0.21266的相对亮度计算方法*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。

如何验证

Airbnb的设计负责人在IxDC的一次分享中 Vivian Wang Alex 在“如何在全球设计理念和本土化需求之间找到平衡”的主题中，Schleifer给出了视觉水平与内容对比度的对应关系。本文末尾的附件提供了斯奈伦标准视力表文件，感兴趣的学生可以通过测量自己来获得视力水平。然后根据我上面提到的比较相关知识设置几组比较样本。你可以找到更多的学生来获取更多的数据，并根据结果计算平均值。注意，结论应充分考虑眼部疾病患者和室外环境的使用情况。

调色

Color Tool预设了全色相色模板，并支持自定义颜色。主色和辅色可以设置在右侧的彩色面板上，不同布局的显示效果可以直接在左侧的预览窗口上查看。

以上是小编今天与大家分享的内容如何在UI设计中更科学地提高文本的可读性？我希望这篇文章能帮助你想学习UI设计，学习是一个漫长的过程，如果你想学习UI设计更快，你可以来优秀的UI设计培训课程学习，让你更快地掌握UI设计技术，7天的免费试用体验。

UI设计中对比设计手法分享上一篇: 响应式网页的设计技巧原则有哪些？