现状

前不久，苹果发布了iOS13 重要更新，最大的观感变化，便是加入了深色模式，将整个系统从原本白色为主的浅色主题转换为黑色当道的深色主题。不仅在夜间和暗光环境使用中对眼睛更友好，也能够延长iPhone X开始使用的OLED屏幕的寿命，并降低耗电耗电，可谓是一举两得。

我在实际的工作中也是经常需要为公司的产品设计深色界面（公司的行业属性和产品决定的），深色界面一方面有它自己很独特的视觉风格，另一方面深色界面也挺难把握明暗和色彩与深色的对比，导致界面可用性变差，以下我们一步步地展开对深色界面的一些剖析。

深色界面都用在什么地方？

其实深色界面早已有之，无论PC端或者移动端，应用也非常广泛，常见的有如移动端的夜间模式；一些应用的深色皮肤；一些有特定功能和行业属性的软件界面；一些以展示为主的大屏幕展示界面以及B端系统等等。

腾讯新闻APP夜间模式

网易云音乐深色皮肤

政府指挥大屏

商业数据展示

车载操作系统

医疗仪器

程序员写代码的软件界面和设计师常用的PS 界面

股票软件界面

科幻界面

深色界面的特点

从以上列举的例子来看，深色界面的用途范围非常广，从移动端涵盖了PC端。可以得出深色界面的几个显著特点：

①、在需要展示很多（非常多）数据和文字以及图形的时候使用，从视觉设计上分析，深色（黑）和浅色（白和彩色）最容易形成明显的对比，让人的视觉更加专注于深色底色衬托出的内容（数据和文字以及图形）；

②、深色代表夜晚的含义，能渲染特定的氛围的作用，把黑白颜色的对比度降低可以保护观看者的眼睛；

③、沉浸感强，在一些屏幕空间有限，又需要非常专注的工具类软件和界面；

设计的时候要注意什么：

①；颜色的对比----- 降低饱和度，界面上的图标，图形等往往是由很多彩色颜色组成，要注意降低饱和度和对比度，彩色纯度很高会显得非常突出（尤其是大面积的），会破坏界面整体的关系；

②；深色底色和白色文字、数据内容的对比， 大家都知道黑白对比是最明显的，由深色底色和白色的字体组成的界面，会让使用者的眼睛非常疲劳，看久了会非常难受，所以设计深色界面的时候需要把字体的颜色饱和度也降低。

③、模块区分 ----- 注重对比度的深浅变化；如下图所示；

用深浅颜色来区分模块

④、注意可用性（视觉）；

注意颜色的对比

⑤、结合科技感风格， 上面是一张钢铁侠的电影截图，深色界面加上各种颜色，再辅以光的一些元素，可以以营造出浓浓的科技感、科幻风 。

The end！ 谢谢观看

 注：  以上图片如有侵权，请联系我删除  ！

Powered by Froala Editor