輸入表單的三種布局_網頁設計教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
推薦:Jakob Nielsen:十大嚴重的網站設計錯誤原作者:JakobNielsen|譯者:威廉(Blog)自1996年以來,我曾經指出了很多網站中的設計錯誤,參見底部我的系列文章列表,本文將重點介紹的是,這些問題當
原文:http://dedream.blogbus.com/logs/5992307.html
關于輸入表單的三種常用布局,大家應該都比較熟悉了,
第一種是這樣,稱為右對齊/左對齊,左邊的標簽右對齊,右邊的輸入框左對齊(來自yahoo):
第二種是左對齊/左對齊,左邊的標簽左對齊,右邊的輸入框左對齊(來自Google):
另一種方式是標簽在上,輸入框在下(來自豆瓣):
(以上源頁面版權歸各網站所有,紅色或綠色的指示線為作者添加。)
這三種方式各有什么不同呢?
從視覺流來看,右對齊/左對齊強調的是標簽和輸入框這一對元素之間的關系(從左到右,它們在距離上最接近),缺點是,假如左邊的標簽長短差別很大,就會造成參差不齊很難看的頁面;左對齊/左對齊的布局削弱了這種標簽-輸入框的對應關系,但是很方便從上到下瀏覽所有的輸入標簽,當然,假如左邊的標簽長短差別大,也會造成距離過遠,難看的頁面;上下布局則兼顧了標簽和輸入框之間的關系,以及從上到下的很好的邏輯順序,它的缺點是,不適合輸入框太多的情況。
左右兩種布局在中文界面上也許可以取得一致,即,讓所有的標簽長度一致,在左對齊的同時也右對齊,中文真是一門奇妙的語言,在英文頁面上,就很難做到這一點了。
問題:
- 什么時候應該采用右左布局,什么時候應該采用左右布局?
- 為什么我說上下布局不適合輸入框太多的情況?
西貝的回答:
- 右左布局:當輸入框為多個并且類別相同,字段長短較一致時,建議采用右左布局;
- 左右布局:當輸入框多,但類別不一致時采用;
- 上下布局:當輸入框較少,但是引發的提示或幫助較多時,建議采用;不適合輸入框多的情況,因為頁 面占用較大,跨度較大;連貫性不強,但是易于區分;
分享:網站設計直接影響企業的“錢途”設計主頁未必很艱難。但這一工作與編制傳統的宣傳品一樣,都需要我們謹慎處理和籌劃。換言之,我們必須首先確定自己需要傳達的主要信息,然后仔細斟酌、把所有
相關網頁設計教程:
- 相關鏈接:
- 教程說明:
網頁設計教程-輸入表單的三種布局
。


