ui輸入框設(shè)計規(guī)范

ui輸入框設(shè)計規(guī)范：文本輸入框幾乎是每個UI設(shè)計師都必須用到的設(shè)計控件，它們無處不在，對于用戶體驗的影響無疑是巨大的。今天小編主要給大家分享ui輸入框設(shè)計規(guī)范，希望對你們有幫助!

文本輸入框

文本輸入框是ui設(shè)計中最常見的控件，在大多數(shù)情況下用于向用戶輸入少量文字。無論使用哪種app，都需要使用文本輸入框來獲取少量的個人信息(用戶名等)。當(dāng)你想搜索某些信息時，打開谷歌，至少也要通過在搜索框中輸入來完成最小搜索請求。

清晰的文本標(biāo)簽

用戶想知道他們輸入的字段是什么類型的數(shù)據(jù)，自然需要文本標(biāo)簽來清楚地告知。當(dāng)然，有時用戶也通過使用與輸入框相對應(yīng)的圖標(biāo)來了解輸入框?qū)��?yīng)的字段的含義(例如，用戶通常會看到放大的圖標(biāo)，意識到這是一個搜索框)。然而，在絕大多數(shù)情況下，文本標(biāo)簽是還是必需的。 清晰的標(biāo)簽使用戶更加自信，正確理解，正確操作。

短文本標(biāo)簽

標(biāo)簽不是幫助性的說明，因此你應(yīng)該用簡短的描述性短語作為標(biāo)簽，以便用戶可以快速瀏覽。如果有其它信息，請通過上下文或有用的說明讓用戶知道，而不是超長標(biāo)簽。

合理的輸入框尺寸

如果輸入框大小是根據(jù)輸入內(nèi)容的長度和大小設(shè)計的，會更適合用戶閱讀和輸入。

輸入框焦點

對于輸入框，當(dāng)用戶選擇準(zhǔn)備輸入時，應(yīng)該提供清晰的視覺提示，例如發(fā)光的輸入框或閃爍的光標(biāo)。

輸入提示

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

例如，輸入電話號碼就有許多不同的方式，如常見的"+86 "，大多數(shù)情況下，大家可以輸入11位數(shù)的手機(jī)號碼，而座機(jī)號碼的情況則更復(fù)雜。有些人習(xí)慣于添加區(qū)號，而有些人則不會。面對這種復(fù)雜的情況，可以通過設(shè)計輸入框和添加輸入提示來“格式化”輸入內(nèi)容。