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

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

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

如下，大卸八塊，一一道來(lái)：

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

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

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

1. 只問(wèn)所需

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

2. 有理排序

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

3. 從易到難

從用戶(hù)相對(duì)無(wú)抵觸的信息開(kāi)始逐漸到隱私的信息，而不是一開(kāi)始就讓用戶(hù)萌生退意。

4. 組織相關(guān)

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

5. 單列呈現(xiàn)

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

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

6. 提高對(duì)比度

提高顏色的對(duì)比度，你的用戶(hù)群體可不是高清屏，飛行員。

二、標(biāo)簽 label

標(biāo)簽告訴用戶(hù)需要輸入什么。

1. 名詞標(biāo)簽

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

2. 標(biāo)簽位置

左對(duì)齊、右對(duì)齊、頂部對(duì)齊、內(nèi)聯(lián)標(biāo)簽、圖標(biāo)標(biāo)簽和浮動(dòng)標(biāo)簽。

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

三、輸入字段 Input

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

1. 自動(dòng)對(duì)焦（PC端）

進(jìn)行表單頁(yè)面，自動(dòng)對(duì)焦第一個(gè)輸入字段可以引導(dǎo)用戶(hù)開(kāi)始進(jìn)行輸入。

2. 提供默認(rèn)值

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

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

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

4. 字段約束

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

5. 格式化（掩碼）輸入

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

6. 匹配鍵盤(pán)（移動(dòng)端）

提供合適的鍵盤(pán)，幫助用戶(hù)快速完成。

7. 區(qū)分可填

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

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

四、占位符 Placeholder

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

1. 顏色區(qū)分

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

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

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

3. 輸入后消失

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

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

五、幫助提示 Tips

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

1. 三種方式

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

2. 給予解釋

當(dāng)前需要用戶(hù)填寫(xiě)相對(duì)隱私的信息時(shí)，請(qǐng)給予解釋這么做的原因及目的。

六、操作 Submit

對(duì)當(dāng)前用戶(hù)輸入數(shù)據(jù)的提交等動(dòng)作。

1. 區(qū)分主次

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

2. 合理放置

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

3. 準(zhǔn)確命名

清晰可預(yù)測(cè)。應(yīng)該準(zhǔn)確地描述用戶(hù)點(diǎn)擊按鈕后會(huì)發(fā)生什么。

4. 行動(dòng)號(hào)召

按鈕應(yīng)始終帶有強(qiáng)烈的動(dòng)詞，鼓勵(lì)用戶(hù)行動(dòng)。

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

5. 禁用操作

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

七、驗(yàn)證 Required

對(duì)用戶(hù)輸入數(shù)據(jù)的驗(yàn)證反饋。

1. 前端驗(yàn)證和后端驗(yàn)證

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

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

2. 錯(cuò)在哪里，顯示在哪里

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

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

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

4. 請(qǐng)勿清除

錯(cuò)誤的字段，請(qǐng)勿在鍵入后直接清除，請(qǐng)給用戶(hù)在此基礎(chǔ)上修改的機(jī)會(huì)，記住用戶(hù)才是決定者。

八、反饋 Feedback

對(duì)用戶(hù)行為的反饋，告知當(dāng)前狀態(tài)。

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

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

2. 操作中：操作反饋

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

3. 操作后：按鈕加載

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

總結(jié)

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

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