暗黑模式有什么用|暗黑模式设计解析

暗黑模式有什么用|暗黑模式设计解析
文章图片

近年来暗黑模式的设计趋势开始一点点明显 , Ant Design 在这次 4.0 的升级中也对这类暗黑场景化的设计开始进行初步的探索 , 接下来就让我们一起来看下 Ant Design 这一针对企业级的设计体系是如何设计暗黑模式的 。
一、什么是暗黑模式暗黑模式是指把所有 UI 换成黑色或者深色的一个模式 。
需要说明的是 , 暗黑模式不只夜间模式 。
暗黑模式更多的目的是希望使用者更加专注自己的操作任务 , 所以对于信息内容的表达会更注重视觉性;而夜间模式则更多是出于在夜间或暗光环境使用下的健康角度考虑 , 避免在黑暗环境中长时间注视高亮光源带来的视觉刺激 , 所以在保证可读性的前提下 , 会采用更弱的对比来减少屏幕光对眼睛的刺激 。
同时 , 从使用场景上来说 , 暗黑模式既可以在黑暗环境 , 也可以在亮光环境下使用 , 可以理解为是对浅色主题的一种场景化补充;而夜间模式只建议在黑暗环境下使用 , 在亮光环境使用时很可能并不保证信息可读性 。
二、为什么 Ant Design 要做暗黑模式1. 更加专注内容试想一下 , 我们在电影院看电影时 , 为什么要全场关灯?甚至有些 APP , 在影片的下方也会又一个模拟关灯效果的操作 , 来让整个手机屏幕变黑 , 只剩下视屏画面的部分 。
这都帮助我们可以更专注、更沉浸在当前的内容下 。
色彩具有层级关系 , 深色会在视觉感官上自动后退 , 浅色部分则会向前延展 , 这样对比强烈的层次关系可以让用户更注重被凸显出来的内容和交互操作;尤其在信息负责界面内层级关系的合理拉开对操作效率都有明显的促进作用 。
2. 在暗光环境下更加适用如今社会我们身处黑夜使用手机、电脑、ipad等设备的次数越来越多 , 环境光与屏幕亮度的明暗差距在夜间会被放大, 亮度对比带来视觉刺激也更加明显 。
使用暗色模式可以缩小屏幕显示内容与环境光强度的差距 , 同时也可以为设备的续航带来积极影响 , 可以保证使用者在暗光环境下使用 OLED 设备的舒适度 。
3. 大众喜爱黑色一直以来就可以给人以高级、神秘的语义象征 , 相比于浅色模式 , 暗色模式藏着更多可能性 。
三、设计原则在这次暗黑模式的设计中主要遵循以下两大设计原则 。
1. 内容的舒适性不论是颜色还是文字或是组件本身 , 在暗色环境下的使用感受应当是舒适的 , 而不是十分费力的 。
如果一个颜色在浅色下使用正常 , 在暗色下却亮的刺眼或根本看不见 , 那必然不够舒适也不可读;所以在颜色的处理上不建议直接使用 , 这样会让界面变得到处都是“亮点” , 让眼睛不适的同时 , 也会带来许多误操作 。