实例讲解UI设计中的对齐

  • A+
所属分类:经验思维

本文来源: 酸梅干超人(公众号: 超人的电话亭), 共 1675 字

UI设计中,对齐是一个很神奇的细节,你说它难吧,如今的软件一个个全有自动辅助对齐的功能,对齐一下有啥难的?但你说它不难吧,正因为很多新人觉得它太简单了,从而极易忽视对齐上出现的问题,所以我觉得有必要来讲讲对齐的自审。

 

实例讲解UI设计中的对齐

我想大家一定都清楚什么是对齐,这个问题显然不成问题,那我们换一个问题:为什么要对齐?从格式塔原理中脱胎而来的四要素,要追根溯源,探究问题的本质,还需要回到格式塔。

其一,它来?#20174;?#26684;式塔连续性原理 (Law of Continuity) :在知觉过程中人们往往倾向于使对象的直线继续成为直线,曲线继续成为曲线。换而言之,对齐是一种视觉引导,用户可以通过已存在元素的对齐来达成预期:下方未出现的元素,依然符?#29616;?#21069;的对齐规律;反之,视觉流被突然打断,非常膈应人。

实例讲解UI设计中的对齐

其二,它还来?#20174;?#26684;式塔连通性原理 (Law of Uniform Connectedness):视觉上相连的元素倾向于被感知为具有更强的相关性 (相较于不相连的元素)。而隐性的对齐线,恰好可以成为这么一种连通线,成为连接相关元素的一条通道。

实例讲解UI设计中的对齐

所以,为什么要对齐?不仅仅是对用户视觉浏览习惯的考量,还是对页面中信息组织的考量,一方面利用对齐,符合用户的视觉惯性,降低用户阅读负担;另一方面利用不同的对齐?#38382;劍?#33021;有效组织信息,让页面规整、有秩序、有质感。

 

实例讲解UI设计中的对齐

跟亲密性不一样,对齐是大多数设计师在设计伊始就已经注意?#35762;?#19988;时时刻刻在做的工作,所以如果回过来检查,下意识?#31361;?#35748;为自己已经做完了,让对齐变成了最容易忽视的问题。鉴于此,我建议大家首先养成做图时对齐的意识与习惯,在进行每一个元素的排布时,首先考虑它该怎?#20174;?#21608;围元素对齐,每一个元素需要至少一个对齐来「依靠」,不然它就虚不受力,是不踏实的,这一点非常重要。除开前期的对齐,后期在复审稿子时,对齐虽然容易忽视,但一旦正视,也极为容易发现。对齐缺失或对齐轴线过多易使页面形成信息排布混乱、元素之间联系成迷,或如上一段所说元素虚不受力、位置?#22238;#?#35753;用户产生「它为什么会在这里?」的疑问。

 

实例讲解UI设计中的对齐?

1.遍查元素边距和间距

这一步非常简单不用过多赘述,但还是比较枯燥的,如果对自己的做图习惯没有百分之百自信的话,我建议还是用笨办法一点一点检查,做?#35762;?#36951;漏任何一个pt。

实例讲解UI设计中的对齐

当然解决问题最好的办法是避免问题的出现,所以养成随时对齐、随时检查的做图习惯能够有效减少对齐自审时的工作量。

2.划出页面中所有元素的对齐线

从这一步开始,就不仅仅是按一下方向键就能解决的问题了,对齐线杂乱的源头是页面模块全?#20013;?#35268;划的不到位,做图时没有整体性思考过页面中的元素排布,特别是当页面元素多且复杂时,这一点尤其突出。当然这里我们不讲怎么做图,我们讲当问题出现时,该怎么修改。以之前学?#34987;?#30340; slowly 首页为例。

实例讲解UI设计中的对齐

页面内文字段越多 (尤其是零散的文字段),越容易出现因对齐轴线过多导致页面视觉效果混乱的情况,这时候我们需要划出所有元素的对齐轴线,通过观察这些零碎到让人抓狂的对齐轴线,我们能够更直观得认识页面混乱问题的根源,并方便后续修改。

实例讲解UI设计中的对齐

3.尽量缩减对齐方式

怎么缩减?#20800;?#25105;们先看看成熟的线上案例。

实例讲解UI设计中的对齐

比如?#21592;Γ员?#30340;首页因为瓷片区的存在比 slowly 更为复?#21360;?#24403;我们画出?#21592;?#30340;对齐轴线,可以发现尽管它元素更多,?#36127;?#19981;存在单个元素或字段自成一种对齐的情况。

1.每一根对齐轴线的添加都需要十足的理由。例如为什么要给瓷片区的?#35745;?#28155;加居中对齐的轴线?因为这些?#35745;?#26080;法精确控制其外形和尺寸,有且只有居中对齐才能稳定其重?#27169;?#35753;它看起来整齐。

2.尽可能多的纵向元素使用同一对齐轴线。这样可以有效缩减对齐轴线的数量,尽可能贴?#32454;?#24335;塔连续性原理,使上下元素建立一种流畅的阅读体验。故而正确的对齐方式应该是:慎重思?#32487;砑用?#19968;条对齐轴线的理由,每一条对齐轴线让尽可能多的元素通用,甚?#37327;?#32452;件对齐。

知道了这一点,slowly 的案例修改起来就比较轻松了,修改之后如下:

实例讲解UI设计中的对齐

结尾

上述案例中的对齐问题虽然略有夸张,却是新手实实在在会犯的的错误,我曾不止一次两次的对自己的学生反复强调这一点,希望这篇文章能?#35805;?#21161;大家正视对齐,重视对齐。

?
  • 版权声明:本文源自 酸梅干超人(公众号: 超人的电话亭), 共 1675 字。
  • 转载请注明,本文链接:实例讲解UI设计中的对齐