文本輸入框幾乎是每個UI設(shè)計者必須使用的設(shè)計控件。它們無處不在，對用戶體驗的影響無疑是巨大的。雖然看起來很簡單，但設(shè)計良好的文本輸入框?qū)嶋H上足以滿足許多“隱藏規(guī)則”。你了解這些規(guī)則嗎？

當(dāng)新用戶開始使用應(yīng)用程序或駐留在網(wǎng)站中時，至少需要通過文本輸入完成最基本的信息。產(chǎn)品經(jīng)理，設(shè)計師和開發(fā)人員也明白這是最好的解決方案。

在今天的文章中，我們關(guān)注文本字段輸入應(yīng)注意的一些核心因素。這些主要是最常見的規(guī)則，每條規(guī)則都有一些明顯的例外。

文字輸入框

文本輸入框是UI設(shè)計中最常用的控件，用于在大多數(shù)情況下向用戶輸入少量文本。無論您使用哪個應(yīng)用程序，都需要一個文本輸入框來獲取少量個人信息（用戶名等）。如果要搜索某些信息，請打開Goog??le并至少輸入搜索框以完成最低搜索請求。

清除

明文標(biāo)簽

用戶想要知道他們輸入的數(shù)據(jù)類型，自然有必要用文本標(biāo)簽清楚地告訴他們。當(dāng)然，有時用戶還使用與字段相關(guān)的圖標(biāo)來理解輸入框中相應(yīng)字段的含義（例如，用戶通?？吹椒糯箸R圖標(biāo)將意識到這是一個搜索框）。但在絕大多數(shù)情況下，文本的標(biāo)簽是強制性的。

Apple iOS中的搜索框同時包含標(biāo)簽和放大鏡圖標(biāo)

清晰的標(biāo)簽可以讓用戶更加自信，理解并正確操作。

短文字標(biāo)簽

標(biāo)簽沒有幫助，因此您應(yīng)該使用短（幾個單詞）描述性短語作為標(biāo)簽，以便用戶可以快速瀏覽。如果有其他信息，請讓用戶通過上下文或其他有用的說明了解某些內(nèi)容，而不是額外的長標(biāo)簽。

以前，由于標(biāo)簽文本冗長，亞馬遜的注冊頁面很慢。目前的版本更強大。

合理的輸入框大小

如果您的輸入框大小是根據(jù)輸入的長度和大小設(shè)計的，那么它將更適合用戶閱讀和輸入。

輸入框焦點

對于輸入框，當(dāng)用戶選擇要輸入的輸入時，應(yīng)提供清除視覺提示，例如外部照明的輸入框或閃爍的光標(biāo)。

輸入提示

數(shù)據(jù)以各種方式呈現(xiàn)。因此，在設(shè)計輸入框時，應(yīng)該匹配用戶輸入信息的類型和格式。但是，完成一次通信并不容易。

例如，有許多不同的方式可以輸入電話號碼，例如我們通常的“+86”，在更多情況下，您可以直接輸入一個11位數(shù)的手機號碼。在固定電話號碼的情況下，更復(fù)雜，有些人習(xí)慣于添加區(qū)號，而其他人則不習(xí)慣。面對這種復(fù)雜情況，您可以通過設(shè)計輸入框并添加輸入提示來輸入輸入。或者以輸入電話號碼為例：

此輸入框的電話號碼格式已固化，因此用戶可以清楚地知道應(yīng)輸入哪種類型和位數(shù)。

具有描述性質(zhì)的文本占位符將添加到此輸入框中，以清楚地指示應(yīng)輸入的數(shù)字。缺點是占位符在用戶輸入時消失。

幫助信息

幫助信息（或相關(guān)文本）應(yīng)出現(xiàn)在需要的地方，例如表格中的文字解釋為何需要信用卡號碼，以及生日日期后的福利，或“條款”的存在。服務(wù)與QUOT;鏈接。它們及時出現(xiàn)，以幫助用戶解釋一些令人困惑的問題。一般來說，這種幫助信息不應(yīng)超過100字。

僅限移動設(shè)備：將鍵盤類型與文本輸入匹配

