对齐是符合用户观看习惯的常见设计方法。对齐B端设计的方法有多少?设计有什么讲究?作者对此进行了分析,与大家分享。

关于对齐,大多数设计师可能会觉得很简单,不是那些对齐方法,有非常复杂的操作吗?深入研究发现,B端对齐并不像你想象的那么简单。如果你不相信,请往下看。
01 对齐的含义顾名思义,对齐是将文字或图片等信息按照一定的对齐规则排列。常用的对齐规则分为左对齐、右对齐、中对齐三类。

左对齐是最常见的场景,因为它符合人们的阅读动线——从左到右阅读。左对齐可用于大多数设计场景。例如,左对齐可用于我们常见的工作台卡、导航栏等。


使用左对齐时,不仅要考虑物理对齐,还要考虑特定场景下的视觉对齐:例如,当图标和文本混合时,记住文本和文本对齐,视觉效果会更加整洁(因为格式塔的原理,人们会把类似的东西看作是同一类,同一类对齐在视觉上会很舒服)。

右对齐可能在很多情况下使用较少,右对齐用于填补设计中右侧的视觉空缺,如以下两种应用场景:
1.使用右对齐内容或辅助信心。

2.操作类右对齐,如移动终端表单或web端操作。

中间对齐一般根据设计场景选择,一般在两种场景中:
1.在特定状态下,如插图和文本在空状态下的结合,以中间对齐的形式使用地图标志

2.特定组件,如步骤条或加载,一般也使用中间对齐

B端设计中表单是一种非常常见的设计方法,表单中有三种对齐方法,目前有以下区别:
3.1 左对齐常规字段在默认情况下,基本上按左对齐排列,因为大多数表格字段不固定,左对齐能使整体显示效果更好。

2.中间对齐一般针对固定长度类型的数据,如我们常见的性别、状态和楼层。

2.中间对齐一般针对固定长度类型的数据,如我们常见的性别、状态和楼层。中间对齐可以很好地与表面对齐,视觉上更舒适。

3.3 右对齐金融数字
右对齐一般针对金融,如价格等数字,因为右对齐可以更好地比较价格。

这里需要注意的是,使用数字时最好使用等宽数字,
一是避免因数字宽度不同而不整齐,二是更好地比较金额。比如DIN字体、微软雅黑、思源黑体均为等宽字体,而我们常见的苹方字体则为非等宽字体。

04 对齐表单场景
在输入场景中,通常分为标题和内容两个字段,因此这两个字段可以组合成以下对齐:
标题左对齐,标题右对齐,整体左对齐,顶对齐。那么这些有什么区别呢?然后我们往下看。4.1 标题左对齐这是许多B端产品中常见的对齐方法。
优势
:视觉上看起来很整洁,纵向浏览标题会更容易,美观度会更高;
:左侧区域将固定宽度,短标题字段将与标题分开,降低整体信息获取效率。但也能让用户在输入时更加谨慎。
比如在神策或者coding在许多产品的配置场景中,基本采用左对齐配置。coding的:
4.2 标题右对齐这种对齐牺牲了视觉对齐,以换取标签和内容之间的间距,使其更亲密,并在一定程度上提高了操作效率。例如,这种对齐方法基本上用于钉钉的新后台。
优势
:更接近标签和内容,更有效地获取和操作信息;劣势:牺牲一定的视觉美,如果字段太长,左对齐折叠体验会很差;在使用这种对齐方法时,我们对标题的字数有合理的限制。
4.3 整体左对齐这种方法是标题和内容的设计,整体左对齐。
优势
:标签和内容更近,整体左对齐,视觉效果相对较好。劣势
:纵向内容区域不会对齐,内容区域的整体识别会相对较弱。使用这种方法的场景大多在多列字段的设计场景中,因为与前两种方法相比,当多列字段(2列或以上)同步呈现时,这种方法将使整个表单更加紧凑和合理。但从目前市场上的竞争产品来看,使用这种排列方法的场景很少,只有少数在显示字段时使用这种方法。猜测有两个原因:
表单类采用单列排列,使用场景较少。
这种排列方式不适合编辑状态
,会导致呈现状态和编辑状态之间的差异。因此,为了保持编辑的一致性,一些配置场景会放弃上述对齐方法,改为标题右对齐,如acro design设计案例:虽然目前应用不多,但在日常应用中也需要注意这种应用场景。4.4 顶对齐与另一种方式相比,这种方法降低了对页面宽度的要求,提供了更多的横向空间。目前,许多产品在各种功能模块中使用顶对齐记录输入:
优势:
不仅提高了用户获取信息的效率,还发现只有50ms。同时,标题更具扩展性,可以容纳更长的标题劣势:从布局上看,牺牲了一定的纵向利用空间,需要考虑在设计场景中使用较少的纵向空间。目前国外产品和国内录入场景顶对齐使用较多。
4.5 如何选择那么,我们在设计表单时如何选择呢?这取决于我们的实际情况。在信息获取效率方面,顶对齐最快(50ms),其次,标题右对齐(240)ms),左对齐最慢(500ms);在视觉和阅读观感方面,
标题左对齐和整体左对齐的视觉表达会更好;因此,我们需要考虑当前页面的使用场景:
1.更偏向于录入场景的话,横向空间充足,选择标题右对齐,否则顶对齐。2.更偏向于阅读或浏览
如果选择标题左对齐或整体左对齐。两者的详细场景区分需要考虑当前场景标题字段的差异:A.如果标题字段相对接近,选择标题左对齐
;
B.如果
标题字段相差较大,特别是字段需要配置的场景,可以选择
整体左对齐。比如我举个例子你就明白了:
当标题差异太大时,标题左对齐会使一些标题与内容之间的间隔特别长,阅读体验会大大降低。比如我举个例子你就明白了:当标题差异太大时,标题左对齐会使一些标题与内容之间的间隔特别长,阅读体验会大大降低。通过这样的场景和使用分析,我们可以更清楚地使用各种对齐方法,使我们的整体使用体验更好。看到这里,你掌握了B端对齐的所有细节吗?本文由 @蒙东东 每个人都是产品经理,未经许可不得转载题图来自Unsplash,基于 CC0 协议本文仅代表作者本人,每个人都是产品经理平台,只提供信息存储空间服务。