深色模式设计指南 - 优设网 - 学设计上优设

菜单优设网 - 学设计上优设

会员

开通优设VIP星球

尊享13项VIP特权持续新增

主题打卡挑战

21天带练！告别无效练习

接私单赚外块

VIP优先接，累计金额超百万

优设私房课免费学

价值178元热销课程

你的私人律师

每月可免费咨询30次

开通VIP

领取更多设计师实用特权

投稿

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

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

14 篇文章 693652 位观众

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

2022/07/31更新

收藏 489

正序倒序

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

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

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

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

1

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

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

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

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

2

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

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

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

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

3

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

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

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

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

4

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

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

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

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

5

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

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

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

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

6

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

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

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

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

7

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

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

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

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

8

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

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

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

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

9

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

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

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

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

10

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

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

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

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

11

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

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

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

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

12

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

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

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

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

13

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

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

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

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

14

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

收藏本专题 489 查看更多专题

发评论！每天赢奖品

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

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

本期奖品

海报设计原理与实例解析

已累计诞生 259 位幸运星

查看获奖名单

发表评论已发布2条

{{ moreBtnTxt }}

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

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

大家都在看

新拟态设计

8篇文章

B 端产品设计

41篇文章

LOGO设计

23篇文章

即时设计的进阶之路

9篇文章

Sketch 进阶指南

30篇文章

手机摄影

24篇文章

配色指南

42篇文章

Banner设计

33篇文章

免费图库

43篇文章

热门频道

设计灵感

支持与服务

优设微博

@
优秀网页设计
380W粉丝！每日更新设计干货
@
优设
强烈推荐！优设官方品牌微博
@
优优教程网
官方微博，海量教程看不完
@
优设基础训练营
零基础入门，带你成为软件高手
官方群
优设官方微信群
01优设25+设计师交流群
02优设30+设计师交流群
03优设求职招聘群
04优设同城交友群
05优设私单群
06优设学生交流群

07优设UI设计师交流群
08优设插画师交流群
09优设平面品牌设计师交流群
10优设3D设计师交流群
11优优教程自学团
12优设VIP知识星球交流群
微信扫码添加管理员招财

微信号：扫码添加

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

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

每天官微五分钟

一年萌新变大神

扫码关注

1000W

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

优优教程网

优设大课堂

设计师导航

优设训练营