格式塔心理学论中连续律 (law of continuity) 描述道,在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线,使曲线继续成为曲线。在界面设计中,元素的对齐,既符合用户的认知特性,也能引导视觉流向,让用户更流畅地接收信息。

文案类

页面的文字与段落需要确定统一的视觉起点,默认从左至右,遵循从左到右的阅读习惯。
image.png

数字类

采用右对齐,有助于快速比对数值的大小,并且要求数值取相同位数(精度统一控制)。
image.png

表单类

表单标签的对齐方式有:左对齐、右对齐、顶对齐、内联标签、图标标签以及浮动标签:
image.png

在产品设计中最常用的是左对齐、右对齐、顶对齐,在Matteo Penzo《Label Placement in Forms》文章中有分享过关于表单标签放置的研究,得到如下浏览时间表:

左对齐 右对齐 顶对齐
完成速度 最慢 适中 最快
占横向空间 最多 适中 最少
占纵向空间 最少 适中 最多
标签可占空间 最少 适中 最多
靠近输入框 适中 接近 最近
标签移动到输入框时间 500ms 240ms 50ms
用户视线路径 向下 → 向右 向下 → 向右 向下

不论是哪种方式都有相对的利弊:

优点 缺点 适用场景
左对齐
1. 按阅读视线对齐,符合阅读习惯;
1. 节约纵向空间;

1. 标签与录入组件之间距离大,不流畅;
1. 标签长度弹性小,字数 ≤8 为好;
1. 填写速度慢;
复杂表单填写场景,希望用户放慢填写速度,认真填写,以确保数据录入的准确性
右对齐
1. 标签与录入组件之间距离视觉关联明确;
1. 节约纵向空间;
1. 利于用户填写

1. 标签长度参差不齐,降低整体可读性;
1. 标签长度弹性小,字数 ≤8 为好;
即要节约纵向空间,又要提高填写速度,如表格高级搜索区。
顶对齐
1. 浏览效率最高,填写速度最快;
1. 标签长度弹性大,字数不限;
占用较大的纵向空间;
1. 希望用户快速填写表单;
1. 有国际化需求,标签字数很长;

产品中大量的复杂表单基本使用左对齐的方式,而简单表单录入场景下为了阅读视线对齐以及体验的一致性,也多数采用左对齐的方式。

需要注意的是,并不是简单的都使用左对齐,而是根据具体B端业务场景,在了解各种对齐方式的优缺点后,做出权衡和取舍。

表格类

行的对齐

多行内容采用垂直居中对齐:
image.png

列的对齐

列的对齐方式有3种:

对齐方式 应用场景
左对齐 默认的对齐方式,单元格的文本、关键数据识别,表头的标题以及操作列的操作均采用左对齐
右对齐 数字对比的场景,如金额
居中对齐 仅用于分组表头,非最底层的表头居中对齐,最底层的表头左对齐

image.png