設(shè)計文本輸入框的技巧有哪些？

2021-06-13    分類： 網(wǎng)站建設(shè)

文本輸入框是大部分UI設(shè)計師都會用到的控件，雖然看起來很簡單，但對用戶體驗影響還是很大的，之前創(chuàng)新互聯(lián)分享過網(wǎng)頁設(shè)計中文本輸入框的參數(shù)說明，今天創(chuàng)新互聯(lián)來說說設(shè)計文本輸入框的技巧有哪些？

設(shè)計文本輸入框的技巧有哪些

1、清晰的文本標(biāo)簽
用戶想要知道他們輸入的字段到底是什么樣的數(shù)據(jù)，自然是需要文本標(biāo)簽清晰的告訴他們。當(dāng)然，有時候用戶也是借助字段相關(guān)的圖標(biāo)來了解輸入框?qū)?yīng)字段含義的(比如用戶通?？吹椒糯箸R的圖標(biāo)會意識到這是一個搜索框)。但是在絕大多數(shù)的情況下，文本的標(biāo)簽是必須有的。清晰的標(biāo)簽讓用戶更加自信，正確理解，并且正確地操作。

2、合理的輸入框尺寸
如果你的輸入框尺寸是按照輸入內(nèi)容的長短、尺寸來設(shè)計的話，會更加適宜用戶閱讀和輸入。
3、輸入框焦點
對于輸入框，當(dāng)用戶選中準(zhǔn)備輸入的時候，應(yīng)當(dāng)提供清晰的視覺提示，比如外發(fā)光的輸入框，或者閃動的光標(biāo)，都行。
4、輸入提示
數(shù)據(jù)的呈現(xiàn)方式多種多樣。所以，當(dāng)你在設(shè)計輸入框的時候，應(yīng)當(dāng)與用戶輸入信息的類型、格式相互匹配。不過要做到完全的對應(yīng)并不容易。

5、可訪問性
確保不同狀況的用戶都能無障礙地、輕松瀏覽和填寫輸入框，永遠不要使用全部是大寫字母的文本標(biāo)簽，這樣的標(biāo)簽通常都很難快速瀏覽，因為字母的大小高度都是一致的，對于非英語言國家的用戶尤其麻煩。

6、字體尺寸
在設(shè)置字體尺寸的時候，應(yīng)該確保字體足夠大，盡量讓它們清晰可辨。網(wǎng)頁上設(shè)置正文字體的時候，最安全的選擇是16px，當(dāng)然，大小的選取主要還是取決于實際的頁面設(shè)計，如果識別性問題，應(yīng)當(dāng)適當(dāng)調(diào)大一些。
7、標(biāo)簽顏色
標(biāo)簽的色彩應(yīng)當(dāng)依從于你的APP或者網(wǎng)頁的整體配色方案，并且確保對比度(不能太暗，也別太耀眼)。W3C 在正文文本對比度上較小的文本應(yīng)當(dāng)確保至少和背景之間有4.5:1的對比度比率，較大的文本(14pt粗體，18pt常規(guī))應(yīng)當(dāng)確保和背景之間的對比度超過3:1。
8、提供舒適的點擊區(qū)域
無論你所設(shè)計的是網(wǎng)頁還是APP，都應(yīng)當(dāng)考慮用戶在手機上點擊屏幕時的體驗。你需要確保用戶點擊輸入框的時候的觸發(fā)區(qū)域足夠?qū)捤墒孢m，而不是很難點擊。一般說來，拇指的觸發(fā)區(qū)域應(yīng)當(dāng)控制在 45~57px之間，但是在移動端上，控件看起來太大會讓人覺得不舒服，所以你的文本框高度應(yīng)該設(shè)計在32~40px之間，這樣看起來足夠友好，又不會太大。
9、盡量減少用戶輸入
填寫表單本身就是一件苦差事，絕大多數(shù)時候它都不會變得令人愉悅。因此，許多需要填寫、選取的表單最好有預(yù)設(shè)的初始值或者內(nèi)容填充在其中，這樣可以讓用戶用起來更加方便許多內(nèi)容和參數(shù)其實你可以通過其他的方式計算并獲得(比如你可以根據(jù)用戶的地理位置來幫他們填寫郵政編碼)，也可以通過之前在其他地方輸入的數(shù)據(jù)來填補內(nèi)容。

分享標(biāo)題：設(shè)計文本輸入框的技巧有哪些？
當(dāng)前網(wǎng)址：http://www.bm7419.com/news33/117433.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、建站公司、小程序開發(fā)、定制開發(fā)、網(wǎng)站維護、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

商城網(wǎng)站建設(shè)