它们看起来是居中对齐的,但实际上并不是,右边箭头形状的按钮中的文字在物理上并未居中对齐,它距离左右两边的边距是不一样的,这种形状的按钮文字必须靠左一些才能看起来对齐。
说完了水平居中,垂直居中也有非常多的细节要注意。这里告诉大家一个东西,对于大部分操作系统而言或者说较为成熟的设计语言而言,垂直居中必定以按钮文字的首一位大写字母的高度开始算起,但在 Sketch 中,所有的文字都会默认地带上行距,所以在制作文字按钮时,无论是中文还是英文,一定要注意调整行距,这样才能做到你所需要的垂直居中。
以次为排列原则基本上都会让文字(以首位大写字母算起)上下边距相等。大家都这样做的原因是在英文里面,有升部的字母(而大写字母的高度与升部字母的高度大体相似)(l,t,d,b,k,h)要多于有降部的字母(y,j,g,p)。
虽然我们不常用英文,但是多指导一些小常识没有坏处。 说完了文字按钮,再来说说 icon 按钮,相信这个问题你也经常看到过。看看下图,哪一个按钮看起来对齐得比较好?
好吧,希望你能够看出来左边那颗按钮是有问题的,实际上我在画这枚按钮的时候确实点了对齐,但是为什么还会出问题呢?跟文字按钮对齐一样,对齐的方式选错了。一般来说,我们都会默认将飞机当做是一个正方形来进行对齐,但由于图形形状的缘故,这样做必然是错的,将会导致 icon 过于靠左。右边侧那枚按钮看起来就是对的,面对这种特殊的,带角的形状,一定要保证每个角距离按钮边缘的距离是一样的,而这种对齐的方式不能再将 icon 当做是一颗正方形来看。
这就不能依赖 Sketch 的对齐工具了,你要自己画个圆形作为参考线来进行对齐。
如下图,播放按钮也有三个角,那么做它的对齐工作也要注意啦。左边图那枚按钮就是直接点对齐的产物,看起来非常奇怪,对吧?
记住了,有角的 icon 要保证对齐的唯一方式是保证三个角到对应边的距离相等。
记住这些点 边缘有角的图形要拉长一些才能在视觉上与方形边缘的长度对齐。 制作文字按钮时一定要记得调整行距。 有角 icon 的对齐方法是保证每个角到边的距离相等。 3.视觉圆角 圆角也有细节?不是设置一下就好了么?当然不是,一个简简单单的圆角也有很丰富的细节。我们前面说过了,眼睛看到的东西并不能尽信,先来看看下面五个圆并尝试回答哪个圆最圆。
我问过了很多人,大部分的回答都是 3 和 4 比较圆。第一个圆有点瘦,而第五个又有点胖,都不是很圆。还是学上面用到的套路,我们把 3 和 4 叠起来看。实际上 3 号是一个正圆形,而 4 号圆被可以地做胖了一点点,并不是一个正圆,不过也正因如此,很多人会认为 4 才是一个正圆。
这里存在一个现象,经过一点点修改(变胖)的圆对于人的肉眼来说会比正圆更像正圆,这句话有点拗口,但是就是这个道理。看看下图,左手边的圆是一个正圆,右手边的圆是一个经过修改的圆,你瞧瞧是不是这个感觉。
那么我们又该如何利用这种无法规避的错觉呢?利用这一点最常见的地方就是圆角啦,而最著名的实例当然就是在 iOS 里面最常见的圆角了。我们常用的几款设计软件,Sketch、PS、Ai 提供的圆角设置用的是非常直接的计算,就是用一个物理正圆来计算你要的圆角,我们上面说到,人眼不会认为正圆是正圆,所以这也是你无法在 Sketch 直接画出 iOS 圆角的最大原因。 (责任编辑:admin) |