7个原则带你看懂“深色模式

Date 2024-06-07 14:18:58

  深色模式的浪潮逐渐消退,现在只留下两极分化的评论。爱的人放不下,恨的人咬牙切齿。但无论如何,深色模式已经成为移动终端和网页终端的设计标准,七个原则可以让你理解“深色模式”。

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

  1.色彩的高对比会削弱背景,更注重内容展示;

  2.新鲜感,黑色视觉效果更酷;

  了解这七个原则是更好地设计深色模式UI的关键。


7个原则带你看懂“深色模式


  从视觉到设置七个原则

  1.使用低饱和度颜色

  在深色模式下,界面本身相对较暗,使用明亮的颜色对用户不友好,导致阅读能力差。因此,在设计中需要避免使用高饱和度的颜色。

  2.避免纯黑色

  虽然人们对深色模式的印象是“黑色”,但纯黑色甚至纯黑色并不是真正展示的好选择。纯黑色会增加对比度,正如第一点所说,会损害阅读能力。

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

  3.避免阴影

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

  4.用色层创造视觉层次

  在深色模式下,即使是非100%的黑色也很难看到阴影效果。因此,如果你想突出视觉水平,你需要使用颜色水平来实现它。这类似于绘画素描的逻辑。在多层中,调整对立面的颜色深度、亮度和透明度是实现视觉水平的关键。

  5.遵循设计规范

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

  点击查看Apple和Google设计规范:

  ●深色模式-iOS

  ●深色模式-macOS

  ●Google-黑色主题

  6.检查对比度

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

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

  7.用户自由开关

  最后,将深色模式的使用权交给用户决定是非常重要的。

  正如一开始所说,关于深色模式的公众舆论存在严重的两极分化。因此,为深色模式设置灵活的开关方案,让用户可以自由选择是否使用。

  谈完设计原则后,我们来谈谈设计工具。

  在需要深色模式开发的背后,通常会有一个数字化的生产和研究团队,设计师只是团队的一部分。

  在团队发展中,设计师最重要的只有两点:“专业工作+团队合作”

  复制DT是一种更了解中国设计师的UI设计工具

  ●Sketch/无缝迁移Figma,轻松继承设计资产。

  ●实现灵感的专业矢量设计工具和丰富的层效果。

  ●设计稿一键发布到复制客户合作平台,团队无需切换工具即可轻松评审查看,开发一键下载切割图。

  ●免费使用!没有时间限制,没有数量限制!

  以上是小编今天分享的七个原则,让您了解“深色模式”。我希望这篇文章能对那些想要零基础学习UI设计的人有所帮助。学习是一个漫长的过程。如果你想更快地学习UI设计,你可以来优曼UI设计培训班学习,让你更快地掌握UI设计技术,7天的免费试用体验。

课程推荐
— Course recommendation —
【红喵设计教育】ps教程-ps零基础课程

红喵设计

【红喵设计教育】C4D基础-C4D软件制作教程

红喵设计

【红喵设计教育】包装设计-免费/PS/AI/CDR/平面设计

红喵设计

【红喵设计教育】版式设计-版式的思路PS/AI/CDR/平面设计/排版技巧

红喵设计

【红喵设计教育】ps基础-ps基础入门教程

红喵设计

【红喵设计教育】CDR基础-CDR零基础入门教程

红喵设计

【红喵设计教育】海报基础-PS合成海报设计教程

红喵设计

【野马设计教育】AI基础-AI软件零基础到精通

红喵设计