设为首页 - 加入收藏 站长在线 - 常用服务器软件 - 在线站长工具 - 在线伪原创工具
您的当前位置:主页 > 网站运营 > 策划盈利 > 正文

进阶高级!视觉误差对UI设计的影响和解决方案(附50+案例)

来源:ZzWww 编辑:ZzWww 时间:2017-09-25

  全网营销推广 A5营销双节大优惠

  视觉误差会对 UI 造成什么样的影响,业界内流行的解决方案又有哪些,本文将以超过五十个例子为你讲解。

  俗话说眼见为实,但其实我们的眼睛经常欺骗我们。眼睛通过光的反射接收信息,然后经过一次「脑补」最终形成我们所谓「看见」的图像。脑补这个过程会因为各种原因的影响导致我们对于「看见」的事物的理解产生偏差。这一点对图形化操作界面的设计非常影响。既然无法绕过,设计师就要学会如何去「适配」人类的视觉惯性画出“正确”的界面。

  一. 物理尺寸与视觉尺寸

  长宽 400px 的正方形与长宽 400px 的圆形哪一个更大?假如这样问你的话,那么答案当然是一样大。但是来看看下面这张图,长宽各 400px 的两个图形看起来并不一样大。你的眼睛告诉你 400px 的正方形比 400px 的圆形更大一些。物体的物理尺寸是一样的,但视觉尺寸却有可能不一样。

  

 

  为了更加准确地证明这个现象的存在,下面这张图给出辅助线,大家好好看看。

  

 

  我们改变一下圆形的尺寸,看看现在这两个图形的视觉尺寸有没有更接近一些?

  

 

  每个人的感官可能都不一样,但对于我来说,调整尺寸后的两个图形看起来才是一样大的,至少也不会像图一一样,让人第一眼就认为正方形比较大。为什么会这样?因为我将圆的直径增加了 50px。

  

 

  现在我们将图形都叠起来看,看看为什么会产生这种那么明显的误差。400px 的两个图形叠在一起,你会发现整个圆形都被包裹在了正方形之内,而正方形多出的四个面积巨大的 a 区域就是造成这种视觉误差的原因。再将 400px 的正方形与 450px 的圆形叠在一起,正方形无法将整个圆形包裹在内了,圆形超出的四个 b 区域又与 正方形多出来的 a 区域在视觉上互相抵消,所以 450px 的圆形与 400px 的正方形在视觉尺寸上更接近,也就是我们常说的“一样大”。

  

 

  不仅是圆与方,所有的图形都能够造成这样的偏差。当我们追求“看起来一样大”这个目标的时候,某些形状的物理尺寸应该更大一些。

  

 

  这个现象对于界面造成的影响会有哪些呢?譬如说,当绘制一套 icon 的时候,我们当然是追求每个 icon 都看起来一样大。但假如我们只通过物理尺寸来进行量度的画,画出来的 icon 必然会个大个小,乌七八糟,更糟糕的是,这种问题经常发生,手机里随便打开个 app 都能发现这样的问题。

  

 

  在画 icon 的时候,一定要把视觉尺寸这个无法用数字进行衡量的维度考虑进去。视觉重量小的元素要放大,视觉重量大的元素要缩小。建议大家可以去下载 HIG 的标注 icon 与 Material Design 的标准 icon 看看,数百个图标每一个的物理尺寸都不尽相同,但看起来全部都是一样大的,这是高水平的表现,值得细细学习与参详。

  

 

  抽出几个当做例子,大家看看。

  

 

  加个粉色等大的边框,或许你会看得更加清楚。

  

 

  不是每个人都会有空给每个图标加个框来测量视觉尺寸的平衡,这里教个大家一个老司机才会的办法,搞个高斯模糊,如果高斯模糊之下每个图标看起来都差不多大,那么就可以说大致达成了视觉尺寸相等。

  

 

  面对那些不需要由我们画的 icon,比如分享到 Twitter、分享到 Instagram ,官方已有提供的 icon,用起来也要注意。

  下面举个例子,Facebook 和 Instagram 的 icon 是正方形的,而 Twitter 和 Pinterest 的 icon 一个是不规则图形,一个是圆形,所以为了达到视觉尺寸上的相等,当它们一起出现的时候,我们要放大 Twitter 和 Pinterest 的 icon,实际效果如图所示。

  

 

  另外一个达不到视觉尺寸相等的重灾区就是表单配按钮这种常见的组合。通常是长方形的表单如果和直径相等的圆形按钮摆在一起,必然也会出现圆形按钮看起来比较小的问题。

  处理方法相信大家也都知道了,略微放大按钮,这样整个表单和按钮才能达到视觉平衡,视觉尺寸才能相等。

  

 

  对于这个现象的处理方法并没有那么简单,就拿上面那个例子来讲,有没有除了放大按钮以外的其他处理手法呢,当然是有的。条件允许的话我们可以对按钮添加一些颜色,让它看起来的视觉重量更重,这也能达成视觉尺寸相等。

  

 

  记住这些点

  物体有物理尺寸,但是人眼所见,并对面积或体积自行加以理解后所认知的视觉尺寸并不会与物体的物理尺寸完全相等。

  正方形的视觉重量是最重的,越接近正方形的 icon 看起来也会更重,更大,反之更轻更小。

  规范建议绘制 icon 的安全区域主要就是为了解决视觉尺寸对等问题,留给设计师的操作空间。

  二. 视觉对齐与形状

  视觉对齐可以说是视觉尺寸这种现象的一种逻辑上的延伸。还是跟上半部分一样,来看张简单的图,这两个东西对齐了吗?

  

 

  以物理尺寸的角度来看,它们绝对对齐了,因为这两个长条是一样长的。但是,由视觉的角度来看,上面那一条是不是看起来比下面那一条长一点?

  

 

  我们修改下长度再看看。

  

 

  试着增加下面那条长条的长度。让下面那条长条多出 20px,这时候它们看起来才是对齐的,达成了视觉对齐。

  

 

  再来看看几种常见的样式。

  

 

  以下这种彩带样式的图相信大家都做过,要让整个图看起来平衡、整齐,就要利用上这种现象,有意识地加长需要加长的部分,才能做到对齐。

  

 

  我们再看一个实验例子,带背景的文本要如何进行对齐。这时候要根据背景颜色的深浅决定对齐的方式。

  

 

  如果是浅色背景的话,我们就不需要改变文本的长度,直接添加背景,浅色的背景由于视觉重量轻,尚且不会造成什么不好的影响。

  

 

  如果是深色背景的话,做法就不一样了。如图所示,我们要让黑色背景与文本对齐,而放置于黑色背景之内的文本要有一定程度的缩进,这样才能达到视觉对齐的效果。

  

 

  与浅色背景不同,深色背景的视觉重量本身比较重,要让文本看起来更加一体的话,就一定要这样做。否则抓眼的背景会过分突出,让看起来对齐的感觉消失。

  

 

  这种现象与排列原则最常应用于按钮与输入框。

  

 


TAG标签:

相关文章:

网友评论:

文章右边250
Top