暗黑模式是指把所有 UI 换成黑色或者深色的一个主题模式。
何时使用#
当需要长时间在暗光环境下工作时,建议使用暗黑模式,减小亮度对比带来的视觉压力,保证使用者的体验舒适。
当需要沉浸式的专注工作内容时,建议使用暗黑模式,可以帮助使用者更关注凸显出来的内容和操作。
如同在电影院看电影时要全场关灯,是一样的原理。
设计原则#
内容的舒适性
暗黑模式下避免使用对比很强的色彩或内容,长时间使用会带来疲劳感。
信息的一致性
暗黑模式下的信息内容需要和浅色模式保持一致性,不应该打破原有的层级关系。
色彩#
颜色的应用上,我们基于 12 套基础色板,并结合透明度规则处理,来让色彩在不同的环境色下可以更好融合。
基础色板#
Dust Red / 薄暮斗志、奔放
red-1
red-2
red-3
red-4
red-5
red-6
red-7
red-8
red-9
red-10
Volcano / 火山醒目、澎湃
volcano-1
volcano-2
volcano-3
volcano-4
volcano-5
volcano-6
volcano-7
volcano-8
volcano-9
volcano-10
Sunset Orange / 日暮温暖、欢快
orange-1
orange-2
orange-3
orange-4
orange-5
orange-6
orange-7
orange-8
orange-9
orange-10
Calendula Gold / 金盏花活力、积极
gold-1
gold-2
gold-3
gold-4
gold-5
gold-6
gold-7
gold-8
gold-9
gold-10
Sunrise Yellow / 日出出生、阳光
yellow-1
yellow-2
yellow-3
yellow-4
yellow-5
yellow-6
yellow-7
yellow-8
yellow-9
yellow-10
Lime / 青柠自然、生机
lime-1
lime-2
lime-3
lime-4
lime-5
lime-6
lime-7
lime-8
lime-9
lime-10
Polar Green / 极光绿健康、创新
green-1
green-2
green-3
green-4
green-5
green-6
green-7
green-8
green-9
green-10
Cyan / 明青希望、坚强
cyan-1
cyan-2
cyan-3
cyan-4
cyan-5
cyan-6
cyan-7
cyan-8
cyan-9
cyan-10
Daybreak Blue / 拂晓蓝包容、科技、普惠
blue-1
blue-2
blue-3
blue-4
blue-5
blue-6
blue-7
blue-8
blue-9
blue-10
Geek Blue / 极客蓝探索、钻研
geekblue-1
geekblue-2
geekblue-3
geekblue-4
geekblue-5
geekblue-6
geekblue-7
geekblue-8
geekblue-9
geekblue-10
Golden Purple / 酱紫优雅、浪漫
purple-1
purple-2
purple-3
purple-4
purple-5
purple-6
purple-7
purple-8
purple-9
purple-10
Magenta / 法式洋红明快、感性
magenta-1
magenta-2
magenta-3
magenta-4
magenta-5
magenta-6
magenta-7
magenta-8
magenta-9
magenta-10
色板生成工具#
同样,我们也提供了一套暗色下的色板生成工具,需要选择你的主色以及页面的背景色,我们会为你生成一套暗色下的色板
color-1#131a27
color-2#15243d
color-3#193150
color-4#1c3f6e
color-5#205297
color-6#2365bf
color-7#4787d6
color-8#74aeec
color-9#a2cef8
color-10#cbe5fa
选择你的主色
#2673dd
选择你的背景色
#141414