格式塔心理学论中连续律 (law of continuity) 描述道,在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线,使曲线继续成为曲线。在界面设计中,元素的对齐,既符合用户的认知特性,也能引导视觉流向,让用户更流畅地接收信息。
文案类
页面的文字与段落需要确定统一的视觉起点,默认从左至右,遵循从左到右的阅读习惯。
数字类
采用右对齐,有助于快速比对数值的大小,并且要求数值取相同位数(精度统一控制)。
表单类
表单标签的对齐方式有:左对齐、右对齐、顶对齐、内联标签、图标标签以及浮动标签:
在产品设计中最常用的是左对齐、右对齐、顶对齐,在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端业务场景,在了解各种对齐方式的优缺点后,做出权衡和取舍。
表格类
行的对齐
多行内容采用垂直居中对齐:
列的对齐
列的对齐方式有3种:
对齐方式 | 应用场景 |
---|---|
左对齐 | 默认的对齐方式,单元格的文本、关键数据识别,表头的标题以及操作列的操作均采用左对齐 |
右对齐 | 数字对比的场景,如金额 |
居中对齐 | 仅用于分组表头,非最底层的表头居中对齐,最底层的表头左对齐 |