Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >7个原则,看懂「深色模式」设计

7个原则,看懂「深色模式」设计

作者头像
奔跑的小鹿
发布于 2022-11-24 13:17:17
发布于 2022-11-24 13:17:17
8270
举报
文章被收录于专栏:无原型不设计无原型不设计

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

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

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

△摹客操作界面

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

  1. 色彩的高对比会弱化背景,更聚焦内容展示;
  2. 新鲜感,黑色的视觉效果更炫酷;

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

7个原则 从视觉到设置

1.使用低饱和度的颜色

在深色模式下,界面本身比较暗沉,使用鲜艳的颜色会对用户不太友好,导致阅读性较差。

所以在设计的时候需要避免使用高饱和度颜色。

2.避免纯黑色

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

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

3.避免阴影

阴影的作用是帮助我们看到视觉层次,然后,它们在深色模式下并不实用。

想在深色模式下突出视觉层次,需要用颜色、透明度等方式创建界面层次。

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

在深色模式下,即便非100%的黑色也很难看出阴影效果。

所以想突出视觉层次,就需要利用颜色层级来实现。这和画素描逻辑差不多,在多个图层中,对立面颜色深浅、亮度、透明度的调整,才是实现视觉层次的关键。

5.检查对比度

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

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

需要深色模式开发的背后,通常都会有一个数字化产研团队,设计师仅是团队中的一环,其中对比度、阴影、颜色更是需要严格管理和把控的设计规范。

设计规范管理,可以利用第三方设计平台, 协助UI设计师高效协作

更懂中国设计师UI设计工具

https://www.mockplus.cn/dt/?hmsr=zhihu

6.遵循设计规范

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

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

