編輯導(dǎo)語：在這個(gè)互聯(lián)網(wǎng)時(shí)代，表單是每個(gè)APP中必不可少的一部分，有時(shí)我們也經(jīng)常會(huì)接觸一些不得不填的表單，整體設(shè)計(jì)比較簡(jiǎn)單，視覺比較好，但是還有一些真的就是慘不忍睹，體驗(yàn)感極差。那怎樣更好地打造用戶體驗(yàn)的表單呢，本文就來為大家聊一聊。

在大家的記憶中，填過既復(fù)雜又不易操作的表單是什么樣的？是結(jié)構(gòu)多變、耗時(shí)耗力，還是內(nèi)容巨多、填錯(cuò)一項(xiàng)就要全部重來？很多時(shí)候，當(dāng)我們遇到體驗(yàn)超級(jí)不好的表單設(shè)計(jì)、但又不得不用它完成任務(wù)時(shí)，那就只能機(jī)械化的對(duì)著這些字段進(jìn)行不情愿的填寫。

表單是UI設(shè)計(jì)中很常見的元素，不管是PC端還是移動(dòng)端，表單幾乎是無法規(guī)避的UI控件，用戶可以通過表單完成線上購(gòu)物、信息交換、文章訂閱等任務(wù)，使用范疇極為廣泛且牽扯到方方面面。

表單作為信息收集的重要環(huán)節(jié)，對(duì)于用戶和產(chǎn)品來說至關(guān)重要，其看似簡(jiǎn)單、實(shí)則很容易忽略用戶體驗(yàn)，作為設(shè)計(jì)師，需要根據(jù)觸發(fā)條件、使用場(chǎng)景將文本信息、輸入框、按鈕等元素進(jìn)行靈活的調(diào)整，以確保用戶順暢的完成表單任務(wù)，因此，設(shè)計(jì)出一個(gè)可用性非常好的表單是提升用戶完成效率的關(guān)鍵。

本篇文章將針對(duì)表單最常見的設(shè)計(jì)準(zhǔn)則及用戶體驗(yàn)做出總結(jié)，希望能夠拋磚引玉，對(duì)表單設(shè)計(jì)有一個(gè)更全面的認(rèn)識(shí)。

一、認(rèn)識(shí)UI中的表單

1. 什么是表單

表單主要用來收集或呈現(xiàn)數(shù)據(jù)、信息或特定字段，其本身不具備屬性，只是一個(gè)數(shù)據(jù)采集工具，需要靈活的運(yùn)用到不同的場(chǎng)景模塊中才能發(fā)揮其真正作用，例如常見的登錄注冊(cè)、調(diào)查問卷、個(gè)人信息頁面等。如何確定當(dāng)前頁面是不是表單頁，主要看該頁面是否發(fā)生數(shù)據(jù)采集而觸發(fā)用戶輸入、選擇、編輯等操作，從而對(duì)部分內(nèi)容進(jìn)行控制。

2. 表單的構(gòu)成（視覺角度）

除去系統(tǒng)隱藏的交互及程序規(guī)則，常用且可見的表單元素有標(biāo)簽、輸入?yún)^(qū)、占位符、圖標(biāo)、按鈕這幾部分。

• 標(biāo)簽：明確該項(xiàng)應(yīng)輸入/選擇什么內(nèi)容，部分表單沒有標(biāo)簽，例如登錄頁，直接以圖標(biāo)、占位符提示錄入的內(nèi)容；
• 輸入?yún)^(qū)：與用戶發(fā)生交互的區(qū)域，通常用輸入框、分隔線、選項(xiàng)框、開關(guān)…等常見元素提示；
• 占位符：用于描述表單內(nèi)容的詳細(xì)說明、錄入規(guī)則、注意事項(xiàng)等，光標(biāo)插入或有內(nèi)容錄入時(shí)占位符消失；
• 圖標(biāo)：帶有圖標(biāo)的表單頁面，通常存在較復(fù)雜的次級(jí)任務(wù)，伴隨下拉框、彈窗或頁面跳轉(zhuǎn)來完成前置條件；
• 按鈕：表單中的任務(wù)按鈕（非保存/提交）與單選作用相同，用于選項(xiàng)條件較少的表單內(nèi)容。

