在《Web 表單設(shè)計(jì)：點(diǎn)石成金的藝術(shù)》中，提到了一些非常有用的表單設(shè)計(jì)原則。

其中我最感興趣的部分是水平選項(xiàng)（tab）與垂直選項(xiàng)（tab）的對(duì)比。

水平tab：

水平tab指的是把選項(xiàng)tab水平放置在面板上方。不僅顯示了一組初始選項(xiàng)，而且還具有強(qiáng)調(diào)當(dāng)前所處tab的強(qiáng)大指示作用（注：下圖中，不同tab之間是互斥的關(guān)系，提交按鈕在tab包含區(qū)域之外）。

水平tab可能會(huì)造成的問(wèn)題有這些：1.很多人都是自上而下的填表，因此可能會(huì)忽略水平tab；2.水平tab之間是否互斥不夠清晰；3.提交表單是針對(duì)表單中所有tab中的選擇還是只針對(duì)當(dāng)前tab的選擇？（2和3可理解為是同一類(lèi)問(wèn)題）

Luke在書(shū)中提到：在測(cè)試中沒(méi)有參加者出錯(cuò)，他們能夠快速完成任務(wù)。但眼動(dòng)數(shù)據(jù)表明：由于掃描所有tab時(shí)需要參加者的眼睛從屏幕左側(cè)移動(dòng)到右側(cè)，因此水平tab偏離了填表過(guò)程中清晰的從上至下的線性掃描過(guò)程。

垂直tab：

人們自上而下填寫(xiě)表單，但水平tab缺乏從上至下線性掃描的清晰性，為了彌補(bǔ)水平tab的這個(gè)缺陷，可使用垂直tab代替。

很顯然，由于垂直tab保持了從上至下瀏覽的一致性，因此完成效率更高，也使參與者的眼睛感覺(jué)更舒適。

但遺憾的是，還是有參與者使用該方案時(shí)出現(xiàn)了錯(cuò)誤，而且對(duì)垂直tab是否互斥有點(diǎn)困惑。而該方案中還在每個(gè)tab上增加 了單選按鈕，有助于傳達(dá)選項(xiàng)的互斥含義。有趣的是，人們似乎較少會(huì)混淆水平tab，而理論上水平tab更容易造成混亂，因?yàn)樗蚱屏俗烂鎽?yīng)用程序中水平 tab并不互斥的慣例，如下圖中這個(gè)例子（下圖中的“確定”提交的是上面所有tab下的內(nèi)容，而非當(dāng)前tab下的內(nèi)容，這和前面提到的Web應(yīng)用中水平 tab的例子是相反的）。由于下圖的“確定”在tab所包含內(nèi)容之外，而不是處于tab內(nèi)容里，因此還是比較容易理解的。

下面是QQ個(gè)人資料設(shè)置的面板，這里的“確定”按鈕是針對(duì)左邊所有tab中內(nèi)容的提交（和剛才提到的垂直tab的例子不同，這里沒(méi)有單選按鈕），會(huì)令你感到混淆嗎？我個(gè)人覺(jué)得，由于“確定”按鈕同樣在tab所包含內(nèi)容之外，所以并不難理解。

再看看淘寶的支付寶的令人糾結(jié)的例子：

淘寶的支付寶把“下一步”放到每個(gè)tab的內(nèi)容區(qū)里，我想是因?yàn)檫@里四個(gè)tab的內(nèi)容是互斥的，即只能在其中一個(gè)tab 下做出選擇，如果放到外面可能會(huì)使用戶(hù)對(duì)提交的是一個(gè)tab下的內(nèi)容還是多個(gè)tab下的內(nèi)容感到困惑。而其實(shí)這里的“下一步”提交的是整個(gè)頁(yè)面的內(nèi)容，那 么這么看“下一步”似乎又應(yīng)該放到最外面。

根據(jù)前面測(cè)試的結(jié)果可以得知：用戶(hù)在使用水平tab設(shè)計(jì)方案時(shí)，并沒(méi)有對(duì)選項(xiàng)是否互斥感到困惑。我個(gè)人感覺(jué)，可能恰恰是 因?yàn)槿藗兞?xí)慣自上而下的操作表單，所以反而會(huì)對(duì)垂直羅列且互斥的標(biāo)簽感到奇怪，因?yàn)樵谌藗兊牧?xí)慣中，垂直的標(biāo)簽如果沒(méi)有特別說(shuō)明的話，都是必填內(nèi)容（注意 這里說(shuō)的是標(biāo)簽，如果是標(biāo)簽下的內(nèi)容垂直羅列則無(wú)妨）；而水平標(biāo)簽則不存在這個(gè)問(wèn)題，從自上而下的操作順序來(lái)講的話，在每一行自然只有一個(gè)有效標(biāo)簽。

