深色模式该如何着手设计,需要考虑哪些因素

2020-11-30 10:49发布

12条回答
yunfeng
2楼 · 2020-11-30 13:55

对比,颜色的丰富度,风格等

相比于浅色模式,深色模式有如下的优点:

减少眼睛疲劳:当用户阅读大量内容时,尤其是在弱光环境下,使用深色模式能够减少用户阅读时候产生的生物性疲劳。

延长电池寿命:特别是对于OLED屏幕,使用深色模式能减少近30%的电量使用。

聚焦于内容:内容会在深色背景下显得更清晰。

深色模式是一种设计趋势也是一种设计特色。

不建议在深色模式下使用高饱和度的色彩,因为在一定程度上,会增加用户的眼睛疲劳,并且通常也无法满足WCAG AA对比度要求。

在保持品牌一致性的基础上,使用低饱和度的色彩效果会更好。

可以通过色轮来为基础色创建满足深色模式的阴影变体。


4楼 · 2020-11-30 14:45

在深色界面中显示文字,需要考虑文本与背景的对比度是否足够大,次要文本是否依然清晰可见。

不是所有界面都是纯黑灰色作为背景,很多看上去接近深灰色的界面,都会根据产品或者作品的品牌色方向进行调整。

屏幕是通过发光传导色彩,而深色界面发光较弱,因此很多小型的电子产品都会选用纯黑色背景,既突出内容,也省电。


1234
5楼 · 2020-11-30 15:32
设计深色背景时不是简单的把白变成黑,而是对背景使用比较暗的色调,以减少眼睛疲劳。

在浅色模式中,我们倾向于用细微的阴影来传达界面深度,使用起来更加自然。但是在大多数深色模式下,阴影的效果并不明显,通常用颜色的深浅来传达界面的层级关系。
深色模式中,文字的用色通常是纯灰色,不同位置的文字例如标题、正文和注释使用深浅不同的颜色作对比。上图是深色的微信,就利用这种方法来区分不同文字内容,展示文字层次关系。
深色模式应该避免使用特别鲜艳的颜色,较高的明度和饱和度会与深色背景形成强烈的对比,让页面的可读性变差并加深刺激。


我想吃肉
6楼 · 2020-11-30 15:35

深色模式的设计要点

苹果和谷歌都利用各自的设计原则,为深色模式设计做准备工作。在实际设计过程中,不单需要这些基本原则,更重要的是要注意设计深色模式的实用要点。

1. 背景灰度

设计深色背景时不是简单的把白变成黑,而是对背景使用比较暗的色调,以减少眼睛疲劳。

在浅色模式中,我们倾向于用细微的阴影来传达界面深度,使用起来更加自然。但是在大多数深色模式下,阴影的效果并不明显,通常用颜色的深浅来传达界面的层级关系。

关键点:注意应用场景

在知乎的深色模式中,背景的设计从深到浅使用了三级灰度,让页面的层级更分明。

一级灰度的应用场景主要是大的背景色,使用面积相对比较大颜色最深;二级灰度的应用场景是选项的背景色,根据选项的数量设置使用面积,位置排布比较灵活;三级灰度的颜色最浅,使用面积最小,通常用在分割线中。

2. 文字对比

白底黑字和黑底白字带给我们的用眼体验是不一样的。设计不当的深色模式常常因为强对比而变得很刺眼,同时为了提高对光线的吸收虹膜会张得更开,更容易造成眼部疲劳。

关键点:文字间的对比

深色模式中,文字的用色通常是纯灰色,不同位置的文字例如标题、正文和注释使用深浅不同的颜色作对比。上图是深色的微信,就利用这种方法来区分不同文字内容,展示文字层次关系。

另外每个应用的定位都不一样,界面中想传达的信息也有差异,所以要注意不同的设计思路。

关键点:文字与背景的对比

已经更新深色模式的应用主要分为两大类,一类属于工具型应用例如QQ、微信、百度网盘等,这类应用追求的是信息的有效传达,在设计时文字内容和背景色的区分比较明显。

上图是百度网盘的深色模式,可以看出来标题文字与背景有很明显的对比,保障了用户使用时的可操作性和易读性。

