DARK MODE(dark mode怎么设置)

至于深色图案的对比度如何设计，可以通过阅读各大平台的指南得到一些基本原则，根据产品差异选择合适的对比度。
在深色图案的设计中，对比度非常重要，适当的对比度可以保证产品的可用性和使用性。暗模式需要兼顾光照强度和光线强度，让用户仍然能够充分识别内容，避免在弱光环境下受到眩光的影响。可以说对比度控制会影响用户的体验。
01从平台指南中了解对比设计。1.iOS在iOS人机界面的颜色准则中给出了深灰度。
从图中可以看出，iOS的规范指南已经把最大对比度拉到了一个意想不到的最大值，直接在纯黑背景层上使用了纯白字符！
这似乎和我们之前的常规认识有点不同：就像我们在设计浅色图案时，不会在白底上使用纯黑色的文字；纯白字体不会用在黑色背景上。
或许这是因为在推出深色模式之初，苹果就想打造一种白天黑夜都可以使用的颜色模式，而不是只针对弱光环境打造的“夜间模式”。需要同时兼容人眼在不同光照条件下对光线的捕捉。从这个角度来说，暗模式的设计会比夜模式更难，要么简单的降低对比度，要么就是对的。
同时，苹果提供了九种预定义的系统颜色，这些颜色都是经过精心挑选的，以确保不同模式之间的一致感觉。
对于系统颜色以外的自定义颜色，官方的对比度建议是7:1。
2.材质设计系统Google在色彩对比上比苹果保守一点，在背景色的选择上偏向深灰色。
在深灰色背景上使用浅色字体的对比度低于黑色背景，更有助于减轻眼睛疲劳。在设计中，谷歌经常使用阴影来表达层次关系。换成暗模式时，系统会保留默认的阴影，更容易看到这些暗灰色背景的灰色阴影。
官方给出的暗面白字对比度至少是15.8:1。
3.WCAGWCAG全称为Web内容可访问性指南，包含可感知性、可操作性、可理解性、兼容性和一致性五大类相关建议。这些建议可以使网站内容更容易访问。IOS人机界面标准和材料设计系统基于WCGA。关于颜色对比的部分分别为规定1.4.3、1.4.6和1.4.11。这只是一个简单的描述。有兴趣的可以自行搜索全文。
对于最小对比度(AA级):文本和文本图像需要至少4.5:1的对比度；大文本和大文本图像的对比度至少应为：1。增强对比度(AAA级):文字和文字图像至少需要733601对比度；大文本和大文本图像的对比度至少应为4.5:1。非文字对比度(AA级):当用户界面模块和图形图像被视觉呈现时，它们与相邻颜色之间的对比度至少为3，333，601。
02根据产品差异选择合适的对比度。以上平台设计指南毕竟只是一个建议。在黑暗模式的设计中，除了适应平台的规则外，更多考虑的是产品适用的定位和使用场景。
1.钉钉的整体深色图案设计显然更倾向于适应iOS设计。
从上图可以看出，主要文字信息的对比度已经大于15.8:1，其他颜色的对比度也大于4.5:1。其中整个页面的最大对比度达到最大值。
钉钉产品属于工具类产品，使用场景多在企业。为了使信息内容突出，增加对比的刺激可以保证用户更清晰高效地使用。
2.微信微信在黑暗模式设计上并没有使用官方的iOS模式。而是降低了整个页面的对比度，整个页面以更暗的风格呈现。
可以看出，文字信息的对比度只大于7:1。更何况在微信的聊天场景中，用户可能会长时间沉浸其中。在这里，微信兼容黑暗模式和夜间模式，可以避免大反差带来的强烈视觉刺激，在深夜环境下获得更好的感知。
虽然在黑暗模式的设计上差别较大，但两者都是以服务用户为目的，都是在充分考虑使用场景和定位后，希望提供更好的用户体验。所以暗模式下的对比设计不要拘泥于平台规范指南，更多的是需要分析自身产品的特点，适合的才是最好的。
03对比度的计算在对对比度设计有了一定的了解之后，如何才能知道自己选择的颜色的对比度呢？实际上，对比度是通过颜色的相对亮度来计算的。我们已经得知WCAG相对亮度的计算公式：
对于sRGB色彩空间，颜色的相对亮度定义为
L=0.2126 * R 0.7152 * G 0.0722 * B
其中R、G和B定义为：
*如果RsRGB=0.03928，则R=RsRGB/12.92否则R=((RsRGB 0.055)/1.055) ^ 2.4
*如果GsRGB=0.03928，则G=GsRGB/12.92否则G=((GsRGB 0.055)/1.055) ^ 2.4
*如果BsRGB=0.03928，则B=BsRGB/12.92否则B=((BsRGB 0.055)/1.055) ^ 2.4
RsRGB、GsRGB和BsRGB被定义为：
* RS RGB=r8位/255
* GsRGB=G8bit/255
* bs RGB=b8位/255
上面的R8bit，G8bit，B8bit其实就是我们颜色面板显示的通道值。请注意，这里使用的颜色文件需要是sRGB颜色。
有了相对亮度，你就可以计算对比度：
(L1 0.05)/(L2 0.05)
其中L1是浅色的相对亮度，L2是深色的相对亮度。
不懂公式也没关系。这里推荐一个网站。直接输入两种颜色的色值就可以直接计算出对比度。
对比查询工具：
https://contrast-ratio.com/ref=uxprocc #
可以使用多种颜色值表达式，可以直接输入常规颜色的英文，也可以使用# 33333，或者hsla(200，0%，0%， 7)。通过这种方式，您可以轻松检查您的配色方案是否符合最低对比度。
希望以上能对设计深色图案有所帮助！
参考材料设计深色主题：
https://material.io/design/color/dark-theme.html#usage
iOS人机界面指南：
https://developer . apple . com/design/human-interface-guidelines/IOs/visual-design/dark-mode/
网页易读性指南(WCAG)2.1中文版：
https://www.w3.org/Translations/WCAG21-zh/
作者：“夜。微信官方账号：晚上UE笔记
本文由@ Night撰写。原载于《人人都是产品经理》。未经许可，禁止复制。
来自Unsplash的图像，基于CC0协议。