重點 (Top highlight)

Forms have existed for a significant amount of time, greatly simplifying the task of drafting complaints and various other legal pleadings. With the advance of information and its processing, means to gather the data are also evolving. As printed forms were here for years we can learn a few tips from their design.

表格已經存在了相當長的時間，大大簡化了起草投訴和其他各種法律訴狀的任務。 隨著信息及其處理的進步，收集數據的手段也在不斷發展。 由于印刷表格已存在多年，因此我們可以從其設計中學到一些技巧。

文字欄位剖析 (Text field anatomy)

Text fields allow users to enter text into a UI. They typically appear in forms and dialogs. Text field component design should provide a clear affordance for interaction, making the fields discoverable in layouts, efficient to fill in, and accessible.

文本字段允許用戶在UI中輸入文本。 它們通常顯示在表單和對話框中。 文本字段組件設計應為交互提供明確的承受能力，使字段在布局中可發現，可高效填充且可訪問。

Here are key elements of the basic Text field:1. Container — interactable input area 2. Input text — entered into the text field3. Label Text — tell users what information belongs in a given form field4. Placeholder text — is a description or example of the information required that is replaced with input text after users provide it5. Helper or Validation text(optional) — provides additional context or validation message 6. Leading icon(optional) — describe the type of input a text field requires7. Trailing icon(optional) — additional control for entered text, like clear, hide/show, etc

以下是基本Text字段的關鍵元素： 1 。 容器 -可交互輸入的區域2. 輸入文本 -輸入到文本字段3中。 標簽文本 -告訴用戶哪些信息屬于給定的表單字段4。 占位符文本 -是對所需信息的描述或示例，在用戶提供輸入信息后將其替換為輸入文本5。 Helper或Validation文本(可選) -提供其他上下文或驗證消息6。 前導圖標(可選) -描述文本字段要求的輸入類型7。 尾隨圖標(可選) —用于輸入文本的附加控件，例如清除，隱藏/顯示等

文字欄位類型 (Text field types)

Most of them are based on basic text fields that were modified to better handle specific types of information, like the credit card numbers. Here are just a few examples of input types that are most commonly used throughout UIs we creating:

它們大多數基于基本文本字段，這些文本字段已被修改以更好地處理特定類型的信息，例如信用卡號。 以下是我們創建的整個UI中最常用的輸入類型的一些示例：

(We specifically are not talking about few input types like checkboxes and radio buttons as we will cover them later in the series)

( 我們專門不是在討論幾種輸入類型，例如復選框和單選按鈕，因為我們將在本系列的后面部分介紹它們 )

使用適當的輸入類型來收集數據 (Use appropriate input type for data you collecting)

Providing the right type of the text field for requested data will help users enter information in the right format and avoid mistakes, making the process as easy and efficient as possible.

為請求的數據提供正確的文本字段類型將有助于用戶以正確的格式輸入信息并避免錯誤，從而使該過程盡可能簡單高效。

文本字段必須根據狀態和用戶交互來更改其外觀 (Text fields have to change their appearance based on state and user interactions)

This can be done by providing visual cues that will communicate the state of the text field. Input text fields can have one of the following states: inactive, hover, disabled, focused, validation, error. All states should be clearly differentiated from one another, and consistent throughout the whole form and application. Better to follow best practices to not challenge formed user mental models.

這可以通過提供視覺提示來傳達文本字段的狀態來完成。 輸入文本字段可以具有以下狀態之一：不活動，懸停，禁用，集中，驗證，錯誤。 所有州應清楚地區分，并在整個表格和申請中保持一致。 最好遵循最佳實踐，以不挑戰形成的用戶思維模型。

選擇最佳的文本字段樣式 (Choosing the best text field style)

Usually, you will have three main options for label positioning: top, left, and right-aligned. The best style for you will depend on key goals and sizes of the form, components library, and platform you design for. All of them have some advantages and disadvantages.

通常，您將有三個主要的標簽定位選項：頂部，左側和右側對齊。 最適合您的樣式將取決于表單的主要目標和大小，組件庫以及為其設計的平臺。 它們都有優點和缺點。

Underline input popularized with original Material design guidelines are not the best option. There were already revised based on the large Evolution of Material Design’s study that I recommend you to check out. Interestingly enough the same study showed that users prefer inputs with rounded corners.

原始材料設計指南中流行的下劃線輸入不是最佳選擇。 我已經根據大型的材料設計演變研究進行了修訂，我建議您檢查一下。 有趣的是，同一項研究表明，用戶更喜歡帶有圓角的輸入。

左對齊標簽 (Left-aligned labels)

A good choice when the data requested is unfamiliar for users

當用戶不熟悉所請求的數據時，這是一個不錯的選擇

• Advantages: Easily scalable labels, good use of vertical space

  優點：易于縮放的標簽，充分利用垂直空間

• Disadvantages: Excesisbe and variable distance between labels and corresponding inputs increase completion time

  缺點：標簽和相應輸入之間的距離過長和可變距離會增加完成時間

右對齊標簽 (Right-aligned labels)

Have nearly twice faster completion time vs left-aligned labels

