設(shè)計文本輸入框的技巧有哪些？
2021-06-13 分類： 網(wǎng)站建設(shè)
文本輸入框是大部分UI設(shè)計師都會用到的控件，雖然看起來很簡單，但對用戶體驗(yàn)影響還是很大的，之前創(chuàng)新互聯(lián)分享過網(wǎng)頁設(shè)計中文本輸入框的參數(shù)說明，今天創(chuàng)新互聯(lián)來說說設(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、輸入框焦點(diǎn)
對于輸入框，當(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、可訪問性
確保不同狀況的用戶都能無障礙地、輕松瀏覽和填寫輸入框，永遠(yuǎn)不要使用全部是大寫字母的文本標(biāo)簽，這樣的標(biāo)簽通常都很難快速瀏覽，因?yàn)樽帜傅拇笮「叨榷际且恢碌模瑢τ诜怯⒄Z言國家的用戶尤其麻煩。
6、字體尺寸
在設(shè)置字體尺寸的時候，應(yīng)該確保字體足夠大，盡量讓它們清晰可辨。網(wǎng)頁上設(shè)置正文字體的時候，最安全的選擇是16px，當(dāng)然，大小的選取主要還是取決于實(shí)際的頁面設(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、提供舒適的點(diǎn)擊區(qū)域
無論你所設(shè)計的是網(wǎng)頁還是APP，都應(yīng)當(dāng)考慮用戶在手機(jī)上點(diǎn)擊屏幕時的體驗(yàn)。你需要確保用戶點(diǎn)擊輸入框的時候的觸發(fā)區(qū)域足夠?qū)捤墒孢m，而不是很難點(diǎn)擊。一般說來，拇指的觸發(fā)區(qū)域應(yīng)當(dāng)控制在 45~57px之間，但是在移動端上，控件看起來太大會讓人覺得不舒服，所以你的文本框高度應(yīng)該設(shè)計在32~40px之間，這樣看起來足夠友好，又不會太大。
9、盡量減少用戶輸入
填寫表單本身就是一件苦差事，絕大多數(shù)時候它都不會變得令人愉悅。因此，許多需要填寫、選取的表單最好有預(yù)設(shè)的初始值或者內(nèi)容填充在其中，這樣可以讓用戶用起來更加方便許多內(nèi)容和參數(shù)其實(shí)你可以通過其他的方式計算并獲得(比如你可以根據(jù)用戶的地理位置來幫他們填寫郵政編碼)，也可以通過之前在其他地方輸入的數(shù)據(jù)來填補(bǔ)內(nèi)容。
分享標(biāo)題：設(shè)計文本輸入框的技巧有哪些？
當(dāng)前網(wǎng)址：http://jinyejixie.com/news33/117433.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、建站公司、小程序開發(fā)、定制開發(fā)、網(wǎng)站維護(hù)、品牌網(wǎng)站制作
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 什么是基于云的SaaS模型? 2021-06-13
- 怎樣挑選網(wǎng)站優(yōu)化關(guān)鍵詞移動端如何做 2021-06-13
- 數(shù)據(jù)庫營銷的響應(yīng)分析 2021-06-13
- 網(wǎng)站頁面設(shè)計和結(jié)構(gòu)的技巧 2021-06-13
- 客戶是上帝那我們這些勞動者又算什么？ 2021-06-13
- 什么是基于組件的設(shè)計？ 2021-06-13
- 軟文怎么寫 2021-06-13
- 什么是網(wǎng)站優(yōu)化排名周期？ 2021-06-12
- 低質(zhì)量的偽原創(chuàng)現(xiàn)在對于網(wǎng)站的排名作用不大 2021-06-13
- 影響網(wǎng)站優(yōu)化排名的幾點(diǎn)情況 2021-06-13
- 友情鏈接中人與人之間缺乏基本的信任 2021-06-13
- 站內(nèi)文章標(biāo)題應(yīng)該怎么寫？ 2021-06-13
- 個人建站的趨勢必然是專業(yè)站 2021-06-12
- 域名選取的必備技巧 2021-06-12
- 深圳網(wǎng)站里面的tdk是什么意思? 2021-06-12
- 分享網(wǎng)站視覺設(shè)計要點(diǎn)和心得 2021-06-12
- 網(wǎng)站的標(biāo)題關(guān)鍵詞描述如何設(shè)置 2021-06-12
- 網(wǎng)站策構(gòu)——好的網(wǎng)頁策劃原則 2021-06-12
- 網(wǎng)站建設(shè)目錄結(jié)構(gòu) 2021-06-12