ui设计|从0-1深入拆解浅色模式设计理念( 二 )

文章插图

文章插图
这里我们以天青蓝浅色模式下的色板为例，通过正负极性变化趋势总结出来的规律，来重新验证深色模式下的色板一致性：

文章插图
在实际应用过程中，如果你选了色相在 225～325 间的深冷色系作为主色或强调色使用，建议适当提高透明度的值，避免在暗色界面上引起阅读障碍。可以看出经过调整后颜色的明度、饱和度有很好的统一性。

文章插图
可以看到在大趋势走向上左右两侧图基本一致，这代表两个色板在变化规律接近一致，基本可以证明规则的合理性。
4. 可读性和易读性

可读性定义了人们阅读单词、短语和文本块的难易程度；
易读性衡量用户识别特定字体中字母的速度和直观程度。

在浅色模式中，主背景颜色要保持温和适中，既要确保不会因为过亮而产生刺眼感，也要保证信息的可见性，在WCAG标准下，前后景的正对比度极性比最低为4.5:1、最合适为7：1，最高不得超过18:1，由于仪表使用环境以及过小的显示范围等因素，建议对比值在10：1到15:1范围最佳，方便用户在高亮环境可以达到快速识别的目的。

文章插图
在实际设计的过程中，通过对比多种背景方案：带有多种颜色倾向的灰色以及多种中性色灰的色调变化，最终选取了以天蓝色为底色的背景板，重新塑造浅色模式是视觉规范：

文章插图
以上仅作为实例展示。

文章插图
5. 文字方面除了基础的背景色外，文字用色也需要格外的严谨，对于 #000000 的纯黑色文字，尽量避免大面积使用，如有需要，可以通过调整不同背景上的透明度使其更加融合。

文章插图
以上就是上篇的全部内容了，下篇我会详细说一下底色的选取方法以及浅色模式下其他的注意方向，感谢您的耐心观看，同时也希望上述内容能对大家在浅色模式的设计上有所帮助，如果您有不同意见欢迎留言探讨～
本文由 @阿洋原创发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash，基于 CC0 协议