注册表单,也就是我们在注册网络产品或者填写信用卡申请表时的东西,目前主流的表单有两种,一种是项目左对齐,另一种是项目靠着输入框作右对齐。目前两者都有很多实例存在,不能说谁对谁错,不过相信经过下面的分析,我们能对这两种方式产生更理性的认识。
首先看左对齐的优点
1、有两条对齐引导线(选项左对齐线与输入框对齐线),适合浏览(从上往下查看表单各个选项)
2、整体外观规整,视觉效果好,容易配合各种页面。
从前面的对齐原理看,左对齐方式做的很棒,有整齐划一的信息和整体的美感,并且有效引导人们的目光以一定的规律移动,也就是从上往下,然后问题也出在这里了。
用户在填写表单的时候,并不是先从上往下阅读选项,接着从上往下填写右侧输入框。正常的用户是看一个选项填写一个输入框,然后再换下一行,这在几天前的讨论中我也提到了,所以用户在这里的目光移动轨迹实际是一个不断重复 Z 字形的折线。
那么,左对齐方式存在的问题就很明显——当选项文字长短不一时,个别字数较少的项目和输入框间距会很大,从连续流原理上看,较大的间距使得两者对齐于同一横向直线的视觉引导减弱,也就降低了两者的关联度,没有很好的引导用户按照合理的视觉路径,换个更简单的说法就是,我填写的时候有点瞄不准当时填的输入框对应是左侧哪一行。而且选项相互左对齐,产生的对齐引导线非常醒目,更加干扰用户左右来回的浏览。
另外,这种方式也势必导致目光的每次来回移动的Z 字距离都是最长的。
再来看右对齐。选项与输入框之间的距离缩小到最小,很方便的从选项顺势浏览到右侧的输入框,有良好的连续流,使两者的关联度得到加强,符合用户左右来回的视觉行为;另外,选项右对齐线与输入框左对齐线靠在一起,相当于二者都有对齐,并且对齐与同一直线,这样,不仅使选项及输入框两者分别有从上往下的对齐暗示,也兼顾到了整体视觉美感。
所以,我的观点还是和那天一样,选项右对齐在注册表单中更为合理。 互联网的一些事 不过右对齐也有它的缺点,相比左对齐,整个表单外部的规整性就不如左对齐,尤其当选项数很多,长短参差不齐时,左侧会产生一条很乱的不规则锯齿,像是蝴蝶翅膀剪了碎发,毛毛糙糙的。所以,使用右对齐方式时最好控制一下表单项目数,缩短左侧不整齐边缘,弥补整体美观。
比如亚马逊的注册表单,控制了左侧选项数目。
有的时候设计需求就有很多,选项不可能减少,那么合理的分割选项,使得本来大片的不规则边缘变成几个短的区块,这也是一种有效的办法。参见开心网的注册表单。
如果分割开了还是觉得不够整洁呢?那就从根源解决这个问题。
导致外观不规整的原因是失去左侧的对齐引导线,不如我们再额外给他补上,最有效的办法就是直接给表单画上可见的表格线, 还可以给需要加强的行或列增加底色, 进一步强化对齐。
参看淘宝注册页面。
前面介绍的都是适应性较强的方式,能普遍应用到大部分注册表单,还有一些特殊的设计形式,把选项和输入框完全揉在一起设计,看似有点乱,但是按照用户实际使用操作时目光轨迹而设计的,虽然不能产生良好的整齐划一感,但是实际用起来却是非常有效。比如百度和豆瓣的注册表单。
注册表单差不多就这么几种形式,具体使用哪一种还要根据实际情况再决定,遵守设计原则能帮助设计师在设计信息时不犯错误,并且建立一个有效的评估标准。
最后引用《最佳设计100细则》作者威廉·利德威尔的忠告:优秀的设计师有时并不理会设计原则,但是,他们这样做,尽管因违反原则而付出了代价,他们往往会进行一些补救,取得最佳的效果。如果没有这个水平,还是遵循设计原则为好。
本站所有文章,如无特殊说明或标注,均为本站原创发布。
任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。
如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。