標簽水平右對齊
標簽右對齊和輸入?yún)^(qū)水平排列,從而降低了對頁面高度的要求。但與標簽垂直頂對齊相比,由于標簽文字左側參差不齊,對問題的認知和掃描時間變的更長。
眼動軌跡表明,用戶花了更多時間在看問題,輸入框對他們來說很簡單。
標簽水平左對齊
標簽左對齊和輸入?yún)^(qū)水平排列,同樣降低了對頁面高度的要求。標簽左對齊有利于用戶對問題標簽的掃描,但不利于填寫答案,因為標簽距離輸入?yún)^(qū)較遠,要重新定位到右側輸入框,確實要消耗一點時間。
眼動軌跡表明,用戶花在定位輸入?yún)^(qū)上的時間比看清標簽更長,從而影響了整個表單的完成時間。
標簽在輸入?yún)^(qū)內部
這種方式雖然具備垂直組合的優(yōu)點,但仍應謹慎使用。當焦點移入輸入?yún)^(qū)后,標簽消失,看不到問題,可能會忘記要回答什么,很郁悶,不得不清掉輸入好的字,把“問題”還原出來。這種組合比較適合只有一兩個輸入框的簡短表單,而且人們對他很熟悉,不用費力去記住標簽提出的問題,比如:搜索框。
當你真的選擇用這種表單的時候,注意,讓標簽和真實內容區(qū)分開來,一些約定俗成的做法是減淡標簽字色,在后面打上“…”;下拉菜單則在默認選項兩側打上“-”,以示區(qū)別:
設計要有一條主線,貫穿于整個產(chǎn)品,別讓人用著感覺像是幾個設計師干的事。認真思考一遍,就會有新一層的理解,這對我的工作有極大的幫助。
原文:http://blog.b3inside.com/userexperience/label-and-input-in-form-design/
本文鏈接:http://www.95time.cn/design/doc/2009/6659.asp
出處:b3inside.com
責任編輯:bluehearts
上一頁 設計表單的標簽和輸入?yún)^(qū) [1] 下一頁
|