設(shè)計(jì)出色形式的7個(gè)秘訣

幾乎每個(gè)網(wǎng)站設(shè)計(jì)都包含某種形式的表單。從簡(jiǎn)單的電子郵件地址收集，注冊(cè)新聞通訊或通知，到完整的付款收集表單，當(dāng)務(wù)之急是設(shè)計(jì)一個(gè)易于使用和理解的表單。

表單設(shè)計(jì)的標(biāo)準(zhǔn)也在不斷發(fā)展。盡管許多表單過(guò)去常常包含多個(gè)列并要求提供大量信息，但大多數(shù)最佳實(shí)踐現(xiàn)在建議將表單保持盡可能簡(jiǎn)單。設(shè)計(jì)還有很多。好的表格是可掃描的，不需要大量的輸入，并且包括智能的標(biāo)簽和格式，以幫助用戶在第一時(shí)間正確填寫(xiě)表格。

這里有一些秘密，可確保您設(shè)計(jì)的是用戶實(shí)際填寫(xiě)的表格。

1.輕松掃描和閱讀

您知道用戶會(huì)掃描網(wǎng)站以收集信息，并確定他們將采取什么行動(dòng)，或者內(nèi)容和設(shè)計(jì)是否使他們感興趣。形式也是如此。用戶應(yīng)該能夠一眼就知道需要什么信息，并清楚地說(shuō)明該表單的用途以及如何提交。

高度可掃描的表單包括以下內(nèi)容：

• 對(duì)比：文字必須簡(jiǎn)短且易于閱讀。避免使用多種顏色，并在淺色文本-背景組合上堅(jiān)持使用傳統(tǒng)的深色。
• 分組和空格：將較長(zhǎng)表格上的相似信息分組。例如，在收集付款信息時(shí)，將客戶信息，付款信息和運(yùn)輸信息分組。三個(gè)短塊比一個(gè)長(zhǎng)塊更容易消化。使用智能間距將標(biāo)簽連接到其說(shuō)明的字段，而不是在文本和字段元素之間使用均勻的間距。
• 清除結(jié)束語(yǔ)/號(hào)召性用語(yǔ)：使按鈕較大且易于查看。按鈕內(nèi)的顯微鏡應(yīng)該告訴用戶將要發(fā)生的事情，例如“提交”，“立即付款”或“進(jìn)行下一步”。記住要關(guān)閉反饋循環(huán)，并讓用戶知道正確提交表單的時(shí)間。

2.考慮浮動(dòng)標(biāo)簽

關(guān)于是否在表單字段內(nèi)使用提示文本的爭(zhēng)論很多。主要的問(wèn)題是，此文本通常不會(huì)隨著單擊消失，并且用戶必須主動(dòng)將其刪除才能開(kāi)始輸入。尷尬了。

此外，尼爾森·諾曼小組（Nielsen Norman Group）發(fā)現(xiàn)，空白字段可以吸引眼球，并幫助用戶更清楚地輸入信息。

如果您需要使用提示，請(qǐng)考慮使用交互式解決方案-浮動(dòng)標(biāo)簽。將您的標(biāo)簽信息包括在表單字段中，以使其看起來(lái)像占位符文本，但是一旦用戶將鼠標(biāo)懸?；騿螕粼撟侄?，就可以使文本動(dòng)起來(lái)并移動(dòng)到左上角。標(biāo)簽或提示永遠(yuǎn)不會(huì)消失，也不會(huì)妨礙用戶嘗試填寫(xiě)表單。（加上小動(dòng)畫(huà)對(duì)于用戶來(lái)說(shuō)是一個(gè)有趣的驚喜。）

3.使用場(chǎng)罩

場(chǎng)掩碼可以提供一些相同的線索和形式提示，但不會(huì)妨礙可用性。僅當(dāng)用戶激活字段并提供有關(guān)所需信息的附加掃描提示時(shí)，字段掩碼才會(huì)出現(xiàn)。掩碼可以通過(guò)自動(dòng)格式化信息來(lái)進(jìn)一步幫助用戶，從而避免會(huì)在提交時(shí)將表格踢出的錯(cuò)誤。

電話號(hào)碼是行動(dòng)面具的一個(gè)很好的例子。考慮多種格式選項(xiàng)：

• （000）000-0000
• 000-000-0000
• 0000000000

