前言

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

本期分享

• 什么是表單？
• Bee express項(xiàng)目表單存在的問(wèn)題.
• 表單的組成結(jié)構(gòu)與類型.

什么是表單？

在我們的現(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)容的注釋或輔助內(nèi)容，如：說(shuō)明、注意事項(xiàng)；
• 反饋（可選）：告知用戶當(dāng)前操作可能或已出現(xiàn)的問(wèn)題，如：提交成功、錯(cuò)誤提示、網(wǎng)絡(luò)問(wèn)題；
• 鍵盤(pán)（可選）：在文本編輯時(shí)需要使用鍵盤(pán)，如：設(shè)備系統(tǒng)鍵盤(pán)、應(yīng)用內(nèi)置鍵盤(pán)；
• 動(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ì)齊方式。

標(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ì)齊的方式。

標(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ì)齊的方式。

標(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)容較多時(shí)，需要合理的使用內(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è)、分步驟完成。如問(wè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. 匹配合適的鍵盤(pán)

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

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

本期就主要分享我們?cè)趯?shí)際的項(xiàng)目中如何選擇合適的表單以及表單的結(jié)構(gòu)介紹，下期將分享表單設(shè)計(jì)過(guò)程需要注意的細(xì)節(jié)、問(wèn)題點(diǎn)和表單組件庫(kù)的建立。