推薦：Jakob Nielsen:十大嚴(yán)重的網(wǎng)站設(shè)計(jì)錯(cuò)誤
原作者:JakobNielsen|譯者:威廉(Blog)自1996年以來，我曾經(jīng)指出了很多網(wǎng)站中的設(shè)計(jì)錯(cuò)誤，參見底部我的系列文章列表，本文將重點(diǎn)介紹的是，這些問題當(dāng)

原文：http://dedream.blogbus.com/logs/5992307.html

關(guān)于輸入表單的三種常用布局，大家應(yīng)該都比較熟悉了，

第一種是這樣，稱為右對齊/左對齊，左邊的標(biāo)簽右對齊，右邊的輸入框左對齊（來自yahoo）：

第二種是左對齊/左對齊，左邊的標(biāo)簽左對齊，右邊的輸入框左對齊（來自Google）：

另一種方式是標(biāo)簽在上，輸入框在下（來自豆瓣）：

（以上源頁面版權(quán)歸各網(wǎng)站所有，紅色或綠色的指示線為作者添加。）

這三種方式各有什么不同呢？

從視覺流來看，右對齊/左對齊強(qiáng)調(diào)的是標(biāo)簽和輸入框這一對元素之間的關(guān)系（從左到右，它們在距離上最接近），缺點(diǎn)是，假如左邊的標(biāo)簽長短差別很大，就會造成參差不齊很難看的頁面；左對齊/左對齊的布局削弱了這種標(biāo)簽－輸入框的對應(yīng)關(guān)系，但是很方便從上到下瀏覽所有的輸入標(biāo)簽，當(dāng)然，假如左邊的標(biāo)簽長短差別大，也會造成距離過遠(yuǎn)，難看的頁面；上下布局則兼顧了標(biāo)簽和輸入框之間的關(guān)系，以及從上到下的很好的邏輯順序，它的缺點(diǎn)是，不適合輸入框太多的情況。

左右兩種布局在中文界面上也許可以取得一致，即，讓所有的標(biāo)簽長度一致，在左對齊的同時(shí)也右對齊，中文真是一門奇妙的語言，在英文頁面上，就很難做到這一點(diǎn)了。

問題：

1. 什么時(shí)候應(yīng)該采用右左布局，什么時(shí)候應(yīng)該采用左右布局？
2. 為什么我說上下布局不適合輸入框太多的情況？

西貝的回答：

1. 右左布局：當(dāng)輸入框?yàn)槎鄠�(gè)并且類別相同，字段長短較一致時(shí)，建議采用右左布局；
2. 左右布局：當(dāng)輸入框多，但類別不一致時(shí)采用；
3. 上下布局：當(dāng)輸入框較少，但是引發(fā)的提示或幫助較多時(shí)，建議采用；不適合輸入框多的情況，因?yàn)轫? 面占用較大，跨度較大；連貫性不強(qiáng)，但是易于區(qū)分；

分享：網(wǎng)站設(shè)計(jì)直接影響企業(yè)的“錢途”
設(shè)計(jì)主頁未必很艱難。但這一工作與編制傳統(tǒng)的宣傳品一樣，都需要我們謹(jǐn)慎處理和籌劃。換言之，我們必須首先確定自己需要傳達(dá)的主要信息，然后仔細(xì)斟酌、把所有