优艾设计网

聊聊界面设计过程中,遇到视觉BUG时的处理方法

优艾设计网 https://www.uibq.com 2020-09-14 00:00 出处:网络 作者:ued.baidu
前几天的“蓝黑白金”事件,已经有设计师同学揭秘了误差的原因,木想到今天百度的同学出了升级版的教程,聊聊界面设计过程中,遇到视觉BUG时的处理方法,非常涨姿势的一篇实用文

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

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

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

聊聊界面设计过程中,遇到视觉BUG时的处理方法

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

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

聊聊界面设计过程中,遇到视觉BUG时的处理方法

2、有时我们需要利用视觉误差

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

早在红白机年代,像素画风靡全球,它有自己的独特优点:文件字节数小、占内存小,非常适合当年的“龟速网络”和“效率低下的CPU”。但是要画好像素画,是需要具备一些专业知识的.

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

提示:键盘也能翻页,试试"← →"键
0

精彩评论

暂无评论...
验证码 换一张
取 消