亚洲人成影院午夜网站_无码人妻精一区二区三区_人人妻人人爽人人澡人人_美女内射无套日韩免费播放

最近iOS版(ban)微(wei)信上(shang)正式更新深色模式，这一(yi)举动引发了(le)广(guang)大(da)网友的骚动和议论……

其实回顾我们常用的(de)APP，有很多都更新了(le)深色(se)模式，而且每个APP对深色(se)的(de)定义和设(she)计都有差异。

实际上深(shen)色模(mo)式(shi)已经来临(lin)，而且(qie)在很(hen)多产品中(zhong)都(dou)能发(fa)现(xian)它的身(shen)影，之(zhi)后也(ye)会愈加流行。那(nei)么(me)设计(ji)师面(mian)对深(shen)色模(mo)式(shi)，该从何处(chu)着手设计(ji)又要考虑哪些因素呢(ni)？

本文就为大家提供一份全面的总结。文章目录如下：

一、选择深色模式的原因

1. 需(xu)求趋势(shi)

自从过去一年以来，Android 10和iOS 13上都适配了深色模式，而且Apple和Google也一直致力于将资源和注意力投入到深色模式中，这也让深色模式备受用户的关注。

2. 专注内容

深色模式在弱光环(huan)境下有更(geng)好的可读性，让我们更(geng)专(zhuan)注(zhu)于眼(yan)前的屏幕。深色背景(jing)会降低内容周围元素的影(ying)响，特别是以(yi)图(tu)片和视(shi)频为(wei)主(zhu)的应用，让用户更(geng)专(zhuan)注(zhu)内容。

作为内容消费型应用的Netflix ，就把深色背景作为默认的设计样式，深色的设计让用户更能集中注意力，延长使用时间。

3. 减轻刺激

相对于其他颜色(se)，深色(se)系的(de)(de)设(she)计在夜晚(wan)看(kan)着最舒服。可(ke)(ke)能晚(wan)上玩手(shou)机不(bu)用担心光线太刺眼，但是(shi)深色(se)模式对护眼并没(mei)有什(shen)么帮助，只能说可(ke)(ke)以减少对眼睛的(de)(de)刺激。

4. 提高续航

深(shen)色(se)模式更(geng)省电只(zhi)适用于(yu)OLED屏幕。OLED面板的每个(ge)像素点可以单独发光，当使用深(shen)色(se)模式时，部(bu)分(fen)(fen)像素点被(bei)熄灭(mie)，只(zhi)点亮部(bu)分(fen)(fen)像素，屏幕的一(yi)部(bu)分(fen)(fen)相(xiang)当于(yu)处(chu)在休眠状态，所以会(hui)更(geng)加(jia)省电。

二(er)、平台(tai)设计指南(nan)

1. iOS平(ping)台深色模(mo)式(shi)设计

在深色(se)模式下，Apple重新审视了(le)iOS中UI样式和颜色(se)的含义，让我们来看(kan)看(kan)在iOS上设计深色(se)模式带(dai)来的变化。

（1）语义化颜色(se)（Semantic Colors）

所谓语义化颜色，就是不再通过某一固定的RGB色值来描述颜色，而是根据用途来描述，让界面元素可以自动适配当前的外观模式。

淘宝团队就参考了苹果官方的适配建议，通过语义化颜色的方式进行适配，使适配成本大幅降低。设计师根据不同UI元素的特性先期制定颜色语义化规则，进而技术在框架层面通过「颜色自动反转」技术实现颜色反转。

（2）系统颜(yan)色

除了语义化颜色，Apple还提供了9种预定义的系统颜色，在浅色和深色模式中，这些颜色会动态变化，支持整个系统的外观，同样也可以自适应选定的界面样式。

（3）模(mo)糊与动态效果

在iOS13上，苹果引入了4种模糊效果和8种动态效果，它们自动适应iOS界面样式。 这是在浅色和深色模式下不同的模糊效果。