7.用户自由开关

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

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-11-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
超实用!手把手教你从头构建UI设计系统
以下内容由摹客团队翻译整理,仅供学习交流。摹客Mockplus是快速的原型设计工具。摹客iDoc是高效的在线协作设计平台。
奔跑的小鹿
2020/02/03
1.2K0
超实用!手把手教你从头构建UI设计系统
学会HSB色彩模式,让配色有理有据!
作为一名设计师,每天不免都会和色彩打交道,但有时总会苦恼于色感把握不准,让我们配的色彩,总是“不对味儿”。我结合在近期的一些项目中对于 HSB 色彩模式的应用,与大家分享一些结合 HSB(HSV)色彩模式帮助我们进行配色的理论和技巧。也欢迎大家一起讨论,共同进步。
呆呆敲代码的小Y
2021/10/22
1.7K0
漂亮很重要!UI设计师必备的7种色彩搭配方案
合理运用色彩是每个设计师都应必须具备的技能,特别是插画师和UI设计师。色彩理论知识的重要性也变得愈加明显!
用户5009027
2019/08/08
1.7K0
漂亮很重要!UI设计师必备的7种色彩搭配方案
最佳设计规范20例
免费使用摹客设计系统作为UI设计师,整理设计规范也是设计能力的一种体现。所以,无论是自己设计创作的阶段还是和程序员沟通推动产品开发阶段,你的设计规范是否完善,对产品的质量起着决定性的关键作用。
奔跑的小鹿
2019/01/24
2.1K0
最佳设计规范20例
UI界面配色方法终极指南!一篇长文搞定所有问题
静电说:要培养对颜色的敏感度,你必须要了解色彩的原理。在这个基础上去感悟,久而久之,色彩会在你手中变的游刃有余。下面这篇终极色彩指南非常值得一看~让我们不妨再系统梳理一下你的配色技巧吧!
用户5009027
2022/05/23
2.8K0
UI界面配色方法终极指南!一篇长文搞定所有问题
拒绝“枯燥”设计 | 页面自动化配色的探索之路
作者lamchen  腾讯IEG设计中心 设计师 |导语  我们在WeGame详情页设计改版探索中,无意间接触到了图片取色技术。经历一年的摸索和实践,我们在现有取色技术的基础上,制定了自动化配色策略,并相继优化了助手专区,商城节日氛围,以及特色卡片等多个业务场景,取得了较为不错的效果。谨以此文,抛砖引玉,聊聊我们关于图片取色技术在UI设计中的实践心得。 01 自动化配色构想 众所周知,WeGame是面向国内外游戏玩家的一个游戏发行产品;产品中对于单款游戏的详情页,是产品中最基础、也是最核心的内容。 在
腾讯大讲堂
2021/03/01
1.5K0
「 泛政务设计 」可视化色彩体系的配色方法探索
图表是中后台产品最常见的界面信息元素之一,能够直观地展示数据、支撑观点。因大脑对视觉信息的处理优于对文本的处理,所以把数据进行可视化,可以更容易的解释数据模式、趋势、统计规律和数据相关性,也让视觉上也更丰富、美观。 图表的色板是传达信息、美感和情感的重要元素之一。配色不仅要清晰、准确传达信息,给予用户基本的美感,同时需要在多种颜色中,兼顾品牌感,使图表配色不脱离整体的品牌气质。 那是否有什么方法来指导辅助色的建立呢?本文总结了政务类产品在可视化图表配色上的一些探索思路和实践方法。 设计背景与目标 1. 现状
腾讯云设计中心
2022/05/05
2.2K0
「 泛政务设计 」可视化色彩体系的配色方法探索
你说的黑是什么黑
近一年,随着iOS和安卓陆续支持了深色模式,各个团队的一通操作,也的确为用户带来“眼前一黑”的体验。深色模式也成为了前阵子业界最火的话题之一。只是当设计师看了无数的关于深色模式的讨论;当无数产品跟进上线了深色模式;再当无数App的深色模式被骂的改了又改,回头来看看,你说的黑,到底是什么黑。 Chapter 1 我所经历过的深色模式 虽然说,我真正开始做UI设计是近年,但是曾经还是体验过很多深色模式的界面的。甚至有很多产品,天生就是深色模式。可以发现,史前的深色模式,要么是因为技术原因,要么就一些对注
腾讯ISUX
2020/11/10
9450
优化夜间阅读体验 - 夜间模式设计通用方法
你有没有在夜间使用移动设备的习惯?你觉得QQ现有的夜间模式亮度在使用时是否舒适?为了能够更科学的验证我们的设计,我们通过对比度分析、尼特值测试、色彩亮度和色彩通用性等维度去设计界面,并总结出一套优化方
腾讯ISUX
2018/06/29
1.6K0
UI技巧 | 用户界面设计的10个小技巧
点击上方[我分享我快乐]→[...]右上角→[设为星标⭐]即可第一时间获取最新设计资源
用户1730674
2020/05/22
1.5K0
UI技巧 | 用户界面设计的10个小技巧
UI设计师必备的五款界面设计工具
在前几篇文章中,我们分享了一些最受欢迎的原型设计工具,今天我们来谈谈界面设计工具。工具的重要性对于设计师来讲不言而喻。任何想法都需要借助工具来实现。想要成为一名出色的UI设计师,你需要多掌握一些技能,才能增强自身竞争力。同时也给那些想转行做UI设计师的朋友一些工具建议,接下来我们就来盘点一下那些UI设计师需要掌握的界面设计工具。
奔跑的小鹿
2018/08/07
3.6K0
UI设计师必备的五款界面设计工具
APP设计实例解析,深色模式为什么突然就火了?
苹果在2019年6月发布的iOS13中增加了“黑暗模式”,用户打开“黑暗模式”后,应用界面将会变为深色,随后Google Android 10的发布同样搭载“黑暗模式”。为了适配系统,不少APP纷纷推出了深色模式。
奔跑的小鹿
2020/09/16
2K0
APP设计实例解析,深色模式为什么突然就火了?
科研绘图配色
颜色需要有自身的意义。不同的颜色表示不同的分组,相近的颜色表示同一个分组;配色需要展现数据逻辑关系,突出关键数据,比如重要的数据用深色或暖色表示,不重要的数据用浅色或冷色表示。
Twcat_tree
2023/11/30
3.7K0
科研绘图配色
技巧分享: 如何快速搭建一致统一的设计系统
以下内容由摹客(https://www.mockplus.cn)团队翻译整理,仅供学习交流,摹客设计系统是国内独家设计规范制作平台。
奔跑的小鹿
2018/08/10
1K0
技巧分享: 如何快速搭建一致统一的设计系统
不懂设计的产品不是好开发
通过这篇文章,我将向大家介绍下关于设计的一些基本知识,让广大开发者在平时的开发中,可以更好的和设计、产品合作(撕逼)。
用户1907613
2022/03/31
2.6K0
不懂设计的产品不是好开发
纯干货!谷歌MD深色主题设计规范详解(附Sketch官方文件下载)
作为目前最主流的设计风格和主题规范之一,Material Design 的深色主题设计规范非常值得参考学习。这是一套高度自恰的设计规范,有着相当严密的内部逻辑,在 Material Design 的内在隐喻逻辑的推动下,严格遵循国际通行的可用性原则来确保深色主题的可用性和合理性。
用户5009027
2019/05/31
9.9K2
必读!UI设计中颜色使用的10条原则
颜色术语构成了我们颜色知识的基础。将诸如色调,色调和阴影之类的颜色术语视为我们可以用来开发独特调色板的工具。
用户5009027
2020/07/28
3.9K0
必读!UI设计中颜色使用的10条原则
深度译文:设计系统中的自适应颜色(Part 01)
静电说:在今年苹果的开发者大会设计分会场中,苹果设计师在演讲中就提到了色彩可用性的问题,过小的,不便于阅读的配色没有可用性低下,反之则可用性高。本文来自Nate Baldwin ,由静电翻译。来听听他如何探讨如何在多变设计环境中运用自适应颜色来解决问题。这一系列三篇的文章稍显晦涩,但却用一种严谨的方式来阐述了这个问题,非常值得设计师进阶阅读。
用户5009027
2019/07/30
1.1K0
深度译文:设计系统中的自适应颜色(Part 01)
黑暗模式UI设计风潮来袭,设计师应如何应对?
静电说:在最近一段时间里,黑暗模式成了大家讨论的话题。继Mac OS加入黑暗模式后,iOS和iPad OS也相继发布了黑色模式的选择,未来的一段时间里,越来越多的应用开始适配黑暗模式,仿佛它已经成为了UI设计中的一个标配选项。那么对于设计师来说,应该如何应对这个趋势,做出适应不同人群,不同场景风格的优秀界面呢?来看看这篇来自Miklos Philips的这篇文章吧!
用户5009027
2019/06/17
7200
黑暗模式UI设计风潮来袭,设计师应如何应对?
深度译文:UI中设定自适应颜色的原理(Part 02)
这就是为什么我们创建了所谓的“自适应调色板”。这些调色板遵循系统设计方法,其中设计者定义了具体的颜色范畴,而非创建静态颜色样本。颜色是根据其感知要求和关系定义的,并且样本是基于最小的用户输入生成的。
用户5009027
2019/07/30
9700
深度译文:UI中设定自适应颜色的原理(Part 02)
推荐阅读
相关推荐
超实用!手把手教你从头构建UI设计系统
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档