关于对齐，大部分设计师可能会以为非常大略，不便是那几种对齐办法嘛，难道还有很繁芜的操作？深入研究才创造，B端对齐还真没你想象的那么大略。如果不信，请接着往下看。
01 对齐的含义
对齐，顾名思义便是将笔墨或图片等信息以某种对齐规则进行排列。我们常用的对齐规则分为三类，即：左对齐、右对齐、居中对齐。
02 通用场景对齐办法2.1 左对齐简述
左对齐是最为常见的场景，由于它符合人们的阅读动线——从左到右进行阅读。在大部分的设计场景中都可以利用左对齐。比如我们常见的事情台卡片、导航栏等都可以利用左对齐。
在利用左对齐时，不仅须要考虑物理对齐，在特定场景下须要考虑视觉对齐：比如在对付图标和笔墨混排时，记得笔墨跟笔墨对齐，视觉效果会更加整洁（由于格式塔事理，人们对付类似的东西会将其看做同一类，而同一类对齐视觉上会舒适）。
2.2 右对齐简述
右对齐可能在很多时候利用得比较少，在普通设计场景的右对齐用来补充设计中右侧的视觉空缺，比如以下两种运用处景：
1.内容或者赞助信心利用右对齐。
2.操作类的右对齐，比如移动端表单或者web端操作。
2.3 居中对齐简述
居中对齐则一样平常是根据设计场景而选择利用的，一样平常在两种场景中：
1.特定状态，比如空状态中插画与笔墨相结合，舆图标志等都是利用居中对齐的形式
2.特定组件，对付步骤条或者加载等分外组件，一样平常也利用居中对齐
03 表格场景对齐办法
表单在B端设计中是非常常见的一种设计办法，表单中三种对齐办法都存在，目前有以下区分：
3.1 常规字段左对齐
在默认情形下基本都按照左对齐来进行排列，由于大部分表格字段都是非固定的，左对齐能够让整体有一个比较良好的展示效果。
3.2 固定短字段居中对齐
2.居中对齐一样平常针对固定长度类型的数据，比如我们常见的性别、状态和楼层等。采取居中对齐能够很好的和表头进行对齐，视觉上更舒适。
3.3 金融数字右对齐
而右对齐则一样平常针对金融类，比如价格等数字，由于数字采取右对齐能够更好地进行价格的比较。
在这里要把稳，利用数字时最好利用等宽的数字，第一是为了避免由于数字不同的宽度而不太整洁，第二则是为了更好地进行金额等的比拟。
比如DIN字体、微软雅黑、思源黑体都属于等宽字体，而我们常见的苹方字体则为非等宽。
04 表单场景对齐办法
在录入场景中，一样平常分为标题和内容两个字段进行展示，因此这两种字段可以组合成以下几种对齐办法：标题左对齐、标题右对齐、整体左对齐、顶对齐。
那么这几种到底有什么差异呢？我们接着往下看。
4.1 标题左对齐
这是一种目前在很多B端产品中比较常见的对齐办法。
上风：视觉上看着非常整洁，纵向浏览标题也会更随意马虎，都雅度相对会更高；劣势：左侧区域会固定宽度，对付较短标题字段会与标题隔得较开，对付整体信息获取效率降落。然则以也可以让用户在录入时更加谨慎。比如在神策或者coding等很多产品的配置场景中，基本采取左对齐的办法进行配置。
coding的：
4.2 标题右对齐
这种对齐办法捐躯了视觉对齐，换来了标签和内容的间距同等，让其亲密性更强，从操作效率上来讲会得到一定的提高。比如在钉钉的新版后台中，基本采取了此种对齐办法。
上风：标签和内容间隔更近，信息获取和操作效率更高；劣势：捐躯了一定的视觉都雅度，并且如果涌现过长的字段，左对齐的折行的体验会非常不好；我们在利用此类对齐办法时对付标题的字数有一个合理的限定。
4.3 整体左对齐
这种办法便是标题与内容进行贴合设计，整体左对齐。
上风：标签和内容间隔更近，且整体会呈现左对齐，视觉效果也相对较好。劣势：内容区域纵向看不会对齐，对付内容区域的整体识别会相对较弱。利用此办法的场景大部分在多列字段的设计场景中，由于相较于前两种办法来讲，多列字段（2列及以上）同步呈现时，该类办法会让整体表单显得更紧凑与合理。
但从目前市场上的竞品来看，利用此类排列办法的场景比较少，仅有少部分在展示字段时利用了此种办法。
预测有2点缘故原由：
大部分情形下表单类都采取单列排列，因此利用场景较少。该种排列办法不太适用于编辑状态，会造成呈现状态与编辑状态切换上呈现上有差异。以是某些配置场景为了让编辑也保持同等性，会放弃上述的对齐办法改为标题右对齐,比如acro design的设计案例：
虽然目前运用得不多，但我们在平日的利用中，也须要留神此种运用处景。
4.4 顶对齐
这种相对付是其余一种办法，这种办法降落了对页面宽度的哀求，供应了更多的横向空间。从用并且目前很多产品已经在各个功能模块利用顶对齐来记性录入：
上风：不仅提升了用户获取信息的效率，据研究创造只要50ms。同时标题的拓展性更强了，能够容纳更长的标题劣势：从布局上来看是捐躯了一定的纵向利用空间的，对付在设计场景中纵向空间较少的须要考虑利用。目前国外产品和海内录入场景顶对齐用的也比较多。
4.5 如何选择
那么我们在进行表单设计时如何选择呢，这就须要根据我们的实际情形了。
从信息获取效率来讲，顶对齐最快（50ms)，标题右对齐其次(240ms)，左对齐最慢（500ms）；从视觉和阅读不雅观感上来讲，标题左对齐和整体左对齐的视觉表达会更好；因此我们须要考虑当前页面的利用场景：
1.更倾向于录入场景的话，且横向空间充足，选择标题右对齐，否则顶对齐。
2.更倾向于阅读或浏览的话，选择标题左对齐或整体左对齐。而这两者的细致场景区分，须要考虑当前场景标题字段的差异性：
A.如果标题字段都比较靠近，选择标题左对齐；
B.如果标题字段相差比较大，尤其是字段须要配置的场景，那么可以选择整体左对齐。比如我举一个例子你就明白了：
当标题差异过大的时候，标题左对齐会让某些标题与内容间隔特殊长，阅读体验就会降落很多。
通过这样的场景和利用剖析，我们就能够更加清晰地利用各种对齐办法，来让我们整体的利用体验更好。那么看到这里，你有节制关于B端对齐的全部细节吗？
本文由 @蒙东东 原创发布于大家都是产品经理，未经容许，禁止转载
题图来自Unsplash，基于 CC0 协议
该文不雅观点仅代表作者本人，大家都是产品经理平台仅供应信息存储空间做事。
