不过想必大家都遇到过同样的情况，“用英文咋看咋漂亮，一换中文那种味道就表现不出来了…”。其一，因为中文是方块字，一行看上去很平；而英文有大小写之分，且词与词之间有间隔，看上去有韵律。其二，可用在网页中的中文字体太少，宋体、雅黑，用别的字体一来看着不习惯；二来不一定谁机器里都有那个字体；三来中文字体太大，动则就几十兆，不便于加载。

综上，中文网站中的文字运用要更考究。在注册表单中，水平右对齐已成为公认的方案，从统计中可以很直观的看到：

如果你已经读过之前一篇关于《设计表单的标签和输入区》的文章，应该对什么是标签“垂直顶对齐”，“水平右对齐”和“水平做对齐”有一定认识了。LukeW的书中列举的都是国外的例子，在《设计表单的标签和输入区》的回复中也有朋友提到在中文网页中的表现情况，比如“垂直顶对齐”比较少见等，对于我们常见的网页来说，确实很少，在我的30个样本中，只有百度的注册表单采用“垂直顶对齐”：

采用“水平左对齐”的也比较少，只有3个：谷歌、土豆和CCTV。其余26个都采用的“水平右对齐”。而其中盛大通行证的注册表单就很带有“中国特色”，用空格填充，让2个字的标签与4个字等宽：
（这个是反例，只是为了中文排列的整齐美观，没有这个必要。同时也作为对azero同学的回复）

要把中文网站设计得美观漂亮，除了借鉴一些科学的方法外，更要考虑中文元素的特点。不然就像用人头马的瓶子装陈醋，看着好，品着怪。

相关文章

1. 一个提高了近10%转化率的改进
2. 设计表单的标签和输入区
3. 可用性工程的生命周期
4. 地图网站的需求功能与体验
5. 10条可用性方面的启发

有一些元素，看着很简单，设计起来却很头疼。往往这样的元素都具有一个共同的特点——变化多，表单的设计就是如此。你说见过20、30种以上不同的表单，我并不惊讶，产品需求、风格不同，必然五花八门。当然，换了设计师，表单的样式也可能会不同。然而，不能让这种情况继续下去，表单不是艺术展。不要让你的才华阻碍了别人的前进。

表单就是一扇门

古有大禹，三过家门而不入；今有用户，看到表单犯糊涂。难道大禹遇到的是这样的门？

表单，尤其是注册表单，就像一扇门，穿过他才能看到完整的产品。所以千万别做这种门，自己费事不说，用户也不会买账。这个设计最糟糕之处，就在于它有悖常理。好的设计应当遵循于其自然规律，这样一来符合人们预期，使用起来也就顺畅。

表单中标签与输入区的4种对齐方式

• 标签垂直顶对齐
• 标签水平右对齐
• 标签水平左对齐
• 标签在输入区内部

《Web Form Design》一书中对标签和输入区组合进行了一些研究，我整理了一份数据比较的表格：

标签垂直顶对齐

标签和输入区垂直依次排列，从而降低了对页面宽度的要求。如果你的页面没有富裕的空间用于标签和输入区的横向排列，这种组合是个不错的选择。

眼动轨迹表明，用户自上而下的扫描表单，焦点多集中在左侧一列，且跳动较小。

标签水平右对齐

标签右对齐和输入区水平排列，从而降低了对页面高度的要求。但与标签垂直顶对齐相比，由于标签文字左侧参差不齐，对问题的认知和扫描时间变的更长。

眼动轨迹表明，用户花了更多时间在看问题，输入框对他们来说很简单。

标签水平左对齐

标签左对齐和输入区水平排列，同样降低了对页面高度的要求。标签左对齐有利于用户对问题标签的扫描，但不利于填写答案，因为标签距离输入区较远，要重新定位到右侧输入框，确实要消耗一点时间。

眼动轨迹表明，用户花在定位输入区上的时间比看清标签更长，从而影响了整个表单的完成时间。

标签在输入区内部

这种方式虽然具备垂直组合的优点，但仍应谨慎使用。当焦点移入输入区后，标签消失，看不到问题，可能会忘记要回答什么，很郁闷，不得不清掉输入好的字，把“问题”还原出来。这种组合比较适合只有一两个输入框的简短表单，而且人们对他很熟悉，不用费力去记住标签提出的问题，比如：搜索框。

当你真的选择用这种表单的时候，注意，让标签和真实内容区分开来，一些约定俗成的做法是减淡标签字色，在后面打上“…”；下拉菜单则在默认选项两侧打上“-”，以示区别：

