如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

表單設(shè)計可以說是設(shè)計界一個老生常談的話題，針對它的重要性自不必多言。本文結(jié)合自身經(jīng)驗和所看所學所得總結(jié)，希望能幫助到大家。

從「因子（構(gòu)成要件）」的角度，將表單逐一拆分，從而能夠全面的看待。

如下，大卸八塊，一一道來：

• 結(jié)構(gòu)
• 標簽
• 輸入字段
• 占位符
• 幫助
• 操作
• 驗證
• 反饋

一、結(jié)構(gòu) Structure

字段的順序、節(jié)奏、外觀和組織。

1. 只問所需

必要而不是全部，簡化表單，或許是優(yōu)化表單的最大建議。簡化的辦法之一就是追溯每個字段為什么需要，是否是當前最相關(guān)的信息，如果它是可選的，最好不要顯示。

2. 有理排序

先問什么，再問什么，前后字段根據(jù)相關(guān)性循循漸進。

3. 從易到難

從用戶相對無抵觸的信息開始逐漸到隱私的信息，而不是一開始就讓用戶萌生退意。

4. 組織相關(guān)

在繁多字段的情況下，將相關(guān)字段按照順序進行分類組合，并通過增加一些額外的空間或者主標題將它們分成語義組，增加了頁面呼吸和節(jié)奏感，從而幫助用戶更加輕松完成表單。

5. 單列呈現(xiàn)

單列，只需眼睛沿著自然的方向從上至下，便于用戶理解操作。多列，眼睛需要按照「之」形進行瀏覽，從而增加瀏覽和理解認知的時間。

當然單列呈現(xiàn)還是多列，并非絕對，需根據(jù)頁面空間，表單內(nèi)容及性質(zhì)共同決定。

6. 提高對比度

提高顏色的對比度，你的用戶群體可不是高清屏，飛行員。

二、標簽 label

標簽告訴用戶需要輸入什么。

1. 名詞標簽

名詞具有很好的描述性且簡潔明了。常用的字段可以使用大家熟悉的圖標代替文本。

2. 標簽位置

左對齊、右對齊、頂部對齊、內(nèi)聯(lián)標簽、圖標標簽和浮動標簽。

多數(shù)情況下，謹慎使用內(nèi)聯(lián)標簽，在用戶輸入后，內(nèi)聯(lián)標簽會消失，用戶無法判斷輸入的內(nèi)容是否符合，當然在用戶熟悉且簡單的字段下可采用（例如登錄中只有賬號和密碼）。針對以上問題，你可以采用內(nèi)聯(lián)浮動標簽解決內(nèi)聯(lián)標簽在輸入后標簽消失的弊端。

三、輸入字段 Input

承載用戶輸入的區(qū)域。

1. 自動對焦（PC端）

進行表單頁面，自動對焦第一個輸入字段可以引導(dǎo)用戶開始進行輸入。

2. 提供默認值

可根據(jù)已知信息，幫助用戶預(yù)判內(nèi)容。例如可以通過 IP 檢測出用戶的地理位置。

3. 保存輸入的數(shù)據(jù)

記住用戶已經(jīng)填寫的內(nèi)容，以防萬一（例如頁面刷新），從而避免用戶需要再次輸入而放棄。

4. 字段約束

為有要求的字段設(shè)置限制。例如，最大字符數(shù)，電話中數(shù)字、字母符號等要求，從而有效的避免臟數(shù)據(jù)。

5. 格式化（掩碼）輸入

提供輸入格式，幫助用戶理解所填內(nèi)容且減少錯誤發(fā)生。常用于手機號碼、日期、銀行卡和郵編等。

6. 匹配鍵盤（移動端）

提供合適的鍵盤，幫助用戶快速完成。

7. 區(qū)分可填

如上所述，盡量避免可填字段。如果不可避免，應(yīng)該做明確區(qū)分。根據(jù)經(jīng)驗，可填和必填的數(shù)量少的做標記說明。

常規(guī)做法：必填，使用「*」星號符；可填，使用「（選填）」。

四、占位符 Placeholder

標簽的額外描述，幫助用戶了解可輸入的數(shù)據(jù)類型和格式提示。

