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

2022-12-12 0 1,086

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

浅色商业模式的大潮渐渐显露,那时只遗留下对它两极分化的文章。

爱的人垂涎三尺,痛恨的人也不禁。

但无论怎样,浅色商业模式早已是终端端和页面端标准结构设计,摹客的撰稿介面也在9月正式宣布上架了浅色商业模式。

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

△摹客快捷键

大多数人讨厌浅色商业模式的其原因,都如前所述下列三点:

1. 美感的高对照会淡化大背景,更著眼文本展现;

2. 真实感,白色的声效更炫酷;

想更快的结构设计浅色商业模式UI,介绍这7个准则是关键性。

7个准则 从听觉到增设

1.使用低饱和度的颜色

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

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

2.避免纯白色

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

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

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

3.避免阴影

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

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

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

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

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

5.检查对照度

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

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

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

6.遵循结构设计规范

苹果和谷歌的结构设计规范里包含所有主要平台对于浅色商业模式的准则。根据他们的结构设计规范调整增设,确保结构设计文本符合主流生态系统。

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

浅色商业模式- iOS

浅色商业模式- macOS

Google-白色主题

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

7.用户自由开关

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

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

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

△在摹客快捷键,也可以自由选择深浅

聊完结构设计准则,再给大家聊聊结构设计工具。

需要浅色商业模式开发的背后,通常都会有一个数字化产研团队,结构雕塑家仅是团队中的一环。

在团队开发中,对于结构雕塑家而言最重要的只有2点:“专业做事+团队协作”

摹客DT,一款更懂中国结构雕塑家的UI结构设计工具

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

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

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

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

————

作者:摹客

举报/反馈

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务