UI设计教程：界面设计时该如何面对视觉误差？.doc

UI设计教程:界面设计时该如何面对视觉误差?
最近的“蓝黑白金”事件非常的火,引发了大家对视觉误差的思考。今天火星时代借此为大家献上UI设计教程,与界面设计爱好者们一起探讨视觉误差问题。对于学习“视觉设计”专业的同学而言,这个问题同样值得深思。
俗话说:“耳听为虚,眼见为实”,不可否认眼睛是人的感觉器官中最直接,最能反映事物原貌的。但眼睛看到的是否就一定反映客观事实呢?其实不一定。人类的眼睛,有它特有的成像原理和信息处理过程。就像所有的计算机程序一样,再精密的程序也会有BUG,所以眼睛有时候也会产生错觉,甚至不同人的主观感受也会有细微差异。
我们作为视觉设计师需要总结的是:当我们遇到这些视觉BUG的时候,该如何处理呢?
让我们来看几个经典的视觉误差案例感受一下吧。
埃冰斯幻觉
黄绿色圆和紫色圆其实一样大,但是前者看起来小一些,是不是很神奇?
托兰斯肯弯曲幻觉
猜猜这三个圆周的直径哪个最大?其实都一样o_O
平行线错觉
其实都是平行线(⊙_⊙)?
在设计工作中,也难免碰到存在视觉误差的场景。总的来讲,我们在界面设计时处理视觉误差的方法可以分为三个方面:
1、有时我们需要避免造成视觉误差的设计
例如“流程条”,设计师们一定不陌生,它可以帮助用户非常清晰的了解完成一个目标的全过程和当下所处的位置,那我们看看下面这个“流程条”的设计。
这种设计应该也很常见,但是个人并不太喜欢这样的形式,看过上面经典视觉误差案例的同学应该注意到了,它跟第三种“平行线错觉”形似,“平行线”配合“>>”可能会造成视觉误差,让人感觉这个平行线不平行。会给人不舒服的感觉,有强迫症的人看了更是受不了吧?~>_<~+,虽然错觉不那么明显,但是我还是会避免使用这种形式。
再来看一个例子:界面设计的时候,常常会遇到模块的划分,会用到色块和线框,看下图,你会感觉到黑线是凸出来的,正常人都喜欢对齐嘛,那么看到这个就会感觉到不舒服了,实际上呢,看放大的部位,其实客观上看它们真是对齐的,因为人眼的错觉,导致感受上不对齐,所以我们要避免这种色块和线框接触的设计,如果一定需要这样的形式,那么我们也是有办法的,那就是降低“色块”和“线条”的明暗差,来缓和视觉误差:(见下图右侧)是不是感觉好多了。
2、有时我们需要利用视觉误差
视觉误差客观的存在,那么我们就得按它的规矩来,了解它才能驾驭它。比如说像素画:
早在红白机年代,像素画风靡全球,它有自己的独特优点:文件字节数小、占内存小,非常适合当年的“龟速网络”和“效率低下的CPU”。但是要画好像素画,是需要具备一些专业知识的。
对于直线、点、曲线、立体感、透视等等都有标准的规则,把像素画拉近了看,其实都是一些像素点,只有远看整体才能看到最终效果(有点类似油画)。
放大看和整体看,像素画给人的感受差异很大,也存在”视觉误差”,那么这些像素画的”规则”,其实就是建立在对视觉误差的”利用