編輯導(dǎo)語(yǔ)：在各種移動(dòng)端設(shè)備中，我們經(jīng)常能夠見(jiàn)到表單，表單不僅簡(jiǎn)潔清晰的為我們呈現(xiàn)出了信息，還能夠提升用戶的體驗(yàn)感。表單看似很容易設(shè)計(jì)，實(shí)則包含許多的細(xì)節(jié)，稍不注意就會(huì)出錯(cuò)。本文作者作者就以表單為例，為我們談了談移動(dòng)端產(chǎn)品細(xì)節(jié)的重要性。

不管是APP還是Web端界面設(shè)計(jì)，我們最常見(jiàn)的元素應(yīng)該就是表單了，表單幾乎是每一款數(shù)字產(chǎn)品都不可或缺的組成部分，也是設(shè)計(jì)師必須要親身經(jīng)歷的設(shè)計(jì)組件之一，它的作用無(wú)可替代。

表單是提升用戶體驗(yàn)的一個(gè)核心點(diǎn)，但在視覺(jué)呈現(xiàn)的時(shí)候，大部分都忽視了它的體驗(yàn)。對(duì)于一個(gè)設(shè)計(jì)師來(lái)說(shuō)，就需要根據(jù)實(shí)際情況在設(shè)計(jì)中進(jìn)行靈活調(diào)整，設(shè)計(jì)出符合用戶預(yù)期的表單。

不僅能帶給用戶操作效率上的提升，節(jié)約時(shí)間成本；還能避免錯(cuò)誤出現(xiàn)，在體驗(yàn)過(guò)程中心情更加的愉悅。

下面用Bee Express實(shí)際項(xiàng)目案例來(lái)帶你全面了解表單設(shè)計(jì)：

一、什么是表單

在我們的現(xiàn)實(shí)生活中，從小到大都在和表單打交道，從我們?cè)趯W(xué)習(xí)使用的作業(yè)本、學(xué)?；@球場(chǎng)里的線條、班級(jí)里面每個(gè)小組區(qū)域的劃分；再到樓層及墻面阻隔、超市里面的貨架、馬路上的斑馬線等。

雖然這些潛在的表單沒(méi)有明確的標(biāo)識(shí)，但對(duì)我們已經(jīng)形成了條件反射，也有了深刻的記憶。它們隨時(shí)都在告訴我們，在哪個(gè)區(qū)域可以做什么？需要注意什么？以及行動(dòng)之后的結(jié)果反饋。

表單在產(chǎn)品中主要負(fù)責(zé)數(shù)據(jù)采集的功能，用來(lái)搜集和呈現(xiàn)一些數(shù)據(jù)、信息和特定的字段，大部分涉及到數(shù)據(jù)采集功能的模塊，我們都可以稱其為表單。

范疇極為廣泛，應(yīng)用情況牽涉到方方面面，可以被靈活運(yùn)用于多種功能模塊中。

表單并不是表格，是最為常見(jiàn)的頁(yè)面模塊， 比如登錄網(wǎng)站填寫(xiě)信息、購(gòu)物填寫(xiě)地址、填寫(xiě)調(diào)查問(wèn)卷、修改個(gè)人中心信息時(shí)……都是在和表單發(fā)生互動(dòng)。

表單是由多種元素組成，最常用的元素就那么幾個(gè)。在設(shè)計(jì)過(guò)程中，設(shè)計(jì)師需要合理組織這些元素，幫助用戶在填寫(xiě)表單時(shí)，輕松愉快的完成。

二、Bee express項(xiàng)目表單存在的問(wèn)題

Bee Express主要經(jīng)營(yíng)的是快遞、速遞柜業(yè)務(wù)，前期主要經(jīng)營(yíng)泰國(guó)市場(chǎng)，所有APP/網(wǎng)頁(yè)的視覺(jué)語(yǔ)言定為中文、英文、泰文三種。

那么我們?cè)O(shè)計(jì)的界面就需要去考慮在表達(dá)同一個(gè)信息時(shí)，中、英、泰三文不同長(zhǎng)度的占比，需要預(yù)留足夠的位置以供所有譯文顯示完整。

