注册表单是要左对齐还是右对齐
上一篇围绕对齐和连续流这两个设计原则，谈了信息设计中用到的几种对齐方法以及和连续流的关联，这一篇尝试用这些原则分析注册表单选项该怎么设计。
注册表单，也就是我们在注册网络产品或者填写信用卡申请表时的东西，目前主流的表单有两种，一种是项目左对齐，另一种是项目靠着输入框作右对齐。目前两者都有很多实例存在，不能说谁对谁错，不过相信经过下面的分析，我们能对这两种方式产生更理性的认识。
首先看左对齐的优点
1、有两条对齐引导线（选项左对齐线与输入框对齐线），适合浏览（从上往下查看表单各个选项）
2、整体外观规整，视觉效果好，容易配合各种页面。
从前面的对齐原理看，左对齐方式做的很棒，有整齐划一的信息和整体的美感，并且有效引导人们的目光以一定的规律移动，也就是从上往下，然后问题也出在这里了。
用户在填写表单的时候，并不是先从上往下阅读选项，接着从上往下填写右侧输入框。正常的用户是看一个选项填写一个输入框，然后再换下一行，这在几天前的讨论中我也提到了，所以用户在这里的目光移动轨迹实际是一个不断重复Z字形的折线。
那么，左对齐方式存在的问题就很明显——当选项文字长短不一时，个别字数较少的项目和输入框间距会很大，从连续流原理上看，较大的间距使得两者对齐于同一横向直线的视觉引导减弱，也就降低了两者的关联度，没有很好的引导用户按照合理的视觉路径，换个更简单的说法就是，我填写的时候有点瞄不准当时填的输入框对应是左侧哪一行。而且选项相互左对齐，产生的对齐引导线非常醒目，更加干扰用户左右来回的浏览。
另外，这种方式也势必导致目光的每次来回移动的Z字距离都是最长的。
再来看右对齐。选项与输入框之间的距离缩小到最小，很方便的从选项顺势浏览到右侧的输入框，有良好的连续流，使两者的关联度得到加强，符合用户左右来回的视觉行为；另外，选项右对齐线与输入框左对齐线靠在一起，相当于二者都有对齐，并且对齐与同一直线，这样，不仅使选项及输入框两者分别有从上往下的对齐暗示，也兼顾到了整体视觉美感。
所以，我的观点还是和那天一样，选项右对齐在注册表单中更为合理。
不过右对齐也有它的缺点，相比左对齐，整个表单外部的规整性就不如左对齐，尤其当选项数很多，长短参差不齐时，左侧会产生一条很乱的不规则锯齿，像是蝴蝶翅膀剪了碎发，毛毛糙糙的。所以，使用右对齐方式时最好控制一下表单项目数，缩短左侧不整齐边缘，弥补整体美观。
比如亚马逊的注册表单，控制了左侧选项数目。
有的时候设计需求就有很多，选项不可能减少，那么合理的分割选项，使得本来大片的不规则边缘变成几个短的区块，这也是一种有效的办法。参见开心网的注册表单。
如果分割开了还是觉得不够整洁呢？那就从根源解决这个问题。
导致外观不规整的原因是失去左侧的对齐引导线，不如我们再额外给他补上，最有效的办法就是直接给表单画上可见的表格线，还可以给需要加强的行或列增加底色，进一步强化对齐。参看淘宝注册页面。
前面介绍的都是适应性较强的方式，能普遍应用到大部分注册表单，还有一些特殊的设计形式，把选项和输入框完全揉在一起设计，看似有点乱，但是按照用户实际使用操作时目光轨迹而设计的，虽然不能产生良好的整齐划一感，但是实际用起来却是非常有效。比如百度和豆瓣的注册表单。
注册表单差不多就这么几种形式，具体使用哪一种还要根据实际情况再决定，遵守设计原则能帮助设计师在设计信息时不犯错误，并且建立一个有效的评估标准。
最后引用《最佳设计100细则》作者威廉·利德威尔的忠告：优秀的设计师有时并不理会设计原则，但是，他们这样做，尽管因违反原则而付出了代价，他们往往会进行一些补救，取得最佳的效果。如果没有这个水平，还是遵循设计原则为好。
注册表单是要左对齐还是右对齐相关推荐
- 网页注册表单设计原则
如果你想最大化你的服务所带来的效益,你就必须最大化你网站表单的成功率.仅仅简单的让用户在你网站上注册是不够的,除非你有能够让访问你网站的人一看就映像深刻的点子.为了让服务达到最大化的体现,我们设计师需 ...
- 制作一个注册表单页面
制作一个表单注册页面 在Dreamweaver中创建一个.html文件,添加一个11行2列的表格,左侧的内容是手动输入(第一行也手动输入),右侧的内容是用代码来写的(最后一行也是用代码来写)(用代码写 ...
- UX设计秘诀之注册表单设计，细节决定成败
以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器. 说实话,现实生活中,又有多少人会真正喜欢填写表格?显然,并不多.因为填写表单这样的网页或App服务,并非 ...
- 13 迷人的注册表单设计
13 迷人的注册表单设计 Gist Gravatar Kontain MOJO-Themes Ning Ping Tumblr Vimeo WordPress Wufoo Better Blogger ...
- 哔哩哔哩注册--表单练习
哔哩哔哩注册–表单练习 HTML代码 可能代码有些不足或者用词不当等 希望大家能够见谅 这是一次bilibili的注册表单练习 里面都有详细注释 当然一个网页有许多种 这只是其中一种 是为了相互交流 ...
- ajax注册表单用户名实时验证,Ajax注册表单用户名实时验证..doc
Ajax注册表单用户名实时验证. Ajax注册表单用户名实时验证 1.1.1 摘要 很多时候在网站上注册时,我们会发现,注册表单通常需要检查用户名和电子邮件地址的可用性:从而确保用户之间不拥有相同的用 ...
- html语言 怎么清除用户名 name= password=,在html页面中填写注册表单后，它会给出这个错误，并使用用户名和密码并将值存储在登录表单中...
在html页面中填写注册表单后,它会给出此错误,并使用用户名和密码并将值存储在登录表单中:TypeError at /login/ argument of type 'NoneType' is not ...
- 使用php创建一个注册表单,如何实现一个简单的注册表单
创建一个注册表单是非常容易的 - 它事实上意味着,你只需要创建一个表单,表单将更新一些User的模型对象(这个例子是一个Doctrine实体)并保存它. 受欢迎的FOSUserBundle 提供了一个 ...
- 一步步学习微软InfoPath2010和SP2010--第九章节--使用SharePoint用户配置文件Web service（2）--在事件注册表单上创建表单加载规则...
下面练习中,你将添加表单加载规则,将四个文本框域和图片控件与用户配置文件web service连接.当使用用户配置文件web service时,你需要将控件和来自web service合适的域绑定.这 ...
最新文章
- 01_Mybatis入门
- Coursera课程Python for everyone：Quiz: Networks and Sockets
- 稍等片刻 正在提取文件_电脑文件误删除并且清空了回收站，怎么恢复文件？教你一招！...
- 程序员法律考试（7）-民法（4）
- 二维数组离散程度matlab,(十八)数据分析中的一些概念
- 在线日志文件丢失的恢复（笔记）
- JSP中Request属性范围
- 弹出选择文件夹的对话框 BROWSEINFO 的用法【MFC】
- C语言 · 龟兔赛跑预测
- 总算知道怎样从ImageMagick生成的数据转换成HICON: MagickGetImageBlob LookupIconIdFromDirectoryEx...
- 24种设计模式与6大原则
- 重点项目却总是腐化，程序员为什么会写烂代码？
- cmd 实用快捷键。。
- 信息完全技术之Enigma密码机【MATLAB程序及软件APP实现】
- 插值型求积公式的实现
- Win10环境下运行红色警戒等老款游…
- 计算机组成原理实验报告一静态随机存储器
- Word学习笔记：P6-文档封面、页眉、页脚设置
- 人机对话_javaweb_ 一对一聊天系统
- git pull拉代码git did not exit cleanly (exit code 1)