|
原文：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)系（從左到右，它們在距離上最接近），缺點是，如果左邊的標(biāo)簽長短差別很大，就會造成參差不齊很難看的頁面；左對齊/左對齊的布局削弱了這種標(biāo)簽－輸入框的對應(yīng)關(guān)系，但是很方便從上到下瀏覽所有的輸入標(biāo)簽，當(dāng)然，如果左邊的標(biāo)簽長短差別大，也會造成距離過遠(yuǎn)，難看的頁面；上下布局則兼顧了標(biāo)簽和輸入框之間的關(guān)系，以及從上到下的很好的邏輯順序，它的缺點是，不適合輸入框太多的情況。
左右兩種布局在中文界面上也許可以取得一致，即，讓所有的標(biāo)簽長度一致，在左對齊的同時也右對齊，中文真是一門奇妙的語言，在英文頁面上，就很難做到這一點了。
問題：
- 什么時候應(yīng)該采用右左布局，什么時候應(yīng)該采用左右布局？
- 為什么我說上下布局不適合輸入框太多的情況？
西貝的回答：
- 右左布局：當(dāng)輸入框為多個并且類別相同，字段長短較一致時，建議采用右左布局；
- 左右布局：當(dāng)輸入框多，但類別不一致時采用；
- 上下布局：當(dāng)輸入框較少，但是引發(fā)的提示或幫助較多時，建議采用；不適合輸入框多的情況，因為頁 面占用較大，跨度較大；連貫性不強(qiáng)，但是易于區(qū)分；
本文鏈接：http://www.95time.cn/design/doc/2007/4781.asp 
出處：藍(lán)色理想
責(zé)任編輯：ishiwei
|
