深色和浅色都是产品呈现给用户的界面状态，最终目的是提高易用性

发布时间：2021-08-25 作者：admin 0

【文摘】黑暗模式的设计要求的是颜色的变化，是用灰度画出背景的颜色，掌握文字和背景的强弱关系，适当降低图标的亮度和彩度。

一、选择黑暗模式的理由

1 .需求趋势

过去一年来，黑暗模式已适用于安卓10和iOS 13。此外，苹果和谷歌也致力于将资源和注意力集中在黑暗模式上，黑暗模式备受用户关注。

2 .集中于内容

深色模式在弱光环境下容易读取，能够集中于眼前的屏幕。昏暗的背景降低了内容周围元素的影响，使用户能够专注于内容，特别是在以照片和视频为中心的APP领域。

作为一个内容消费型APP，Netflix以深色背景为默认设计风格，深色设计可以让用户更加专注，延长使用时间。

3 .减轻刺激

相对于其他颜色，深色系的设计是晚上看着最舒服的。晚上玩手机可能不用担心光线太刺眼，但黑暗模式对眼睛的保护作用不大。只能说能减少对眼睛的刺激。

4 .提高续航距离

只有OLED画面在暗模式下省电。 OLED面板的各像素点可以分别发光，使用暗模式时，一些像素点熄灭，只有一些像素点亮，画面的一部分相当于处于休眠状态，因此更省电。

二、平台设计指南

1. iOS平台的暗模式设计

在黑暗模式下，苹果将重新审视UI风格和颜色在iOS中的意义，看看在iOS中设计黑暗模式带来的变化。

(1)语义化颜色(Semantic Colors ) )。

语义化色是指根据用途进行描述，而不是用某一定的RGB色值来描述颜色，从而使接口要素能够自动适合当前的外观模式。

淘宝团参考了苹果官方的匹配提案，通过颜色的语义化进行了匹配，大幅降低了匹配成本。设计师根据不同UI元素的特性事先制定颜色语义化规则，技术在框架级通过“颜色自动反转”技术实现颜色反转。

)2)系统颜色

除了语义颜色外，苹果还提供了9种预定义的系统颜色。在“亮”和“暗”模式中，这些颜色会动态变化，以支持整个系统的外观，并且还可以适应选定的界面样式。

)3)模糊和动态效果

在iOS13上，苹果引入了4种模糊效果和8种动态效果，自动适应了iOS界面的风格。这在亮模式和暗模式中是不同的模糊效果。

苹果在iOS黑暗模式发布套件中引入了4种动态效果，3种为叠加效果，1种为隔离效果。

2 .安卓平台的暗模式设计

谷歌提供了广泛的文档支持，帮助设计师了解黑暗主题在安卓生态系统中的作用。

UI界面元素之间的投影最能清楚地识别用户界面的深度。在设计暗主题时，组件将保留与亮主题相同的默认阴影组件。 Elevation越往上走，颜色就越浅。

)2)与无障碍性对比

暗的UI设计背景必须足够暗，才能显示白色文本。请注意，设计师在背景和文字之间至少使用15.8:1的对比度。由此，当以正文为开头时，可以确保wcag (通过web内容的无障碍指南，容易访问web内容)的AA标准。

(3)颜色

黑暗模式需要避免饱和的颜色，以免引起眼睛疲劳。相反，设计师必须集中精力使用不饱和的颜色来增加清晰度。主色和子色的选择还取决于浅色和暗色的UI主题的考虑。

4 )文字的不透明度

在暗背景下设计亮文字时，强调文字的不透明度为87%；一般提示文本的不透明度为60%；无效字符的不透明度为38%。

三、黑暗模式的设计要点

苹果和谷歌都利用各自的设计原则，为黑暗模式的设计做准备。在实际设计中，不仅需要注意这些基本原则，还需要注意设计暗模式的实用要点。

1 .背景灰度

在设计深色背景时，不要简单地将白色变为黑色，而是在背景中使用深色，以减轻眼睛的疲劳。

在灯光模式下，界面深度倾向于用细微的阴影传达，使用起来更自然。但是，在大多数黑暗模式中，阴影的效果并不明显，通常以颜色浓淡来传达界面的层次关系。

要点：注意应用场景

在已知的黑暗模式中，背景设计从深到浅使用了三个灰度级，使页面更加清晰。

一级灰度的应用场景主要是大背景色，使用面积相对大的颜色最深；二级灰度应用场景为可选背景色，根据可选件的数量设定使用面积，位置配置比较灵活；三色调颜色最浅，使用面积最小，通常用于分割线。

2 .文字比较

白底黑字和黑底白字，给我们的眼睛体验是不同的。设计不当的黑暗模式，由于强烈的对比度而经常变得刺眼，同时为了提高光的吸收，虹膜会张开，容易疲劳。

关键点：字符之间的比较

在黑暗模式下，文字的颜色通常是纯灰色，根据标题、正文、注释等位置的不同，会用浓淡不同的颜色进行比较。上面的照片是wechat的暗模式，利用该方法来区分不同文字的内容，显示文字的层次关系。

另外，每个APP的定位不同，希望通过界面传达的信息也不同，因此设计思路不同需要注意。关键点：比较文本和背景

更新暗模式的APP主要分为两种，一种是工具型APP通信，如QQ、wechat、百度网盘等，这种APP通信追求信息的有效传递，设计时文字内容和背景色区别明显

上面的照片是百度网盘的深色模式，标题的文字和背景明显对比，可以看出保障了用户使用时的操作性和可读性。这样的设计不需要用户过度沉浸阅读，只需要用户快速找到有用的信息，使其易于使用，这是工具型APP设计黑暗模式时必要的原则。

另一个是知乎、简书等内容型APP应用，这些APP应用注重用户沉浸式的阅读体验。用户通常在某个界面停留较长时间观看内容，因此需要营造文字和背景对比度低、读书柔和的氛围。

在简书的深色模式下，文字与背景的对比关系被设计得很弱，整个界面呈灰色调。这样的设计有助于在弱光环境下长时间阅读和浏览。

3 .图标/按钮

在黑暗模式下，请避免特别鲜艳的颜色。亮度和彩度越高，则暗的背景的对比度越强，页面的可读性越差，刺激也越强。

要点：降低颜色的亮度

在由浅变深的过程中，知乎对界面中所有图标的颜色都发生了改变。界面中的图标和主题按钮的颜色随色调、饱和度而变化，但亮度有所降低，保证了内容在不同照明条件下的可读性。

这是在黑暗模式下处理颜色的一种方法，灯光界面喜欢鲜艳的颜色，但亮度低的颜色更适合黑暗主题。匹配两种模式的另一个好方法是创建互补的色板。

四、结论

深色和浅色都是产品呈现给用户的界面状态，最终目的是提高易用性。

无论选择什么模式，都要记住从产品本身出发，记住这几点。

了解趋势：熟悉黑暗模式流行的原因以及苹果和谷歌的相关研究

寻找方向：在设计黑暗模式之前，必须了解产品对应的平台、满意的标准；

掌握要点：黑暗模式的设计要求的是颜色的变化。是用灰度画出背景的颜色，掌握文字和背景的强弱关系，适当降低图标的亮度和彩度。

文章中插图照片材料和相关内容来自网络，如有侵权请告知，我们马上删除！