7个原则带你看懂“深色模式
作者:优漫动游设计部 2022-12-17 17:42 查看: 467
  深色模式的浪潮逐渐褪去,现在只留下对它两极化的评论。爱的人爱不释手,讨厌的人也咬牙切齿。但不管如何,深色模式已经是移动端和网页端的设计标准,7个原则带你看懂“深色模式”。

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

  1.色彩的高对比会弱化背景,更聚焦内容展示;

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

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


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


  7个原则从视觉到设置

  1.使用低饱和度的颜色

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

  2.避免纯黑色

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

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

  3.避免阴影

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

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

  在深色模式下,即便非100%的黑色也很难看出阴影效果。所以想突出视觉层次,就需要利用颜色层级来实现。这和画素描逻辑差不多,在多个图层中,对立面颜色深浅、亮度、透明度的调整,才是实现视觉层次的关键。

  5.遵循设计规范

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

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

  ●深色模式-iOS

  ●深色模式-macOS

  ●Google-黑色主题

  6.检查对比度

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

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

  7.用户自由开关

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

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

  聊完设计原则,再给大家聊聊设计工具。

  需要深色模式开发的背后,通常都会有一个数字化产研团队,设计师仅是团队中的一环。

  在团队开发中,对于设计师而言最重要的只有2点:“专业做事+团队协作”

  摹客DT,一款更懂中国设计师的UI设计工具

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

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

  ●设计稿一键发布至摹客协作平台,无需切换工具,团队轻松评审查看,开发一键下载切图。

  ●免费用!不限时长,不限数量!

  以上就是小编今天为大家分享的关于7个原则带你看懂“深色模式”,希望本篇文章能够对想要零基础学习UI设计的你有所帮助,学习是一个漫长的过程,如果你想更快的学习UI设计,可以来优漫UI设计培训班进行学习,让你更快的掌握UI设计技术,7天免费试学体验。
预约申请试听课
填写下面表单即可预约申请试听!怕钱不够?可就业挣钱后再付学费! 怕学不会?助教全程陪读,随时解惑! 担心就业?一地学习,可全国推荐就业!
IT培训问答
开班时间

微信客服