3. 表單的各種狀態(tài)

表單基本上需經(jīng)過三個(gè)階段，即交互前、交互中、交互后的三個(gè)狀態(tài)。

• 交互前：在用戶未發(fā)生任何操作時(shí)，表單為默認(rèn)的初始化狀態(tài)；
• 交互中：光標(biāo)插入即成為聚焦?fàn)顟B(tài)，占位符消失，隨著內(nèi)容的輸入，輸入框后面顯示一鍵清除圖標(biāo)；
• 交互后：輸入完成光標(biāo)離開，前端如驗(yàn)證內(nèi)容有誤會(huì)立即反饋，無誤則回到正常輸入后的狀。

二、表單元素拆解及設(shè)計(jì)細(xì)節(jié)

1. 結(jié)構(gòu)/框架

首先，在視覺上，移動(dòng)端表單不管所輸入字段有多么的少也不要在同一行添置多個(gè)表單，最好的版式就是單列展示，便于用戶瀏覽和理解，盡量避免多列展示，除非存在關(guān)聯(lián)性極強(qiáng)的前置條件，如：輸入手機(jī)號(hào)碼之前要先選擇國(guó)際電話區(qū)號(hào)，可將區(qū)號(hào)和手機(jī)號(hào)碼歸納為同一表單項(xiàng)。

其次，表單內(nèi)容需先易后難，避免用戶從一開始就產(chǎn)生逃避的想法，需要根據(jù)內(nèi)容的關(guān)聯(lián)性循序漸進(jìn)的引導(dǎo)用戶完成。例如：添加地址，常見順序是姓名、電話、地區(qū)、詳細(xì)地址，如果一開始就讓用戶填寫詳細(xì)地址的話就不合理了（并不是不行），這等于在顛覆用戶的認(rèn)知，就算完成了表單內(nèi)容多少也會(huì)有些“上頭”。

最后，當(dāng)同一個(gè)頁面的表單內(nèi)容過多時(shí)，需要根據(jù)類型、相似性或前后關(guān)系進(jìn)行分組，保持頁面的節(jié)奏感，讓用戶在最短的時(shí)間內(nèi)對(duì)整個(gè)頁面內(nèi)容有個(gè)大致的了解，從而能更輕松的完成表單。另外，將選填的內(nèi)容盡量靠后，若其重要性較低，還不如直接去掉，如無必要、勿增實(shí)體。

2. 標(biāo)簽

標(biāo)簽的作用是告知用戶當(dāng)前表單要輸入什么內(nèi)容，清晰簡(jiǎn)潔的表單能讓用戶更快速的理解。標(biāo)簽的長(zhǎng)短決定著其對(duì)齊方式，通常標(biāo)簽字?jǐn)?shù)在可控的情況下可使用左對(duì)齊；文本字?jǐn)?shù)不可控但不是很多時(shí)可使用右對(duì)齊；字?jǐn)?shù)不可控且標(biāo)簽長(zhǎng)短不一、相差巨大就使用頂對(duì)齊（例如英文，大多數(shù)不可控，參差不齊）。

3. 占位符

占位符主要對(duì)標(biāo)簽進(jìn)行描述或提示內(nèi)容格式，它并非內(nèi)容，而是在用戶輸入內(nèi)容之前幫助其解決常見問題及誤區(qū)，用以提升表單的完成效率。

并不是所有的表單都需要占位符，部分設(shè)計(jì)師喜歡將占位符和標(biāo)簽保持一致，實(shí)無必要，如果只是單純的為了視覺上統(tǒng)一，使用通用提示「請(qǐng)輸入/請(qǐng)選擇」也很不錯(cuò)，或者在后面加上推薦性措辭，否則就直接留空。當(dāng)光標(biāo)插入時(shí)，盡量保留占位符，輸入內(nèi)容后再消失，方便用戶在輸入內(nèi)容之前依然可通過占位符得到幫助。

