UI设计公司

UI设计优秀公司,5大方法教你快速设计深色暗黑模式

浏览:48 发表时间:2020-03-26 14:43:17

  UI设计优秀公司,深色主题是应用界面设计的最新趋势。MacOS去年推出了深色主题模式后,Android和iOS也紧随其后,推出了各自的深色主题模式。

  曾经稀有的深色主题现已受到大众的广泛期待。

  假如设计妥当,深色主题能够带来诸多优点,能够缓解视疲惫,弱光下更易读。并且,根据屏幕的不同,能够大大削减电池耗费。

  可是,想要设计一套超卓的深色主题并非易事,不能仅仅简略地重复使用色彩或回转色彩。假如这样做,作用将拔苗助长:加重视疲惫,弱光下更难阅读,乃至或许打破界面的信息层次结构。

  UI设计优秀公司,这篇文章主要将说明怎么设计可读、均衡和超卓的深色主题。

  深暗浅明

  大多数深色主题的UI设计都遵从这一原则:深层界面更暗,浅层界面略亮。这模拟了从上方投射光线的环境,带来熟悉且令人安心的物理作用。

  在进行深色主题设计时,很容易就会经过回转浅色主题来实现作用。可是,这样做反而会使底层变亮,而表层变暗。这有悖于物理规律,会让人感觉不自然。

  与以上方法不同,咱们应该从浅色主题的主界面取色,回转此色彩,以取得深色主题的主界面色彩。然后在近表层调亮这种色彩,在底层调暗这种色彩。

  在Superhuman,咱们的深色主题是由五种灰色暗影构成的。表层界面使用较浅的灰色;底层的界面使用较深的灰色。

  越接近表层的界面使用较浅的灰色,接近底层的界面使用较深的灰色。

  从头审视感知对比度

  UI设计优秀公司,在经过参阅浅色主题来设计深色主题时,很重要的是要从头审视感知对比。也便是说,关键是看一个元素表现出来的差异,而不是看数值终究是多少。

  例如,在咱们的浅色主题中,联系人信息文字为不透明度为60%的黑色。可是在咱们的深色主题中,咱们将联系方式设置为不透明度为65%的白色。

  虽然两者的对比度都超越AA标准,可是额外的5%却能够防止视觉疲惫,特别是在弱光条件下。

  关于这些补偿并没有严格的规则。相反,咱们会根据文本区域、字体大小和行宽别离调整每一个元素,以确保深色主题和浅色主题相同明晰、易于阅读。



UI设计优秀公司




  少用大面积亮色

  在浅色主题中,咱们经常使用大面积的亮色,作用一般还不错,因为咱们最重要的元素或许会更亮。但在深色主题中是行不通的,大面积亮色会把咱们的注意力招引过去。

  例如,在浅色主题中,粉红色的蒙层不会把用户的注意力从色彩更亮的对话框上招引走。可是在深色主题中,相同的蒙层却会招引注意力。所以咱们拿掉了这种蒙层,这样用户就能够快速、轻易地关注到重要的部分。

  防止纯黑或纯白,有以下四个理由:

  1.真实性

  UI设计优秀公司,真实的黑色并不存在于咱们的日常环境中(世界上最黑的物体,麻省理工学院开发的一种尚未命名的资料,离真实的黑色还差0.005%)。因此,咱们的视觉现已习惯了将相对的漆黑视为黑色。

  这便是为什么#000000会让人感觉如此不和谐,尤其是在与较浅的元素对比时,它与咱们一般看到的任何东西都不匹配。

  2.黑色拖影

  当较浅的元素被拖动或滚动在纯黑色布景上时,就会发生黑色涂改这种视觉失真。

  这种作用出现在OLED屏幕上,这种屏幕越来越普遍。在这些屏幕上,纯黑色像素会被封闭(这便是为什么深色主题比浅色主题耗费更少的电量)。

  可是,这些像素的敞开和封闭比改动色彩要慢,因此这个变量响应导致了拖影作用。

  你能够经过使用深灰色来防止黑色拖影,因为那样的话像素将不会被封闭。这乃至适用于像#010101这样的深灰色,并且仍然比浅色主题更省电。

  4.光晕

  UI设计优秀公司,纯白文本与纯黑布景形成最高对比度是21:1。从量化的WCAG(Web内容无障碍攻略)的使用条件来看,这简直是最佳输出对比。

  可是,在设计漆黑主题时,必定要注意对比度,对比度太高会导致眼睛疲惫和光晕。

  3.深度

  假如在布景中使用纯黑色,你就无法去表现深度。

  打个比方,假如界面布景是纯黑色的,你想在上面画一个告诉界面,告诉应该漂浮在布景之上,所以你要使用暗影来传达深度。可是,这种情况下暗影是难以察觉的,因为没有什么比纯黑更黑。

  假如你的布景不是纯黑色的,你能够使用不同不透明度的暗影和模糊来表达深度。

  加深色彩

  为了防止眼睛疲惫和光晕,咱们把文本的色彩调暗,所以彩色元素和按钮或许会显得太亮了。必须调整这些色彩,以更好地习惯深色的主题。

  UI设计优秀公司,首先,咱们降低亮度,使这些色彩不会抢邻近文本的视觉焦点。然后,增加饱和度,使他们仍然保持原有特征。


Copyright @ JJSDESIGN All Rights Reserved  皖ICP备案号19012581号

 

UI设计,品牌logo设计,UI制作外包,UI设计公司

 

推广区域:合肥 北京 上海 广州 深圳 杭州 南京 武汉 成都 重庆 长沙 厦门 青岛 宁波 天津

 

 

友情链接:百度

客服中心
热线电话
+86-17855120083
上班时间
周一到周六
全国热线
+86-17855120083
微信
17855120083
二维码