7个原则,看懂「深色模式」设计

用户头像
成都/设计爱好者/3年前/249浏览
7个原则,看懂「深色模式」设计

本文分享深色模式的7个原则,从视觉到设置,了解深色模式设计

深色模式的浪潮逐渐褪去,现在只留下对它两极化的评论。

爱的人爱不释手,讨厌的人也咬牙切齿。

但不管如何,深色模式已经是移动端和网页端的设计标准,摹客的编辑界面也在9月正式上线了深色模式。

大多数人喜欢深色模式的原因,都基于以下两点:

  1. 色彩的高对比会弱化背景,更聚焦内容展示;
  2. 新鲜感,黑色的视觉效果更炫酷。

想要更好的设计深色模式UI,了解这7个原则是关键。

7个原则 从视觉到设置

1.使用低饱和度的颜色

在深色模式下,界面本身比较暗沉,使用鲜艳的颜色会对用户不太友好,导致阅读性较差。所以在设计的时候需要避免使用高饱和度颜色。

2.避免纯黑色

虽然大家对深色模式的印象是“黑”,但其实在真正展示中很少包含纯黑色,甚至纯黑色就不是一个好的选择。纯黑色会增大对比,就如第1点所说,会损害阅读性。


在Material Design——谷歌设计规范,建议使用较深的灰色(#121212)作为背景色。

3.避免阴影

阴影的作用是帮助我们看到视觉层次,然后,它们在深色模式下并不实用。想在深色模式下突出视觉层次,需要用颜色、透明度等方式创建界面层次。

4.用颜色层级创建视觉层次

在深色模式下,即便非100%的黑色也很难看出阴影效果。

所以想突出视觉层次,就需要利用颜色层级来实现。这和画素描逻辑差不多,在多个图层中,对立面颜色深浅、亮度、透明度的调整,才是实现视觉层次的关键。

需要深色模式开发的背后,通常都会有一个数字化产研团队,设计师仅是团队中的一环,其中对比度、阴影、颜色更是需要严格管理和把控的设计规范。


设计规范管理,可以利用第三方设计平台, 协助UI设计师高效协作。

设计规范管理,摹客DT更懂中国设计师

5.检查对比度

深色模式中的对比度很容易被忽略,根据大多数设计习惯,文字主次会通过调整颜色深度或者自重来展示,直接效果就是辅助内容用的颜色更浅,字体更轻。

这种调整往往在深色模式下会失效,过浅的文字会看不清楚,破坏可读性。所以,对对比度的敏感在深色模式下也特别重要。

6.遵循设计规范

苹果和谷歌的设计规范里包含所有主要平台对于深色模式的原则。根据他们的设计规范调整设置,确保设计内容符合主流生态系统。

查看Apple和Google设计规范:

7.用户自由开关

最后这一点很重要,把深色模式的使用权交给用户决定。


就像开篇所说,目前关于深色模式的舆论,两极分化严重。所以,对深色模式设置灵活的开关方案,让用户自由选择是否使用。

0
举报
|
5
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
平面男孩喝咖啡插画设计
金色颗粒质地的平面
中秋节可爱呆萌平面兔子蛋黄月饼贴纸素材
牛奶乳液层次梯田平铺平面
空的平台平面和自然景观
城阙凡花
金色颗粒质地的平面
金色颗粒质地的平面
“知识宅急送”外卖,快递,平面,海报,素材,教育
玄关入门地毯印花图案红地毯
倒计时,海报,平面
平面人物插画
金色颗粒质地的平面
平面风格黄绿色系花朵装饰
平面设计 吊牌设计
金色颗粒质地的平面
城市园林平面布局航拍
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
城市园林平面布局航拍
平面花卉图案扁平简约无缝拼接插画
海底世界插画
金色颗粒质地的平面
城市园林平面布局航拍
空的平台平面和自然景观
平面书法字手写
你可能喜欢
相关收藏夹
UI
UI
UI
UI
大家都在看
登录注册