大色欧美,色老头网站久久网,最近最新手机中文字幕在线看,最新毛片网,a视频在线播放,中文字幕一区二区三区有限公司,国产成人精品视频免费

文本輸入框幾乎是每個(gè)UI設(shè)計(jì)師都必須用到的設(shè)計(jì)控件，它們無(wú)處不在，對(duì)于用戶體驗(yàn)的影響無(wú)疑是巨大的。雖然看起來(lái)很簡(jiǎn)單，但是一個(gè)設(shè)計(jì)成熟的文本輸入框，其實(shí)是要滿足許多“潛規(guī)則”的，這些規(guī)則你是否都了解？

文本輸入框幾乎是每個(gè)UI設(shè)計(jì)師都必須用到的設(shè)計(jì)控件，它們無(wú)處不在，對(duì)于用戶體驗(yàn)的影響無(wú)疑是巨大的。雖然看起來(lái)很簡(jiǎn)單，但是一個(gè)設(shè)計(jì)成熟的文本輸入框，其實(shí)是要滿足許多“潛規(guī)則”的，這些規(guī)則你是否都了解？

當(dāng)新用戶開(kāi)始使用一款A(yù)PP或者入駐某個(gè)網(wǎng)站的時(shí)候，至少最基本的信息都需要通過(guò)文本輸入來(lái)完成。產(chǎn)品經(jīng)理、設(shè)計(jì)師和開(kāi)發(fā)者也都明白，這才是最佳的解決方案。

今天的文章，我們專注于文本的字段輸入應(yīng)當(dāng)注意的一些核心因素。這些大都是最常見(jiàn)的規(guī)則，同時(shí)每一個(gè)規(guī)則都有一些值得注意的例外情況。

文本輸入框

文本輸入框是UI設(shè)計(jì)中最常見(jiàn)的控件，在絕大多數(shù)的場(chǎng)合用來(lái)給用戶輸入少量的文字。無(wú)論你使用的是哪個(gè)APP，大都需要你借助文本輸入框來(lái)獲取少量的個(gè)人信息（用戶名等）。當(dāng)你想要搜索某些信息的時(shí)候，打開(kāi)谷歌，至少也要通過(guò)搜索框輸入來(lái)完成最起碼的搜索請(qǐng)求。

清晰

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

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

Apple iOS 中的搜索框同時(shí)放置了標(biāo)簽和放大鏡圖標(biāo)

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

短文本標(biāo)簽

標(biāo)簽并非幫助性的說(shuō)明，所以你應(yīng)該使用的是簡(jiǎn)短（幾個(gè)字）的描述性的短語(yǔ)作為標(biāo)簽，以便用戶能夠快速掃視。如果有額外的信息，通過(guò)上下文或者額外的幫助性的說(shuō)明來(lái)讓用戶有所了解，而不是超長(zhǎng)的標(biāo)簽。

之前Amazon 的注冊(cè)頁(yè)面就因?yàn)槌L(zhǎng)的標(biāo)簽文本導(dǎo)致注冊(cè)過(guò)程緩慢。目前的版本強(qiáng)多了。

合理的輸入框尺寸

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

輸入框焦點(diǎn)

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

輸入提示

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

舉個(gè)例子，電話號(hào)碼的輸入就存在多種不同的方式，比如我們常見(jiàn)的“+86”，而更多的情況下大家可能會(huì)直接輸入一串11位的手機(jī)號(hào)，座機(jī)號(hào)碼的情況則更加復(fù)雜，有的人習(xí)慣加上區(qū)號(hào)，而又的人則不會(huì)。面對(duì)這種復(fù)雜的情況，你可以通過(guò)設(shè)計(jì)輸入框，加入輸入提示來(lái)“格式化”輸入內(nèi)容。還是以電話號(hào)碼的輸入為例：

這個(gè)輸入框的電話號(hào)碼格式已經(jīng)固化了，讓用戶可以清楚的知道應(yīng)該輸入哪種類型，多少位。

