设计师|UI设计师必看:7个原则,看懂「深色模式」设计

设计师|UI设计师必看:7个原则,看懂「深色模式」设计

文章图片

设计师|UI设计师必看:7个原则,看懂「深色模式」设计

文章图片

设计师|UI设计师必看:7个原则,看懂「深色模式」设计

文章图片

设计师|UI设计师必看:7个原则,看懂「深色模式」设计

文章图片

设计师|UI设计师必看:7个原则,看懂「深色模式」设计


深色模式的浪潮逐渐褪去 , 现在只留下对它两极化的评论 。
爱的人爱不释手 , 讨厌的人也咬牙切齿 。
但不管如何 , 深色模式已经是移动端和网页端的设计标准 ,

△摹客操作界面
大多数人喜欢深色模式的原因 , 都基于以下两点:
1. 色彩的高对比会弱化背景 , 更聚焦内容展示;
2. 新鲜感 , 黑色的视觉效果更炫酷;
想要更好的设计深色模式UI , 了解这7个原则是关键 。
7个原则 从视觉到设置1.使用低饱和度的颜色
在深色模式下 , 界面本身比较暗沉 , 使用鲜艳的颜色会对用户不太友好 , 导致阅读性较差 。 所以在设计的时候需要避免使用高饱和度颜色 。

2.避免纯黑色
虽然大家对深色模式的印象是“黑” , 但其实在真正展示中很少包含纯黑色 , 甚至纯黑色就不是一个好的选择 。 纯黑色会增大对比 , 就如第1点所说 , 会损害阅读性 。
在Material Design——谷歌设计规范 , 建议使用较深的灰色(#121212)作为背景色 。

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

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

5.检查对比度
深色模式中的对比度很容易被忽略 , 根据大多数设计习惯 , 文字主次会通过调整颜色深度或者自重来展示 , 直接效果就是辅助内容用的颜色更浅 , 字体更轻 。
这种调整往往在深色模式下会失效 , 过浅的文字会看不清楚 , 破坏可读性 。 所以 , 对对比度的敏感在深色模式下也特别重要 。

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




7.用户自由开关
最后这一点很重要 , 把深色模式的使用权交给用户决定 。
就像开篇所说 , 目前关于深色模式的舆论 , 两极分化严重 。 所以 , 对深色模式设置灵活的开关方案 , 让用户自由选择是否使用 。

△在摹客操作界面 , 也可以自由选择深浅
聊完设计原则 , 再给大家聊聊设计工具 。
需要深色模式开发的背后 , 通常都会有一个数字化产研团队 , 设计师仅是团队中的一环 。
在团队开发中 , 对于设计师而言最重要的只有2点:“专业做事+团队协作”
●无缝迁移Sketch/Figma , 轻松继承设计资产 。
●专业的矢量设计工具、丰富的图层效果 , 实现灵感 。
●设计稿一键发布至摹客协作平台 , 无需切换工具 , 团队轻松评审查看 , 开发一键下载切图 。