在這里需要說明一個(gè)誤區(qū)，避免直接將占位符作為標(biāo)簽使用，如果只是針對(duì)登錄頁面，用戶還可以理解，因?yàn)槠鋬?nèi)容比較大眾化，賬號(hào) 密碼、額外再加個(gè)驗(yàn)證碼，很容易理解。但其他類型的表單頁面就容易讓用戶產(chǎn)生疑惑，輸入內(nèi)容時(shí)隨著占位符的消失，容易忘記表單的內(nèi)容屬性，增加了用戶的理解成本和使用難度。

4. 輸入

光標(biāo)插入即開始，能讓用戶選擇的就不要讓其碼字輸入，例如：輸入手機(jī)號(hào)碼，可提供通訊錄入口讓用戶自行選擇。盡量減少需輸入的內(nèi)容，通過已知信息預(yù)判內(nèi)容并幫助用戶自動(dòng)錄入，如：手機(jī)號(hào)碼前要先輸入國(guó)際區(qū)號(hào)，若產(chǎn)品主要服務(wù)于國(guó)內(nèi)用戶，系統(tǒng)自動(dòng)錄入“ 86”，可節(jié)省大部分用戶的操作成本，降低表單的完成難度。

表單內(nèi)存在內(nèi)容后，需在后面提供一鍵清除圖標(biāo)“?”，因?yàn)橄到y(tǒng)提供的刪除功能只能單個(gè)文本清除。

需對(duì)輸入的內(nèi)容設(shè)計(jì)規(guī)范格式，例如地址“廣東省 深圳市 龍華區(qū)”、手機(jī)號(hào)碼“138 888 88888”，將同一組較長(zhǎng)的數(shù)字間隔區(qū)分，更便于瀏覽記憶。

5. 鍵盤

鍵盤是內(nèi)容輸入的必備組件，很多時(shí)候，產(chǎn)品會(huì)允許用戶在系統(tǒng)輸入法與第三方輸入法之間自由切換，基于常規(guī)操作似乎沒有什么問題，但站在用戶體驗(yàn)角度，根據(jù)不同使用場(chǎng)景確有開發(fā)內(nèi)置鍵盤的必要。

某些驗(yàn)證或密碼操作只需輸入純數(shù)字，這時(shí)調(diào)出內(nèi)置的純數(shù)字鍵盤可減少無關(guān)元素（字母/符號(hào)）的干擾；出于安全考慮，涉及財(cái)產(chǎn)相關(guān)的密碼則需要打亂鍵盤數(shù)字/字母順序，雖然會(huì)增加用戶的理解成本，但與財(cái)產(chǎn)的安全性相比，顯然在可接受范圍之內(nèi)。

6. 選項(xiàng)

輸入的表單內(nèi)容由系統(tǒng)設(shè)定并超過一條時(shí)，即會(huì)以選項(xiàng)的方式供用戶選擇，選項(xiàng)需根據(jù)數(shù)量的多少及單項(xiàng)的長(zhǎng)短、設(shè)定不同的展示方式，如按鈕、彈窗、頁面跳轉(zhuǎn)等。

• 按鈕：當(dāng)選項(xiàng)不超過6條且單條選項(xiàng)在4個(gè)字左右的，可設(shè)計(jì)成按鈕樣式供用戶選擇；
• 彈窗：選項(xiàng)較多時(shí)，使用操作欄彈窗展示；
• 跳轉(zhuǎn)頁面：若選項(xiàng)太多且不可控，使用跳轉(zhuǎn)頁面的方式則體驗(yàn)更佳。

7. 提示

提示是用戶在操作前對(duì)內(nèi)容輸入可能存在的疑惑或誤區(qū)，占位符不足以說清楚時(shí)，可在標(biāo)簽后面增加一個(gè)圖標(biāo)，用戶點(diǎn)擊后通過彈窗或新的頁面查看詳細(xì)的解釋說明。

