辭典精譯 | UI組件要點「狙擊」：文本欄及表單設(shè)計奧秘解析

2021-3-24 ui設(shè)計分享達(dá)人

文本欄&表單設(shè)計

表單已經(jīng)存在了很長一段時間，自誕生以來極大地簡化了起草申訴和各種法律訴狀的任務(wù)。隨著信息與處理技術(shù)的進(jìn)步，收集數(shù)據(jù)的手段也在不斷發(fā)展，而印刷表單已存在多年，我們可以從其設(shè)計中學(xué)到一些技巧。

文本欄解析

用戶可以在文本欄內(nèi)輸入信息，它們通常以表單和對話框的形式出現(xiàn)。文本字段組件的設(shè)計應(yīng)為交互提供清晰的功能支持，使字段在布局中易識別、易填充和可訪問。

以下是組成文本欄的關(guān)鍵要素：

容器：可交互的輸入?yún)^(qū)域；

輸入框：在文本欄中輸入文字；

提示：告訴用戶給出的表單字段是什么信息；

占位符：是所需信息的描述或示例，用戶輸入正確信息內(nèi)容后被替換；

幫助程序或驗證文本（可選）：單獨出現(xiàn)或以驗證消息的形式出現(xiàn)；

頭部圖標(biāo)（可選）：描述文本字段的輸入類型；

尾部圖標(biāo)（可選）：輸入文本的附加控件，例如清除，隱藏/顯示等。

01 文字欄類型

它們大多數(shù)都是相對基礎(chǔ)的文本字段類型，被修改成了處理特定類型的信息，例如信用卡號。以下是我創(chuàng)建的UI中最常用的一些輸入類型示例：

02 對收集數(shù)據(jù)使用適當(dāng)?shù)妮斎腩愋?

為收集的數(shù)據(jù)提供幫助規(guī)避錯誤，讓用戶可以正確的輸入信息，從而使過程簡單高效。

03 文本欄必須根據(jù)狀態(tài)和交互更改外觀

文本欄的狀態(tài)可以通過視覺提示來實現(xiàn)，輸入信息時的狀態(tài)有以下幾種：未激活、懸停、禁用、激活，驗證、錯誤。所有狀態(tài)應(yīng)清楚地被區(qū)分開，并在整個表單和應(yīng)用中保持一致，簡潔明了，不要誤導(dǎo)用戶。

04 選擇最佳的文本欄樣式

通常標(biāo)簽定位有三種：頂部、左側(cè)和右側(cè)對齊。最適合的樣式將取決于表單的大小、主要目標(biāo)、組件庫和要為其設(shè)計的平臺，但它們都有各自優(yōu)點和缺點。

谷歌的“材料設(shè)計”指南中，普遍使用的下劃線輸入并不是最佳選擇。有趣的是，在一項研究結(jié)果中發(fā)現(xiàn)用戶更喜歡帶圓角的輸入框。

05 左對齊標(biāo)簽

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

優(yōu)點：易于標(biāo)簽伸縮，充分利用垂直空間；

缺點：標(biāo)簽與對應(yīng)的文本欄，距離過元，增加用戶閱讀的時間成本。

06 右對齊標(biāo)簽

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

優(yōu)點：標(biāo)簽和輸入欄靠近，限制了眼睛移動的次數(shù)，從而縮短了完成時間；

缺點：難以快速瀏覽表單并理解所需的所有信息。

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

在移動設(shè)備上效果很好，因為它們不需要太多的水平空間。

優(yōu)點：用戶可以快讀瀏覽輸入標(biāo)簽和輸入文本；

缺點：需要更多垂直空間。

08 文本欄長度應(yīng)與輸入內(nèi)容呼應(yīng)

表單中的所有文本欄，若設(shè)置相同長度確實會顯得非常美觀，但實際在操作上，卻很難完成。

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

占位符文本消失會給用戶制造緊張感，而去掉標(biāo)簽，用戶則無法在提交表單前檢查他們提供的信息。如果在設(shè)計時需要極簡的表單，可以使用“材料設(shè)計”的浮動標(biāo)簽法。表單內(nèi)的占位符文本還會使用戶感到困惑，最好在字段外使用提示文本。

10 幫助用戶填寫表單

使用自動完成功能，填寫時會幫助填寫及查詢。一般在輸入時可以看到，對查詢內(nèi)容按Enter或右箭頭鍵就完成了填寫；

使用Auto-Suggest搜索關(guān)關(guān)鍵字和短語時，下拉列表會顯示多個建議；

預(yù)填充字段會經(jīng)常使用智能默認(rèn)值，比如通過IP或地理位置，就能檢測獲取到用戶所在的國家和城市，或是根據(jù)常見的場景，自己定義默認(rèn)情況下的內(nèi)容。需要注意的是，電子商務(wù)是一個例外，請勿預(yù)先設(shè)置與購買相關(guān)的任何偏好，比如尺寸或顏色；

還有一種應(yīng)用情境，自動完成功能可以幫助用戶做出正確決定或避免錯誤，比如用戶轉(zhuǎn)帳時看到賬戶余額等，請一定要提供該信息。

11 使用實時在線驗證

指的是用戶輸入信息后，可以實時檢查輸入內(nèi)容的有效性，而不是等用戶提交表單時一次性檢查。正確應(yīng)用，降低信息出錯率：

在輸入內(nèi)容的文字欄下方顯示驗證消息；

不要突然蹦出嚴(yán)重警告，填寫的消息錯誤時，應(yīng)告訴用戶如何解決，而非責(zé)怪。

12 減少字段數(shù)量

消除視覺及認(rèn)知負(fù)擔(dān)，使界面看起來更加簡潔。

不要將全名和日期之類的文本分成多個字段；

不要多次詢問相同的信息。

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

逐步公開，提供必要提示即可，幫助用戶管理復(fù)雜信息。

14 使用條件邏輯

根據(jù)用戶回答，條件邏輯允許在表單中自動顯示、隱藏字段和跳過頁面。這種方法不僅可以減少字段數(shù)，而且可以使填寫過程更像對話，也更具個性化。

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

簡化表單的最有效方法，其中之一則是為相關(guān)字段進(jìn)行分組。格式塔心理學(xué)里有許多種分組原則，使項目有關(guān)聯(lián)性：接近性、相似性，連續(xù)性、閉合性和連通性。在界面中，如果將數(shù)十個非結(jié)構(gòu)化字段分組為幾個可管理的集合，將顯著提高表單的可用性。