唐山网页设计:为什么你应该避免振动颜色组合

2019.08.02 mf_web

59

唐山网页设计在这篇快速文章中,您将了解颜色振动如何影响Web界面设计环境中的界面易读性。

大胆还是加油?

界面设计者中出现了一种新的趋势,即模仿印刷设计中常见的花哨色彩方案。虽然部分是由于意识形态趋势,但这种冲动也出现在现代网页设计师可用的新发现的印刷范围内,这种印刷范围鼓励类似印刷的布局和大型印刷。重要的是要注意每种介质之间的区别,这种介质会导致振动颜色在打印时更加允许,而对于网络来说则更少。

Frooti网站上的振动颜色

在印刷中,使用大胆的配色方案通常意味着在杂志架上被忽略和进行销售之间的差异。另一方面,在用户界面中,我们有其他考虑因素优先于强行抓住用户的注意力,特别是文本的易读性。

什么是振动?

大胆和高度饱和的配色方案中出现的主要现象之一是看似“振动”的颜色,其中两个直接相邻的颜色的边缘看起来合并,模糊和发光,产生运动的错觉。 

外部两个样本具有振动颜色的文本,而中间样本具有具有等光值的文本。

色彩理论家约瑟夫·阿尔伯斯(Josef Albers)警告他不要在他的经典颜色交互中使用振动颜色:

“这种最初令人兴奋的效果也让人感觉很有侵略性,甚至让我们的眼睛感到不舒服 人们发现除了广告中的尖叫效应之外很少使用它,因此它是令人不快,不喜欢和避免的。“

对于彼此具有低可见度的一对颜色,它们必须是等亮度的,具有相似的亮度值。然而,为了明显地振动,颜色通常具有高饱和度并且彼此互补,在色轮上移动大约180°。

蓝色(HSB 210,99,100)红色(HSB 12,99,100)

天线宝宝第一高手论坛-tt538天线宝宝开奖结果-天线宝宝论坛精选资料专区-天线宝宝论坛开奖结果在上面的例子中,红色和蓝色色调可以在色轮的相对两侧找到(虽然不是直接相对),两者的亮度都是100。

Spotify EDM
Spotify EDM

Spotify已成为大胆配色方案的代名词,用于吸引注意力。有时这些组合可能会令人反感,即使它们没有真正意义上的振动; 例如上面示例中的紫色背景按钮。用户的眼睛会识别它是什么,但有些人可能很难确定形状的外边缘。 

易读性

当设置为等光,振动颜色时,界面文本受到严重阻碍。我自定义选择这些振动颜色:

当发生颜色振动时,受发光失真效应影响最大的元素是两种颜色之间的边缘。这就是为什么在UI字体,小图标和其他不足以补偿其模糊振动边缘的细节元素的情况下振动特别危险的原因。

这是同一组样本,这次是全彩色盲人看到的:

除了经常令人烦恼的振动和模糊的颜色,对于那些看到全彩色的人,给定相同亮度的颜色,那些有色盲的人最终可能根本看不到任何东西。虽然有不同程度的色盲,但最好是在可访问性方面保持安全。

天线宝宝第一高手论坛-tt538天线宝宝开奖结果-天线宝宝论坛精选资料专区-天线宝宝论坛开奖结果例如,Apple Watch上的垃圾桶图标对于有色盲的人不可见:

色觉(左)与色盲(右)

结论

唐山网页设计振动颜色可以起到良好的效果,但是它们在用户界面的可用性方面存在真正的危险,并且如果在使用之前没有刻意考虑则可能是笨重的。在设计时牢记这一点!


最新案例

联系电话 400-6065-301
赚钱高手两组三中三-三中三复式计算公式-三码中特全免费公开码 本港台现场报码直播j2-本港开奖结果现场开码-本港台现场搅珠直播 正版管家婆一句赢大钱-www管家婆27735com-管家婆小鱼儿论坛心水 九龙心水三肖永不改料-九龙心水525757com-九龙老牌图库彩图大全 澳门123696com开奖结果-626969cc澳门资料大全-2021澳门合彩开彩结果