與左對齊的標簽相比，完成時間快將近兩倍

• Advantages: Text field labels and input are closely positioned that limits number of eye movements resulting in fast completion time

  優點：文本字段標簽和輸入位置緊密，限制了眼睛的運動次數，從而縮短了完成時間

• Disadvantages: Harder to quickly scan the form and understand what all information is required

  缺點：難以快速掃描表格并了解所需的所有信息

頂部對齊的標簽 (Top aligned labels)

Fastest completion time and all-around best choice for the majority of the cases. Work well on mobile as they don't require a lot of horizontal space

在大多數情況下，最快的完成時間和全面的最佳選擇。 在移動設備上效果很好，因為它們不需要大量的水平空間

• Advantages: Allow users to capture input label and input text with one single eye movement, fastest completion time

  優點：允許用戶單眼移動即可捕獲輸入標簽和輸入文本，最快的完成時間

• Disadvantages: Require more vertical space

  缺點：需要更多垂直空間

You can learn more on this topic “Best practices for form design- by Luke Wroblewski” and in “ Label Placement in Forms — by Mateo Penzo”

您可以在以下主題“ Luke Wroblewski的表單設計最佳實踐”和“ Matteo Penzo的表單中標簽放置 ”中了解更多信息。

文本字段的長度應與預期的用戶輸入成比例 (Length of text field should be proportional to the expected user input)

Using identical input length for all text fields in your forms will make them visually pleasing but will be harder to complete.

為表單中的所有文本字段使用相同的輸入長度會使它們在視覺上令人愉悅，但很難完成。

占位符不能替代標簽 (Placeholders are not replacements for labels)

Disappearing placeholder text strains users’ short-term memory. Without labels, users cannot check all information they provided before submitting a form. If you want a very minimalist form design you can use the Material design floating labels approach.

消失的占位符文本會拉長用戶的短期記憶。 沒有標簽，用戶將無法在提交表單之前檢查他們提供的所有信息。 如果您需要極簡的表單設計，則可以使用“材料設計”浮動標簽方法。

Placeholder text inside the form can sometimes confuse users, better to use hint text outside the field.

表單內的占位符文本有時會使用戶感到困惑，最好在字段外使用提示文本。

幫助用戶填寫表格 (Help users fill in forms)

• Help resolve partial queries with Auto-Complete. This happens within the input box where you type and you can press either enter or “right-arrow-key” to accept it.

  使用自動完成功能幫助解決部分查詢。 這個 會在您輸入的輸入框中發生，您可以按Enter或“右箭頭鍵”接受它。

• S earch a virtually unbounded list for related keywords and phrases with Auto-Suggest. This list appears as a multiple suggestion list in the form of the drop-down.

  使用Auto-Suggest搜索幾乎無邊界的相關關鍵字和短語列表。 這個 列表以下拉形式顯示為多個建議列表。

• Pre-fill fields and use smart defaults. Often you can easily detect a user’s country and the city by IP or geolocation. And based on most common scenarios and analytics you can define what should be selected by default. E-Commerce is an exception, don't preselect any preferences related to purchasing like size or color.

  預填充字段并使用智能默認值。 通常，您可以通過IP或地理位置輕松檢測用戶所在的國家和城市。 根據最常見的方案和分析，您可以定義默認情況下應選擇的內容。 電子商務是一個例外，請勿預先選擇與購買相關的任何偏好，例如尺寸或顏色。

• Provide contextual information. If you know that in order to make the right decision or avoid mistakes users will need some additional information like an account balance when making a transfer, don’t hesitate to present it.

  提供上下文信息。 如果您知道為了做出正確的決定或避免錯誤，用戶在進行轉帳時將需要一些其他信息，例如帳戶余額，請隨時提出。

使用內聯驗證 (Use inline validation)

”Live inline validation” is where the validity of the user’s inputs are checked live as the user progresses through the form, as opposed to checking the inputs in a lump sum when the user submits the form. Implement it correctly to not do more harm:

“實時在線驗證”是在用戶瀏覽表單時實時檢查用戶輸入的有效性，而不是在用戶提交表單時一次性檢查輸入。 正確實施它不會造成更多危害：

• Display validation messages close to the input and all together

  顯示靠近輸入的驗證消息 ，并一起顯示

• Don't shout on users, error messages should tell users how to fix the problem instead of blaming them

  不要大喊大叫 ，錯誤消息應該告訴用戶如何解決問題，而不是責怪他們

• Avoid “premature validation” when the field is marked as invalid before they have finished typing

  避免在現場進行“ 過早驗證” 在他們完成輸入之前被標記為無效

• Consider using “positive validation” it can add a sense of delight and progression

  考慮使用“積極驗證” ，可以增加一種愉悅感和進步感

減少字段數 (Reduce the number of fields)

It will remove the visual and cognitive load, and look much simpler.

它將消除視覺和認知負擔，并且看起來更簡單。

• Don’t break text like Full name and Date into multiple fields
  不要將全名和日期之類的文本分成多個字段
• Don't ask for the same info multiple times
  不要多次詢問相同的信息
