暗黑模式有什么用|暗黑模式设计解析( 四 ) 暗黑模式的设计如今越来越常

文章图片

文章图片

并将这个规则应用在其他 11 套色板中，验证其可用性。这个过程确实没有什么快捷通道，唯一的办法就是不断尝试。

文章图片

最后，我们将经过规则转换的实色与常规颜色的变化趋势做对比：

文章图片

可以看到在大趋势走向上左右两侧图基本一致，这代表两个色板在变化规律接近一致，基本可以证明规则的合理性。区别在于，对比度负极性和差值相对于右侧未经处理的值明显有所下降。这是由于透明度的处理让暗色下的颜色在明度、饱和度上有所下降导致。
再仔细观察可以发现，在左侧的常规颜色中，从破晓蓝-洋红这段偏冷色系几个颜色中，差值趋势变化最平缓的是「极客蓝」这颜色，这说明该颜色在深浅背景下的表现较为稳定，起伏不大。当基于一个统一的透明度规则前提下，会让它在暗色下的对比度减弱，所以反而会导致差值趋势变大，所以我们会发现差值趋势变化较小的颜色转移到了「破晓蓝」、「洋红」中，也是一个正常现象。
最后可以看到颜色在调整过后实际应用的效果：

文章图片

另外，如果在实际应用过程中，你选了色相在 225～325 间的深冷色系作为主色或强调色使用，建议适当提高透明度的值，避免在暗色界面上引起阅读障碍。

文章图片

3）文字
暗黑模式中，文字的使用与浅色模式基本一致，依旧从 85%-65%-45% ，唯一不同的地方在 disable 的状态，其透明度值提升为 30% ，避免颜色过淡真的“不可见” 。
另外，对于 #FFFFFF 的纯白色文字，尽量避免大面积使用，尤其对于表格、列表这类偏阅读浏览的场景，如有需要，做小范围强调即可。

文章图片

4）阴影
暗黑模式中的阴影规则与浅色模式基本保持一致，但由于本身的界面背景较深，在的阴影色值上也有所加深，帮助层次更好地体现，整体将色值扩大到原先的 4 倍，但在阴影的位移、扩展上均保持不变。