8. 數(shù)據(jù)驗(yàn)證

分為前端驗(yàn)證和后端驗(yàn)證，前端驗(yàn)證無需服務(wù)器傳輸數(shù)據(jù)，程序已寫好的驗(yàn)證規(guī)則，光標(biāo)離開即可驗(yàn)證（就像玩單機(jī)游戲），例如內(nèi)容格式、長(zhǎng)短、文本類型驗(yàn)證等；后端驗(yàn)證需要將表單內(nèi)容傳入后臺(tái)數(shù)據(jù)庫進(jìn)行匹配，與數(shù)據(jù)不匹配將驗(yàn)證不通過，例如賬號(hào)不存在、密碼錯(cuò)誤等。

驗(yàn)證反饋需遵循就近原則，將錯(cuò)誤提示顯示在對(duì)應(yīng)的表單項(xiàng)附近，便于用戶及時(shí)修改。另外，不要將錯(cuò)誤信息直接清除，可將對(duì)應(yīng)信息或輸入框用顏色區(qū)分（標(biāo)紅），讓用戶在原有基礎(chǔ)上進(jìn)行修改則效率更高，試想一下，你一口氣輸了30個(gè)數(shù)字，因?yàn)殄e(cuò)了一個(gè)就得重復(fù)前面的操作次數(shù)是什么感受，請(qǐng)記住，把決定權(quán)永遠(yuǎn)留給用戶。

三、暫存及送出規(guī)則

1. 暫存方式

暫存是指用戶未將輸入的內(nèi)容送出（提交給系統(tǒng)）而需要離開當(dāng)前頁面，系統(tǒng)為避免用戶再次輸入已填寫過的內(nèi)容所提供的預(yù)防措施，能防止用戶因重復(fù)輸入而產(chǎn)生放棄的想法。我們需要根據(jù)用戶的實(shí)際使用場(chǎng)景來確定是否需要加入暫時(shí)存儲(chǔ)功能，以及不同的存儲(chǔ)方式。

筆者曾經(jīng)碰到過這樣一個(gè)問題，在微信某公眾號(hào)中將一個(gè)超長(zhǎng)表單完成一大半時(shí)，然后需要在微信中獲取幾個(gè)信息，必須要回到對(duì)話列表（當(dāng)時(shí)沒有浮窗功能），無奈只能返回查看、并祈禱已輸入的內(nèi)容能夠保留，結(jié)果…不出意外的給清空了。換個(gè)姿勢(shì)再來，于是下載了對(duì)應(yīng)的某APP去完成剛才已重復(fù)過的操作，當(dāng)在微信中獲取了信息再回到某APP時(shí)，發(fā)現(xiàn)已被結(jié)束進(jìn)程，×%￥#@……，卸載，拜拜。

這些問題出現(xiàn)的原因有很多，可能是設(shè)備問題、也可能是自己的不良習(xí)慣，但作為設(shè)計(jì)師，在設(shè)計(jì)過程中，雖然無法避免問題的出現(xiàn)，確實(shí)需要提供解決問題的措施?？赡苡腥藭?huì)說，這些小問題不在設(shè)計(jì)范疇，是程序控制的，用戶習(xí)慣五花八門，即便提供預(yù)防措施也不一定能增加用戶的忠誠(chéng)度，我想說明的是“解決問題不一定能留住用戶，但不解決問題一定留不住用戶”。

在特定表單頁面增加暫時(shí)存儲(chǔ)功能，可一定程度的提升使用體驗(yàn)，基于場(chǎng)景的不同，我們就手動(dòng)存儲(chǔ)、自動(dòng)存儲(chǔ)、詢問后存儲(chǔ)三種方式進(jìn)行解析，以確保合理的使用暫存方式。

1）手動(dòng)存儲(chǔ)