同時(shí)也碰到了諸多問(wèn)題，在設(shè)計(jì)之前，基本就是以中文為主，組織好視覺(jué)語(yǔ)言后是沒(méi)有辦法隨時(shí)提供英、泰兩文的；即使提供了，也會(huì)碰到一些比較尷尬問(wèn)題。

下面我就以表單為主，將存在的問(wèn)題列舉部分。

從上面的實(shí)例，我們能看出來(lái)，在中文正常的情況下，翻譯英/泰文時(shí)候，很多問(wèn)題就顯現(xiàn)出來(lái)：

• 標(biāo)簽左對(duì)齊的方式在英、泰兩文狀態(tài)下，顯的不夠友好，參差不齊造成視覺(jué)有些混亂；
• 英文翻譯在超過(guò)3個(gè)單詞或某個(gè)單詞過(guò)長(zhǎng)時(shí)，就會(huì)出現(xiàn)重疊/覆蓋的情況；
• 泰文都是非常碎小的單個(gè)符號(hào)，在標(biāo)簽過(guò)長(zhǎng)時(shí)，無(wú)法確定從哪里折行以確保詞組不會(huì)脫節(jié)；
• 輸入的部分信息因橫向距離過(guò)短，造成顯示不全而自動(dòng)省略，給用戶帶來(lái)記憶負(fù)擔(dān)；
• 因視覺(jué)的混亂，導(dǎo)致可操作性很差，易用性過(guò)低。

上面只是根據(jù)展示的單個(gè)頁(yè)面列舉的部分問(wèn)題，其實(shí)在其他各種類型的表單里，還有更多可改進(jìn)及優(yōu)化的空間。

比如：完成的先后順序、合適的輸入格式、下拉還是彈窗、狀態(tài)反饋、操作按鈕、如何簡(jiǎn)化以及分頁(yè)等，都需要設(shè)計(jì)師去細(xì)心的打磨，以便于用戶高效、愉快的完成表單內(nèi)容。

三、表單的組成結(jié)構(gòu)與類型.

1. 表單的組合元素

表單的目的、內(nèi)容、大小長(zhǎng)度等雖然各不相同，但基本元素比較固定，在進(jìn)行布局和交互設(shè)計(jì)的時(shí)候，這些元素有著較高設(shè)計(jì)要求。合理組織這些元素有助于用戶輕松完成表單填寫(xiě)，在產(chǎn)品上需要高效、顯著且有良好的可訪問(wèn)性。

表單主要有以下幾部分組成：

• 標(biāo)簽：告訴用戶這里應(yīng)該輸入的元素是什么，如：姓名、電話、地址；
• 輸入域：可交互的輸入?yún)^(qū)域，如：文本框、選項(xiàng)框、下拉選擇、文件上傳；
• 占位符：占位符是對(duì)標(biāo)簽進(jìn)行額外的信息描述，如：輸入信息的范例、填寫(xiě)幫助；
• 前導(dǎo)圖標(biāo)（可選）：描述文本所需的輸入類型和特征，如：登錄的賬號(hào)、密碼、驗(yàn)證碼；
• 后綴圖標(biāo)（可選）：對(duì)輸入內(nèi)容進(jìn)行控制，如：下拉的展開(kāi)與收起、清空；
• 幫助（可選）：提供表單內(nèi)容的注釋或輔助類容，如：說(shuō)明、注意事項(xiàng)；
• 反饋（可選）：告知用戶當(dāng)前操作可能或已出現(xiàn)的問(wèn)題，如：提交成功、錯(cuò)誤提示、網(wǎng)絡(luò)問(wèn)題；
• 鍵盤（可選）：在文本編輯時(shí)需要使用鍵盤，如：設(shè)備系統(tǒng)鍵盤、應(yīng)用內(nèi)置鍵盤；
• 動(dòng)作按鈕：動(dòng)作按鈕是在表單的結(jié)尾，如：提交、下一步、清空所有信息。

2. 選擇合理的對(duì)齊方式

常見(jiàn)的對(duì)齊的方式有三種，左對(duì)齊、右對(duì)齊和頂對(duì)齊。不同的對(duì)齊方式都有各自的優(yōu)點(diǎn)和缺點(diǎn)，我們需要根據(jù)項(xiàng)目實(shí)際情況來(lái)選擇最合適的對(duì)齊方式。

