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

用户头像
成都/设计爱好者/3年前/252浏览
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
大家都在看
登录注册