苹果还在iOS深色模式排版套件中引入4种动态效果，3种为叠加效果，1种分隔效果。

2. Android平台深色模式(shi)设计

谷歌提供广泛的文(wen)档支持，帮助设计师了解深色主题如何在Android生态系统运行。

（1）Elevation（阴影）

UI界面元素间的投影最能让用户清晰地感知用户界面的深度。在设计深色主题时，组件将保留与浅色主题相同的默认阴影组件。Elevation越靠上, 颜色就会越浅。

（2）无障碍性与对比

深色UI设计中的背景应足够暗以显示白色文本。设计师要注意背景和文字之间至少使用15.8：1的对比度。这样可以确保将正文在最前面时，能通过WCAG（Web内容无障碍指南，使网站内容更容易访问）的AA标准。

（3）颜色

深色模式必须避免饱和的颜色，以免引起眼睛疲劳。相反，设计师应专注于使用不饱和的颜色，以增加清晰度。主色和辅色的选择还取决于对浅色和深色UI主题的考虑。

（4）文(wen)字不(bu)透明(ming)度

在(zai)深色背(bei)景上设(she)计浅色文(wen)(wen)字(zi)时(shi)，高度(du)(du)(du)强(qiang)调的(de)文(wen)(wen)字(zi)不透(tou)明度(du)(du)(du)为87％；一般提示文(wen)(wen)字(zi)的(de)不透(tou)明度(du)(du)(du)为60％；禁(jin)用文(wen)(wen)字(zi)的(de)不透(tou)明度(du)(du)(du)为38％。

三、深色模式的设计要点(dian)

苹果和(he)谷(gu)歌(ge)都利(li)用(yong)各自的(de)设(she)(she)(she)计(ji)原(yuan)则(ze)，为(wei)深色模式设(she)(she)(she)计(ji)做准备(bei)工作。 在实际设(she)(she)(she)计(ji)过程(cheng)中，不(bu)单需要(yao)这些基本(ben)原(yuan)则(ze)，更(geng)重要(yao)的(de)是要(yao)注意设(she)(she)(she)计(ji)深色模式的(de)实用(yong)要(yao)点。

1. 背(bei)景(jing)灰度

设计深色(se)背(bei)景(jing)时不是简(jian)单(dan)的把白变成黑(hei)，而是对背(bei)景(jing)使用比较暗的色(se)调，以减(jian)少眼睛疲劳(lao)。

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

关键点(dian)：注意(yi)应用场景

在知乎的(de)深(shen)色模式中，背(bei)景的(de)设计(ji)从深(shen)到浅使用(yong)了三级灰度，让页面的(de)层(ceng)级更分明。

一级灰度的(de)应用(yong)场景(jing)主要是(shi)大的(de)背景(jing)色(se)(se)，使(shi)用(yong)面(mian)(mian)积(ji)相对比较大颜色(se)(se)最深(shen)；二(er)级灰度的(de)应用(yong)场景(jing)是(shi)选(xuan)项的(de)背景(jing)色(se)(se)，根(gen)据选(xuan)项的(de)数量设(she)置使(shi)用(yong)面(mian)(mian)积(ji)，位置排(pai)布比较灵(ling)活；三级灰度的(de)颜色(se)(se)最浅(qian)，使(shi)用(yong)面(mian)(mian)积(ji)最小，通常用(yong)在分割(ge)线中。

2. 文字(zi)对比

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

关(guan)键(jian)点：文(wen)字间(jian)的对比

深色(se)模式(shi)中(zhong)，文(wen)字(zi)的(de)用(yong)色(se)通常是纯灰色(se)，不(bu)同位置的(de)文(wen)字(zi)例如标题(ti)、正文(wen)和(he)注释使用(yong)深浅不(bu)同的(de)颜色(se)作对比(bi)。上图是微信的(de)深色(se)模式(shi)，就利(li)用(yong)这种方法(fa)来区(qu)分不(bu)同的(de)文(wen)字(zi)内(nei)容(rong)，展示文(wen)字(zi)层次(ci)关(guan)系。

