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

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

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

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

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

2、合理的輸入框尺寸

如果你的輸入框尺寸是按照輸入內(nèi)容的長(zhǎng)短、尺寸來(lái)設(shè)計(jì)的話，會(huì)更加適宜用戶閱讀和輸入。

3、輸入框焦點(diǎn)

對(duì)于輸入框，當(dāng)用戶選中準(zhǔn)備輸入的時(shí)候，應(yīng)當(dāng)提供清晰的視覺提示，比如外發(fā)光的輸入框，或者閃動(dòng)的光標(biāo)，都行。

4、輸入提示

數(shù)據(jù)的呈現(xiàn)方式多種多樣。所以，當(dāng)你在設(shè)計(jì)輸入框的時(shí)候，應(yīng)當(dāng)與用戶輸入信息的類型、格式相互匹配。不過要做到完全的對(duì)應(yīng)并不容易。

5、可訪問性

確保不同狀況的用戶都能無(wú)障礙地、輕松瀏覽和填寫輸入框，永遠(yuǎn)不要使用全部是大寫字母的文本標(biāo)簽，這樣的標(biāo)簽通常都很難快速瀏覽，因?yàn)樽帜傅拇笮「叨榷际且恢碌?，?duì)于非英語(yǔ)言國(guó)家的用戶尤其麻煩。

6、字體尺寸

在設(shè)置字體尺寸的時(shí)候，應(yīng)該確保字體足夠大，盡量讓它們清晰可辨。網(wǎng)頁(yè)上設(shè)置正文字體的時(shí)候，最安全的選擇是16px，當(dāng)然，大小的選取主要還是取決于實(shí)際的頁(yè)面設(shè)計(jì)，如果識(shí)別性問題，應(yīng)當(dāng)適當(dāng)調(diào)大一些。

7、標(biāo)簽顏色

標(biāo)簽的色彩應(yīng)當(dāng)依從于你的APP或者網(wǎng)頁(yè)的整體配色方案，并且確保對(duì)比度(不能太暗，也別太耀眼)。W3C 在正文文本對(duì)比度上較小的文本應(yīng)當(dāng)確保至少和背景之間有4.5:1的對(duì)比度比率，較大的文本(14pt粗體，18pt常規(guī))應(yīng)當(dāng)確保和背景之間的對(duì)比度超過3:1。

8、提供舒適的點(diǎn)擊區(qū)域

無(wú)論你所設(shè)計(jì)的是網(wǎng)頁(yè)還是APP，都應(yīng)當(dāng)考慮用戶在手機(jī)上點(diǎn)擊屏幕時(shí)的體驗(yàn)。你需要確保用戶點(diǎn)擊輸入框的時(shí)候的觸發(fā)區(qū)域足夠?qū)捤墒孢m，而不是很難點(diǎn)擊。一般說來(lái)，拇指的觸發(fā)區(qū)域應(yīng)當(dāng)控制在 45~57px之間，但是在移動(dòng)端上，控件看起來(lái)太大會(huì)讓人覺得不舒服，所以你的文本框高度應(yīng)該設(shè)計(jì)在32~40px之間，這樣看起來(lái)足夠友好，又不會(huì)太大。

9、盡量減少用戶輸入

填寫表單本身就是一件苦差事，絕大多數(shù)時(shí)候它都不會(huì)變得令人愉悅。因此，許多需要填寫、選取的表單最好有預(yù)設(shè)的初始值或者內(nèi)容填充在其中，這樣可以讓用戶用起來(lái)更加方便許多內(nèi)容和參數(shù)其實(shí)你可以通過其他的方式計(jì)算并獲得(比如你可以根據(jù)用戶的地理位置來(lái)幫他們填寫郵政編碼)，也可以通過之前在其他地方輸入的數(shù)據(jù)來(lái)填補(bǔ)內(nèi)容。

分享標(biāo)題：設(shè)計(jì)文本輸入框的技巧有哪些？
當(dāng)前網(wǎng)址：http://www.rwnh.cn/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)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

什么是基于云的SaaS模型? 2021-06-13
怎樣挑選網(wǎng)站優(yōu)化關(guān)鍵詞移動(dòng)端如何做 2021-06-13
數(shù)據(jù)庫(kù)營(yíng)銷的響應(yīng)分析 2021-06-13
網(wǎng)站頁(yè)面設(shè)計(jì)和結(jié)構(gòu)的技巧 2021-06-13
客戶是上帝那我們這些勞動(dòng)者又算什么？ 2021-06-13
什么是基于組件的設(shè)計(jì)？ 2021-06-13
軟文怎么寫 2021-06-13
什么是網(wǎng)站優(yōu)化排名周期？ 2021-06-12

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

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

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