暗色主题是什么?
最近,Material Design中新增了关于暗色主题的设计规范:暗色主题(Dark theme)是指在UI界面中使用大面积的深色来构成界面的一种设计,它是产品默认主题的一种补充。很多朋友可能认为暗色主题就是现在新闻客户端的“夜间模式”,这个说法其实并不正确。因为暗色主题是可以由用户自己选择是否开启的,它的使用场景并不局限于夜晚。很多用户偏爱暗色模式是因为暗色更“酷”。比如前段时间苹果电脑增加了类似的“黑暗模式”(Dark Mode)的设计,大受用户的喜爱。用户沉迷使用暗色主题,而不是以前灰色的默认设计。暗色主题不但颜值高,而且可以在保持色彩对比度的同时降低设备屏幕的亮度,还可以根据当前照明条件自动调节亮度,这有助于改善视觉疲劳。除此之外,暗色主题还可以节省设备的电量,可谓是一举多得。那么,暗色模式都有什么样的规范呢?
![5a1d27bdfa7be37a9603bb759596d7e8.png](https://i-blog.csdnimg.cn/blog_migrate/aedceb9499b66bb65e9f907512426ec1.jpeg)
首先,暗色模式用深色视觉元素来构成界面的UI
![e7c5f3157092b04bcc1b7882122be8db.png](https://i-blog.csdnimg.cn/blog_migrate/0a698e208e2b07a675b3bdfe9c945cd0.jpeg)
使用深灰色进行设计
在设计暗色主题的时候,我们应该使用深灰色来进行界面设计。黑色由于太过于深邃,无法让用户感知当前界面的高度和空间感,而不同级别的灰色就可以暗示给用户这些信息。
![ef107c1f3b4823cf9634efbfe2c955f1.png](https://i-blog.csdnimg.cn/blog_migrate/987d4ea70ffe9aca4a0541b869eb45d4.jpeg)
使用强调色彩突出组件
在暗色主题下,我们可以使用少量的强调色彩来凸显一部分功能或者组件,大部分的界面全部为深灰色,所以这些被凸显的部分会更加突出。
![91bdfd9cb0375dcc01a11994c21f0c1d.png](https://i-blog.csdnimg.cn/blog_migrate/4587a4f173ecdcd91f185440df6e63b6.jpeg)
节约能源
在很多带有OLED屏幕的设备中,暗色主题可以通过减少亮色的使用来有效地延长电池寿命。试验表明,使用暗色主题可以让设备的续航时间变长。
![eab56119b1da2af1a1ccd61e8c38ac5a.png](https://i-blog.csdnimg.cn/blog_migrate/d9b360d33462ebc63a43e5f1682e5d97.jpeg)
增强可访问性
暗色主题对于色弱及有其他视觉障碍的用户非常友好,可以提升他们使用产品的体验。
规则
对比度:深色背景和100%白色正文文本的对比度达15.8:1以上。
信息层级:组件和元素通过较深和较浅的灰色来表达信息层级。
饱和度:界面中主要色彩与文字信息的对比度应该高于4.5:1(根据Web可用性指南的标准)。
设计少量强调色彩:我们在设计时会使用大量深灰色来设计背景,也会用少量强调色彩来表示更重要的信息,与背景产生对比。
![fcb5c2bd5e5b2b002226b6334b1cdcb1.png](https://i-blog.csdnimg.cn/blog_migrate/d2c132bc6e688ca42c11e65f5f1be465.jpeg)
关于信息层级
暗色主题的UI界面主要使用深灰色的背景和少量的强调色彩,它们不刺眼但仍然保持着很强的可用性。用户使用起来不会有任何的不舒适。界面按信息层级的重要性依次让用户注意到以下四部