这样的设计不需要用户过于沉浸式的阅读,只需要帮助用户快速找到有用的信息并方便使用,这是工具型应用在设计深色模式时必备的原则。

另一类属于内容型应用例如知乎、简书等,这些应用更注重沉浸式的阅读体验,因为用户通常会在某个界面中停留很久来查看内容,所以需要文字与背景的低对比度为阅读营造柔和的氛围。

简书的深色模式中,文字与背景的对比关系就设计得很弱,整个界面呈现出灰色调,这样的设计有助于在弱光环境下的长时间阅读和浏览。

3. 图标/按钮

深色模式应该避免使用特别鲜艳的颜色,较高的明度和饱和度会与深色背景形成强烈的对比,让页面的可读性变差并加深刺激。

关键点:降低色彩明度

在由浅变深的过程中,知乎对改变了界面中所有图标的颜色。

界面里面的图标和主题按钮的色彩,在色相、饱和度上都没有变化,但是明度被不同程度的降低,保证了在不同光照条件下的内容的可读性。

这是深色模式中处理色彩的一种方法,虽然在浅色界面中,我们更喜欢鲜艳的颜色,但明度低的颜色更适合深色主题。匹配这两个模式另一个比较好的方法是创建互补的色板。


风火轮
7楼 · 2020-11-30 16:29
设计深色背景时不是简单的把白变成黑,而是对背景使用比较暗的色调,以减少眼睛疲劳。


在浅色模式中,我们倾向于用细微的阴影来传达界面深度,使用起来更加自然。但是在大多数深色模式下,阴影的效果并不明显,通常用颜色的深浅来传达界面的层级关系。
深色模式中,文字的用色通常是纯灰色,不同位置的文字例如标题、正文和注释使用深浅不同的颜色作对比。上图是深色的微信,就利用这种方法来区分不同文字内容,展示文字层次关系。
深色模式应该避免使用特别鲜艳的颜色,较高的明度和饱和度会与深色背景形成强烈的对比,让页面的可读性变差并加深刺激。


py大白
8楼 · 2020-11-30 16:49

1在深色界面中显示文字,需要考虑文本与背景的对比度是否足够大,次要文本是否依然清晰可见。

不是所有界面都是纯黑灰色作为背景,很多看上去接近深灰色的界面,都会根据产品或者作品的品牌色方向进行调整。

屏幕是通过发光传导色彩,而深色界面发光较弱,因此很多小型的电子产品都会选用纯黑色背景,既突出内容,也省电。

2相比于浅色模式,深色模式有如下的优点:

减少眼睛疲劳:当用户阅读大量内容时,尤其是在弱光环境下,使用深色模式能够减少用户阅读时候产生的生物性疲劳。

延长电池寿命:特别是对于OLED屏幕,使用深色模式能减少近30%的电量使用。

聚焦于内容:内容会在深色背景下显得更清晰。

深色模式是一种设计趋势也是一种设计特色。

不建议在深色模式下使用高饱和度的色彩,因为在一定程度上,会增加用户的眼睛疲劳,并且通常也无法满足WCAG AA对比度要求。

在保持品牌一致性的基础上,使用低饱和度的色彩效果会更好。

可以通过色轮来为基础色创建满足深色模式的阴影变体


嘿呦嘿呦拔萝卜
9楼 · 2020-11-30 16:57

颜色,风格上的设计,颜色搭配的设计