1）標(biāo)簽左對(duì)齊

• 優(yōu)點(diǎn)：左對(duì)齊有足夠的垂直空間，可以充分利用，而且便于信息的擴(kuò)展。
• 缺點(diǎn)：?需要更多的橫向空間，主要由標(biāo)簽的字?jǐn)?shù)決定，需要刻意控制，否則會(huì)顯得參差不齊。與輸入字段關(guān)聯(lián)性弱，完成速度最慢，導(dǎo)致加長(zhǎng)用戶完成表單的時(shí)間，增加用戶的時(shí)間成本。

從上面的實(shí)例，Bee Express項(xiàng)目在中文/英文/泰文狀態(tài)下，不適合標(biāo)簽左對(duì)齊的方式。

2）標(biāo)簽右對(duì)齊

• 優(yōu)點(diǎn)：標(biāo)簽到輸入框的間距是固定的，用戶在瀏覽時(shí)速度更快，減少了用戶完成表單的時(shí)間
• 缺點(diǎn)：所占空間與左對(duì)齊相同，左右邊緣呈鋸齒狀，標(biāo)簽與輸入字段距離一致，完成速度一般。感覺(jué)上有些隨意，在視覺(jué)上不易快速了解表單的全部信息，且缺乏統(tǒng)一感。

從上面的實(shí)例，Bee Express項(xiàng)目在中文/英文/泰文狀態(tài)下，相比左對(duì)齊可以提升用戶完成效率，但并未解決因不同文本信息過(guò)長(zhǎng)而造成自動(dòng)省略的問(wèn)題，同樣不適合標(biāo)簽右對(duì)齊的方式。

3）標(biāo)簽頂對(duì)齊

• 優(yōu)點(diǎn)：符合自然視線，完成速度最快，好布局，適合長(zhǎng)短不同的標(biāo)簽；用戶在視覺(jué)掃描時(shí)能快速的捕捉表單信息，更快的完成操作。
• 缺點(diǎn)：面對(duì)表單內(nèi)容較多、內(nèi)容過(guò)長(zhǎng)時(shí)，需要更多的縱向空間。

從上面的實(shí)例看，相比左對(duì)齊和右對(duì)齊的方式，Bee Express項(xiàng)目在中文/英文/泰文狀態(tài)下，更加適合標(biāo)簽頂對(duì)齊。

雖然面對(duì)表單內(nèi)容較多、內(nèi)容過(guò)長(zhǎng)時(shí)，會(huì)占據(jù)更多的縱向空間，但方便用戶能更加快速便捷的完成表單，提升易用性，視覺(jué)更加統(tǒng)一；還能根據(jù)表單內(nèi)容進(jìn)行分頁(yè)來(lái)解決單頁(yè)縱向空間過(guò)長(zhǎng)的問(wèn)題。

3. 選填與必填

需要正確區(qū)分必填及選填的字段信息，盡量避免可填字段，如果不可避免，應(yīng)該做明確區(qū)分。避免用戶不知道哪些字段必須填寫(xiě)、哪些是選擇性填寫(xiě)。根據(jù)用戶長(zhǎng)期使用產(chǎn)品被培養(yǎng)出來(lái)的習(xí)慣，可以用下列方式區(qū)分：

• 使用帶 * 標(biāo)記加入標(biāo)簽提示，來(lái)告知用戶必填字段，選填字段不做標(biāo)記；
• 必填字段過(guò)多時(shí)，不用做任何標(biāo)記，選填字段標(biāo)簽處備注“選填”；
• 避免必填和選填字段同時(shí)標(biāo)記或者都沒(méi)有任何標(biāo)記。

4. 內(nèi)容分組

在我們?cè)O(shè)計(jì)表單需要的字段內(nèi)容較多是，需要合理的使用內(nèi)容分組，這樣整體看起來(lái)更加有組織性。

接近性（格式塔原理）原則告訴我們：相互靠近的物體被認(rèn)為比相互距離較遠(yuǎn)的物體更有關(guān)聯(lián)性，這樣能使設(shè)計(jì)界面層次有序，視覺(jué)清晰，減少視覺(jué)噪音。

