2018-9-25 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
表單設(shè)計(jì)可以說是設(shè)計(jì)界一個(gè)老生常談的話題，針對它的重要性自不必多言。本文結(jié)合自身經(jīng)驗(yàn)和所看所學(xué)所得總結(jié)，希望能幫助到大家。
從「因子（構(gòu)成要件）」的角度，將表單逐一拆分，從而能夠全面的看待。
如下，大卸八塊，一一道來：
字段的順序、節(jié)奏、外觀和組織。
1. 只問所需
必要而不是全部，簡化表單，或許是優(yōu)化表單的最大建議。簡化的辦法之一就是追溯每個(gè)字段為什么需要，是否是當(dāng)前最相關(guān)的信息，如果它是可選的，最好不要顯示。
2. 有理排序
先問什么，再問什么，前后字段根據(jù)相關(guān)性循循漸進(jìn)。
3. 從易到難
從用戶相對無抵觸的信息開始逐漸到隱私的信息，而不是一開始就讓用戶萌生退意。
4. 組織相關(guān)
在繁多字段的情況下，將相關(guān)字段按照順序進(jìn)行分類組合，并通過增加一些額外的空間或者主標(biāo)題將它們分成語義組，增加了頁面呼吸和節(jié)奏感，從而幫助用戶更加輕松完成表單。
5. 單列呈現(xiàn)
單列，只需眼睛沿著自然的方向從上至下，便于用戶理解操作。多列，眼睛需要按照「之」形進(jìn)行瀏覽，從而增加瀏覽和理解認(rèn)知的時(shí)間。
當(dāng)然單列呈現(xiàn)還是多列，并非絕對，需根據(jù)頁面空間，表單內(nèi)容及性質(zhì)共同決定。
6. 提高對比度
提高顏色的對比度，你的用戶群體可不是高清屏，飛行員。
標(biāo)簽告訴用戶需要輸入什么。
1. 名詞標(biāo)簽
名詞具有很好的描述性且簡潔明了。常用的字段可以使用大家熟悉的圖標(biāo)代替文本。
2. 標(biāo)簽位置
左對齊、右對齊、頂部對齊、內(nèi)聯(lián)標(biāo)簽、圖標(biāo)標(biāo)簽和浮動(dòng)標(biāo)簽。
多數(shù)情況下，謹(jǐn)慎使用內(nèi)聯(lián)標(biāo)簽，在用戶輸入后，內(nèi)聯(lián)標(biāo)簽會(huì)消失，用戶無法判斷輸入的內(nèi)容是否符合，當(dāng)然在用戶熟悉且簡單的字段下可采用（例如登錄中只有賬號和密碼）。針對以上問題，你可以采用內(nèi)聯(lián)浮動(dòng)標(biāo)簽解決內(nèi)聯(lián)標(biāo)簽在輸入后標(biāo)簽消失的弊端。
承載用戶輸入的區(qū)域。
1. 自動(dòng)對焦（PC端）
進(jìn)行表單頁面，自動(dòng)對焦第一個(gè)輸入字段可以引導(dǎo)用戶開始進(jìn)行輸入。
2. 提供默認(rèn)值
可根據(jù)已知信息，幫助用戶預(yù)判內(nèi)容。例如可以通過 IP 檢測出用戶的地理位置。
3. 保存輸入的數(shù)據(jù)
記住用戶已經(jīng)填寫的內(nèi)容，以防萬一（例如頁面刷新），從而避免用戶需要再次輸入而放棄。
4. 字段約束
為有要求的字段設(shè)置限制。例如，最大字符數(shù)，電話中數(shù)字、字母符號等要求，從而有效的避免臟數(shù)據(jù)。
5. 格式化（掩碼）輸入
提供輸入格式，幫助用戶理解所填內(nèi)容且減少錯(cuò)誤發(fā)生。常用于手機(jī)號碼、日期、銀行卡和郵編等。
6. 匹配鍵盤（移動(dòng)端）
提供合適的鍵盤，幫助用戶快速完成。
7. 區(qū)分可填
如上所述，盡量避免可填字段。如果不可避免，應(yīng)該做明確區(qū)分。根據(jù)經(jīng)驗(yàn)，可填和必填的數(shù)量少的做標(biāo)記說明。
常規(guī)做法：必填，使用「*」星號符；可填，使用「（選填）」。
標(biāo)簽的額外描述，幫助用戶了解可輸入的數(shù)據(jù)類型和格式提示。
1. 顏色區(qū)分
它是內(nèi)容提示，而不是內(nèi)容。
2. 不是所有輸入框都需要占位符
占位符是對輸入內(nèi)容有特殊要求的提示或提醒，也可理解為對標(biāo)簽的補(bǔ)充，并不是所有的輸入框都需要占位符。
3. 輸入后消失
不要在鼠標(biāo)鍵入后消失，而是在輸入內(nèi)容后消失，這樣可以在用戶還未輸入的時(shí)候，依然幫助到用戶。
如果提示特別復(fù)雜或者重要，請使用幫助，它會(huì)一直顯示在那里。
說明要求，解釋原因，甚至幫助回憶。
1. 三種方式
常駐、按需提供、偶爾需要。
2. 給予解釋
當(dāng)前需要用戶填寫相對隱私的信息時(shí)，請給予解釋這么做的原因及目的。
對當(dāng)前用戶輸入數(shù)據(jù)的提交等動(dòng)作。
1. 區(qū)分主次
主操作，是我們期望用戶的使用途徑，應(yīng)該在視覺上與次操作做出明顯的區(qū)分，以突顯號召用戶點(diǎn)擊。
2. 合理放置
合理放置操作的位置，可根據(jù)表單的排列方式合理擺放，避免居中。例如表單采用的是頂部對齊，你可以將操作與輸入字段左對齊，這樣用戶在完成輸入的時(shí)候，輕松地看到操作按鈕。
3. 準(zhǔn)確命名
清晰可預(yù)測。應(yīng)該準(zhǔn)確地描述用戶點(diǎn)擊按鈕后會(huì)發(fā)生什么。
4. 行動(dòng)號召
按鈕應(yīng)始終帶有強(qiáng)烈的動(dòng)詞，鼓勵(lì)用戶行動(dòng)。
為了給用戶提供足夠的上下文，在按鈕上使用「動(dòng)詞」 +「名詞」格式，除了保存，關(guān)閉，取消或確定等常用操作。
5. 禁用操作
在未完成必填字段，禁用操作按鈕，通過直觀的視覺上告訴用戶是否完成了要求，并在恰當(dāng)?shù)臅r(shí)刻（表單填寫完成，按鈕被激活）將用戶的視線吸引到按鈕上。
對用戶輸入數(shù)據(jù)的驗(yàn)證反饋。
1. 前端驗(yàn)證和后端驗(yàn)證
前端驗(yàn)證不需要服務(wù)器上傳驗(yàn)證的數(shù)據(jù)，就可以判斷，例如手機(jī)格式等；但是要記住在用戶輸入后才進(jìn)行驗(yàn)證，為空不驗(yàn)證；
后端驗(yàn)證，例如手機(jī)注冊輸入效驗(yàn)碼，通過后才注冊成功，需要通過服務(wù)器判斷，才知道用戶輸入的是否正確。
2. 錯(cuò)在哪里，顯示在哪里
就近原則，方便用戶發(fā)現(xiàn)并修改操作。
3. 結(jié)合顏色、圖標(biāo)和文字
我們不僅僅需要視覺上的區(qū)別（請考慮色盲用戶），還需要文字說明并告知原因和解決辦法，而不是簡單的「輸入錯(cuò)誤」。
4. 請勿清除
錯(cuò)誤的字段，請勿在鍵入后直接清除，請給用戶在此基礎(chǔ)上修改的機(jī)會(huì)，記住用戶才是決定者。
對用戶行為的反饋，告知當(dāng)前狀態(tài)。
1. 操作前：光標(biāo)狀態(tài)
鼠標(biāo)在屏幕上的映射，我們稱之為光標(biāo)（指針），它會(huì)隨著操作對象及系統(tǒng)狀態(tài)而呈現(xiàn)出不同形狀，讓用戶對操作的行為及結(jié)果有預(yù)先的心理感知。
2. 操作中：操作反饋
如 default，disabled，hover，fouce，pressed，active，error，success 等。例如輸入框的懸停和鍵入的視覺反饋，從而幫助用戶聚焦。
3. 操作后：按鈕加載
呈現(xiàn)按鈕的加載過程，而不是禁止不動(dòng)，用戶會(huì)以為系統(tǒng)沒有執(zhí)行操作，從而進(jìn)行多次點(diǎn)擊，呈現(xiàn)加載并禁止用戶的后續(xù)點(diǎn)擊操作。
以上便是對表單設(shè)計(jì)的一些總結(jié)，更多的是提供一種分析問題的框架，從結(jié)構(gòu)化的思維分析設(shè)計(jì)問題，從而能夠全面的認(rèn)識一個(gè)事物并進(jìn)行了解掌握，愿對你有所幫助。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com