第一站 - 轻松上网从此开始!

上网第一站

当前位置: > SEO >

浅淡UI设计中的视觉误差(含案例讲解)

时间:2017-09-27 09:51来源:我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
俗话说眼见为实,但其实我们的眼睛经常欺骗我们。眼睛通过光的反射接收信息,然后经过一次「脑补」最终形成我们所谓「看见」的图像。脑补这个过程会因为各种原因的影响导致我们对于

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

  1. 物理尺寸与视觉尺寸

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

  

浅淡UI设计中的视觉误差(含案例讲解)

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

  

浅淡UI设计中的视觉误差(含案例讲解)

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

  

浅淡UI设计中的视觉误差(含案例讲解)

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

  

浅淡UI设计中的视觉误差(含案例讲解)

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

  

浅淡UI设计中的视觉误差(含案例讲解)

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

  

浅淡UI设计中的视觉误差(含案例讲解)

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

  

浅淡UI设计中的视觉误差(含案例讲解)

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

  

浅淡UI设计中的视觉误差(含案例讲解)

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

  

浅淡UI设计中的视觉误差(含案例讲解)

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

  

浅淡UI设计中的视觉误差(含案例讲解)

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

  

浅淡UI设计中的视觉误差(含案例讲解)

  面对那些不需要由我们画的 icon,比如那些分享到 Twitter、分享到 Instagram ,官方已有提供的的 icon,用起来也要留个心眼。下面来个例子,Facebook 和 Instagram 的 icon 是正方形的,而 Twitter 和 Pinterest 的 icon 一个是不规则图形,一个是圆形,所以为了达到视觉尺寸上的相等,当它们一起出现的时候,我们要放大 Twitter 和 Pinterest 的 icon,实际效果如图所示。

  

浅淡UI设计中的视觉误差(含案例讲解)

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发布者资料
第一站编辑 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2012-05-22 19:05 最后登录:2014-08-08 03:08
栏目列表
推荐内容
分享按鈕