分組時(shí)需要注意：

• 內(nèi)容屬性相近或有關(guān)聯(lián)性的放在一組；
• 根據(jù)信息的重要性及難易程度排列分組，將選填的表單內(nèi)容靠后。

5. 合理分頁(yè)

表單信息內(nèi)容過(guò)多時(shí)，需要合理的使用分頁(yè)，避免用戶在事先就覺(jué)得需要在這個(gè)表單上花費(fèi)大量的時(shí)間，就有可能產(chǎn)生放棄的想法。比如我們申請(qǐng)信用卡，就是采用多個(gè)表單頁(yè)面逐步完成的。

另外，在表單信息較少時(shí)，為了提升易用性和轉(zhuǎn)化率，也可以采用分頁(yè)、分步驟完成。

如：?jiǎn)柧碚{(diào)查，每個(gè)問(wèn)題都是單獨(dú)的頁(yè)面，這樣可以避免信息的相互干擾，也讓用戶得以放松心情，專注于當(dāng)前選項(xiàng)，提升易用性；還有部分APP登錄，把手機(jī)號(hào)輸入和驗(yàn)證碼分為兩個(gè)頁(yè)面操作，F(xiàn)acebook 的數(shù)據(jù)表明，分步也是可以提高成功率的。

6. 展示與隱藏

部分內(nèi)容在用戶需要的時(shí)候可以展示，或者系統(tǒng)強(qiáng)烈推薦的選填內(nèi)容也可以呈現(xiàn)給用戶，但在用戶明確不需要時(shí)，適時(shí)將信息隱藏；避免多余表單信息的干擾，造成用戶的不確定性。

7. 匹配合適的鍵盤

根據(jù)表單內(nèi)容的不同屬性，應(yīng)對(duì)不同的輸入需求，應(yīng)該提供不同的鍵盤類型，以便于用戶使用更加快捷。常見(jiàn)鍵盤有以下類型：

• 設(shè)備系統(tǒng)內(nèi)置的輸入法，或者下載符合我們長(zhǎng)期使用習(xí)慣的輸入法APP；
• 涉及資產(chǎn)安全方面，提供內(nèi)置鍵盤，打亂鍵盤字母及數(shù)字的固定位置，可以防止窺竊，提高安全性；
• 數(shù)字輸入，提供純數(shù)字鍵盤，能夠提升用戶的完成效率，讓輸入變的更簡(jiǎn)單。

四、信息的錄入方式.

1. 文本輸入類型

用戶在完成表單進(jìn)行文本輸入時(shí)，當(dāng)然希望填寫(xiě)的信息越少越好，所以我們盡可能提供合適的輸入格式、適當(dāng)?shù)淖詣?dòng)輸入、合理的輸入順序以及避免重復(fù)輸入來(lái)提升用戶完成表單的效率。

1）輸入格式

通過(guò)合理的格式約束，能夠方便用戶更快的完成填寫(xiě)，而減少錯(cuò)誤出現(xiàn)。自動(dòng)對(duì)焦第一個(gè)輸入字段可以引導(dǎo)用戶開(kāi)始進(jìn)行輸入。

2）自動(dòng)輸入

根據(jù)已知信息，幫助用戶預(yù)判內(nèi)容并自動(dòng)錄入。

如：用戶在輸入電話號(hào)碼前，需要先輸入國(guó)家的代碼，我們可以根據(jù)產(chǎn)品的運(yùn)營(yíng)市場(chǎng)所在的國(guó)家自動(dòng)錄入。

3）輸入順序

先易后難；先必填后選填；先公開(kāi)信息后隱私信息；有關(guān)聯(lián)性的合成一組，特殊問(wèn)題后置，用戶輸入時(shí)、不會(huì)覺(jué)得突兀、門檻太高 。

4）避免多次詢問(wèn)相同信息，重復(fù)輸入的內(nèi)容盡量減少

比如：用戶可以顯示和隱藏所設(shè)置的密碼，不是讓用戶輸入2次來(lái)進(jìn)行驗(yàn)證，這對(duì)于生成有效的密碼更重要。