手動(dòng)存儲(chǔ)并非信息提交，指的是用戶在完成表單中途有退出需求時(shí)所提供的暫存方案，其最常見的是頁面右上角或末尾提供的“草稿箱”功能，存儲(chǔ)后，下次可從草稿箱進(jìn)入接著編輯。多用于B端或工具型應(yīng)用，例如：我們需要發(fā)布投票、調(diào)查問卷、活動(dòng)等，可事先設(shè)定好條件規(guī)則暫時(shí)保存至草稿箱，待需要時(shí)從草稿箱編輯或發(fā)布。

2）自動(dòng)存儲(chǔ)

對(duì)于填寫內(nèi)容超多的表單頁面，數(shù)據(jù)自動(dòng)存儲(chǔ)非常有必要，當(dāng)遭遇系統(tǒng)崩潰、網(wǎng)絡(luò)故障、應(yīng)用閃退等突發(fā)事件時(shí)，連手動(dòng)存儲(chǔ)的機(jī)會(huì)都沒有，或許花費(fèi)了很長(zhǎng)時(shí)間才完成的內(nèi)容又得重復(fù)一遍，真的很讓人崩潰。如線上申請(qǐng)信用卡、貸款等復(fù)雜表單要求填寫各種信息，可能需要來回獲取且分多次完成，這時(shí)加入自動(dòng)存儲(chǔ)功能，體驗(yàn)一定會(huì)更好（筆者每次編寫文章就是直接打開站酷草稿箱編輯，非常方便）。

3）離開時(shí)詢問

用戶未將內(nèi)容送出時(shí)返回/離開，會(huì)觸發(fā)系統(tǒng)彈窗提示“是否保留內(nèi)容？”，相當(dāng)于手動(dòng)存儲(chǔ)的強(qiáng)提醒。我們?cè)谖⑿排笥讶庉嫼脙?nèi)容、未發(fā)布離開時(shí)就有此提示。

2. 送出方式

在表單頁面，可能會(huì)設(shè)置各種不同的操作按鈕，例如上一步、下一步、存草稿箱、提交等。除非特定情況，一般不會(huì)提供上一步操作，即便提供也會(huì)弱化，因?yàn)樯弦徊揭馕吨脩粲刑龅目赡?，且左上角的返回就可以替代上一步操作滿足用戶的基本需求。草稿箱屬暫存功能，在前面有講到過。

這里講到的送出是指通過下一步、保存、提交或確認(rèn)等行為召喚按鈕來將表單內(nèi)容提交至系統(tǒng)，且根據(jù)不同內(nèi)容的重要性給按鈕賦予不同的位置，所起到的作用也有所不同，最常見的有固定頁面右上角、固定設(shè)備底部和表單底部三種方式。

1）固定頁面右上角

這是一種常見的文字按鈕形式，多用于表單內(nèi)容較少的頁面。表單復(fù)雜重要況且需要認(rèn)證填寫時(shí)，也可能為了不影響用戶的注意力，也可能放在右上角以弱化送出按鈕的視覺吸引力。

2）固定設(shè)備底部

方便用戶隨時(shí)點(diǎn)擊，常用于內(nèi)容重要性不是很高的表單頁面，通常選填項(xiàng)多余必填項(xiàng)。這種設(shè)計(jì)方式有著較強(qiáng)的視覺吸引力，能降低用戶的跳出率，促使其快速將表單內(nèi)容送出。

3）表單底部

表單內(nèi)容較長(zhǎng)且重要性較高，需要完成絕大部分的必填項(xiàng)，下拉到最后一個(gè)表單項(xiàng)時(shí)才能看到送出按鈕，能起到一定的引導(dǎo)作用。對(duì)于內(nèi)容較少的表單，按鈕最靠近內(nèi)容，用戶無需太大的視覺跳躍就能連貫的操作。

行為召喚按鈕的文案必須清晰簡(jiǎn)潔，能讓用戶快速明確按鈕的功能和意圖，不要讓用戶思考。

四、提升表單完成率的小技巧

1. 識(shí)別比輸入更快

