抖音更新双色模式:深浅设计模式,UI设计知识教程

时间:2021-06-03     来源:易思训教育 作者:易思训
分享: 更多

这两天刷抖音的你,有没有发现评论区变白了?



图片


当然大家很快就能发现,其实抖音在前几天悄悄更新了双色模式,可以自选切换颜色背景。


图片


关于深浅背景,好像没什么好说的,不就是换个颜色么?但实际上关于深色与浅色模式的使用却是有很多讲究的,看似简单,其实是个大工程。


深浅模式的历史


深色模式的历史其实可以从很早追溯起,1960年代和70年代的计算机没有GUI(图形用户界面),并且大多使用单色监视器以文本模式运行。


因此基本上都是黑屏白字或者绿字,看上去非常单调枯燥。


1977年,彩色显示诞生,灯光模式也就出现了。不过主要还是颜色反转,模拟白纸黑字的效果。


图片


最近几年,深色模式又开始深入人心。大家对深浅模式设计就不再只是为了模拟白纸打印效果了,那么深浅模式的设计对于用户体验来说到底有何不同呢?


深色模式的奥秘


深色模式,其实真的可以省电。


在OLED面板上,每个像素是单独点亮的。当背景为白色时,所有像素均打开,显示器需要更多的功率。而当像素为黑色或暗灰色时,显示器的功率要求自然会降低。


图片


目前市面上大部分的手机使用的都是OLED屏幕,所以深色模式对于手机续航还是还是相当友好的。


深色模式,其实真的可以护眼。


深色模式可以减少屏幕蓝光,减轻眼睛干涩与疲劳。


浅色模式的奥秘


浅色模式,更符合人的阅读习惯。


长久以来的白纸黑字阅读,让人们更习惯浅色模式下的阅读方式。


浅色模式,阅读性效率与耐力更高。


在深色模式下,文本发出的光较少,我们的瞳孔需要扩大以允许更多的光线。


图片


所以当你在深色屏幕上看到浅色文本时,其边缘渗入更多黑色背景,这被称为光晕效果。它降低了阅读的便利性,同时也导致长时间阅读时带来的图像模糊与眼睛疲劳。


深色模式与设计


许多设计都是默认建立在浅色模式下的,那么针对深色模式的设计,要注意哪些问题呢?


1.背景灰度


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


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


图片


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


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


2. 文字对比


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


图片


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


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


图片


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


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


3. 图标/按钮


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


图片


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


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


小结


无论深色或者浅色,都只是产品向用户呈现的一种界面状态,最终的目的是为了更良好的使用体验。


不管针对什么样的模式,都要记得从产品自身出发,从用户体验出发。


IT培训选易思训教育培训机构,易思训IT培训课程是易思训品牌课程,易思训培训汇集IT培训讲师,IT就到易思训教育!了解详情请登陆易思训教育培训官网(www.yisixun.com)!



相关文章

今日优惠
免费试听教程