表单的对齐方式-轴线对齐！你有毛病！/UI/界面/视觉/排版设计/PS/sketch/网页/APP设计

表单指由字段与字段所需输入的内容组成，以文字内容的左对齐、右对齐、两端对齐混合使用就形成一组表单，如最常见的登录、注册页面。下图整理了一些使用得较多的表单混合对齐样式。

在以上表单混合对齐中，轴线对齐在很久很久以前某个项目中使用过，到现在还记得为了让项目负责人同意使用轴线对齐这种样式辩解过，当时他是不赞同使用这种样式的，觉得不好看，不过最终在我的坚持下同意了。现在重新看回这个项目，发现轴线对齐给我感觉是很乱，很不整齐，仔细观察后，发现产生乱和不整齐的原因是在这里。

轴线对齐的毛病

上图是把表单内的元素以一个整体来看，我用一条封闭线段绘制整体的轨迹，这样可以看出它的整体是什么样的形。除了轴线对齐外，其他整体左边都有一条垂直的线，就是因为这条垂直线，看起来会显得整齐，还有两个是形成一个方形，这样更显得整齐。而轴线对齐的轨迹左右两边是凹凸不平的，虽然它有一条中轴线，但是以一个整体去看，它是乱的、不整齐的。

下面看一个具体的例子吧。

把中间的所有内容以一个整体去看，由于内容更多且字段字数范围更大，形成的隐形轨迹会更凹凸不平，像没被排列过的队伍，显得很不整齐。不过曾经看过一篇文章分析说，这种轴线对齐样式操作效率是最高的，依稀记得是眼动距离优势，现在记得不太清了。还有个优点是左侧字段如果字数较多，延展性更好。个人觉得视觉是第一步用户体验，视觉做好，会提升进一步操作了解的兴趣。因为存在这个凹凸不平的问题，所以在表单设计中，我基本很少用轴线对齐。

分享一个交互体验和表单设计都做得很好的案例，如下图，包含正在输入、未输入、错误提示的状态。

轴线对齐只是在表单设计中我会少用，在平面设计中的用得好，表现力是很出色的，如下面的设计。

延伸其他对齐问题

文字整齐排列会隐藏着横向和纵向的直线段，只要增加间距，直线段会更加明显，可以代替分隔线区分不同内容所占用的区域。

如上图，即使去掉方框和分隔线，区块之间也不会混乱，反而更清爽舒服，所以能不用分隔线尽量别用分隔线，最好使用文字隐藏的分隔线代替。

以上是个人设计的小小心得，如果不对，欢迎交流指正！