设计要有一条主线，贯穿于整个产品，别让人用着感觉像是几个设计师干的事。认真思考一遍，就会有新一层的理解，这对我的工作有极大的帮助。

相关文章

1. 一个提高了近10%转化率的改进
2. 标签水平右对齐更适合中文网站
3. 一个关于“Back to Top”的小故事
4. 网页设计趋势发展历程之2009下
5. 内容为空时提交如何处理

如果回顾一下Sampa的注册表单，到现在它已经经历过4-5个不同的版本了。一度我们要询问您15个问题。在那之后，我们先是与当地的一位用户体验专家对此进行一些简化，而后又通过与一家波特兰用户体验公司的合作，将其变的更简，现在我们只剩8个填写项了：

1. 姓名
2. 电子邮箱
3. 确认电子邮箱
4. 密码
5. 确认密码
6. 同意使用条例
7. 你希望的网站地址（形如：b3inside.sampa.com）
8. CAPTCHA （挑战码）

先来看下这个网站的注册表单截图：

在阅读了Luke Wroblewski的“Web Form Design Fillin in the Blanks”文章基础上，我决定更深入地研究一下我们的注册表单。在拥有极好的转化率可以轻松假设一些事情以前，我一直担心改变我们的注册流程会事与愿违。好吧，但至少我还做了一处改变，不需要再动脑考虑了它了。就是使用条例的复选框，原来默认是没有被选中的，我把它改成默认选中了。

但这还不是有趣的地方。Luke在书上提到说，我们在表单中提问的很多事情都是限于应用本身的，而对用户没有价值（或者说“完全、彻底”）。你可以很明显地看到在Sampa站上有一些这样的内容。为什么我们要询问两次邮箱地址？为什么我们要询问两次密码？为什么我们需要你的名字？为什么需要挑战码？

对于上面的问题我有很好的答案，在过去两年，我们通过用A/B测试的方法对很多情景进行测试，得知我们已经很接近（表单元素）正确的排列组合，并且带来和保持了很高的转化率。但只有一块没有经过测试就取消掉了，那就是挑战码。

我们为什么需要挑战码？就像你去注册其他一些免费web服务一样（如：Hotmail, GMail, Ticket Master, Blogger,等等）。挑战码在阻止自动注册机器人创建成百上千个垃圾帐号上是很有必要的，同样也阻止了Spam和Link Farm。好人要放行，我们要把坏人挡在外边，你说对吗？

上周一下午5:13，我们去掉了Sampa上的挑战码。这不容易也不彻底，但我们创建了一套测试和规则使得我们99%的时间不用显示挑战码。我不能公布我们所做的测试，因为这是秘密，不能让注册机器人的制造者知道。

测试结果：提升了9.2%的转化率！

让整个团队惊讶的是，有如此大比例的用户想注册Sampa，但他们或者没有通过挑战码验证（可能性比较小），或者发现表单被挑战码搞得很吓人（有很大可能）。紧接之前我们的讨论，第三点是用更短的页面，让“Continue”按钮更多时候出现在第一屏内，这样会给用户一个更好的感觉：这个表单很短哦。

去看看文章中出现的Sampa网站的注册表单

以下是我的补充和总结：
让你的表单变得更有效的方法：

1. 尽量减少用户要填写的内容和选项；
2. 如果可以，就去掉挑战码，因为有些挑战码真的很复杂，给用户带来的挑战过大；（当然这要做权衡。用其他技术对挑战码进行改革，用类似Sampa的方法解决。注意观察Sampa的挑战码，都是些简单的英语单词。）
3. 缩短页面，最好控制在一屏以内，这会让用户感觉这个表单并不那么复杂。

顺便提一个数字，每给用户增加一个流程，用户完成率或到达率减少大概40%。这就不难理解为什么Sampa网站的设计人员要把他们的注册流程简化简化再简化了。前段时间我也在做同样的工作，优化注册流程，在做减法的同时，想办法缩短用户从注册到达真实产品的路径也是非常有必要的，“more earlier, more better”，越早让用户融入产品、得到他想要的东西，就越有利于建立用户成就感，从而带给用户更好的体验。

[READ]

P.S. 我联系了Sampa的CTO，也就是上面我翻译的原文的作者Marcelo Calbucci，但很遗憾，他当时没有留之前版本的截图，所以我没办法给大家做对比了。

相关文章

1. 设计表单的标签和输入区
2. 标签水平右对齐更适合中文网站
3. 用户体验案例研究：设计微博应用
4. 从中关村的购物体验侃起
5. 内容为空时提交如何处理