推薦：Jakob Nielsen:十大嚴重的網站設計錯誤
原作者:JakobNielsen|譯者:威廉(Blog)自1996年以來，我曾經指出了很多網站中的設計錯誤，參見底部我的系列文章列表，本文將重點介紹的是，這些問題當

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

關于輸入表單的三種常用布局，大家應該都比較熟悉了，

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

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

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

（以上源頁面版權歸各網站所有，紅色或綠色的指示線為作者添加。）

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

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

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

問題：

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

西貝的回答：

1. 右左布局：當輸入框為多個并且類別相同，字段長短較一致時，建議采用右左布局；
2. 左右布局：當輸入框多，但類別不一致時采用；
3. 上下布局：當輸入框較少，但是引發的提示或幫助較多時，建議采用；不適合輸入框多的情況，因為頁 面占用較大，跨度較大；連貫性不強，但是易于區分；

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