建站常識
輸入表單的三種布局
2007-06-22 12:25:00
原文:http://dedream.blogbus.com/logs/5992307.html
關于輸入表單的三種常用布局,大家應該都比較熟悉了,
第一種是這樣,稱為右對齊/左對齊,左邊的標簽右對齊,右邊的輸入框左對齊(來自yahoo):
第二種是左對齊/左對齊,左邊的標簽左對齊,右邊的輸入框左對齊(來自Google):
另一種方式是標簽在上,輸入框在下(來自豆瓣):
(以上源頁面版權歸各網(wǎng)站所有,紅色或綠色的指示線為作者添加。)
這三種方式各有什么不同呢?
從視覺流來看,右對齊/左對齊強調的是標簽和輸入框這一對元素之間的關系(從左到右,它們在距離上最接近),缺點是,如果左邊的標簽長短差別很大,就會造成參差不齊很難看的頁面;左對齊/左對齊的布局削弱了這種標簽-輸入框的對應關系,但是很方便從上到下瀏覽所有的輸入標簽,當然,如果左邊的標簽長短差別大,也會造成距離過遠,難看的頁面;上下布局則兼顧了標簽和輸入框之間的關系,以及從上到下的很好的邏輯順序,它的缺點是,不適合輸入框太多的情況。
左右兩種布局在中文界面上也許可以取得一致,即,讓所有的標簽長度一致,在左對齊的同時也右對齊,中文真是一門奇妙的語言,在英文頁面上,就很難做到這一點了。
問題:
- 什么時候應該采用右左布局,什么時候應該采用左右布局?
- 為什么我說上下布局不適合輸入框太多的情況?
西貝的回答:
- 右左布局:當輸入框為多個并且類別相同,字段長短較一致時,建議采用右左布局;
- 左右布局:當輸入框多,但類別不一致時采用;
- 上下布局:當輸入框較少,但是引發(fā)的提示或幫助較多時,建議采用;不適合輸入框多的情況,因為頁 面占用較大,跨度較大;連貫性不強,但是易于區(qū)分;
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設計的五大特點
- [2023-04-27 14:05:55] Html 5 響應式網(wǎng)站設計制作
- [2023-04-10 11:07:30] 網(wǎng)站建設制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設計應該更看重框架搭建還是視覺觀感?
- [2022-08-09 15:57:48] 以“產品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應該有哪些板塊內容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設為什么要設置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁設計的好看,這個網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費者,應該如何選擇一家水平高的網(wǎng)站建設公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設計都有哪些新的趨勢?
延伸閱讀
- [2006-06-13 21:54:00] 使用表單制作網(wǎng)頁的五點技巧
- [2010-07-27 16:06:00] Web表單設計之注冊表單
- [2009-12-18 14:55:00] [譯]以用戶為中心的WEB表單
- [2009-06-02 08:11:00] 互聯(lián)網(wǎng)應用表單設計
- [2006-05-26 14:50:00] 淺議Web的表單設計
- [2009-07-15 08:03:00] 表單設計之基于選擇的輸入(9)
- [2009-05-06 07:53:00] 互聯(lián)網(wǎng)表單設計-自動即時幫助
- [2007-04-18 09:04:00] Web 表單設計原則和實踐
- [2009-05-31 08:15:00] 有效網(wǎng)頁表單的八條規(guī)則(譯)
- [2009-08-07 07:45:00] 互聯(lián)網(wǎng)表單設計之消失的表單
- [2007-04-20 14:44:00] 天天體驗:注冊表單
- [2009-05-17 09:57:00] 對一個表單設計方案的回復
解決方案
輪胎行業(yè)網(wǎng)站設計解決方案 機械行業(yè)網(wǎng)站設計解決方案 房地產行業(yè)網(wǎng)站設計解決方案 科技企業(yè)網(wǎng)站設計解決方案 電子家電網(wǎng)站設計解決方案 食品行業(yè)網(wǎng)站設計解決方案 集團公司網(wǎng)站設計解決方案 企事業(yè)單位網(wǎng)站設計解決方案 外貿行業(yè)網(wǎng)站設計解決方案 健身運動網(wǎng)站設計解決方案 美容與化妝品網(wǎng)站設計解決方案 建筑設計行業(yè)網(wǎng)站設計解決方案 物流行業(yè)網(wǎng)站設計解決方案
TAGS關鍵字
青島抖音小程序開發(fā) 青島網(wǎng)站SEO 青島網(wǎng)站建設公司哪家好 搜索引擎 如何做網(wǎng)站優(yōu)化 SEO優(yōu)化 力圖 網(wǎng)站建設的步驟有哪些 微信營銷的優(yōu)勢 css 網(wǎng)站動畫 海信網(wǎng)絡科技 H5定制設計 HTML5 網(wǎng)站優(yōu)化 青島IT資訊 青島高端網(wǎng)站設計公司哪家好 網(wǎng)站設計資訊 網(wǎng)站制作 網(wǎng)頁設計 手機網(wǎng)站 GOOGLE 網(wǎng)站建設,手機網(wǎng)站 膠南網(wǎng)站建設公司 平面設計 青島黃島、紅島網(wǎng)站建設公司 IT資訊 青島高端網(wǎng)站建設 圖形網(wǎng)格 用戶界面