相关文章

蓝黑照旧白金?界面设计时我们该如何面对视觉误差

最近的“蓝诟谇金”事件特别很是的火,引发了大家对视觉误差的思考。对于做“视觉设计”专业的同窗来说,视觉误差同样值得研究研究。俗话说:“耳听为虚,眼见为实”,不可否认眼睛是人的感觉器官中最直接,最能反映事物原貌的。但眼睛看到的是否就一定反映客观事实呢?其实不一定。人类的眼睛,有它特有的成像原理和信息处理过程。就像所有的计算机程序一样,再细密的程序也会有BUG,所以眼睛有时候也会产生错觉,甚至不同人的主观感受也会有细微差异。

我们作为视觉设计师需要总结的是“当我们碰到这些视觉BUG的时候,该如何处理呢”

让我们来看几个经典的视觉误差案例感受一下吧

黄绿色圆和紫色圆其实一样大,但是前者看起来小一些,是不是很神奇

猜猜这三个圆周的直径哪个最大?其实一样 o_O

其实都是平行线 (⊙_⊙)?

1、有时我们需要避免造成视觉误差的设计

例如“流程条”,设计师们一定不陌生,它可以帮助用户特别很是清晰的了解完成一个目标的全过程和当下所处的位置,那我们看看下面这个“流程条”的设计

这种设计应该也很常见,但是小我并不太喜好这样的形式,看过上面经典视觉误差案例的同窗应该注重到了,它跟第三种“平行线错觉”形似,“平行线”配合“>>”可能会造成视觉误差,让人感觉这个平行线不平行。会给人不恬逸的感觉,有强迫症的人看了更是受不了吧?~>_<~ ,虽然错觉不那么显明,但是我照旧会避免使用这种形式。

再来看一个例子: 界面设计的时候,常常会碰到模块的划分,会用到色块和线框,看下图,你会感觉到黑线是凸出来的,正常人都喜好对对齐嘛,那么看到这个就会感觉到不恬逸了,现实上呢,看放大的部位,其实客观上看它们真是对齐的,因为人眼的错觉,导致感受上舛错齐,所以我们要避免这种色块和线框接触的设计,假如一定需要这样的形式,那么我们也是有办法的,那就是降低“色块”和“线条”的明暗差,来缓和视觉误差:(见下图右侧)是不是感觉好多了

2、有时我们需要行使视觉误差

对于直线、点、曲线、立体感、透视等等都有标准的规则,把像素画拉近了看,其实都是一些像素点,只有远看整体才能看到最终效果(有点类似油画)。

放大看和整体看,像素画给人的感受差异很大,也存在”视觉误差”,那么这些像素画的”规则”,其实就是建立在对视觉误差的”行使”,假如不守规则,做出来的像素画那可就要惨不忍睹了,各种锯齿.

像素画在体现线条的粗细方面也有讲究,因为像素画1像素线条和2像素线条视觉上的粗细差异是特别很是大的,那么在体现粗细的时候,更多的是用颜色的明暗来表 现. 在像素画中可以用淡色来表达“细线”, 这就是行使了视觉误差. 另外还有“膨胀色”、“收缩色”,都是视觉误差的体现,设计师们可以行使其特点,在自己的作品上更好的进行视觉信息传达。

3、面对视觉误差时,我们遵循一条原则“以你的感受为准”

做icon是件特别很是严谨的事情,我们看看上图,第一种情况,看参考线,他们的高度严酷一致,只是icon的外形不尽相同,第三个icon外形是个圆,“圆”其实能够给人“满、胀”的视觉感受,明明同样的高宽,圆会给人“大一点”的感觉,那么我们碰到这种情况,会尊重我们的眼睛,把“圆”相对缩小一些,也就是我们看到的第三种情况,这样是不是更加恬逸一些呢?

好了,分享就到这。

总之,视觉设计师需要关注并了解到“视觉误差”带来的影响,思考如何更好的处理,为追求“完美”增添砝码。迎接大家探讨。