网易首页 > 网易号 > 正文 申请入驻

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

0
分享至

深色模式的浪潮逐渐褪去,现在只留下对它两极化的评论。

爱的人爱不释手,讨厌的人也咬牙切齿。

但不管如何,深色模式已经是移动端和网页端的设计标准,摹客的编辑界面也在9月正式上线了深色模式。

△摹客操作界面

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

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

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

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

7个原则 从视觉到设置

1.使用低饱和度的颜色

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

2.避免纯黑色

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

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

3.避免阴影

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

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

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

5.检查对比度

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

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

6.遵循设计规范

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

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

● 深色模式- iOS

● 深色模式- macOS

● Google-黑色主题

7.用户自由开关

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

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

△在摹客操作界面,也可以自由选择深浅

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

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

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

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

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

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

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

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

来源:稀土掘金技术社区

作者:摹客

特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。

Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.

相关推荐
热点推荐
全网嘲讽!远嫁印度的丹丹复出带货翻车!直播间刷屏:赶紧回印度

全网嘲讽!远嫁印度的丹丹复出带货翻车!直播间刷屏:赶紧回印度

魔都姐姐杂谈
2026-06-28 05:00:03
成交额第一!603986尾盘冲击涨停

成交额第一!603986尾盘冲击涨停

证券时报
2026-06-29 17:13:06
莫德里奇:穆里尼奥没有联系我,祝他一切顺利

莫德里奇:穆里尼奥没有联系我,祝他一切顺利

懂球帝
2026-06-29 16:34:10
2026广东高考500分难上公办!41.8万过线家长务必看清

2026广东高考500分难上公办!41.8万过线家长务必看清

鬼菜生活
2026-06-28 15:10:50
WTT美国大满贯首轮,蒯曼剃光头孙颖莎横扫,国乒主力全过关

WTT美国大满贯首轮,蒯曼剃光头孙颖莎横扫,国乒主力全过关

南风不及你温柔
2026-06-29 14:01:20
浙江一男子将87克金项链送去维修,回家后少了11克,双方都报了警,金店老板:维修前没有称重是个“疏忽”;老庙黄金:可以道歉,不会补偿

浙江一男子将87克金项链送去维修,回家后少了11克,双方都报了警,金店老板:维修前没有称重是个“疏忽”;老庙黄金:可以道歉,不会补偿

深圳晚报
2026-06-29 13:50:43
佛得角,为啥这么厉害?

佛得角,为啥这么厉害?

混知
2026-06-29 16:07:48
西太平洋中俄轰炸机编队遭美日拦截,歼16迎战F35

西太平洋中俄轰炸机编队遭美日拦截,歼16迎战F35

夏末moent
2026-06-28 18:41:47
37批食品上黑榜,淘宝拼多多居首,两千万级网红店铺查出兽药残留

37批食品上黑榜,淘宝拼多多居首,两千万级网红店铺查出兽药残留

流史岁月
2026-06-27 19:00:03
马特-达蒙谈足球:在我的家里,梅西比我更重要

马特-达蒙谈足球:在我的家里,梅西比我更重要

懂球帝
2026-06-29 12:09:51
外国专家:毛泽东之所以打仗厉害,主要有3大“看家本领”

外国专家:毛泽东之所以打仗厉害,主要有3大“看家本领”

大运河时空
2026-06-29 15:50:03
不打夏联不参加试训,两度拒绝马刺邀请 直通NBA机会徐昕干嘛不要

不打夏联不参加试训,两度拒绝马刺邀请 直通NBA机会徐昕干嘛不要

兵哥篮球故事
2026-06-29 22:00:26
我国录取分极低的3所211大学,不用很高的分就能上,就业不输985

我国录取分极低的3所211大学,不用很高的分就能上,就业不输985

高三倒计时
2026-06-29 18:44:42
机构:继续配置电子布、洁净室及玻璃基板三大主线

机构:继续配置电子布、洁净室及玻璃基板三大主线

财闻
2026-06-29 21:21:28
以当前的实力,一旦中日打起来,结局会怎样?美俄看法一致

以当前的实力,一旦中日打起来,结局会怎样?美俄看法一致

迷彩前沿
2026-05-29 12:52:40
记者:青岛海牛球员张卫将加盟中乙上海海港B队

记者:青岛海牛球员张卫将加盟中乙上海海港B队

懂球帝
2026-06-29 20:26:23
宋丹丹:我对不起杨紫,没想到她会这么红!杨紫:你永远是我妈妈

宋丹丹:我对不起杨紫,没想到她会这么红!杨紫:你永远是我妈妈

玖宇维
2026-06-29 15:44:50
上海球迷穿日本球衣!教授:越是自诩国际化的城市 越要警惕汉奸

上海球迷穿日本球衣!教授:越是自诩国际化的城市 越要警惕汉奸

念洲
2026-06-29 20:05:32
高考450~550分家长,听我一句劝:别拿孩子前途替你们面子买单

高考450~550分家长,听我一句劝:别拿孩子前途替你们面子买单

糖逗在娱乐
2026-06-28 09:08:26
莫言:你细心观察一下你的身边人,凡是动不动就生气的人,没有一个是智者,生活多半过得一团糟糕

莫言:你细心观察一下你的身边人,凡是动不动就生气的人,没有一个是智者,生活多半过得一团糟糕

每日一首古诗词
2026-06-18 06:32:18
2026-06-30 00:19:00
消费电子
消费电子
《消费电子》杂志是由中国电子商会主管、主办的大型消费电子期刊。
1536文章数 840关注度
往期回顾 全部

科技要闻

杀疯了!深圳一天出两家200亿具身智能公司

头条要闻

美从俄乌战场抽身 金灿荣:美国有个大战略目标已完成

头条要闻

美从俄乌战场抽身 金灿荣:美国有个大战略目标已完成

体育要闻

他和伊朗队,再次赢得全世界的尊重

娱乐要闻

跟风电影《给阿公的牛肉丸》开机

财经要闻

万达广场批量易主 多位投资人正式入局

汽车要闻

全新宝马iX3长轴版将于成都车展预售 四季度交付

态度原创

本地
手机
艺术
教育
军事航空

本地新闻

贵州小城的新目标:举办“村超”世界杯!

手机要闻

OPPO Reno16新配色半夏青发布:3D悬浮幸运草设计 3499元起

艺术要闻

16幅 冉茂芹小幅风景油画写生

教育要闻

“六大”扩容“十三大”,到底谁才是真正隐藏的实力派?

军事要闻

普京最新发声:俄罗斯正处于命运攸关之际

无障碍浏览 进入关怀版