亚洲AV免费看深爱成人|日韩av另类一级特黄片在线|中国免费一级黄片|国产av一二三区|亚洲有码AV在线|久久亚洲国产日韩欧美|成人免费AV网站|婷婷一区综合一区|亚洲AV无码导航|高级欧美成人网站

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

UI設(shè)計 | 文本字段和表單設(shè)計-UI組件你用對了么?超級實用

發(fā)布時間：2024-03-03 20:32:46 瀏覽量：264次

簡單的規(guī)則將幫助你設(shè)計用戶希望完成的表單



規(guī)范已經(jīng)存在了很長時間，極大地簡化了起草投訴和其他各種法律訴狀的任務(wù)。隨著信息及其處理的進步，收集數(shù)據(jù)的手段也在不斷發(fā)展。由于印刷表格已存在多年，因此我們可以從其設(shè)計中學(xué)到一些技巧。



文字欄位剖析

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


以下是基本Text字段的關(guān)鍵元素：
1. 容器 -可交互輸入的區(qū)域
2. 輸入文本 -在文本字段中輸入
3. 標(biāo)簽文本 -告訴用戶給定表單字段中屬于什么信息
4. 占位符文本 -是所需信息的描述或示例，被輸入文本替換在用戶提供之后
5. 幫助程序或驗證文本（可選） -提供其他上下文或驗證消息
6. 前導(dǎo)圖標(biāo)（可選） -描述文本字段所需的輸入類型
7. 尾隨圖標(biāo)（可選） —對輸入的文本的附加控制，例如清除，隱藏/顯示等


文字欄位類型

它們中的大多數(shù)基于基本文本字段，這些文本字段經(jīng)過修改以更好地處理特定類型的信息，例如信用卡號。以下是我們創(chuàng)建的整個UI中最常用的輸入類型的一些示例：



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


對你收集的數(shù)據(jù)使用適當(dāng)?shù)妮斎腩愋?/strong>

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


文本字段必須根據(jù)狀態(tài)和用戶交互來更改其外觀

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



選擇最佳的文本字段樣式

通常，你將使用三個主要的標(biāo)簽定位選項：頂部，左側(cè)和右側(cè)對齊。最佳的樣式取決于關(guān)鍵目標(biāo)和表單的大小，組件庫和設(shè)計平臺。它們都有優(yōu)點和缺點。

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


左對齊標(biāo)簽

當(dāng)用戶不熟悉所請求的數(shù)據(jù)時，這是一個不錯的選擇

  • 優(yōu)點：易于擴展的標(biāo)簽，充分利用垂直空間
  • 缺點：標(biāo)簽和相應(yīng)輸入之間的距離過長和可變距離會增加完成時間

右對齊標(biāo)簽

與左對齊標(biāo)簽相比，完成時間快了將近兩倍

  • 優(yōu)點：文本字段標(biāo)簽和輸入位置緊密，限制了眼睛移動的次數(shù)，從而縮短了完成時間
  • 缺點：較難快速掃描表單并了解所需的所有信息

頂部對齊的標(biāo)簽

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

  • 優(yōu)點：允許用戶單眼移動即可捕獲輸入標(biāo)簽和輸入文本，最快的完成時間
  • 缺點：需要更多垂直空間


文本字段的長度應(yīng)與預(yù)期的用戶輸入成比例

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


占位符不能替代標(biāo)簽

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

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


幫助用戶填寫表格

  • 使用自動完成功能幫助解決部分查詢。這 會在你輸入的輸入框中發(fā)生，你可以按Enter或“右箭頭鍵”接受它。
  • 使用Auto-Suggest搜索幾乎無邊界的相關(guān)關(guān)鍵字和短語列表。該 列表以下拉形式顯示為多個建議列表。
  • 預(yù)填充字段并使用智能默認(rèn)值。通常，你可以通過IP或地理位置輕松檢測用戶所在的國家和城市。根據(jù)最常見的方案和分析，你可以定義默認(rèn)情況下應(yīng)選擇的內(nèi)容。電子商務(wù)是一個例外，請勿預(yù)先選擇與購買相關(guān)的任何偏好，例如尺寸或顏色。

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


使用內(nèi)聯(lián)驗證

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

  • 顯示靠近輸入的驗證消息，并一起顯示
  • 不要大喊大叫，錯誤消息應(yīng)該告訴用戶如何解決問題，而不是責(zé)怪他們
  • 當(dāng)字段在完成輸入之前被標(biāo)記為無效時，請避免“ 過早驗證”
  • 考慮使用“積極驗證”，可以增加一種愉悅感和進步感



減少字段數(shù)

它將消除視覺和認(rèn)知負(fù)擔(dān)，并且看起來更加簡單。

  • 不要將全名和日期之類的文本分成多個字段
  • 不要多次詢問相同的信息
  • 使用標(biāo)簽和提示復(fù)制以盡可能地縮短它


隱藏不相關(guān)的字段

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


使用條件邏輯

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


組相關(guān)領(lǐng)域

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



避免使用多個列布局

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


將復(fù)雜的表格分為幾個簡單的步驟

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

  • 顯示步驟并以視覺方式傳達(dá)用戶的進度，這可以提高滿意度并激勵他們前進
  • 不要細(xì)化表格，太多的步驟將無濟于事，只會惹惱用戶
  • 對關(guān)鍵信息進行總結(jié)以減輕焦慮，最后需要進行復(fù)查


最小化向?qū)獠康膶?dǎo)航能力

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


顯示適當(dāng)?shù)逆I盤類型

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


停止荒謬的密碼創(chuàng)建設(shè)計

  • 允許用戶取消隱藏密碼，而不是要求他們輸入兩次密碼，這對于生成密碼的應(yīng)用程序也將更有效
  • 始終顯示密碼要求，并指示用戶在滿足所有條件方面的進度。嘗試簡化對用戶的要求。
  • 使用強度表鼓勵用戶創(chuàng)建更強的密碼

～此文轉(zhuǎn)載，如有侵權(quán)，請聯(lián)系刪除

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學(xué)您好！

您已成功報名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定