如果把淘寶的支付寶的“下一步”挪到外面，到底用戶(hù)在理解上會(huì)不會(huì)產(chǎn)生困惑呢？我做了一個(gè)小范圍測(cè)試，最終證明這個(gè)擔(dān)心 是多余的。當(dāng)然這和tab上的內(nèi)容和使用環(huán)境有關(guān)：使用儲(chǔ)蓄卡自然不可能再使用信用卡。至于水平tab是不是在任何情況下都不會(huì)令用戶(hù)產(chǎn)生tab是否互斥 的困惑，尤其是在提交按鈕放到tab包含內(nèi)容外的情況下？我想現(xiàn)在下結(jié)論還為時(shí)過(guò)早，可能還需要大量的用戶(hù)測(cè)試來(lái)說(shuō)明問(wèn)題。

至于如何解決垂直tab容易令人產(chǎn)生困惑的問(wèn)題，我想京東的設(shè)計(jì)也許是個(gè)啟示。在“支付及配送方式”欄目下（該頁(yè)面有很 多欄目）點(diǎn)擊“來(lái)京東自提”的選項(xiàng)，下面就會(huì)出現(xiàn)“選擇自提點(diǎn)”的操作，由于針對(duì)這部分的提交按鈕處在該欄目?jī)?nèi)，而不是欄目外面，這樣用戶(hù)就不會(huì)誤認(rèn)為這 個(gè)提交按鈕針對(duì)的是該欄目?jī)?nèi)所有選項(xiàng)中的內(nèi)容了。在該頁(yè)面所有模塊的最下面，才會(huì)出現(xiàn)該頁(yè)面最終的提交按鈕。

但是這樣又會(huì)引發(fā)新的問(wèn)題，即我在之前的博文中提到過(guò)的一個(gè)頁(yè)面出現(xiàn)過(guò)多的提交按鈕并不是什么好事，明白的用戶(hù)會(huì)增加操作次數(shù)，不明白的用戶(hù)會(huì)導(dǎo)致誤操作。

再看淘寶的頁(yè)面，沒(méi)有出現(xiàn)多個(gè)提交按鈕，內(nèi)容也很清晰，不至于引起混淆，這是因?yàn)椋?.可選項(xiàng)沒(méi)有以標(biāo)簽的形式存在（一般標(biāo)簽都出現(xiàn)在最左側(cè)）；2.選項(xiàng)的文字提示很清晰，能清楚表明選項(xiàng)間是互斥關(guān)系。

總結(jié)：

水平tab和垂直tab都并非完美，設(shè)計(jì)時(shí)要考慮到選項(xiàng)互斥的問(wèn)題。

如果提交按鈕是針對(duì)多個(gè)tab下的內(nèi)容，建議使用垂直tab，同時(shí)把提交按鈕放到tab包含的內(nèi)容區(qū)域外。

如果提交按鈕是針對(duì)一個(gè)tab下的內(nèi)容，即tab間是互斥的關(guān)系，建議使用水平tab，同時(shí)盡量把提交按鈕放到tab包含的內(nèi)容區(qū)域內(nèi)。

如果提交按鈕針對(duì)的是整個(gè)頁(yè)面的內(nèi)容及其中一個(gè)tab下的選項(xiàng)，則還是應(yīng)該放在所有內(nèi)容之外（最下面），同時(shí)注意下面三點(diǎn)：

1. 標(biāo)簽一般在最左側(cè)，不要把互斥tab做成標(biāo)簽的樣式，而是要做成標(biāo)簽下的選項(xiàng)。
2. 如果tab間是互斥的關(guān)系，tab上的文字盡量清晰表達(dá)出互斥的關(guān)系。
3. 盡量不在一個(gè)頁(yè)面上放過(guò)多的提交按鈕。

網(wǎng)站名稱(chēng)：水平tab與垂直tab的區(qū)別于選擇
文章地址：http://www.rwnh.cn/news41/319491.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、自適應(yīng)網(wǎng)站、品牌網(wǎng)站建設(shè)、定制開(kāi)發(fā)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)