资讯中心
News
网站制作中该怎么应对视觉误差
发布时间:2022-09-27 00:00   您所在的位置: 网站首页 > 新闻资讯 > 经验杂谈

新概念科技(上海网站制作)按:前几天的“蓝黑白金”事件,已经有设计师同学揭秘了误差的原因,木想到今天百度的同学出了升级版的教程,聊聊界面设计过程中,遇到视觉BUG时的处置方法,特别涨姿势的一篇实用文,来收 >>>

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

咋们作为视觉设计师必须要总结的是:当咋们遇到这些视觉BUG的时候,该如何处置呢?

让咋们来讲几个经典的视觉误差案例感受一下吧。

埃冰斯幻觉

黄绿色圆和紫色圆其实一样大,不过前者看起来小一部分,是不是很神奇?

托兰斯肯弯曲幻觉

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

平行线错觉

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

在设计工作中,也难免碰到存在视觉误差的场景。总的来讲,咋们在界面设计时处置视觉误差的方法可以分为三个方面:

1、有时咋们必须要防止造成视觉误差的设计

例如“流程条”,设计师们一定不陌生,它可以赞助顾客特别清晰的清楚完成一个目标的全过程和当下所处的位置,那咋们看一看下边这样的“流程条”的设计

这种设计应该也很常见,不过个人并不太喜欢这样子的形式,看过上面经典视觉误差案例的同学应该注意到了,它跟第三种“平行线错觉”形似,“平行线”配合“>>”可能会造成视觉误差,让人感觉这样的平行线不平行。会给人不舒服的感觉,有强迫症的人看了更是受不了吧?~>_<~+,虽然错觉不那么明显,不过我还是会防止使用这种形式。

再来讲一个例子:界面设计的时候,经常会遇到模块的划分,会用到色块和线框,看下图,你会感觉到黑线是凸出来的,正常人都喜欢对齐嘛,那么看到这样的就会感觉到不舒服了,具体上呢,看放大的部位,其实客观上看它们真是对齐的,由于人眼的错觉,使得感受上错误齐,故此咋们要防止这种色块和线框接触的设计,假如一定必须要这样子的形式,那么咋们也是有方法的,那便是降0“色块”和“线条”的明暗差,来缓和视觉误差:(见下图右侧)是不是感觉好多了

2、有时咋们必须要利用视觉误差

视觉误差客观的存在,那么咋们就得按它的规矩来,清楚它才能驾驭它。比如说像素画:

早在红白机年代,像素画风靡全球,它有自个的独特优点:文件字节数小、占内存小,特别适合当年的“龟速网络”和“效率0下的CPU”。不过要画似乎素画,是必须要具备一部分专业知识的.

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

放大看和整体看,像素画给人的感受差别非常大,也存在”视觉误差”,那么这些像素画的”规则”,其实便是建立在对视觉误差的”利用”,假如不守规则,做出来的像素画那可就要惨不忍睹了,多种锯齿。

像素画在表现线条的粗细方面也有讲究,由于像素画1像素线条和2像素线条视觉上的粗细差别是特别大的,那么在表现粗细的时候,越来越多的是用颜色的明暗来表现. 在像素画中可以用淡色来表达“细线”,这便是利用了视觉误差. 另外还有“膨胀色”、“收缩色”,全是视觉误差的表现,设计师们可以利用其特点,在自个的作品上更好的开展视觉信息表达。

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

造成视觉误差的原因和类型有好多,我很难一一列举,假如咋们不得不面对它们的时候,咋们应该如何处置呢?再看一看接下来的列子:

做icon是件特别严谨的事情,咋们看一看上图,先进种情况,看参考线,他们的高度严格一致,只是icon的外形不尽相同,第三个icon外形是个圆,“圆”其实可以给人“满、胀”的视觉感受,明明一样的高宽,圆会给人“大一点”的感觉,那么咋们遇到这种情况,会尊重咋们的眼睛,把“圆”相对缩小一部分,也便是咋们看到的第三种情况,这样子是不是更加舒服一部分呢?

好了,分享就到这。

总之视觉设计师必须要关注并清楚到“视觉误差”提供的决定,思考如何更好的处置,为追求“好”增加砝码。欢迎大伙探讨。

以上信息由新概念科技(上海网站制作,上海网站制作)为您提供,越来越多精彩信息:http://www.jianzhan0.com/

关注“新概念科技”微信公众号,迅速获取互联网较新资讯


本文章由新概念互动原创,如没特殊注明,转载请注明来自:http://www.jianzhan0.com/jingyand/74028.html