這個(gè)輸入框中加入了說(shuō)明性質(zhì)的文本占位符，清晰的說(shuō)明了應(yīng)當(dāng)輸入怎樣的號(hào)碼。它的缺陷在于用戶輸入的時(shí)候，占位符會(huì)消失。

幫助信息

幫助信息（或相關(guān)文字）應(yīng)當(dāng)出現(xiàn)在需要的地方，比如表單中用文字說(shuō)明為何需要填寫信用卡號(hào)，以及生日日期填寫之后的福利，又或者“服務(wù)條款”鏈接的存在。它們適時(shí)地出現(xiàn)，幫助用戶解釋了一些令人困惑的問(wèn)題。一般說(shuō)來(lái)，這類幫助信息最好不要超過(guò)100字。

僅限移動(dòng)端：鍵盤類型與文本輸入的匹配

在APP上用戶常常要輸入不同類型的文本，當(dāng)輸入框需要輸入數(shù)字的時(shí)候，結(jié)果彈出的是全鍵盤自然不方便，而需要輸入文本的時(shí)候則出現(xiàn)數(shù)字鍵盤就更加不合適了。

可訪問(wèn)性

目標(biāo)：確保不同狀況的用戶都能無(wú)障礙地、輕松瀏覽和填寫輸入框

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

永遠(yuǎn)不要使用全部是大寫字母的文本標(biāo)簽，這樣的標(biāo)簽通常都很難快速瀏覽，因?yàn)樽帜傅拇笮「叨榷际且恢碌?，?duì)于非英語(yǔ)言國(guó)家的用戶尤其麻煩。

字體尺寸

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

標(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ì)比度超過(guò)3:1

提供舒適的點(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)擊。一般說(shuō)來(lái)，拇指的觸發(fā)區(qū)域應(yīng)當(dāng)控制在 45~57px之間，但是在移動(dòng)端上，控件看起來(lái)太大會(huì)讓人覺(jué)得不舒服，所以你的文本框高度應(yīng)該設(shè)計(jì)在32~40px之間，這樣看起來(lái)足夠友好，又不會(huì)太大。

僅限桌面端：對(duì)鍵盤輸入友好的輸入框

這是一個(gè)歷史悠久的可用性設(shè)計(jì)：用戶應(yīng)當(dāng)能夠僅使用鍵盤就完成全部的內(nèi)容輸入的工作。許多深度用戶有這樣的需求，他們習(xí)慣于使用Tab 按鍵來(lái)切換不同的輸入框和控件，無(wú)需離開(kāi)鍵盤就可以填完表單。你可以在W3C的文檔中找到相應(yīng)的說(shuō)明。

用戶花費(fèi)

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

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

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

比如用戶的IP地址在很多時(shí)候就可以預(yù)先填寫。Whatsapp 則調(diào)用系統(tǒng)服務(wù)，幫你將地區(qū)編碼預(yù)先填寫在手機(jī)號(hào)碼之前，讓你的填寫體驗(yàn)更加舒適。

自動(dòng)完成和自動(dòng)建議

自動(dòng)完成是以下拉框的形式根據(jù)你輸入的內(nèi)容進(jìn)行實(shí)時(shí)補(bǔ)完的功能。這樣可以幫助用戶更準(zhǔn)確、高效地填寫信息。對(duì)于輸入困難、拼寫困難的用戶尤其有幫助，尤其是當(dāng)這種語(yǔ)言并非他們母語(yǔ)的時(shí)候。

自動(dòng)建議則會(huì)以列表的形式呈現(xiàn)相關(guān)的關(guān)鍵字或者短語(yǔ)，在匹配度上可能不會(huì)太多理想。自動(dòng)完成更多的是在于補(bǔ)完你填寫的內(nèi)容，而自動(dòng)建議則是為你推薦可能相關(guān)的短語(yǔ)、關(guān)鍵詞。

兩種結(jié)合起來(lái)可以讓用戶輸入的體驗(yàn)更加優(yōu)秀，Google搜索就是這么做的。