成都網(wǎng)站制作公司分享用好表單進行設(shè)計的10個技巧

還是APP UI設(shè)計，表單都是界面中最常見也是最重要的組件之一。它們的應(yīng)用范圍很廣，比如用戶注冊、訂閱服務(wù)、用戶反饋、問卷表格、商業(yè)交易等等，從數(shù)據(jù)輸入到信息搜索，幾乎無處不在。對于設(shè)計師、前端、開發(fā)者來說，要盡可能的重視表單的設(shè)計，讓表單更容易使用。精心的設(shè)計會大大增加用戶的體驗和交互效率。

在今天的文章中，你會看到許多關(guān)于表單設(shè)計的實用建議，這些建議涉及可用性測試、現(xiàn)場測試、用戶追蹤和用戶反饋。

1.理清邏輯，保留必要的

表單是與用戶交流的語言。像任何對話一樣，它應(yīng)該幫助雙方以符合邏輯的方式完成溝通。所以，你需要這樣做:

保持問題的直觀順序。你應(yīng)該站在用戶的角度邏輯地提問，而不是按照程序或者數(shù)據(jù)庫的邏輯。如果問題之間沒有邏輯，可以按字母順序排列。

以直觀的順序組織選項。例如，當選項是日期時，它們按照周一、周二和周三的順序排列，而不是亂序。

時刻反思從用戶那里獲取的信息是否有必要，如何使用。這樣做是為了消除不必要的選項，提高完成率。

2.使用單列列表布局

要填寫的多列表表單很容易讓用戶錯過，打斷填寫體驗。用戶需要按照之字形軌跡填寫整個表格，不僅影響了整個書寫路徑，降低了效率，還會產(chǎn)生一定的干擾。但是如果使用單欄形式，這種填充路徑是單一的，直接的，更加直觀高效。

3.減少需要輸入的字段和工作量

減少要輸入的字段數(shù)量可以使您的表單更加簡潔，減少加載時間，尤其是對于信息量大的表單。

當然，僅僅減少輸入字段的數(shù)量是不夠的。你也要注意用戶填表的方式、內(nèi)容和工作量。鍵入內(nèi)容是一種高交互性的輸入方式，錯誤率高，時間成本高。所以要盡量減少用戶打字的情況，使用復(fù)選框、單選按鈕、下拉菜單等選項，減少用戶出錯的概率。

4.匹配輸入框和內(nèi)容的大小

MARD研究所的研究發(fā)現(xiàn)，如果一個字段與輸入框相比過長或過短，會讓用戶懷疑自己輸入的內(nèi)容是否正確，這種情況在輸入CVV(信用卡驗證值)等字段時尤為明顯。

為了保持良好的可用性，您應(yīng)該使輸入框的寬度盡可能與輸入內(nèi)容的長度相匹配。適當?shù)念A(yù)留空間可以讓用戶更安心。

5.標簽放置在相應(yīng)輸入框的上方

是否足夠方便用戶快速瀏覽表單？如果用戶很難快速瀏覽表單，則需要更長時間來填寫。所以，好看和填充是好的表單設(shè)計的準則。Matteo Penzo的文章曾經(jīng)研究過表單和表單中的輸入框應(yīng)該如何布局，以便用戶可以更好更快地瀏覽和填寫。結(jié)論是標簽應(yīng)該放在輸入框的上方。

如果你想讓用戶盡快瀏覽，把標簽和輸入框垂直排列，靠左對齊。請注意，這是關(guān)于快速瀏覽。這種布局的好處是不需要太多的橫向空間，用戶只需要向下瀏覽，不需要左右掃描，這種布局更容易形成響應(yīng)式UI，兼容不同屏幕和不同應(yīng)用場景。

6.支持靈活多樣的格式

有些字段需要用戶準確填寫，但要求用戶輸入特別準確或特定格式的內(nèi)容時，可用性可能會有點問題。如果要求用戶輸入數(shù)字內(nèi)容(比如電話號碼)，好靈活一點，支持多種不同的輸入方式和顯示方式，這樣更容易讓人查看(而不是機器)和防止出錯。

比如座機電話的格式往往是(777)666–5544，更便于用戶查看、記錄和記憶。

7.不要混合占位符和字段標簽

設(shè)計者通常在表單中放置文本占位符，作為額外的提醒，告訴用戶如何填寫示例。當用戶開始輸入時，占位符文本將會消失。

有些設(shè)計者會將標簽直接作為占位符放在輸入框中，以減少表單的長度和視覺混亂。對于簡單的表單設(shè)計，這種設(shè)計影響不大。當表單信息量大，內(nèi)容類型多樣時，這種設(shè)計就不適合了。這種設(shè)計的缺點是:

一旦用戶點擊輸入框，標簽就會消失，用戶很容易忘記談需要輸入的內(nèi)容和形式。當用戶看到輸入框填充了內(nèi)容，會誤以為這個字段是沒有輸入就被填充的。

如果您仍然需要在表單中使用占位符，您也可以讓它們作為浮動標簽存在。顯示默認的占位符，當用戶輸入時，它作為標簽向上浮動以提醒用戶。

8.混淆可選和必填字段

正如我之前所說，盡量避免在表單中添加可選字段。但如果非要加入，至少要知道哪些字段是可選的，哪些是必填的。可選字段數(shù)量控制在1~2個以內(nèi)，明確告知用戶是可選的。

9.不要使用重置按鈕

“重置”使用戶可以很容易地刪除表單上的所有內(nèi)容并從頭開始。這個風險太大了。在現(xiàn)實生活中，這個按鈕從來不會幫助用戶。反而因為不小心觸碰而更疼。

10.提供高可見性和特定的錯誤信息

理想情況下，用戶可以通過填寫表單并上傳來完成任務(wù)。但現(xiàn)實中，錯誤是不可避免的。因此，當錯誤發(fā)生時，您應(yīng)該以高度可用和可見的形式通知用戶發(fā)生了什么。因此，您提供的錯誤信息應(yīng)符合以下規(guī)則:

當用戶輸入字段時，應(yīng)該實時告訴他們所填寫的信息是對還是錯，而不是等他們填寫完所有信息后才告訴他們出錯了。

錯誤信息應(yīng)該一目了然，突出顯示顏色、圖標和文本，錯誤信息應(yīng)該靠近輸入框，而不是表單的底部或頂部或鍵的旁邊。

如果輸入格式是特定的，應(yīng)該提前聲明。

出現(xiàn)錯誤后，不要清空已完成的表單。

總結(jié)

文章標題：成都網(wǎng)站制作公司分享用好表單進行設(shè)計的10個技巧
分享網(wǎng)址：http://muchs.cn/news42/231242.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項目有網(wǎng)站制作等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)