实例解析夜间模式设计的通用方法

2. 五项夜间模式设计原则

通过文献查找结合多次测试对比,我们提出5项评价原则,帮助设计师去判断亮度,对比度,色彩通用性是否满足人眼需求。

原则1:保证色彩通用性:关注特殊人群

所选色彩需要考虑色盲人群的特性,尽量保证他们所看到的颜色和我们接近一致,减少该类人群的识色的 差异性,增强设计的统一性。从软件角度来看,无色彩更能减少正常人和色盲等特殊人群的识色差别。(可利用Sim Daltonsim for Mac软件检测)。

实例解析夜间模式设计的通用方法,PS教程,

原则2:选择低亮度、低饱和非极端的色彩(避免纯黑)

对亮度控制,首先需要确定颜色本身的亮度,从一开始对界面的主体颜色的选择就应该选择亮度较低的色彩,从设计用色上就控制界面的亮度。因此,方法就是直接降低色彩本身亮度,但是要避免选用极端颜色(避免纯黑色)。为了方便大家对比所选颜色的亮度,可通过色彩亮度公式计算(Y-范围0-255,Y值约接近0亮度越低):

实例解析夜间模式设计的通用方法,PS教程,

原则3:保证界面在屏幕中呈现出低尼特值(低亮度)

对于屏幕呈现的亮度的控制,需要通过前面提到的尼特值确定。尼特值能够反馈设计方案在设备上呈现亮度,它直接影响了人眼的亮度舒适程度。所以结合前期人眼视觉特性来看,无光照时,屏幕自动调至最低亮度,主体背景颜色在屏幕上呈现的亮度应该接近0.034尼特,界面中最亮元素应该尽量低于3.4尼特,才能让用户更加持久舒适地使用 (获取尼特值需要通过屏幕亮度仪测试仪测得)。

实例解析夜间模式设计的通用方法,PS教程,

原则4:保证文字、元素、背景的对比度在能看清的范围内

对比度规范是由Web 无障碍指南(WCAG)提出,现已经逐步被大公司采纳,苹果公司的设计规范中引用了此对比度规范。结合夜间模式的需求,我们提出保证文字与背景色对比度在3:1-4.5:1范围,保证元素(头像,图片)与背景色的对比度在3:1-7:1的范围内。以此保证文字的清晰度,减少其他元素过亮的情况。(对比度可通过软件Colour Contrast Analyser测出)。

实例解析夜间模式设计的通用方法,PS教程,