技術(shù)的發(fā)展就是靠人們不斷利用、不斷優(yōu)化才得到了更快速的進(jìn)步，要善用技術(shù)的力量，但凡能給用戶提供方便的，就絕不讓用戶頻繁的操作，把所謂的麻煩留給技術(shù)，得到的回報(bào)并不僅僅是用戶這一次的完成任務(wù)，可能是良性循環(huán)。

能用技術(shù)解決的問題就絕不留給用戶，很多時(shí)候，用識(shí)別代替輸入，能提升用戶完成表單的效率及使用體驗(yàn)。例如身份證掃描自動(dòng)識(shí)別錄入個(gè)人信息、銀行卡拍照識(shí)別卡號(hào)、系統(tǒng)自動(dòng)定位等，都能幫用戶省去很多不必要的操作。

2. 微交互能讓操作過程更有趣

我相信沒有誰在無聊的時(shí)候會(huì)喜歡填寫一些信息提交給他人（除非讓TA領(lǐng)錢），用戶是為了完成某項(xiàng)任務(wù)才被迫去完成表單的，所以在這個(gè)過程中多少會(huì)顯得枯燥。適當(dāng)給表單加入微交互，可以讓整個(gè)交互過程更有趣，還能起到引導(dǎo)用戶的作用。例如：用戶初次進(jìn)入部分應(yīng)用設(shè)置個(gè)人偏好時(shí)，系統(tǒng)會(huì)以單個(gè)問題的方式讓用戶回答，再加上絲滑的跳轉(zhuǎn)交互動(dòng)效，給人一種很順暢的感覺；B站用戶登錄輸入密碼時(shí)，頂部的卡通人物會(huì)用雙手捂住眼睛，給予用戶安全的心理暗示。

3. 提前告知必備材料，讓用戶有心理準(zhǔn)備

完成表單的主觀意愿在于用戶時(shí)，基本是對(duì)于結(jié)果有一定的心理預(yù)期，那么應(yīng)該在用戶正式填寫表單之前告知必備的材料。假如完成一個(gè)表單同時(shí)需要身份證、畢業(yè)證、銀行卡等，如果用戶頻繁被中斷去尋找這些資料，就會(huì)逐漸失去耐心，導(dǎo)致中途放棄。提前告知用戶可讓其有一定的心理準(zhǔn)備，從而接受程度會(huì)較高。

4. 提前告知獎(jiǎng)勵(lì)，讓用戶有所期待

完成表單的主觀意愿在于產(chǎn)品時(shí)（與上面相反），為了更好的掌控主動(dòng)權(quán)，部分可能的潛在風(fēng)險(xiǎn)、或必備材料沒必要讓用戶過于理解，否則用戶還沒開始就已經(jīng)放棄了。

例如：獲取線上理財(cái)產(chǎn)品額度時(shí)，沒有誰會(huì)事先告訴你，一定要用身份證實(shí)名認(rèn)證，即便這是必須的，產(chǎn)品也會(huì)先讓用戶提供一些重要性不是那么高的證明材料，然后再循序漸進(jìn)的引導(dǎo)至重要證件的信息錄入，當(dāng)用戶即將要完成表單時(shí)，對(duì)于后續(xù)的必備要求接受度就會(huì)逐漸增高，畢竟沒有誰喜歡在最后一步放棄。再比如申請(qǐng)信用卡，沒有哪個(gè)銀行會(huì)用非常突出的提示你需要查你的征信，即便有弱化的提示也多半會(huì)被忽略。

雖然不能過于明確用戶的付出，但可在用戶開始填寫表單之前告知可能獲得特權(quán)、獎(jiǎng)勵(lì)等，讓用戶有所期待?；谌诵在吚?、人心向利的弱點(diǎn)，產(chǎn)品可以通過福利、獎(jiǎng)品的發(fā)放進(jìn)行利益引用，吸引用戶來完成以產(chǎn)品為主導(dǎo)的表單需求。