用戶如何知道哪個(gè)將工作？表單字段將根據(jù)用戶類型指定和調(diào)整格式，因此他或她不必考慮它，而只需鍵入數(shù)字。（這也免除了在移動(dòng)設(shè)備上的鍵盤之間切換的麻煩。）

4.使表單鍵盤友好

您無(wú)法知道用戶將在哪種設(shè)備上遇到您的表單，但是無(wú)論如何都應(yīng)該很容易填寫(xiě)。考慮可以將信息發(fā)送到表單并調(diào)整字段以檢測(cè)和使用適當(dāng)選項(xiàng)的所有不同類型的鍵盤。

在臺(tái)式機(jī)上，用戶無(wú)需單擊鼠標(biāo)即可輸入表格并填寫(xiě)每個(gè)字段。完成后會(huì)自動(dòng)從一個(gè)字段前進(jìn)到下一個(gè)字段，或者使用標(biāo)簽或Enter鍵移動(dòng)。W3.org有一套可靠的鍵盤建議供您遵循。

在移動(dòng)設(shè)備上，將鍵盤類型與所需數(shù)據(jù)匹配。如果輸入的是字母，請(qǐng)調(diào)出字母鍵盤；對(duì)于數(shù)字，請(qǐng)調(diào)出數(shù)字選項(xiàng)。來(lái)自Google：“應(yīng)用程序用戶非常喜歡為文本輸入提供適當(dāng)鍵盤的應(yīng)用程序。確保在整個(gè)應(yīng)用程序中一致地實(shí)施此操作，而不是僅針對(duì)某些任務(wù)而不是針對(duì)其他任務(wù)?！?/span>

5.選擇垂直格式

垂直表格對(duì)用戶而言比多列格式更容易。最佳實(shí)踐規(guī)則是確保所有字段都可以在屏幕上顯示，而無(wú)需以從上到下的格式滾動(dòng)。

一個(gè)例外是超短格式，其中用戶僅需要輸入電子郵件地址或名稱和電子郵件地址。在這種情況下，只要電子郵件框足夠長(zhǎng)，用戶可以看到其地址的所有字母，則兩個(gè)并排的列以及一個(gè)號(hào)召性用語(yǔ)可以很好地工作。

記住也要以垂直形式對(duì)元素進(jìn)行邏輯排序。如果您要收集名字，姓氏，電子郵件地址和頭發(fā)顏色，則以這種方式對(duì)其進(jìn)行排序。

6.限制輸入

在表單中使用盡可能多的預(yù)填充解決方案。沒(méi)有什么比添加地址更令人高興了，在點(diǎn)擊了頭幾下之后，Google API就會(huì)啟動(dòng)并建議地址選項(xiàng)。

這執(zhí)行三件事：

• 它使用戶更輕松，尤其是在移動(dòng)設(shè)備上。
• 它有助于限制必要的字段數(shù)。
• 它可以幫助消除一些用戶錯(cuò)誤，例如錯(cuò)誤輸入。

考慮與電子郵件地址相同的事物，以便在@符號(hào)后為用戶提供流行的電子郵件域。當(dāng)用戶輸入web @ g…時(shí)。該字段會(huì)自動(dòng)建議web@gmail.com。

7.簡(jiǎn)短而甜美

您將很容易向用戶詢問(wèn)表單中的許多信息。抵制沖動(dòng)！

只要求提供重要信息。用戶更有可能填寫(xiě)需要較少承諾的表格。如果以后需要更多信息，則可以從列表中通過(guò)電子郵件將其發(fā)送，以詢問(wèn)其他詳細(xì)信息。（正如已經(jīng)選擇加入的人一樣，此時(shí)用戶更有可能與您進(jìn)行更多互動(dòng)。）

避免使用可選字段。不要要求提供多余的信息。請(qǐng)勿在可以使用一個(gè)字段的多個(gè)字段（例如電話號(hào)碼）中使用。

結(jié)論

杭州網(wǎng)站建設(shè)供一些填寫(xiě)表格的回報(bào)。使其有趣或有趣。感謝用戶。

創(chuàng)建易于閱讀和易于使用的表單將增加您收集數(shù)據(jù)并將網(wǎng)站訪問(wèn)者轉(zhuǎn)變?yōu)橹貜?fù)用戶的機(jī)會(huì)。