另(ling)外每(mei)个应(ying)用的(de)定位(wei)都不一样，界面中(zhong)想传达的(de)信息也有差异，所以(yi)要注意不同的(de)设计思路。

关键点：文字(zi)与背景的对比

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

上图是(shi)百(bai)度网盘(pan)的(de)深(shen)色(se)模式，可(ke)以看(kan)出来(lai)标题(ti)文字与(yu)背景有很明(ming)显的(de)对比，保障了用(yong)户(hu)(hu)使(shi)用(yong)时(shi)的(de)可(ke)操作(zuo)性(xing)和(he)易读性(xing)。这(zhei)样的(de)设计不(bu)需(xu)要(yao)用(yong)户(hu)(hu)过于沉浸(jin)式的(de)阅读，只需(xu)要(yao)帮助用(yong)户(hu)(hu)快(kuai)速找到(dao)有用(yong)信息并方便使(shi)用(yong)，这(zhei)是(shi)工具型应用(yong)设计深(shen)色(se)模式时(shi)必备(bei)的(de)原则。

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

简(jian)书的(de)(de)(de)深色模式中，文字与背景的(de)(de)(de)对比(bi)关系(xi)就设计(ji)得很弱，整个界面呈现出灰(hui)色调(diao)，这样的(de)(de)(de)设计(ji)有(you)助(zhu)于在弱光环境下(xia)的(de)(de)(de)长时间(jian)阅读(du)和浏览。

3. 图标/按钮

深色模式(shi)应该(gai)避(bi)免使(shi)用特别鲜艳的(de)颜色，较高的(de)明度和饱(bao)和度会(hui)与深色背景(jing)形(xing)成(cheng)强烈的(de)对比，让页面的(de)可(ke)读性变差并加深刺激。

关键(jian)点：降低色彩明(ming)度

在由浅变深(shen)的(de)(de)过程(cheng)中(zhong)，知乎对改变了界(jie)面(mian)中(zhong)所有图(tu)标的(de)(de)颜(yan)色(se)(se)。界(jie)面(mian)里面(mian)的(de)(de)图(tu)标和主(zhu)题按(an)钮的(de)(de)色(se)(se)彩(cai)，在色(se)(se)相、饱和度上都没有变化(hua)，但是明度被(bei)不同程(cheng)度的(de)(de)降(jiang)低(di)，保证了在不同光照条件(jian)下的(de)(de)内(nei)容的(de)(de)可读性。

这是深色模(mo)式处理色彩的一种方法，虽(sui)然在(zai)浅色界面中，我们(men)更喜欢鲜艳颜色，但明度低(di)的颜色更适合深色主题。匹(pi)配两(liang)个模(mo)式另一个比(bi)较(jiao)好(hao)的方法是创建互补的色板。

四、结论

无论深色(se)或(huo)者浅色(se)，都只是产(chan)品向用(yong)户呈(cheng)现(xian)的一(yi)种界面(mian)状(zhuang)态，最终的目的是为了更良(liang)好的使用(yong)体验。

不管选(xuan)择什么样的模式，都(dou)要记得从产品自(zi)身(shen)出发，并牢记这几点：

了(le)解趋势(shi)：熟悉深(shen)色模式流行起来的原因，以及苹(ping)果和(he)谷歌对此的相关(guan)研究；

找对方(fang)向(xiang)：在准备(bei)设计深(shen)色(se)模式前，要先了解清楚产品(pin)对(dui)应(ying)的平台、满足的标准；

掌握要点：设计深(shen)色(se)模式(shi)更(geng)多要求的(de)是颜色(se)上的(de)变化(hua)，利用(yong)灰度色(se)阶拉开背景颜色(se)，把握文字与背景间(jian)的(de)强(qiang)弱关系，适当(dang)降低图标的(de)明度和饱和度。