其他分享
首页 > 其他分享> > 规范-深色主题

规范-深色主题

作者:互联网

一个从常规主题切换到深色主题的应用
10 分钟
原创

深色主题

通过贯穿 Codingmway.com 的深色主题实践来更好地学习深色主题规范

本次阅读内容包括了材质设计深色主题规范重要内容的点明和其深色主题规范在实际项目上实践的方法。

封面和部分图片来自 Material-io.com


用法

深色主题在大部分 UI 中显示深色表面。 它被设计为默认(或浅色)主题的补充模式。

深色主题会降低设备屏幕发出的亮度,同时仍能满足色彩间最低对比度。 它通过减少视觉疲劳、改变亮度以适应当前环境、更利于在黑暗环境中使用来帮助改进视觉人体工程学体验——同时节省电池电量。 配备 OLED 屏幕的设备能够随时不显示黑色像素区域。

重要原则


行为规范

深色主题可由外部显示的控制按钮来启用或停用。

  1. 以突出方式出现时,在 App Bar 使用一个主题模式切换按钮来切换主题
  2. 以弱突出方式出现时,在 “更多” 菜单 ( List ) 内展示切换或在应用设置中展示切换模块

特性

特性概要

Material Design 深色主题由以下属性定义:

对比度:深色表面和 100% 白色正文的对比度至少为 15.8:1

高度:在更高的高度平面上,组件通过显示更浅/更亮的表面颜色来表达深度的变化

去饱和度:默认主题中的原色需要去饱和度,使得它们在所有高度级别都能至少通过 4.5:1(与正文文本一起使用时)的 网页内容可访问性指南 (WCAG) AA 标准

有限的颜色:大面积表面使用深色表面颜色,并具有有限的强调色(浅色、不饱和颜色和明亮、饱和颜色)

在上述概述基础上,深灰色能够更好的展示组件的阴影。因为深色表面上的文字对比度比黑色表面上的文字对比度小,所以它也能减少深色主题下的视疲劳。

补充

一层遮罩能够使得组件之间的不同高度能够被很好的进行区分,同时,也能更好的使得用户观察阴影。遮罩增加了表面和阴影之间的对比度,使得每个表面的边缘更加的明显。


错误用法

具有亮色表面的组件

避免在其表面使用了主色或次要色的组件上 (例如在 轻蓝绿色FAB/悬浮操作按钮 上使用遮罩) 使用具有高度的颜色遮罩

请勿使用辉光来表达阴影

避免使用辉光 ( light glows ) 来代替阴影来表达高度,因为这种方式在表达高度上没有由投射灯光来制造的阴影 ( cast shadow ) 表达地精确


可访问性和对比度标准

深色主题需要有足够黑的表面来展示白色的文字,其在文字和背景之间的对比度等级至少在 15.8 : 1

这使得正文内容在表面处于最大高度 (最亮表面遮罩) 的情况下能够通过 WCAG 的 AA 级别标准。

图表左侧 #1F1B24 由混和而来

要创建品牌深色表面,请将主要品牌颜色以低不透明度覆盖在推荐的深色主题表面颜色 (#121212) 上。 颜色 #1F1B24 是将深色主题表面颜色 #121212 和 8% 原色结合的结果。

如果背景颜色不够深,无法满足白色文本和表面之间至少 15.8:1 的对比度级别,则最高(和最亮)升高表面上的文本将无法通过 4.5:1 标准。

图表展示了两种状态下的对比度差异


实践示例

从随意、模仿到较为精准的深色主题设计,Codingmway.com 至少经历了三次深色主题的探索。Codingmway.com 推荐开发者先阅读规范并实践材质设计在 Figma 上的深色主题 CodeLab 来体验其深色主题设计思维,最后再开始改进自己的应用界面。

相关链接:Material 深色主题 CodeLab – Figma

旧版界面

Codingmway.com 旧版深色主题

分析

在旧版的界面中,使用了 Material UI 组件库自带的深色主题。

问题:

  1. 背景颜色过浅。背离了以 #121212 为基础深色背景的原则。

  2. 链接文字和浅灰色背景的对比度不达标。深色主题需要有足够黑的表面来展示白色的文字,其在文字和背景之间的对比度等级至少在 15.8 : 1。详细请见上述 可访问性和对比度标准。

  3. 卡片组件 ( Cards ) 的表面颜色遮罩过亮。过亮的颜色遮罩表达了超出预期的高度水平。


新版部分界面

Codingmway.com 新版深色主题
改进

在新版的界面中,使用了 Material UI 的全局样式更改来创造更规范的深色主题。

相关链接:全局样式-Material UI

特性:

  1. 底层背景颜色为 #121212。

  2. 文字与背景对比度达标。

  3. App Bar 、Cards 等组件的遮罩颜色适当。根据材质设计遮罩颜色变化梯度严格设计不同高度水平的组件遮罩颜色。


示例实践方法

工具:PhotoShop、取色工具

  1. 打开 PhotoShop 创建一个 #121212 为背景的图层,其他的属性取值不做要求。
    创建一个 #121212 为背景的图层

  2. 使用矩形工具创建一个颜色为 #FFFFFF (白色) 的图层 (必须在 #121212 图层上方)

  3. 找到组件的高度以及对应遮罩透明度组件默认高度值
    组件默认高度值
    对应高度的遮罩透明度
    对应高度的遮罩透明度

  4. 调整白色图层的透明度至对应遮罩透明度
    调整遮罩透明度

  5. 使用取色工具获取该层颜色值(为了防止颜色误差,所以推荐用此方法而不是直接在官网对应高度的遮罩透明度示例图片上获取颜色)

  6. 应用至相应组件

恭喜!
至此,您已阅读完材质设计深色模式规范的重点内容和 Codingmway,com 的深色模式示例实践方法。


文章相关内容

网页内容可访问性指南 (WCAG) 概述

深色主题规范-Material Design

Material 深色主题 CodeLab – Figma

全局样式-Material UI

标签:遮罩,深色,颜色,主题,规范,表面,对比度
来源: https://blog.csdn.net/qq_44577538/article/details/120579708