易捷网络专注企业网站建设
11年企业网站建设经验、响应式网站建设,兼容PC、手机、平板全
终端,给你更佳的浏览体验...

网站设计中该如何应对视觉误差

来源:网站建设行业资讯网
添加时间:2022-01-17

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

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

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

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

埃冰斯幻觉

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

托兰斯肯弯曲幻觉

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

平行线错觉

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

好了,分享就到这。

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

以上内容由科技(深圳网站制作,深圳网站设计)为您提供,更多精彩内容:http://www.fantodo.com/

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


网站建设计最新案例赏析:


吴江正大纺织厂
上海艾艺信息技术
东莞索诚电子
广州黑蜂科技有限公司
浙江爱就推门玩具
东莞纳普电子科技
江苏天兴环保股份
东莞莲泉净水设备
上海科宁会展服务
深圳华测实验室技术
 

网站建设行业资讯推荐阅读:


如何让网站建设更加完美手机网站建设如何优化以便于获得更好的排名!超链接文字的颜色和状态经营性与非经营性互联网信息服务如何界定URL静态化之网站优化结构基本方式盘点网站优化中遇到的奇葩案例如何避免seo的三个误区深圳做一个网站建站到底投入多少钱合适广州网站建设公司是否越大越好,是否越有实力越好营销型网站有哪些设计技巧3个小技巧帮你设计先进的空白页面科技教你如何选择一个优质的域名如何基本建设自身网站的主页可用性基本知识有助于SEO企业电商网站建设需要注意那几点深圳网页设计怎么都不会错的6条配色原则营销网站获得更高浏览率的技巧优化网站如何为企业“带货”为什么软件定制项目难做软件外包公司该怎么发展浅谈软文的作用以及如何利用深圳网站建设之网站策划内容网站建设的外观形象重要性体现在什么方面网站制作的费用小程序分销商城基本建设商城网站必需的几个控制模块解析HTML5页面的价值在何处深圳网站制作公司友情链接删除通知企业网站制作及网络推广方案网站如何做才可以防止变成摆设当你的网站被黑了,你要怎么处理为您解读网站建设(二)告别混乱,是时候来理清交互设计!坪洲网站建设设计要遵循什么原则创意与用户习惯ERP软件定制开发包含哪些服务科技与你分享优秀邮件营销人员修炼指南网建服务商高效网站建设基本服务流程!做深圳外贸网站建设需要注意哪些细节问题网站优化的细节是什么深圳深圳网站优化网站设计的失败要素及常见问题网站改版的好处有哪些网站地图对于网站制作的意义网站设计的基本要素常有什么快播冤诉赔不起2.6亿元湘鄂情要接手快播紧跟潮流的政府机构网站设计欣赏服装网站建设时应该要注意什么电子商务网站这样设计才能提高竞争力网站无法打开有哪些原因如果获取微信商户收款二维码电子商务推广方式的发展趋向是必定如何把一个新站百度权重从0到1的4深圳网站建设中如何对网站空间进行选择说明企业手机网站的6项好处网站认证已开启,让互联网推开诚信之门定制网站,就是那么的高大上!免费建站网站建设出来网站好吗广州网站建设最该关注的几个点!网站建设好后如何进行网站优化弓|流,增加网站流量的技巧!企业借助互联网逆袭的秘密武器是什么无从下手从五种经典网页布局开始设计
企业网站建设行业信息服务发布平台!
(www.fantodo.com)版权所有