飞特网

  • 飞特网官方微博
  • 飞特网微信公众号

一篇文章吃透 Dark Mode ,搞定“暗黑/深色”适配

留苏发布于:2019-9-27 09:57 |原作者: 海边来的设计师
简介: 目前网上有关Dark Mode的科普文章有很多,这里不再赘述。只讲和具体工作有关的内容。 下面会着重讲述APP中各组件适配 Dark Mode(暗黑模式 或 深色模式)的方式和注意事项,以及一些细节的处理建议。 ... ...
版权申明:本文出自“海边来的设计师”原创,感谢“海边来的设计师”的原创文章分享!
曾在公司多次分享Dark适配,如今编写图文,为免内容过长,对内容做了提炼。

一篇文章吃透 Dark Mode ,搞定“暗黑/深色”适配 飞特网 设计理论

FEVTE编注:更多经典SKETCH教程和SKETCH经验分享、作品交流请访问飞特网SKETCH教程栏目:https://www.fevte.com/plan/sketch/

前言

本文脱胎于我在公司内时长60分钟的分享,为免文章过长,对内容做了提炼。

-

目前网上有关Dark Mode的科普文章有很多,这里不再赘述。只讲和具体工作有关的内容。

下面会着重讲述APP中各组件适配 Dark Mode(暗黑模式 或 深色模式)的方式和注意事项,以及一些细节的处理建议。

但更重要的,是让大家掌握适配暗黑模式的工作量。避免轻易开工,导致进退两难...

下面分四块讲述:

1.两大平台做法:层级、颜色

2.技术实现范围

3.Dark细节

4.Dark难点

文字如有思虑不周、描述不清之处,还望各位大佬指正。

一、两大平台做法

今年Android Q 和 iOS 13 都开始支持暗黑模式。

下面我将从"层级"、"颜色"两方面讲述两大平台的做法。

1.1 层级

通过背景、投影,表达层级关系是设计常用的手法。如下图:

一篇文章吃透 Dark Mode ,搞定“暗黑/深色”适配 飞特网 设计理论

列表在背景上方,所以背景颜色比列表暗。同理,搜索框颜色比背景色暗,可以理解为搜索框在背景的下层(凹槽)。

可是在黑暗模式下,颜色明暗关系发生了变化:

一篇文章吃透 Dark Mode ,搞定“暗黑/深色”适配 飞特网 设计理论

iOS 13中的搜索框却比背景色要亮,二者的层级关系随之发生变化。

PS:iOS 13中Sheet弹窗也会改变页面的层级关系。

再看Android Q的设置页:

一篇文章吃透 Dark Mode ,搞定“暗黑/深色”适配 飞特网 设计理论

在浅色模式下,页面背景为白色,搜索框也是白色,但通过投影表示,悬浮在背景上方。而两个提示卡片则采用灰色,表达的层级高低依次是:搜索框、背景、提示卡片

一篇文章吃透 Dark Mode ,搞定“暗黑/深色”适配 飞特网 设计理论

在暗黑模式下,搜索框、背景、提示卡片 三者的明暗强弱依次是:搜索框、背景、提示卡片。透露出的层级关系与浅色模式下一致。

一篇文章吃透 Dark Mode ,搞定“暗黑/深色”适配 飞特网 设计理论

诚然iOS 13的暗黑适配效果,看起来比Android Q优秀。毕竟苹果每个元素都经过静心设计。

一篇文章吃透 Dark Mode ,搞定“暗黑/深色”适配 飞特网 设计理论


1

好评

差评

刚表态过的朋友 (1 人)

留苏
河北省 石家庄市 平面设计师
+ 关注 私信
  • 【干货】美术字体设计的N中方法
  • sketch入门教程
  • sketch新手教程

最新评论

我来说两句:
B Color Image Link Quote Code Smilies |上传
您需要登录后才可以评论和提交作业 登录 | 立即注册

上传作业

本周热点文章

关于飞特| 广告服务| 付款方式| 友情链接| 网站地图| 联系我们| 加入我们| 举报| 飞特网旧版| 飞特网