1. 顏色區(qū)分

它是內(nèi)容提示，而不是內(nèi)容。

2. 不是所有輸入框都需要占位符

占位符是對輸入內(nèi)容有特殊要求的提示或提醒，也可理解為對標簽的補充，并不是所有的輸入框都需要占位符。

3. 輸入后消失

不要在鼠標鍵入后消失，而是在輸入內(nèi)容后消失，這樣可以在用戶還未輸入的時候，依然幫助到用戶。

如果提示特別復(fù)雜或者重要，請使用幫助，它會一直顯示在那里。

五、幫助提示 Tips

說明要求，解釋原因，甚至幫助回憶。

1. 三種方式

常駐、按需提供、偶爾需要。

2. 給予解釋

當前需要用戶填寫相對隱私的信息時，請給予解釋這么做的原因及目的。

六、操作 Submit

對當前用戶輸入數(shù)據(jù)的提交等動作。

1. 區(qū)分主次

主操作，是我們期望用戶的使用途徑，應(yīng)該在視覺上與次操作做出明顯的區(qū)分，以突顯號召用戶點擊。

2. 合理放置

合理放置操作的位置，可根據(jù)表單的排列方式合理擺放，避免居中。例如表單采用的是頂部對齊，你可以將操作與輸入字段左對齊，這樣用戶在完成輸入的時候，輕松地看到操作按鈕。

3. 準確命名

清晰可預(yù)測。應(yīng)該準確地描述用戶點擊按鈕后會發(fā)生什么。

4. 行動號召

按鈕應(yīng)始終帶有強烈的動詞，鼓勵用戶行動。

為了給用戶提供足夠的上下文，在按鈕上使用「動詞」 +「名詞」格式，除了保存，關(guān)閉，取消或確定等常用操作。

5. 禁用操作

在未完成必填字段，禁用操作按鈕，通過直觀的視覺上告訴用戶是否完成了要求，并在恰當?shù)臅r刻（表單填寫完成，按鈕被激活）將用戶的視線吸引到按鈕上。

七、驗證 Required

對用戶輸入數(shù)據(jù)的驗證反饋。

1. 前端驗證和后端驗證

前端驗證不需要服務(wù)器上傳驗證的數(shù)據(jù)，就可以判斷，例如手機格式等；但是要記住在用戶輸入后才進行驗證，為空不驗證；

后端驗證，例如手機注冊輸入效驗碼，通過后才注冊成功，需要通過服務(wù)器判斷，才知道用戶輸入的是否正確。

2. 錯在哪里，顯示在哪里

就近原則，方便用戶發(fā)現(xiàn)并修改操作。

3. 結(jié)合顏色、圖標和文字

我們不僅僅需要視覺上的區(qū)別（請考慮色盲用戶），還需要文字說明并告知原因和解決辦法，而不是簡單的「輸入錯誤」。

4. 請勿清除

錯誤的字段，請勿在鍵入后直接清除，請給用戶在此基礎(chǔ)上修改的機會，記住用戶才是決定者。

八、反饋 Feedback

對用戶行為的反饋，告知當前狀態(tài)。

1. 操作前：光標狀態(tài)

鼠標在屏幕上的映射，我們稱之為光標（指針），它會隨著操作對象及系統(tǒng)狀態(tài)而呈現(xiàn)出不同形狀，讓用戶對操作的行為及結(jié)果有預(yù)先的心理感知。

2. 操作中：操作反饋

如 default，disabled，hover，fouce，pressed，active，error，success 等。例如輸入框的懸停和鍵入的視覺反饋，從而幫助用戶聚焦。

3. 操作后：按鈕加載

呈現(xiàn)按鈕的加載過程，而不是禁止不動，用戶會以為系統(tǒng)沒有執(zhí)行操作，從而進行多次點擊，呈現(xiàn)加載并禁止用戶的后續(xù)點擊操作。

總結(jié)

以上便是對表單設(shè)計的一些總結(jié)，更多的是提供一種分析問題的框架，從結(jié)構(gòu)化的思維分析設(shè)計問題，從而能夠全面的認識一個事物并進行了解掌握，愿對你有所幫助。

藍藍設(shè)計( m.hengshangtqd.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。