2. 信息選擇類型

在用戶完成表單的過(guò)程中，為了應(yīng)對(duì)不同的信息，除了文本輸入之外，還會(huì)有選擇的方式。通常會(huì)包含有至少2個(gè)或以上的選項(xiàng)，用戶可以選擇其中的一個(gè)或多個(gè)。

選擇的類型最常見(jiàn)的有單選、復(fù)選（多選）；選擇樣式有彈窗、下拉菜單、跳轉(zhuǎn)新頁(yè)面。

它們看起來(lái)不復(fù)雜，但是在實(shí)際使用的時(shí)候講究非常之多，不僅關(guān)乎用戶體驗(yàn)，而且涉及到一些界面邏輯問(wèn)題，每種選擇方式也都有各自不同的狀態(tài)顯示。

1) 單選

單選項(xiàng)是界面中非常常見(jiàn)的表單元素。它通常被用來(lái)從一組互斥的相關(guān)選項(xiàng)中選擇一個(gè)單獨(dú)的選項(xiàng)。當(dāng)點(diǎn)擊一個(gè)未選中的單選項(xiàng)時(shí)，它會(huì)被選中，其他按鈕則會(huì)變成未選中狀態(tài)。

單選可根據(jù)用戶最可能會(huì)選中或者數(shù)據(jù)統(tǒng)計(jì)選擇最多的一個(gè)標(biāo)簽作為默認(rèn)選項(xiàng)，如果此字段屬于非必填，需要有一個(gè)“無(wú)”的標(biāo)簽選項(xiàng)，以方便用戶在選擇之后又不想做出選擇時(shí)能夠更改。

單選的樣式有單選框、按鈕、波動(dòng)開(kāi)關(guān)，請(qǐng)根據(jù)不同需求選擇不同的樣式：

單選框：

存在兩個(gè)以上的選項(xiàng)且標(biāo)簽是一句/多句話組成，需要選擇一個(gè)正確的選項(xiàng)。使用單選框時(shí)，靠左對(duì)齊的選框+標(biāo)簽的樣式是效果最好的，單選框有選中、未選中、不可選狀態(tài)。

按鈕：

存在2~6個(gè)選項(xiàng)時(shí)且選項(xiàng)信息是一個(gè)詞語(yǔ)，文本一般不超過(guò)4個(gè)字，需要選擇一個(gè)正確的選項(xiàng)，使用按鈕樣式——有選中、未選中、不可選狀態(tài)；

波動(dòng)開(kāi)關(guān)：

只存在兩個(gè)選項(xiàng)且選項(xiàng)具有判斷性質(zhì)，需要選擇一個(gè)正確的信息，觸發(fā)之后能夠立即生效，使用波動(dòng)開(kāi)關(guān)，有開(kāi)啟、關(guān)閉兩種樣式。

2）復(fù)選

復(fù)選也是界面中很常見(jiàn)的表單元素，通常會(huì)有一個(gè)或多選項(xiàng)供用戶選擇，同時(shí)選項(xiàng)的內(nèi)容是不互斥的，可以選擇一個(gè)或多個(gè)正確的選項(xiàng)。

復(fù)選無(wú)需提供默認(rèn)選項(xiàng)，也不需要提供“無(wú)”的標(biāo)簽，用戶可在同一選項(xiàng)上重復(fù)點(diǎn)擊進(jìn)行選中/未選中操作。復(fù)選最常見(jiàn)的樣式就只有復(fù)選框、按鈕兩種：

復(fù)選框：

一個(gè)具有判斷性質(zhì)（用戶協(xié)議）的選項(xiàng)或者有兩個(gè)正確答案以上的多個(gè)選項(xiàng)組成，復(fù)選框有選中、未選中兩種常用狀態(tài)；另外當(dāng)選項(xiàng)存在子父級(jí)關(guān)系時(shí)，還有一種未定狀態(tài)，常用于Web端管理后臺(tái)。

按鈕：

存在2~6個(gè)選項(xiàng)時(shí)且選項(xiàng)信息是一個(gè)詞語(yǔ)，文本最好不超過(guò)4個(gè)字，有兩個(gè)以上的正確選項(xiàng)，使用按鈕樣式；有選中、未選中、不可選狀態(tài)；

