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

上网第一站

当前位置: > SEO >

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

时间:2017-09-27 09:51来源:我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
它们看起来是居中对齐的,但实际上并不是,右边箭头形状的按钮中的文字在物理上并未居中对齐,它距离左右两边的边距是不一样的,这种形状的按钮文

  它们看起来是居中对齐的,但实际上并不是,右边箭头形状的按钮中的文字在物理上并未居中对齐,它距离左右两边的边距是不一样的,这种形状的按钮文字必须靠左一些才能看起来对齐。

  

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

  说完了水平居中,垂直居中也有非常多的细节要注意。这里告诉大家一个东西,对于大部分操作系统而言或者说较为成熟的设计语言而言,垂直居中必定以按钮文字的首一位大写字母的高度开始算起,但在 Sketch 中,所有的文字都会默认地带上行距,所以在制作文字按钮时,无论是中文还是英文,一定要注意调整行距,这样才能做到你所需要的垂直居中。

  

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

  以次为排列原则基本上都会让文字(以首位大写字母算起)上下边距相等。大家都这样做的原因是在英文里面,有升部的字母(而大写字母的高度与升部字母的高度大体相似)(l,t,d,b,k,h)要多于有降部的字母(y,j,g,p)。

  

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

  虽然我们不常用英文,但是多指导一些小常识没有坏处。

  说完了文字按钮,再来说说 icon 按钮,相信这个问题你也经常看到过。看看下图,哪一个按钮看起来对齐得比较好?

  

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

  好吧,希望你能够看出来左边那颗按钮是有问题的,实际上我在画这枚按钮的时候确实点了对齐,但是为什么还会出问题呢?跟文字按钮对齐一样,对齐的方式选错了。一般来说,我们都会默认将飞机当做是一个正方形来进行对齐,但由于图形形状的缘故,这样做必然是错的,将会导致 icon 过于靠左。右边侧那枚按钮看起来就是对的,面对这种特殊的,带角的形状,一定要保证每个角距离按钮边缘的距离是一样的,而这种对齐的方式不能再将 icon 当做是一颗正方形来看。

  

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

  这就不能依赖 Sketch 的对齐工具了,你要自己画个圆形作为参考线来进行对齐。

  

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

  如下图,播放按钮也有三个角,那么做它的对齐工作也要注意啦。左边图那枚按钮就是直接点对齐的产物,看起来非常奇怪,对吧?

  

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

  记住了,有角的 icon 要保证对齐的唯一方式是保证三个角到对应边的距离相等。

  

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

  记住这些点

  边缘有角的图形要拉长一些才能在视觉上与方形边缘的长度对齐。

  制作文字按钮时一定要记得调整行距。

  有角 icon 的对齐方法是保证每个角到边的距离相等。

  3.视觉圆角

  圆角也有细节?不是设置一下就好了么?当然不是,一个简简单单的圆角也有很丰富的细节。我们前面说过了,眼睛看到的东西并不能尽信,先来看看下面五个圆并尝试回答哪个圆最圆。

  

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

  我问过了很多人,大部分的回答都是 3 和 4 比较圆。第一个圆有点瘦,而第五个又有点胖,都不是很圆。还是学上面用到的套路,我们把 3 和 4 叠起来看。实际上 3 号是一个正圆形,而 4 号圆被可以地做胖了一点点,并不是一个正圆,不过也正因如此,很多人会认为 4 才是一个正圆。

  

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

  这里存在一个现象,经过一点点修改(变胖)的圆对于人的肉眼来说会比正圆更像正圆,这句话有点拗口,但是就是这个道理。看看下图,左手边的圆是一个正圆,右手边的圆是一个经过修改的圆,你瞧瞧是不是这个感觉。

  

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

  那么我们又该如何利用这种无法规避的错觉呢?利用这一点最常见的地方就是圆角啦,而最著名的实例当然就是在 iOS 里面最常见的圆角了。我们常用的几款设计软件,Sketch、PS、Ai 提供的圆角设置用的是非常直接的计算,就是用一个物理正圆来计算你要的圆角,我们上面说到,人眼不会认为正圆是正圆,所以这也是你无法在 Sketch 直接画出 iOS 圆角的最大原因。

  

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

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