相关问题推荐

  • 回答 195

    你好:关于需要学习几个月能找工作,我的理解和建议如下:1. 首先要确认自身是否有相关的专业积累?因为UI只是设计者手中的工具,它是内在设计思想有效的表达途径。学习软件很容易,但只是掌握工具的运用是远远不够的。2. 如果有相关专业的知识积累,那么工具...

  • 回答 166

    哈哈哈哈  看你是想成多少资产的富婆喽能担起富婆这个称号起码要过百吧UI设计的平均工资是挺高的月入过万不是梦但是在现在这个高消费的社会环境下光靠这个还不够毕竟你一年不吃不喝才12万你可以做UI多赞些钱,然后再做副业...

  • UE和UI是一样的吗2020-11-23 15:33
    回答 98

    UI是英文User Interface的缩写。翻译成中文就是:用户界面,也称人机界面。是指用户和某些系统进行交互方法的集合,这些系统不单单指电脑程序,还包括某种特定的机器,设备,复杂的工具等。UE是英文User Experience的缩写,翻译成中文就是用户体验。是指用户...

  • 回答 8

    不麻烦 首先把这个部分解组 快捷键是 CTRL+SHIFT+G 然后点这个区域 如果点到不需要的元素 就CTRL+3 锁定隐藏,然后再继续点 点到只剩下需要的元素, 把元素弄出来 然后 CTRL+SHIFT+3 显示锁定隐藏,把没用元素删除就可以了。 如果直接点到了需要的元素 同样CT...

  • UI要学多久2020-08-10 19:00
    回答 95
    已采纳

    学会到就业的程度 一般时间为4个月左右,120天时间。 这里说的4个月时间,并不是所有人都是4个月可以学会的, 和学习方法,学习用心程度,学习时间都有关。 如果用错误的学习方法,学4个月是不可能学会的。...

  • 回答 86
    已采纳

    对于UI设计来说,更加看重的是个人的设计能力和理念,以及操作能力,和男女的性别没有太大的关系。

  • 回答 76
    已采纳

    靠谱肯定都靠谱的,就看你自己的兴趣爱好,发展前景都很好,大前端是一种网站搭建,小程序开发等用户端口开发的技术,UI设计就是纯纯的设计师岗位,将设计思维和理念融入到产品运营的每一个交互环节中...

  • 什么叫交互性?2020-04-23 11:40
    回答 6

    其实生活中也有交互性,比如两个人之间的聊天沟通,带有双方的互动都叫做交互。互联网中的交互更多体现在任何互联网设备之间的使用和反馈。

  • 回答 2

    1、初步调查  前期调研对于LOGO设计非常重要。具体周期看项目规模和预算。免费提供logo设计建议和各行业logo设计参考案例。一般情况下,这个时间大约是3天,我们会详细了解企业,对竞争对手的企业logo进行调查分析,这样可以更准确的控制方向,避免logo设计...

  • 回答 1

       永远不要忘记调研  好的设计总是从调研开始。品牌创建需要你预先考虑到所有的细节。  创建品牌、设计LOGO之前需要进行广泛的调研。考虑到在这个过程中你需要对环境和背景中所有的细节都有所掌控,在预算上就一定要留下足够的余地。  此外,你的解...

  • 回答 1

     一、具象表现形式:  具象表现是忠实于客观物象的自然形态,对客观物象采用经过高度概括与提炼的具象图形进行设计的一种表现形式。它具有鲜明的形象特征,是对现实对象的浓缩与精炼、概括与简化,突出和夸张其本质因素。标志设计的形态不可能像绘画的形式...

  • 回答 1

    1.设计应在详尽明了设计对象的使用目的、适用范畴及有关法规等有关情况和深刻领会其功能性要求的前提下进行。2.设计须充分考虑其实现的可行性,针对其应用形式、材料和制作条件采取相应的设计手段。同时还要顾及应用于其它视觉传播方式(如印刷、广告、映像...

  • 回答 1

    Looka Smashinglogo Freelogodesign Hatchful 

  • 回答 1

    1、沟通收集信息  在标志设计开始之前,充分与委托方沟通交流,了解委托方对于标志设计的要求。通过与委托方的沟通,尽可能收集诸如企业文化、企业面向的用户群体、企业类型等;在与委托方的沟通交流中,我们可以得知需要通过设计解决委托方的那些需求。为...

  • 回答 1

      Naldzgraphics这个网站据说是个人创办的网站,上面所有的内容都是站主本人在日常中通过手机整理上传的。不过就算如此,网站还是收集了大量的平面设计素材。  Brandsof theWorld是世界知名LOGO资源库网站。上面收录了海量的世界知名Logo图标,而且还提供EP...

  • 回答 1

    1、沟通收集信息  在标志设计开始之前,充分与委托方沟通交流,了解委托方对于标志设计的要求。通过与委托方的沟通,尽可能收集诸如企业文化、企业面向的用户群体、企业类型等;在与委托方的沟通交流中,我们可以得知需要通过设计解决委托方的那些需求。为...

没有解决我的问题,去提问