3. 選擇方式

不管是單選還是復(fù)選、按鈕還是框選的形式，都需要結(jié)合表單當(dāng)前選項(xiàng)的實(shí)際需求，以對(duì)應(yīng)不同選擇方式。最為常見(jiàn)的選擇方式有彈窗、下拉、新頁(yè)面跳轉(zhuǎn)等。

不同的選擇方式有各自的優(yōu)勢(shì)和劣勢(shì)，選擇不當(dāng)可能會(huì)造成用戶體驗(yàn)差而導(dǎo)致轉(zhuǎn)化率低或用戶流失。

• 彈窗：在完成表單需要選擇的字段內(nèi)容時(shí)，當(dāng)選項(xiàng)超過(guò)6條或特定（低于6條但文本過(guò)長(zhǎng)、調(diào)用系統(tǒng)功能…）情況，可使用動(dòng)作欄彈窗的方式；
• 下拉（展示與隱藏）：有多種樣式，正確使用下拉可以有效幫助用戶縮小選擇范圍；
• 新頁(yè)面：當(dāng)選項(xiàng)信息較多且復(fù)雜時(shí)，使用新頁(yè)面跳轉(zhuǎn)更便于操作。如：選擇用戶地址則跳轉(zhuǎn)至地址列表。

對(duì)于如何選擇適合表單當(dāng)前字段的方式，還需要注意一下幾點(diǎn)：

1. 需要使用簡(jiǎn)潔明了的標(biāo)簽，不要讓用戶思考，使用簡(jiǎn)短而明確的詞匯，讓用戶明確行為的意圖和功能；
2. 清晰告知用戶完成整個(gè)表單的步驟 ，給用戶一個(gè)預(yù)期，避免用戶在完成過(guò)程中產(chǎn)生不耐煩的情緒；
3. 盡可能減少不必要的表單項(xiàng)目，?每多一個(gè)項(xiàng)目需要填寫(xiě)，就有可能流失一部分用戶；
4. 填寫(xiě)順序應(yīng)先易后難、先必填后選填、涉及隱私的內(nèi)容靠后，反之用戶容易被嚇到，從而放棄整個(gè)任務(wù)；
5. 識(shí)別代替輸入，善于利用技術(shù)的力量，技術(shù)上能解決的就不要讓用戶輸入；
6. 能不填寫(xiě)就不填寫(xiě)，能選擇就不要輸入，能選擇一下就不要選兩下；
7. 當(dāng)輸入可能更快時(shí)，就別讓用戶在菜單選擇；
8. 選項(xiàng)過(guò)少，避免使用下拉菜單，以免給視覺(jué)瀏覽動(dòng)線造成了不必要的阻礙；
9. 選項(xiàng)被禁用或不可用時(shí)，將其顯示為灰色。

五、信息保存方式.

1. 手動(dòng)保存

手動(dòng)保存即依賴用戶做額外操作才可以達(dá)成的保存行為，此類保存，我們往往依賴保存按鈕。

這種保存方式大多用于網(wǎng)頁(yè)，如：個(gè)人信息、簡(jiǎn)歷等。大多用于表單內(nèi)容較多的頁(yè)面，根據(jù)表單信息將內(nèi)容屬性相近或有關(guān)聯(lián)性的放在一組，組的下方提供一個(gè)保存按鈕。

2. 自動(dòng)保存

自動(dòng)保存的目的是記住用戶已經(jīng)填寫(xiě)的內(nèi)容，從而避免用戶需要再次輸入而放棄。

可以設(shè)定間隔時(shí)間或者用戶未操作后的一段時(shí)間進(jìn)行自動(dòng)保存，比如：每隔30秒或者用戶在10秒內(nèi)未操作，系統(tǒng)進(jìn)行自動(dòng)保存一次，比較適合需要大量編輯功能的表單（這種保存方式屬后臺(tái)發(fā)送請(qǐng)求，視覺(jué)無(wú)任何變化）。

3. 兜底保存

