轉(zhuǎn)自：http://www.yixieshi.com/5459.html
在web頁面設(shè)計中斩萌，在表單設(shè)計中經(jīng)常會遇到各種困惑，感覺上面這篇文章作者總結(jié)的挺好屏轰，與大家共享颊郎。
表單中標(biāo)簽與輸入?yún)^(qū)的4種對齊方式
標(biāo)簽垂直頂對齊
標(biāo)簽水平右對齊
標(biāo)簽水平左對齊
標(biāo)簽在輸入?yún)^(qū)內(nèi)部
《Web Form Design》一書中對標(biāo)簽和輸入?yún)^(qū)組合進(jìn)行了一些研究，我整理了一份數(shù)據(jù)比較的表格：
1霎苗、標(biāo)簽垂直頂對齊
標(biāo)簽和輸入?yún)^(qū)垂直依次排列姆吭，從而降低了對頁面寬度的要求。如果你的頁面沒有富裕的空間用于標(biāo)簽和輸入?yún)^(qū)的橫向排列唁盏，這種組合是個不錯的選擇内狸。
眼動軌跡表明，用戶自上而下的掃描表單厘擂，焦點多集中在左側(cè)一列昆淡，且跳動較小。
2刽严、標(biāo)簽水平右對齊
標(biāo)簽右對齊和輸入?yún)^(qū)水平排列昂灵，從而降低了對頁面高度的要求。但與標(biāo)簽垂直頂對齊相比舞萄，由于標(biāo)簽文字左側(cè)參差不齊眨补，對問題的認(rèn)知和掃描時間變的更長。
眼動軌跡表明倒脓，用戶花了更多時間在看問題撑螺，輸入框?qū)λ麄儊碚f很簡單。
3把还、標(biāo)簽水平左對齊
標(biāo)簽左對齊和輸入?yún)^(qū)水平排列实蓬，同樣降低了對頁面高度的要求茸俭。標(biāo)簽左對齊有利于用戶對問題標(biāo)簽的掃描，但不利于填寫答案安皱，因為標(biāo)簽距離輸入?yún)^(qū)較遠(yuǎn)调鬓，要重新定位到右側(cè)輸入框，確實要消耗一點時間酌伊。
眼動軌跡表明腾窝，用戶花在定位輸入?yún)^(qū)上的時間比看清標(biāo)簽更長，從而影響了整個表單的完成時間居砖。
4虹脯、標(biāo)簽在輸入?yún)^(qū)內(nèi)部
這種方式雖然具備垂直組合的優(yōu)點，但仍應(yīng)謹(jǐn)慎使用奏候。當(dāng)焦點移入輸入?yún)^(qū)后循集，標(biāo)簽消失，看不到問題蔗草，可能會忘記要回答什么咒彤，很郁悶，不得不清掉輸入好的字咒精，把“問題”還原出來镶柱。這種組合比較適合只有一兩個輸入框的簡短表單，而且人們對他很熟悉模叙，不用費力去記住標(biāo)簽提出的問題歇拆，比如：搜索框。
當(dāng)你真的選擇用這種表單的時候范咨，注意故觅，讓標(biāo)簽和真實內(nèi)容區(qū)分開來，一些約定俗成的做法是減淡標(biāo)簽字色湖蜕，在后面打上“…”逻卖；下拉菜單則在默認(rèn)選項兩側(cè)打上“-”，以示區(qū)別：
