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

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

垂直tab：

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

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

但遺憾的是，還是有參與者使用該方案時(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的例子不同，這里沒有單選按鈕），會(huì)令你感到混淆嗎？我個(gè)人覺得，由于“確定”按鈕同樣在tab所包含內(nèi)容之外，所以并不難理解。

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

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

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

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

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

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

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

總結(jié)：

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

如果提交按鈕是針對(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è)頁面的內(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è)頁面上放過多的提交按鈕。

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

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、自適應(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)請(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í)需注明來源： 創(chuàng)新互聯(lián)