令人纠结的表单设计:水平选项 Or 垂直选项?

在Luke Wroblewski的《Web 表单设计：点石成金的艺术》中，提到了一些非常有用的表单设计原则。

       其中我最感兴趣的部分是水平选项（tab）与垂直选项（tab）的对比

水平tab：

       水平tab指的是把选项tab水平放置在面板上方。不仅显示了一组初始选项，而且还具有强调当前所处tab的强大指示作用（注：下图中，不同tab之间是互斥的关系，提交按钮在tab包含区域之外）。

       水平tab可能会造成的问题有这些：1.很多人都是自上而下的填表，因此可能会忽略水平tab；2.水平tab之间是否互斥不够清晰；3.提交表单是针对表单中所有tab中的选择还是只针对当前tab的选择？（2和3可理解为是同一类问题）

       Luke在书中提到：在测试中没有参加者出错，他们能够快速完成任务。但眼动数据表明：由于扫描所有tab时需要参加者的眼睛从屏幕左侧移动到右侧，因此水平tab偏离了填表过程中清晰的从上至下的线性扫描过程。

垂直tab：

       人们自上而下填写表单，但水平tab缺乏从上至下线性扫描的清晰性，为了弥补水平tab的这个缺陷，可使用垂直tab代替。

       很显然，由于垂直tab保持了从上至下浏览的一致性，因此完成效率更高，也使参与者的眼睛感觉更舒适。

       但遗憾的是，还是有参与者使用该方案时出现了错误，而且对垂直tab是否互斥有点困惑。而该方案中还在每个tab上增加了单选按钮，有助于传达选项的互斥 含义。有趣的是，人们似乎较少会混淆水平tab，而理论上水平tab更容易造成混乱，因为它打破了桌面应用程序中水平tab并不互斥的惯例，如下图中这个 例子（下图中的“确定”提交的是上面所有tab下的内容，而非当前tab下的内容，这和前面提到的Web应用中水平tab的例子是相反的）。由于下图的 “确定”在tab所包含内容之外，而不是处于tab内容里，因此还是比较容易理解的。

       下面是QQ个人资料设置的面板，这里的“确定”按钮是针对左边所有tab中内容的提交（和刚才提到的垂直tab的例子不同，这里没有单选按钮），会令你感到混淆吗？我个人觉得，由于“确定”按钮同样在tab所包含内容之外，所以并不难理解。

       再看看支付宝的令人纠结的例子：

转载于:https://blog.51cto.com/lya041/696629