亿元级IT行业生态链
一站式解决方案提供商

24小时免费咨询电话
010-52725243

新闻资讯

AJIA NEWS

UI设计中的视觉平衡之形状的对齐

来源:行业资讯 发布日期:2018-03-23

上一篇我们讲了UI设计中视觉平衡中的物理尺寸与视觉尺寸,除此之外,视觉对齐是对视觉平衡和视觉重量的一个延伸,而阿甲科技全案设计团队的UI设计师提示,视觉对齐与像素对齐是有区别的,看下图中的长条形,你觉得他们的长度一样吗?

阿甲 科技 图中的长条形长度一样吗?

其实这两条形状像素的长度是一样的,但是第一眼看上去,下面的线要短于上面的线。

阿甲 科技 这两条形状像素的长度是一样的

再来一张,感觉有什么变化吗?

阿甲 科技 感觉有什么变化吗?

设计师对下面的两根线进行了视觉的补偿,将下面的线增加了20像素,增加了顶端的长度,使两个形状在视觉上达到平衡。

阿甲 科技 两个形状在视觉上达到平衡

下图还有一些更加复杂的图形例子。

阿甲 科技 更加复杂的图形例子

所以,当我们在设计一张有折叠条纹的海报,或在产品和网站上用到折叠条纹时,请注意要考虑视觉平衡:尖锐的边缘要比其他的区域突出一些,特别是如果它是一个矩形。

阿甲 科技 要考虑视觉平衡

那如何对齐有背景的文本和段落呢?这取决于背景的视觉重量,如果背景是轻的,可以将突出的段落和其他文本对齐。

阿甲 科技 如果背景是轻的,可以将突出的段落和其他文本对齐

由于背景很浅,一般不会打断正常的阅读。

阿甲 科技 由于背景很浅,一般不会打断正常的阅读

但在深色的背景上需要不同的处理,下图由于背景是黑色的,所以需要将背景与段落文本对齐,而背景中需要强调的白色文本则以缩进的方式对齐。

阿甲 科技 由于背景是黑色的,所以需要将背景与段落文本对齐

与浅色的背景不同,黑色有很大的视觉重量,如果目标是希望无缝的插入一段文字,最好是以下面的方式进行对齐。

阿甲 科技 黑色有很大的视觉重量

相同的原则也可以用在按钮和输入框。

阿甲 科技 相同的原则也可以用在按钮和输入框

左侧浅色背景的输入框,标签文字没有跟输入框的边缘对齐,而是跟用户输入的内容对齐,右下角的发送按钮,也没有对齐输入框的最右侧,因为这个按钮是深色的,从视觉上看是重的。

右侧,输入框是一个描边的框,标签文字跟输入框的框体对齐,而用户输入的内容则有一定缩进;发送按钮有一个三角形的边缘,所以把此按钮向右移动,也是为了跟上面的输入框达到平衡。

阿甲 科技 从视觉上达到平衡

下图我们来看另一种对齐,即文本在按钮中的对齐。下图中的按钮,文本看起来是完美居中的。

阿甲 科技 文本在按钮中的对齐

诀窍在于,右边的按钮,把文字向左边移动了,因为它右边的边缘是三角形。此外,右边箭头按钮的总宽度也增加了40像素,为了跟左边正方形的按钮看起来视觉上一致。

阿甲 科技 右边的按钮,把文字向左边移动

文本按钮不仅有水平对齐,还有垂直对齐,特别是对于英文字体。在操作系统,网站和APP的界面设计中最常用到的对齐方式是Cap高度对齐,是基于大写字母的高度对齐,等同于“H”和“I”的高度。

阿甲 科技 文本按钮还有垂直对齐

大写字母的上方与下方的间距是相等的。这种对齐方式被最广泛的应用也是有原因的。因为英文字母中有向上升部分的占多数,如:l, t, d, b, k, h。有下降部分的则占少数,如:y, j, g, p。而大写字母的高度与具有上升部分的英文字母高度基本一致。

阿甲 科技 大写字母的上方与下方的间距是相等的

另一种对齐的方法是使用字体的小写高度(所谓的“x高度”)来与背景对齐。在无衬线的字体中,它等同于字母x的高度。

阿甲 科技 使用字体的小写高度来与背景对齐

这个方法也是有道理的,因为一个文字主要的视觉重量集中在放置小写字母那个区域。

阿甲 科技 一个文字主要的视觉重量集中在放置小写字母那个区域

这两种方法有区别吗?有区别,但是区别不大。

阿甲 科技 这两种方法有区别吗?

下面是更多的例子,左侧使用Cap高度对齐,右侧使用了x高度对齐。左侧使用了Cap高度的的 Cancel 和 OK 刚好视觉上居中,因为Cancel没有下降的字母,而OK都是大写字母。而x高度的方法在最右侧Sync按钮上是比较好的,因为字母中既有上升和下降的字母元素。右侧Cancel和OK在以x高度对齐的方式下都显得太过于靠上了。

阿甲 科技 更多例子

说完了文字,我们在看图标的对齐。图标的情况略有不同,我们把一个发送的图标放到一个圆形里,哪一个看起来更加平衡?

阿甲 科技 图标的对齐

希望你能注意到是左侧图标在对齐上有些问题,因为两个图标用了不同的对齐方法。左侧使用了默认的对齐方式,如果这个图标刚好是矩形,那么这样的处理方法是对的,因为把PNG或者SVG文件给开发同学时,他就是一个矩形的形状。而右边的对齐方法则是让图标的边缘跟圆形背景的边缘等距对齐。

阿甲 科技 两个图标用了不同的对齐方法

如果当你准备切这样一个图标给开发,你需要预留一些空间,这样他就能够在视觉上达到对齐,如下图。

阿甲 科技 预留一些空间就能够在视觉上达到对齐

播放按钮也是同样的道理,如果你直接对齐一个三角形和圆角矩形,看起来就比较奇怪。

阿甲 科技 播放按钮也是同样的道理

如果要更好的将三角形放置准确,请将其放置在一个圆形容器中,然后将这个圆跟背景对齐。

阿甲 科技 如果要更好的将三角形放置准确,将其放置在一个圆形容器中

划重点:

· 具有不规则、锋利边缘的形状应更大,以便与相邻的矩形对象平衡。

· 在按钮文字对齐中,以Cap高度的对齐方式目前是应用最广的形式。

· 调整三角形图标对称时将它置入一个圆形容器,然后用这个圆形与背景对齐。

免责声明:本文由小编转载自网络,旨在分享提供阅读,版权归原作者所有,如有侵权请联系我们进行删除。

阿甲科技

欢迎访问阿甲科技集团官方网站!