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

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

新闻资讯

AJIA NEWS

UI设计中的视觉平衡之视觉导角

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

之前通过两篇篇幅,我们了解了UI设计中的视觉平衡中的物理尺寸与视觉尺寸、形状的对齐,开篇的时候我们就说过,眼睛是很奇怪的,眼见不一定为实,也许我们看到的跟实物并不一样,那么设计中是怎么利用的这一特点呢,下面跟随合肥阿甲科技的UI设计师来继续了解视觉导角!

那么,下图中的圆哪一个看起来最圆?

阿甲 科技 哪一个看起来最圆

一般人都会选择3或4。人们觉得1和2太瘦,5又太胖,如果重叠第3和第4(一个几何正圆和一个修改过的圆),我们发现修改后的4号要比3号胖一点,这样的圆眼睛看起来会觉得更圆。

阿甲 科技 一般人都会选择3或4

我从三种著名的几何字体(Futura,Circe和Geometria)提取了O这个字母,鉴于高品质的字体是基于人的视觉感知而建立的,并且使用复杂的视觉结构系统,我认为它们的圆形看起来比几何圆形更圆。

阿甲 科技 高品质的字体是基于人的视觉感知而建立的

我们将这些圆与几何的正圆相重叠,即使是最接近几何正圆的Futura字体也都有一些溢出,其他两个字体也是,都要比正圆形更宽。

阿甲 科技 将这些圆与几何的正圆相重叠

所以,如下图,从视觉的角度来看,修改过的圆看起来会比一个几何圆形更圆。

阿甲 科技 修改过的圆看起来会比一个几何圆形更圆

怎么利用这种现象?对于导圆角,如果你用绘图工具的导角工具,如PS,AI,Sketch。这个恐怕不能直接达到视觉上最好的结果。(这也是在Sketch无法直接画出iOS的圆角的原因。)

阿甲 科技 怎么利用这种现象?

人的眼睛会立即聚焦这些从直线转到圆角的点,这样的导角视觉上并不自然。

阿甲 科技 人的眼睛会立即聚焦这些从直线转到圆角的点

所以我们尝试从视知觉的角度去解决问题。

阿甲 科技 尝试从视知觉的角度去解决问题

这种导角有超出几何导角的额外区域,使得直线和圆之间的折角不会那么明显。

阿甲 科技 这种导角有超出几何导角的额外区域

来,感受下这两种导角带来的区别。

阿甲 科技 感受下这两种导角带来的区别

这样我们可以把这种方法应用在圆角按钮上。

阿甲 科技 可以把这种方法应用在圆角按钮上

可以看出,右边的圆角按钮对于眼睛来说会更舒服。

相同的还对应在App的icon设计上,他们不会简单的用软件导角工具来达到一个完美的结果。我们先看看这两个圆角矩形。

阿甲 科技 先看看这两个圆角矩形

第一个是在Sketch中创建的圆角矩形,第二个称作是超级椭圆,也称作Lamé曲线,是被一个法国的数学家Gabriel Lamé发现并命名。

阿甲 科技 第一个是在Sketch中创建的圆角矩形,第二个称作是超级椭

Marc Edwards,提出了Lamé曲线的公式,形成了从视觉角度看完美的曲线。iOS7的图标就是基于这个曲线。

阿甲 科技 Marc Edwards,提出了Lamé曲线的公式

后来这个形状加入了黄金分割和网格,形成了iOS App icon的设计规范,用来指导新的设计师。

阿甲 科技i这个形状加入了黄金分割和网格

使用超级椭圆的主要优点是他们有更加圆滑的外观。另一方面,这些非标准的形状难以用进实际的界面设计中。应该组合多个SVG,在代码中包含特殊的公式或脚本,或者像Apple一样给他们的PNG应用蒙版。

对于设计过程来说,这里对圆角有一个简单的调整,需要先将图形转化成轮廓,利用图形编辑来调整手柄,让两个点离得近一些。

阿甲 科技 利用图形编辑来调整手柄

这种圆角在视觉上会更为生动。

阿甲 科技 这种圆角在视觉上会更为生动

划重点:

· 绘图软件计算的导角看起来会不自然,因为可以轻松的看到直线与曲线的转角。

· 视觉感知良好的圆角需要特殊的公式,或者手动去调整。

补充

有时候一个不太准确的形状反而看起来更加准确,看下面的形状,哪一个看起来更像正方形?

阿甲 科技 有时候一个不太准确的形状反而看起来更加准确

如果你选了左边,那么,你已经开始相信你有偏见的视觉感知了。

阿甲 科技 如果你选了左边,那么,你已经开始相信你有偏见的视觉感知了

当我初次了解到眼睛对高度要比对宽度更加敏感的时候,觉得不可思议。现在终于了然:为什么在字体中,字母O总是要比几何正圆更宽、而字母H的纵向线条总是要比横向线条要粗了。

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

阿甲科技

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