• Work with labels and hints copy to shorten it as much as possible
  使用標簽和提示復制??以盡可能地縮短它

隱藏不相關的字段 (Hide irrelevant fields)

By disclosing information progressively, we reveal only the essentials and help users manage the complexity only when they need to.

通過逐步公開信息，我們僅揭示要點，并幫助用戶僅在需要時才管理復雜性。

使用條件邏輯 (Use conditional logic)

Conditional logic allows automatically show or hide fields and skip pages in a form, based on visitor answers. This approach not only will reduce the number of fields but also make the fill-in process more personalized and conversation-like.

條件邏輯允許根據訪問者的答案自動顯示或隱藏字段，并以表格形式跳過頁面。 這種方法不僅可以減少字段數，而且可以使填寫過程更具個性化和對話性。

組相關領域 (Group related fields)

One of the easiest ways to simplify complex forms is to start grouping related fields. There are multiple principles of grouping in Gestalt psychology that help items feel related: Proximity, Similarity, Continuity, Closure, and Connectedness. Grouping dozens of unstructured fields into few manageable sets will significantly increase form usability.

簡化復雜表格的最簡單方法之一就是開始對相關字段進行分組。 格式塔心理學中有多種分組原則，可以使項目感覺相關：接近度，相似度，連續性，閉合性和連通性。 將數十個非結構化字段分組為幾個可管理的集合將顯著提高表單的可用性。

避免使用多個列布局 (Avoid using multiple column layouts)

One column layout creates a clear path to completion for the user. Consequences of using a multi-column form layout include users skipping fields where they actually have data to input, inputting data into the wrong fields, or simply coming to a halt that can lead to abandonment.

一列布局為用戶創建了一條清晰的完成路徑。 使用多列表單布局的后果包括用戶跳過他們實際要輸入數據的字段，將數據輸入到錯誤的字段中，或者只是停下來可能導致放棄。

將復雜的表格分為幾個簡單的步驟 (Break complex forms into a few simple steps)

Sometimes even after removing everything unnecessary, some forms can get huge. Breaking up the huge tasks into a series of smaller looks much easier and motivates them to carry out the process to the end.

有時即使刪除了所有不必要的內容，某些表格也會變得很大。 將大型任務分解為一系列較小的任務看起來容易得多，并促使他們將過程執行到最后。

• Display the steps and visually communicate progress user makes, this gives more satisfaction and motivates to move forward

  顯示步驟并以視覺方式傳達用戶的進度 ，這可以提高滿意度并激發前進的動力

• Don’t granulate the form, too many steps will not help, just annoy users

  不要細化表格 ，太多的步驟將無濟于事，只會惹惱用戶

• Carry on a summary of key information provide to reduce anxiety and need to have review step in the end

  對關鍵信息進行總結以減輕焦慮，最后需要進行復查

最小化向導外導航的能力 (Minimize the ability to navigate outside of the wizard)

If the form is large enough to break into multiple steps, it deserves a separate clearly focused space to work with it. Exposing general navigation or any links that will disrupt the process will just create confusion. I would also advise against multi-step forms in small Pop-Ups.

如果表單足夠大，可以分成多個步驟，則應為它分配一個單獨的清晰聚焦的空間。 公開常規導航或任何會破壞該過程的鏈接只會造成混亂。 我也建議不要在小型彈出窗口中使用多步驟表單。

顯示適當的鍵盤類型 (Show the appropriate keyboard type)

Android or iOS provides several different keyboard types, each designed to facilitate a different type of input. To streamline data entry, the keyboard displayed when editing a text field should be appropriate to the type of content in the field. Be conscious of where the keyboard will appear. To not introduce scroll needlessly, position your text fields in the upper area.

Android或iOS提供了幾種不同的鍵盤類型，每種類型的鍵盤都旨在促進不同類型的輸入。 為了簡化數據輸入，在編輯文本字段時顯示的鍵盤應適合該字段中的內容類型。 注意鍵盤將出現的位置。 為了避免不必要地引入滾動，請將文本字段放在上方區域。

停止荒謬的密碼創建設計 (Stop ridiculous password creation designs)

• Allow users to unmask their password instead of asking them to enter it 2 times, It will also work better for password generating apps

  允許用戶取消隱藏密碼，而不是要求他們輸入兩次密碼，這對于生成密碼的應用程序也將更有效

• Display password requirements all the time, and indicate users' progress towards meeting all the criteria. Try to simplify requirements for the user.

  始終顯示密碼要求 ，并指示用戶在滿足所有條件方面的進度。 嘗試簡化對用戶的要求。

• Use strength meters encourage users to create stronger passwords

  使用強度表鼓勵用戶創建更強的密碼

您可能還喜歡 (You may also like)

Components series — a detailed look on the components we use every day and how best to design them.

組件系列-詳細介紹我們每天使用的組件以及如何最好地設計它們。

翻譯自: https://uxdesign.cc/text-fields-forms-design-ui-components-series-2b32b2beebd0

總結

以上是生活随笔為你收集整理的文本字段和表单设计-UI组件系列的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。