其實(shí)前面兩種保存方式在移動(dòng)端都有局限性，手動(dòng)保存不利于用戶體驗(yàn)，自動(dòng)保存比較占資源和影響用戶操作，那么我們就需要有一個(gè)更好的方案。

類似信息較多的表單，系統(tǒng)檢測(cè)到用戶填寫(xiě)了部分內(nèi)容但沒(méi)有完成表單就要離開(kāi)時(shí)，以彈窗的形式給用戶一個(gè)溫馨提示，讓用戶自行選擇保存還是直接離開(kāi)。

另外在用戶使用網(wǎng)絡(luò)問(wèn)題或應(yīng)用意外退出，都應(yīng)自動(dòng)保存用戶已完成的信息，以便用戶再次使用時(shí)不會(huì)因?yàn)橹匦绿顚?xiě)嫌麻煩而放棄。

六、視覺(jué)反饋

設(shè)計(jì)表單時(shí)，對(duì)于一些專業(yè)詞匯或較難理解的概念，要給予明確的解釋，有較高要求的表單信息也要給予明確的示例供用戶參考。

復(fù)雜的流程，還可以提供在線咨詢幫助，協(xié)助用戶完成整個(gè)表單的填寫(xiě)。

當(dāng)用戶填寫(xiě)內(nèi)容出錯(cuò)的時(shí)候，應(yīng)當(dāng)指明發(fā)生錯(cuò)誤的條目，以及錯(cuò)誤的原因，最好將反饋定位到具體位置。反饋的前提是不打擾用戶，但在用戶需要的時(shí)候及時(shí)出現(xiàn)。

1. 提示反饋（輸入前）

• 聚焦?fàn)顟B(tài)：光標(biāo)插入輸入框，當(dāng)前輸入框應(yīng)予以不同的樣式，便于用戶清楚當(dāng)前處于什么位置；
• 標(biāo)簽提示：針對(duì)用戶容易出錯(cuò)的格式問(wèn)題，可在標(biāo)簽中提示，如：字?jǐn)?shù)限制、格式要求等；
• 引導(dǎo)提示：部分完成難度較大的表單，以圖表或按鈕引導(dǎo)用戶點(diǎn)擊，用彈窗或跳轉(zhuǎn)新的頁(yè)面詳細(xì)解答。如：需要用戶填寫(xiě)相對(duì)隱私的信息時(shí)，請(qǐng)給予解釋這么做的原因及目的。

2. 驗(yàn)證反饋（輸入后）

• 行內(nèi)提示：行內(nèi)提示不需要服務(wù)器上傳驗(yàn)證的數(shù)據(jù)，就可以判斷，例如手機(jī)格式，當(dāng)光標(biāo)離開(kāi)時(shí)理解為用戶輸入完成，通過(guò)前端對(duì)格式進(jìn)行驗(yàn)證；
• toast提示：屬于后臺(tái)驗(yàn)證，需要服務(wù)器上傳驗(yàn)證數(shù)據(jù)，或者其他類型的突發(fā)事件。如果是表單問(wèn)題，需要有清晰的定位提示位置，就近原則，方便用戶發(fā)現(xiàn)并修改操作。請(qǐng)注意錯(cuò)誤的字段，請(qǐng)勿在鍵入后直接清除，請(qǐng)給用戶在此基礎(chǔ)上修改的機(jī)會(huì)，記住用戶才是決定者。
• 彈窗提示：彈窗提示是直接打斷當(dāng)前的操作，同時(shí)會(huì)引導(dǎo)用戶進(jìn)行新的操作。比如成功提示，是對(duì)用戶完成信息輸入的提示和感謝；失敗提示則會(huì)通過(guò)彈窗引導(dǎo)用戶返回或者重新提交。

七、操作按鈕.

操作按鈕是在表單的結(jié)尾，有個(gè)確認(rèn)提交的動(dòng)作控件，是專門為觸控而設(shè)計(jì)。不僅可點(diǎn)擊，更需要容易點(diǎn)擊；還需要根據(jù)表單的不同條件反饋不同的按鈕狀態(tài)，清晰可預(yù)測(cè)，應(yīng)該準(zhǔn)確地描述用戶點(diǎn)擊按鈕后會(huì)發(fā)生什么，比如提交、復(fù)位、下一步等。