在APP上，用戶經(jīng)常需要輸入不同類型的文本。當(dāng)輸入框需要輸入數(shù)字時，結(jié)果是全鍵盤自然不方便，當(dāng)需要輸入文本時，數(shù)字鍵盤更不合適。

輔助功能

目標(biāo)：確保不同情況下的用戶可以輕松輕松地瀏覽并填寫輸入框

避免使用大寫文本標(biāo)簽

切勿使用全部大寫字母的文本標(biāo)簽。這些標(biāo)簽通常難以快速導(dǎo)航，因為字母的大小在高度上是一致的，并且對于非英語國家的用戶來說尤其麻煩。

字體大小

設(shè)置字體大小時，請確保字體足夠大，以使其盡可能清晰。在網(wǎng)頁上設(shè)置正面字體時，最安全的選擇是16px。當(dāng)然，尺寸的選擇主要取決于實際的頁面設(shè)計。如果出現(xiàn)識別問題，則應(yīng)適當(dāng)調(diào)整。

標(biāo)簽顏色

標(biāo)簽的顏色應(yīng)遵循應(yīng)用程序或網(wǎng)頁的整體顏色方案，并確保對比度（不要太暗，不要太刺眼）。 W3C對文本文本對比有以下要求：

·較小的文本應(yīng)確保背景和背景之間的對比度為4.5: 1

·較大的文字（14pt粗體，18pt常規(guī)）應(yīng)確保背景和背景之間的對比度超過3: 1

提供舒適的點擊區(qū)域

無論您是設(shè)計網(wǎng)頁還是應(yīng)用程序，都應(yīng)該在點擊手機屏幕時考慮用戶體驗。當(dāng)用戶點擊輸入框時，您需要確保觸發(fā)區(qū)域足夠?qū)捤汕沂孢m，不易點擊。一般來說，拇指的觸發(fā)區(qū)域應(yīng)該控制在45到57px之間，但在移動端，控件看起來太大而不會讓人覺得不舒服，所以你的文本框高度應(yīng)設(shè)計在32~40px之間，所以它看起來很友好而且不是太大。

僅限桌面：輸入鍵盤的友好輸入框

這是一種歷史悠久的可用性設(shè)計：用戶應(yīng)該能夠僅使用鍵盤完成內(nèi)容輸入的所有工作。許多深度用戶需要使用Tab按鈕在不同的輸入框和控件之間切換，并在不離開鍵盤的情況下填寫表單。您可以在W3C文檔中找到相應(yīng)的說明。

用戶支出

目標(biāo)：盡量減少用戶輸入

智能預(yù)設(shè)

填寫表單本身就是一件苦差事，大多數(shù)時候它都不會令人滿意。因此，需要填寫和選擇的許多表格都具有預(yù)設(shè)的初始值或填寫的內(nèi)容，這使得用戶使用起來更加方便——許多內(nèi)容和參數(shù)可以通過其他方式計算和獲得（例如，您可以幫助他們根據(jù)用戶的地理位置填寫郵政編碼，或者使用先前在別處輸入的數(shù)據(jù)填寫內(nèi)容。

例如，在許多情況下可以預(yù)先填寫用戶的IP地址。 Whatsapp呼叫系統(tǒng)服務(wù)預(yù)先填寫手機號碼前的區(qū)號，以使您的填充體驗更加舒適。

自動完成和自動建議

自動完成功能是根據(jù)您在下拉框中輸入的內(nèi)容實時填寫的功能。這有助于用戶更準(zhǔn)確，更有效地填寫信息。這對于打字困難且難以拼寫的用戶尤其有用，特別是如果該語言不是他們的母語。

自動建議會在列表中顯示相關(guān)的關(guān)鍵字或短語，這在匹配方面可能并不理想。自動完成是為了完成您填寫的內(nèi)容，自動建議是為您推薦可能的短語和關(guān)鍵字。

兩者的結(jié)合可以使用戶輸入體驗更加出色，Google搜索就是這樣做的。

« Mobai App上線Mobai Mall以擴大更多元化的現(xiàn)金方式 | 該網(wǎng)站由SEM精心推廣。小心成為“薅毛” »