020-29815005
预约专线时间:09:00-23:59

【UI设计培训】:UI设计中如何更加科学地提高文本可读性?

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

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


【UI设计培训】: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学习路线,该学习路线内容包含ps软件入门、AI与品牌设计、视觉表达技法、web视觉设计、图标设计、产品交互、移动端设计等,根据优漫提供的ui学习路线图,可以让你对学好ui需要掌握的知识有个清晰的了解!