按鈕是關(guān)系到頁(yè)面的最終轉(zhuǎn)化的重要元素，在按鈕的設(shè)計(jì)上要更加費(fèi)心。

顏色是影響按鈕隔離效果的首要因素，多個(gè)按鈕基本都是通過(guò)顏色來(lái)區(qū)分主次；其次才是樣式，設(shè)計(jì)師利用同理心來(lái)理解用戶「心理模型」，利用設(shè)計(jì)手段將「實(shí)現(xiàn)模型」改變成用戶可以接受和理解的「心理模型」，給用戶提供最常用樣式，如果設(shè)計(jì)和常規(guī)樣式差異過(guò)大的按鈕，容易帶來(lái)額外的認(rèn)知負(fù)擔(dān)。

1. 按鈕位置

• 右上角：以純文字的形式固定在導(dǎo)航欄的右側(cè)（屏幕右上角）；
• 表單底部：置于表單的最下方，根據(jù)表單內(nèi)容縱向空間的大小而上下移動(dòng)。表單內(nèi)容較多時(shí)，容易下沉過(guò)多而導(dǎo)致按鈕不可見(jiàn)；
• 設(shè)備底部懸浮：懸浮在設(shè)備底部，隨時(shí)可見(jiàn)，會(huì)占用一定的縱向空間；
• 跟隨鍵盤：固定在鍵盤的某個(gè)位置，跟隨鍵盤展示或隱藏，常用于單個(gè)字段內(nèi)容的表單。如：登錄頁(yè)面，填寫(xiě)完手機(jī)號(hào)碼，點(diǎn)擊鍵盤上的確定，會(huì)跳轉(zhuǎn)至驗(yàn)證碼頁(yè)面，輸入驗(yàn)證碼后確定，直接登錄成功。

綜合實(shí)例，Bee Express項(xiàng)目為了適配中文/英文/泰文狀態(tài)，綜合了每個(gè)位置的利弊得出：當(dāng)表單內(nèi)容+按鈕少于一屏內(nèi)容時(shí)，操作按鈕置于表單底部；超過(guò)一屏則在設(shè)備底部懸浮。

2. 交互狀態(tài)

• 待激活狀態(tài)：需要完成表單中的部分條件方可激活，變成正?？山换顟B(tài)；
• 正常狀態(tài)：已完成表單必填的內(nèi)容，按鈕是可交互的，并且可用的狀態(tài)；
• 激活狀態(tài)：用戶已點(diǎn)擊按鈕后的狀態(tài)（且還未結(jié)束按按鈕的動(dòng)作）；
• 加載狀態(tài)：送出表單后，正在加載中，但操作還未完成，沒(méi)有立即實(shí)現(xiàn)的狀態(tài)；
• 禁用狀態(tài)：非交互狀態(tài)，目前不可交互，但以后可以使用。

3. 多按鈕樣式

• 主操作按鈕：一個(gè)表單頁(yè)面只能存在一個(gè)主操作，也是最醒目、最突出、最重要的按鈕；
• 次操作按鈕：存在多個(gè)等級(jí)，可以通過(guò)弱化主操作按鈕、圖標(biāo)或突出文字來(lái)表現(xiàn)次操作按鈕，次級(jí)按鈕可以多個(gè)同時(shí)存在。

八、總結(jié)

以上只是對(duì)表單設(shè)計(jì)的一些總結(jié)，視覺(jué)體驗(yàn)只占了整體體驗(yàn)一部分 。

一個(gè)表單是否真的好用，還需要深入研究表單設(shè)計(jì)，從結(jié)構(gòu)化的思維分析表單的設(shè)計(jì)問(wèn)題，從而能夠全面的認(rèn)識(shí)一個(gè)事物并進(jìn)行了解掌握。

通過(guò)優(yōu)化視覺(jué)表現(xiàn)提升表單體驗(yàn)只是表象，更多是要考慮到表單最終要幫用戶解決什么問(wèn)題，先想好為什么，再想怎么做。

作者：大漠飛鷹；公眾號(hào)：能量眼球

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

題圖來(lái)自 Pexels，基于 CC0 協(xié)議