（PS：別杠，如果用戶來反駁我接受；如果你是設(shè)計(jì)師，利用產(chǎn)品現(xiàn)有的利益做誘餌屢試不爽。這就是為什么推薦辦理信用卡會(huì)帶上幾個(gè)拉桿箱、問卷調(diào)查會(huì)附上周邊禮品的原因，不管成功與否）

五、常見誤區(qū)及避坑指南

1. 減少不必要的表單項(xiàng)目

PM總是會(huì)認(rèn)為，每一個(gè)表單項(xiàng)都是必不可少的，殊不知每多一個(gè)選項(xiàng)，就會(huì)增加用戶的時(shí)間成本和操作難度，可能導(dǎo)致用戶流失。只要經(jīng)過認(rèn)真的分析就，會(huì)發(fā)現(xiàn)并不是所有的表單項(xiàng)都必不可少，雖然有時(shí)出于特殊情況，但需要盡量去做到減少表單項(xiàng)。

下圖所示，身份證為必填項(xiàng)，出生日期完全可以使用技術(shù)從身份證號(hào)中提??；其手機(jī)號(hào)、郵箱、微信、QQ讓用戶填寫不是目的，獲取聯(lián)系方式才是主要的，手機(jī)號(hào)碼（必備）、微信（主流）完全能滿足對(duì)用戶聯(lián)系方式的信息搜集，沒必要設(shè)計(jì)一個(gè)既復(fù)雜又長(zhǎng)的表單讓用戶完成。

2. 將相關(guān)聯(lián)的表單項(xiàng)組合起來

將關(guān)聯(lián)性較強(qiáng)的信息組合起來形成一個(gè)表單項(xiàng)，不僅讓用戶輸入的連貫性更強(qiáng)、有效節(jié)約界面空間資源的占用，還能讓表單更有組織性、減少用戶的認(rèn)知負(fù)荷。例如時(shí)間/日期、區(qū)號(hào)/電話號(hào)碼、省/市/區(qū)…等

3. 隱藏不相關(guān)的信息

如果用戶打開表單時(shí)的第一感覺就是內(nèi)容太多，就可能心生退意，應(yīng)該隱藏不相關(guān)的信息、刪減無用的字段（信息確實(shí)過多就分組、分頁，后面會(huì)講）。合理控制表達(dá)的復(fù)雜性可減少用戶的心理負(fù)擔(dān)，必要的信息在用戶需要時(shí)出現(xiàn)，有效降低用戶在完成其他表單項(xiàng)時(shí)的干擾。

4. 合理的利用分頁、分組

當(dāng)我們隱藏、刪減了很多內(nèi)容后，表單依舊龐大，切記不要把所有內(nèi)容一次性全都展示給于用戶，過長(zhǎng)的表單需要花費(fèi)較多的時(shí)間才能完成，可能導(dǎo)致用戶不知所措、產(chǎn)生煩躁情緒從而放棄填寫，這時(shí)就需要將所有的表單項(xiàng)進(jìn)行分組，有必要時(shí)還需分頁展示。

將超長(zhǎng)表單任務(wù)根據(jù)特定的邏輯、屬性分割多個(gè)小任務(wù)，分頁展示且同時(shí)顯示操作進(jìn)度，會(huì)讓用戶覺得更容易填寫、操作流程更連貫順暢，對(duì)整個(gè)表單形成清晰的預(yù)期，這樣有利于用戶專注于當(dāng)前選項(xiàng)。

細(xì)心的設(shè)計(jì)師會(huì)發(fā)現(xiàn)，目前有部分應(yīng)用將登錄頁的手機(jī)號(hào)/驗(yàn)證碼輸入進(jìn)行了分頁，主要原因是點(diǎn)擊獲取驗(yàn)證碼之后需要等待接收短信，而等待的空檔期會(huì)讓用戶產(chǎn)生效率緩慢的感覺，分頁后在跳轉(zhuǎn)頁面時(shí)能掩蓋小部分的等待時(shí)間，從某種意義上來講，分頁操作的流暢度會(huì)“高于”多信息同頁面等待完成（此論點(diǎn)各執(zhí)一詞、未被證實(shí)）。

