關(guān)于網(wǎng)站UI設(shè)計中的表單設(shè)計的幾個小技巧和建議

表單設(shè)計是很多數(shù)字產(chǎn)品成功的關(guān)鍵。如果你要求用戶提供用于注冊、注冊演示或者購買的信息，那么這個過程必須是無縫的，難于使用的表單將破壞用戶體驗，并對轉(zhuǎn)換造成負(fù)面影響。

形式的可用性是一個非常復(fù)雜的話題，本文只是一篇淺嘗輒止。然而，這些提示對幫助你開始工作很有幫助。

表單設(shè)計基本：

如果不熟悉網(wǎng)站UI設(shè)計，一定要了解表單的不同部分。身為數(shù)字產(chǎn)品的消費者，可能會習(xí)慣于使用這些產(chǎn)品，因此術(shù)語可能不清楚，理解設(shè)計術(shù)語會幫助設(shè)計一個用戶友好的表單。

保持字段標(biāo)簽可見

通常情況下，在用戶輸入數(shù)據(jù)之前，找到以占位符文本形式顯示標(biāo)簽的形式。這個問題看起來很明顯，但是令人驚訝的是，當(dāng)用戶開始輸入時，很多表單沒有繼續(xù)顯示出來。

如果用戶繼續(xù)輸入，標(biāo)簽就消失了，這就會造成挫折感。這樣的設(shè)計也許是為了節(jié)省空間，但是冒險并不值得付出代價。

當(dāng)用戶輸入一個字段并分散注意力時，就很容易忘記標(biāo)簽是什么。多數(shù)情況下，用戶必須刪除剛才輸入的內(nèi)容，以再次看到表單標(biāo)簽。

有可能出現(xiàn)數(shù)據(jù)錯誤，這對用戶和產(chǎn)品都有害。更嚴(yán)重的錯誤可能因產(chǎn)品而異(醫(yī)療數(shù)據(jù)、銀行業(yè)務(wù)等)。

表單域標(biāo)簽。

一種簡單的方法可以防止用戶出錯?？偸潜３肿侄螛?biāo)簽的可見性可以幫助用戶建立所輸入數(shù)據(jù)和標(biāo)簽之間的聯(lián)系。

可將標(biāo)簽放在字段的側(cè)面或上面。一些窗體類型首先在字段中有標(biāo)簽，但是在焦點上，標(biāo)簽被移到輸入上面。

這樣就變成了一種常見的UI模式，確實解決了用戶的潛在問題。

清楚地顯示必填項和可選

使用者最后一件事就是填一張長表單設(shè)計。注意使用者的時間和注意力范圍非常重要，所以第一步只包括必要的字段。

存在兩種類型的字段，它們分別是必需的和可選的。假如你使用可選字段，要確保它們被清晰地標(biāo)記。可以采取兩種方法：

僅表示必需字段的標(biāo)簽文本。必填字段通常標(biāo)有星號，在很多情況下，必填字段旁邊都有必填文本。

只在標(biāo)簽文本中表示可選字段。一般情況下，該字段的標(biāo)簽文本中將包含“可選”。另外一種方法是只標(biāo)記可選字段，這通常對用戶更友好，也不那么令人生畏。

調(diào)查顯示，如果字段被標(biāo)記為可選，而非必需的方法，用戶會提交更多的數(shù)據(jù)。

那一直都是真的？為了找出答案，一定要進行研究和測試，確保用戶對此方法作出反應(yīng)。

在測試你的表格設(shè)計時，你會知道你的用戶喜歡什么，哪種方式更成功。

表單和錯誤信息提醒要清晰和必要

平心而論，大部分人都不喜歡填表格。特別是他們不愿意去猜測自己犯錯的地方。

無法避免所有錯誤，這就是為什么錯誤消息需要用戶友好。在出現(xiàn)錯誤時，一定要給用戶提供清晰和豐富的錯誤消息。

格式化錯誤，用戶忘了填寫所需的字段，以及錯誤密碼等等都是常見的表單錯誤。這樣做可以讓用戶清晰地傳達(dá)信息，從而優(yōu)化體驗。

就拿電子郵件域來說吧。這些資料必須清楚清楚，以幫助他們進行必要的修正。

寫用戶友好的錯誤信息時，一定要明確錯誤并幫助用戶識別錯誤。并明確的告訴他們?nèi)绾谓鉀Q這個問題。

窗體錯誤信息。

如果電子郵件的格式有問題，用戶就會明白錯誤是什么。忘記添加"@"符號，錯誤信息告訴我做錯了什么。

節(jié)約查詢功能時間

預(yù)測列表可以幫助節(jié)省時間和防止錯誤，讓用戶在需要用戶選擇其他有很多預(yù)定義選項的東西。

該方法可降低使用者的打字量和認(rèn)知負(fù)擔(dān)。如果填滿名字、地址、郵編、國家等信息，就很有用了。

選項作為用戶類型進行細(xì)化。多數(shù)情況下，這樣做可以節(jié)省時間，因為他們不需要輸入整個字符串來找到正確的選項。

按邏輯排列窗體并對相關(guān)信息分組。

形式是令人畏懼的，特別是當(dāng)它們長的時候。財務(wù)申請、電子商務(wù)結(jié)帳和其他長表單設(shè)計這樣的內(nèi)容都應(yīng)該被精心優(yōu)化。

關(guān)聯(lián)信息應(yīng)該按照邏輯塊進行分組，同時將相關(guān)的字段分組也有助于用戶理解所需的信息。

舉例來說，您希望姓名段、地址字段和信用卡信息位于不同的集合中，而且信息將會按照預(yù)期的順序分組。

看起來有些奇怪，用戶在輸入你的名字之前輸入郵政編碼。

應(yīng)有邏輯地從用戶的角度詢問表單細(xì)節(jié)
采用一種邏輯內(nèi)容塊的思想可以讓用戶清楚地知道他們在填什么信息，并向他們展示清晰的層次結(jié)構(gòu)?；蛟S只有我一個人，但當(dāng)你完成一組并且知道你將會感到滿足。

此表具有很好的邏輯組合，而且結(jié)算程序非常清晰。該表單是多步的，所以也使用了進度條。這可以幫助我們了解他們已經(jīng)走了多遠(yuǎn)，完成任務(wù)還有多遠(yuǎn)。

移動端設(shè)計的重要

對手機設(shè)備進行表單設(shè)計非常重要，因為它要比桌面體驗困難得多。由于用戶可以很容易地向下滾動表單，所以簡單的單欄設(shè)計最適合移動設(shè)備。

有一件事情似乎正在逐漸變好，那就是根據(jù)所需的輸入類型顯示正確的鍵盤。

雖然聽起來無關(guān)緊要，但是如果做得好，確實有助于體驗。舉例來說，當(dāng)我在iPhone上鍵入電話號碼時，數(shù)字鍵盤彈出來的時候很棒。

這是自動的，不需要再點擊一下鍵盤就可以了。若您執(zhí)行輸入姓名等操作，則最好將默認(rèn)鍵盤設(shè)置為文本輸入鍵盤。

如果輸入類型與正確的鍵盤類型相匹配，那么這將非常有用。

手機用戶應(yīng)該能夠精確的點擊那個區(qū)域。擁有足夠的填充物和最小高度，可以幫助防止由于超過目標(biāo)區(qū)域或擊打錯誤窗體區(qū)域而造成的錯誤。其中字段和按鈕應(yīng)至少具有48像素高。表單是創(chuàng)造無縫體驗的極好機會，清楚地出錯、節(jié)省時間增強、邏輯排序等等都能提供友好的設(shè)計。