每個表單都至少有三個基本要素:標簽、輸入框、動作。標簽則負責提出問題。
標簽除了要簡潔清晰讓人們明白外,還應具備良好的布局。
一、三種常見的標簽對齊方式
輸入框標簽包括頂對齊、右對齊和左對齊。如下圖所示:
左對齊標簽
右對齊保簽
頂對齊標簽
下表中詳細列明了三種對齊方式的優缺點:
三種對齊方式優缺點
馬泰奧·彭佐的眼動研究發現三種對齊方式的填寫速度:
三種對齊方式的速度及試用情景
可見,填寫速度分別是頂對齊最快,其次是右對齊,左對齊最慢。
二、輸入框內標簽
輸入框內標簽
這種做法可以節省寶貴的屏幕空間,但是填寫時輸入框內的標簽會消失,如果突然忘記了要回答什么問題,可能一時半會找不到標簽。因此該方案并不適用于表單太長甚至中等長度的表單。
該方式更適用于問題只有一個的表單如搜索框,或者問題很熟悉如通訊錄。
不明顯的問題不建議采用輸入框內標簽。
現在開發人員通常使用placeholder屬性來設置輸入框內表簽。
三、混合對齊方式
如果考慮在同一工具或網站不同表單采用不同的對齊方式,應當平衡情景和一致性。而情景常常比一致性更重要。
同一表單中不建議使用不同標簽對齊方式,會破壞明確完成路徑,讓人們感到迷惑。