將超長(zhǎng)表單內(nèi)容分組、分頁固然能提升體驗(yàn)，但不能過于細(xì)化、刻意增加操作步驟，否則可能會(huì)惹惱用戶，遺留下來的將是一個(gè)全新的問題。

5. 標(biāo)簽與輸入框視覺的視覺關(guān)聯(lián)

接近性原則告訴我們，元素之間的相對(duì)距離會(huì)影響用戶感知他們之間的關(guān)系，相互靠近的物體被認(rèn)為比相互距離較遠(yuǎn)的物體更有關(guān)聯(lián)性。

按照原理，同一組表單元素應(yīng)該靠的更近，以體現(xiàn)內(nèi)容的關(guān)聯(lián)性，確保界面層級(jí)清晰，用戶不會(huì)產(chǎn)生疑惑。

6. 字?jǐn)?shù)限制需實(shí)時(shí)提示

對(duì)于輸入內(nèi)容可能較多的單個(gè)表單項(xiàng)，需要實(shí)時(shí)提醒用戶剩余可輸入字?jǐn)?shù)，避免用戶一股腦的輸入完成后才發(fā)現(xiàn)內(nèi)容量已翻倍、極不情愿的重新組織語言，這種情況常出現(xiàn)在備注、介紹等較長(zhǎng)表單項(xiàng)。另外，在自定義注冊(cè)賬號(hào)、設(shè)置密碼的較短表單項(xiàng)中也會(huì)碰到。

7. 內(nèi)容長(zhǎng)度與輸入?yún)^(qū)高度相適應(yīng)

重要的表單內(nèi)容，不管內(nèi)容多長(zhǎng)都應(yīng)該完整顯示，例如個(gè)人簡(jiǎn)介、詳細(xì)地址等表單項(xiàng)，如果僅僅因?yàn)閮?nèi)容過長(zhǎng)就將后面的部分隱藏，可以說是非常不友好，用戶甚至無法對(duì)已輸入的信息進(jìn)行完整的預(yù)覽，不能確認(rèn)信息的對(duì)錯(cuò)。請(qǐng)記住，如果從一開始就不想讓用戶輸入太多信息，那就從程序上控制并給予對(duì)應(yīng)的提示。

表單輸入?yún)^(qū)的寬度雖然是固定的，但可以通過自適應(yīng)調(diào)整高度來確保信息內(nèi)容的完整性，保持良好的使用體驗(yàn)。

六、總結(jié)

以上是筆者對(duì)表單設(shè)計(jì)的一點(diǎn)經(jīng)驗(yàn)和總結(jié)，希望對(duì)大家有所幫助。我們?cè)谠O(shè)計(jì)表單時(shí)，需要用結(jié)構(gòu)化的思維去思考分析，視覺只是整個(gè)體驗(yàn)的一小部分，如果只關(guān)注表面，也很容易將優(yōu)秀的表單樣式復(fù)制出來，但卻無法理解背后的設(shè)計(jì)價(jià)值，畢竟設(shè)計(jì)都是先想好為什么，然后才開始做。

很多時(shí)候，可能有人會(huì)認(rèn)為一些很小的表單細(xì)節(jié)顯得微不足道，就算能起到作用可能也只是對(duì)1％、1‰甚至1?的用戶，杯水車薪。但是有沒有想過，一個(gè)應(yīng)用中可優(yōu)化的點(diǎn)可能會(huì)有100個(gè)、1000個(gè)…。雖然有時(shí)候做的不是很好，但只要能比上一次好，那就毫不猶豫的換掉它。

#專欄作家#

大漠飛鷹；公眾號(hào)：能量眼球，人人都是產(chǎn)品經(jīng)理專欄作家。致力于產(chǎn)品需求的驅(qū)動(dòng)、產(chǎn)品體驗(yàn)的挖掘，利用設(shè)計(jì)的手段為受眾用戶帶來更好的體驗(yàn)，即好看、好用。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于 CC0 協(xié)議