水平tab與垂直tab的區(qū)別于選擇

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

其中我最感興趣的部分是水平選項（tab）與垂直選項（tab）的對比。

水平tab：

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

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

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

垂直tab：

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

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

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

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

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

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

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

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

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

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

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

總結(jié)：

水平tab和垂直tab都并非完美，設(shè)計時要考慮到選項互斥的問題。

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

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

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

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

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

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

廣告

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