暗黑模式有什么用|暗黑模式设计解析( 三 )


所以我们大体的设计思路也是基于浅色的基础色板 , 通过结合透明度的转换 , 去得到一套暗黑模式下的色彩 。这样的好处是 , 深浅模式下的色彩根基是同一个 , 在这样的基础上经过透明度的变换得到的结果也会相对和谐 , 同时也符合我们一致性的原则 。
这里我们借助下面这两个概念对透明度进行转换 。
1)对比度极性
对比度极性分为正极性和负极性 。
平行志愿怎么填报技巧(平行志愿的填报有哪些技巧?)平行志愿也有自然顺序一是志愿并列 , 考生所填报的多个院校志愿属于并列关系 , 即在同一投档时间段 , 考生所填院校均有可能被检索;二是分数优先 , 在检索考生填报的院校志愿前 , 首先要将所有考生分文史、理工类按投档分(高考总分加政策照顾分)从高分到低分进行位次排列 ,

  • 对比度正极性:指在电子文本中文本为深色 , 背景色为浅色 。
  • 对比度负极性:指在电子文本中文本为浅色 , 背景色为深色 。
2)正负极性差值
顾名思义便是正负两者的差值 , 这里取的是绝对值 。
【暗黑模式有什么用|暗黑模式设计解析】根据一致性原则 , 我们尝试通过对比一套颜色的正负极性变化趋势来找到转换规律 。
首先可以看下 , 如果一个颜色在不做任何修改的前提下直接使用 , 它的正负极性趋势以及差值趋势的走势和关系是怎么样的 , 我们尝试描绘出这样的曲线 , 他们的变化规律也将作为我们规则转换的参考标准 。
暗黑模式有什么用|暗黑模式设计解析
文章图片

经过对比 , 可以发现一些变化规律:
首先来说下「差值趋势」 。
横向对比可以发现 , 不同颜色的正负极性走势是很不一样的 。
可以看到在黄绿色段差值曲线达到一个变化峰值 , 这是由于黄绿色本身由于明度、饱和度值相比其他颜色偏高 , 所以总是有种刺眼的感觉 , 生活中也会用它来作为警示、提醒的作用 , 所以在深浅背景下的对比度有一个比较大的差异 , 可以说这个变化是正常的 。
这点也可以从「正负对比度极性趋势」两者间的相对关系反应出来 , 从红色到洋红 , 绿线一开始从逐渐在蓝线的上方一点 , 开始逐渐上移 , 最后在峰值处开始慢慢下移 , 在「极客蓝」这个色相中接近重叠 , 在洋红处又慢慢下移;说明浅色下越深的颜色 , 在深色中越亮 , 反之则越暗 。
纵向比对单个色板 , 可以发现 , 其斜率变化主要受颜色的明度、饱和度影响 , 可以反应一个颜色的不同梯度在黑白背景下的变化规律 。
有了这个大的变化规律 , 我们便可做到心中有数 。首先以 Ant Design 的品牌色「破晓蓝」为例 , 经过在多个业务、场景中不断尝试与调整 , 我们得到一个透明度转换规则: