首页
热门专题
设计专题
深色模式设计指南

深色模式设计指南《从官方规范到实战经验应有尽有！》

14 篇文章 868374 位观众

自从苹果和谷歌发布深色模式以来，国内各个大厂也纷纷跟上，并在此探索过程中总结了许多参考价值极强的宝贵经验。本专题不仅收录了苹果和谷歌的深色模式官方设计规范，更有腾讯阿里等大厂的实战经验总结，让你掌握这个最流行的知识点！

2022-07-31更新

收藏 593

正序倒序

从6个方面，总结深色模式的设计细节思考

从6个方面，总结深色模式的设计细节思考

本文是笔者结合日常工作，完成了这篇对深色模式设计细节的相关总结，希望对大家有所启发。

腾讯设计族 5.3w 人阅读 2022/07/03 UI设计 深色模式

1

腾讯设计师：超全面的深色模式小结

腾讯设计师：超全面的深色模式小结

本文总结了深色模式的历史、讨论了今天不同的用户对深色模式不同的期待，还结合腾讯微云的深色模式适配历程。

ISUX 5.5w 人阅读 2020/11/13 深色模式 深色界面

2

阅读类产品如何做好深色模式？来看起点读书的实战经验！

阅读类产品如何做好深色模式？来看起点读书的实战经验！

这段时间经历了各产品解决方案的轰炸与洗礼，我们又结合「起点读书」本身的产品定位与结构特点，在此背景下一套融合 Dark Mode 和主题皮肤设计的解决方案应运而生。

阅文体验设计YUX 3.3w 人阅读 2020/08/18 Dark mode 起点读书

3

「深色模式」的前世今生，都在这一篇里了

「深色模式」的前世今生，都在这一篇里了

为什么说深色模式是一切的起源？它是如何进入大众视野的，又是如何被应用的？本文京东设计师为你详细梳理了深色模式的前世今生。

土拨鼠 3.3w 人阅读 2020/06/01 Dark mode 夜间模式

4

实战案例复盘！美柚深色模式背后的设计故事

实战案例复盘！美柚深色模式背后的设计故事

本文将分析夜间模式与深色模式的共通点与差异性，结合当前iOS和Android平台的深色模式趋势，推导出符合美柚特色的深色模式优化策略，并落实到具体的执行流程中。

土拨鼠 4.5w 人阅读 2020/05/22 交互设计 产品设计

5

深色模式设计实战！优酷 App 的“黑”化之路

深色模式设计实战！优酷 App 的“黑”化之路

怎样设计好深色模式？用一个优酷改版的实战案例，带你了解深色模式在文娱类 APP 中的应用。

土拨鼠 3.5w 人阅读 2019/12/24 AlibabaDesign 优酷

6

想快速适配深色模式？来看钉钉团队总结的这个实战方案

想快速适配深色模式？来看钉钉团队总结的这个实战方案

随着 iOS13 和 Android 10 的普及，为应用设计深色模式也是业内的趋势之一，及时适配这一特性也是大家目前设计工作中纷纷遇到的挑战。钉钉在 iOS13 上线后迅速跟进了这一设计，并在过程中沉淀了适合大设计团队快速适配的方案。

土拨鼠 6.2w 人阅读 2019/12/23 AlibabaDesign Dark mode

7

谷歌设计规范千呼万唤！这就是你们要的谷歌深色主题设计规范

千呼万唤！这就是你们要的谷歌深色主题设计规范

作为目前最主流的设计风格和主题规范之一，Material Design 的深色主题设计规范非常值得参考学习。

陈子木 22.2w 人阅读 2019/05/17 Android设计规范 iPhone 设计规范

8

高手笔记整理！一份超全面的Material Design 暗色主题设计指南

高手笔记整理！一份超全面的Material Design 暗色主题设计指南

越来越多的 App 开始加入暗色模式，对设计师也提出了更多的要求。本文是高手学习 Material Design 设计规范的学习笔记，收藏起来肯定有用！

程远 5.8w 人阅读 2019/07/18 Material Design 暗色模式

9

苹果设计指南 iOS 13 官方设计指南：深色模式篇中文版

iOS 13 官方设计指南：深色模式篇中文版

官方的指南虽然篇幅较短，但更侧重于细节层面，仍然可以帮助你在真正上手新系统及深色设计之前，对相关设计原则，特别是颜色的适配机制与方法进行了解。

程远 5.4w 人阅读 2019/06/16 iOS 13 WWDC

10

紧跟趋势！深色模式设计的8个小技巧

紧跟趋势！深色模式设计的8个小技巧

今年最热的深色模式该如何设计？本文高手总结了 8 个设计技巧，让你快速掌握「深色模式」的设计精髓。

土拨鼠 4.5w 人阅读 2019/08/28 暗色模式 深色模式

11

如何适配深色模式？用一个 APP 改版案例让你学会！

如何适配深色模式？用一个 APP 改版案例让你学会！

以一个 app 改版案例，深入浅出地告诉大家如何适配深色模式，同时给出了正确和错误的示范，相信对于目前流行的深色设计趋势来说，是非常的实用了。

彩云Sky 4.5w 人阅读 2019/10/23 彩云译设计 改版实战

12

设计要点 WWDC 大会开幕，我们准备了一份「深色模式」设计要点

WWDC 大会开幕，我们准备了一份「深色模式」设计要点

在 iOS 13 正式推出系统级的深色模式后，如何尽快APP 适配必然会成为设计师逃不过去的一个坎，本文为你总结「深色模式」的设计要点，帮你未雨绸缪做好准备。

程远 5.8w 人阅读 2019/06/04 WWDC WWDC大会

13

实战案例用阿里巴巴APP的案例，教你如何快速适配「深色模式」

用阿里巴巴APP的案例，教你如何快速适配「深色模式」

最近超火的「Dark Mode」究竟该如何设计？本文由阿里巴巴的设计团队撰写，就「深色模式」下的体验设计进行了总结和探索。

程远 7.3w 人阅读 2019/06/30 AlibabaDesign 夜间模式

14

本专题已完结，还有81个系列专题

收藏本专题 593

查看更多专题

发评论！每天赢奖品

点击登录后，在评论区留言，系统会随机派送奖品

2012年成立至今，是国内备受欢迎的设计师平台，提供奖品赞助联系我们

本期奖品

AIGC互联网产品设计实践

已累计诞生 736 位幸运星

查看获奖名单

发表评论为下方 2 条评论点赞，解锁好运彩蛋

{{ moreBtnTxt }}

以上留言仅代表用户个人观点，不代表优设立场

评论就这些咯，让大家也知道你的独特见解立即评论

大家都在看

中文字体

21篇文章

AI视频

33篇文章

即时设计的进阶之路

19篇文章

AIGC 大厂实战设计案例

45篇文章

文案写作

37篇文章

DeepSeek 高效使用指南

11篇文章

设计趋势

55篇文章

Stable Diffusion 入门和进阶指南

60篇文章

作品集设计

40篇文章

热门频道

设计灵感

支持与服务

官方社群
优设官方微信群
01优设AIGC自学交流群
02优设小红书个人IP交流群
03优设设计师交流群
04优设UI设计师交流群
05优设交互设计师交流群
06优设电商交流群
07优设私单群

08优设硬件种草交流群
09优设同城搭子群
10优设大学生交流群
11优设插画师交流群
12优设平面品牌设计师交流群
13优设3D设计师交流群
14优设摄影剪辑爱好者交流群
微信扫码添加管理员招财

微信号：扫码添加

严格审核打造高质量交流群

进群会有面试题谢绝打广告
优设微博

@
优设AIGC
400W粉丝！每日更新设计干货
@
优设
强烈推荐！优设官方品牌微博
@
优优教程网
官方微博，海量教程看不完
@
优设基础训练营
零基础入门，带你成为软件高手
优设微信

每天官微五分钟

一年萌新变大神

扫码关注

1000W

优设新媒体矩阵等你来关注

优优教程网

优设大课堂

设计师导航