Forms are a common way to engage with users and could be a user’s first impression of your product. Since forms aren’t always the user’s favourite thing, it is essential to make filling out forms as easy as possible. Let’s go over a few tips for creating great forms.

表單是與用戶互動(dòng)的一種常見方式，并且可能是用戶對(duì)您的產(chǎn)品的第一印象。 由于表單并不總是用戶喜歡的東西，因此使填寫表單盡可能容易是必不可少的。 讓我們看一下創(chuàng)建出色表單的一些技巧。

使用單列布局 (Use a Single Column Layout)

Limiting your form to one column makes it easier for users to read and lets you predict the order in which the form should be filled. A single column form also favours keyboard users by making it simple to tab from one field to another. If you have a long form, consider grouping related fields and placing them in different sections.

將表單限制為一列可以使用戶更容易閱讀，并可以預(yù)測(cè)表單的填充順序。 單列形式也很容易通過(guò)從一個(gè)字段切換到另一個(gè)字段來(lái)吸引鍵盤用戶。 如果格式較長(zhǎng)，請(qǐng)考慮將相關(guān)字段分組并將其放在不同的部分。

頂部對(duì)齊標(biāo)簽 (Top Align Labels)

registration form報(bào)名表格

Top-aligned labels tend to reduce how long it takes to complete a form. Especially for familiar data (i.e. phone number, credit card etc.) because they only require a single eye fixation to take in both input label & field. Top aligned labels also work well with single column forms.

頂部對(duì)齊的標(biāo)簽往往會(huì)減少完成表格所需的時(shí)間。 特別是對(duì)于熟悉的數(shù)據(jù)(例如電話號(hào)碼，信用卡等)，因?yàn)樗鼈冎恍枰粋€(gè)眼睛注視即可同時(shí)輸入標(biāo)簽和字段。 頂部對(duì)齊的標(biāo)簽也適用于單列表單。

使用描述性內(nèi)聯(lián)錯(cuò)誤 (Use Descriptive Inline Errors)

Send coins form發(fā)送硬幣表格

Simply changing the appearance of a field with an invalid input is not enough to let the user know exactly what they are not doing right and this can be frustrating. This is why adding a clear error directly under the invalid field is good practice. With this method, the user would know where and why the error occurred.

僅使用無(wú)效輸入更改字段的外觀不足以讓用戶確切地知道他們?cè)谧鍪裁床徽_，這可能令人沮喪。 這就是為什么在無(wú)效字段下直接添加清除錯(cuò)誤是一種好習(xí)慣的原因。 使用這種方法，用戶將知道 哪里 和 為什么 發(fā)生錯(cuò)誤。

垂直排列單選按鈕和復(fù)選框 (Vertically Arrange Radio buttons and Checkboxes)

horizontally arranged radio buttons水平排列的單選按鈕

Horizontally arranged radio buttons, as shown above, should be avoided. The labels and buttons are placed on one line, even though this may seem great for maximising space, it creates an error-prone condition for the user.

如上所示，應(yīng)避免水平排列的單選按鈕。 標(biāo)簽和按鈕放在一行上，即使這對(duì)于最大化空間來(lái)說(shuō)似乎很棒，但它為用戶創(chuàng)建了容易出錯(cuò)的條件。

Cryptocurrencies’ radio buttons加密貨幣的單選按鈕

The recommended practice is to place each option on its own line as done above. This greatly reduces the chance of a user picking an unintended option.Plus, placing buttons/boxes underneath each other improves readability.

建議的做法是如上所述將每個(gè)選項(xiàng)放在自己的行上。 這大大減少了用戶選擇意外選項(xiàng)的可能性。此外，將按鈕/框置于彼此下方可提高可讀性。

使號(hào)召性用語(yǔ)更具描述性 (Make Call-to-Actions Descriptive)

telegram bot notification form電報(bào)漫游器通知表單

The call-to-action (CTA) in the form above is the purple button. CTAs are obvious and should state their intent so the user is aware of the effects of interacting with the CTA in question.

上方表格中的號(hào)召性用語(yǔ)(CTA)是紫色按鈕。 CTA很明顯，應(yīng)說(shuō)明其意圖，以便用戶知道與所討論的CTA交互的影響。

區(qū)分主要和次要?jiǎng)幼鳌?(Differentiate Primary and Secondary Actions.)

Confirm Purchase page確認(rèn)購(gòu)買頁(yè)面

The primary action(Purple button) allows the user to accomplish their most common or most important goal. Secondary actions(Hyperlink text) are any less important actions. Primary actions should always stand out and come first (top or left). This reduces the likelihood a user will make the wrong choice.

主要?jiǎng)幼?/strong> (紫色按鈕) 允許用戶完成最常見或最重要的目標(biāo)。 次要操作 (超鏈接文本) 是次重要的動(dòng)作。 主要?jiǎng)幼鲬?yīng)始終脫穎而出，排在第一位(頂部或左側(cè))。 這減少了用戶做出錯(cuò)誤選擇的可能性。

在觸發(fā)的進(jìn)程運(yùn)行時(shí)禁用按鈕 (Disable buttons while a triggered process runs)

Telegram bot notifications form電報(bào)漫游器通知表單

To stop users from clicking the same button twice within a short period, buttons should be disabled while the triggered process runs. This is a minor change but it will save you a lot of headaches especially in situations where users submit data.

要在短時(shí)間內(nèi)阻止用戶單擊同一按鈕兩次，應(yīng)在觸發(fā)的進(jìn)程運(yùn)行時(shí)禁用按鈕。 這是一個(gè)很小的更改，但是它將為您省去很多麻煩，尤其是在用戶提交數(shù)據(jù)的情況下。

That’s it, folks! With the tips above you can take your forms to the next level. Remember, building great forms is not an event, it’s a continuous process because the needs and preferences of users constantly change.

就是這樣，伙計(jì)們！ 通過(guò)上面的提示，您可以將表格提高到一個(gè)新的水平。 請(qǐng)記住，構(gòu)建出色的形式不是一件事情，而是一個(gè)連續(xù)的過(guò)程，因?yàn)橛脩舻男枨蠛推脮?huì)不斷變化。

翻譯自: https://medium.com/buycoins/creating-user-friendly-forms-48c5f06d2487

總結(jié)

以上是生活随笔為你收集整理的创建用户友好的表单的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。