什么是觸屏鍵盤(pán)的設(shè)計(jì)準(zhǔn)則
什么是觸屏鍵盤(pán)的設(shè)計(jì)準(zhǔn)則
你們知道觸屏鍵盤(pán)有什么設(shè)計(jì)準(zhǔn)則嗎?不知道的話(huà)跟著學(xué)習(xí)啦小編一起來(lái)學(xué)習(xí)觸屏鍵盤(pán)的設(shè)計(jì)準(zhǔn)則吧。
觸屏鍵盤(pán)的設(shè)計(jì)準(zhǔn)則
通常來(lái)說(shuō)，人們會(huì)理所當(dāng)然的認(rèn)為觸屏設(shè)備要比幾十年的電腦鼠標(biāo)和鍵盤(pán)直觀(guān)的多。用戶(hù)與觸屏直接交互，縮小了用戶(hù)行為與軟件響應(yīng)之間的距離。然而，在移動(dòng)設(shè)備上——尤其是在智能手機(jī)上——打字是一件相當(dāng)恐怖的事情。因?yàn)槟羌嚷?，又痛苦，而且容易出錯(cuò)。
最明顯的原因是鍵盤(pán)字符的尺寸和按鍵之間的臨近，但是還有很多其他重要因素需要考慮，包括：
適當(dāng)?shù)氖褂米詣?dòng)更正的字典
貼切的將字母自動(dòng)大寫(xiě)
提示輸入類(lèi)型
保持標(biāo)簽順序
保持自定義鍵盤(pán)的一致性
在最近一次大規(guī)模的針對(duì)18個(gè)最大的移動(dòng)電子商務(wù)網(wǎng)站的1：1可用性測(cè)試中，我們觀(guān)察了在填寫(xiě)表格過(guò)程中，現(xiàn)在的觸屏鍵盤(pán)的某些功能與限制是如何與用戶(hù)的預(yù)期相沖突的。一旦沖突出現(xiàn)，用戶(hù)的受挫感會(huì)立刻上升，比如表單字段驗(yàn)證錯(cuò)誤的提示一個(gè)接一個(gè)的彈出來(lái)，或者更糟的是，用戶(hù)被卡住并最終放棄了網(wǎng)站。
當(dāng)面對(duì)一個(gè)不那么理想的觸屏鍵盤(pán)是，用戶(hù)會(huì)對(duì)網(wǎng)站失去信心，有的甚至懷疑自己用智能手機(jī)填完一個(gè)表單的能力。顯然，好的移動(dòng)終端的用戶(hù)體驗(yàn)需要一個(gè)具有良好可用性的表單，觸屏鍵盤(pán)也是其中的關(guān)鍵一環(huán)。
在本篇文章里，我們將圍繞觸屏鍵盤(pán)的可用性問(wèn)題做深入一點(diǎn)的探討，包括5條設(shè)計(jì)準(zhǔn)則，可以緩解一些問(wèn)題。這個(gè)設(shè)計(jì)準(zhǔn)則摘自移動(dòng)電子商務(wù)可用性報(bào)告中147條指南。前段時(shí)間我們?cè)赟mashing Magazine上看了移動(dòng)電子商務(wù)10條準(zhǔn)則，這5條觸屏鍵盤(pán)的準(zhǔn)則會(huì)更具有通用性，可以應(yīng)用于用戶(hù)與觸屏鍵盤(pán)有交互的任何手機(jī)網(wǎng)站。
此外，我們還以這5條準(zhǔn)則為基準(zhǔn)審視了排名前50的在線(xiàn)零售商的移動(dòng)端網(wǎng)站，發(fā)現(xiàn)98%的網(wǎng)站犯了一個(gè)或多個(gè)錯(cuò)誤，70%的熱門(mén)移動(dòng)端網(wǎng)站犯了至少兩個(gè)錯(cuò)誤(截至到2013年7月31日)。盡管有些指南可能剛開(kāi)始看起來(lái)是顯而易見(jiàn)的，但當(dāng)如此多的電子商務(wù)站點(diǎn)都犯了這樣的錯(cuò)誤，我們顯然需要更仔細(xì)的審視這些指南。
1、當(dāng)詞典匱乏時(shí)，禁用自動(dòng)更正(92%的網(wǎng)站犯了此錯(cuò)誤)
問(wèn)題：當(dāng)用戶(hù)真的注意到差勁的自動(dòng)更正時(shí)會(huì)感到很挫敗，如果他們沒(méi)有注意到更改，將會(huì)是一件更糟糕的事情。
自動(dòng)更正通常在以下情況表現(xiàn)非常糟糕：縮寫(xiě)，街道名稱(chēng)，email地址以及其他詞典里沒(méi)有的詞匯。這在整個(gè)測(cè)試過(guò)程中造成了很大的問(wèn)題，隨著被試者完成購(gòu)買(mǎi)，大量錯(cuò)誤數(shù)據(jù)被提交。
當(dāng)被試者在網(wǎng)站上街道名稱(chēng)一欄輸入”westheimer”時(shí)，手機(jī)將其錯(cuò)誤的更正為”weathermen”(如左圖)。然而，被試者并沒(méi)有注意到，提交表單后收到了一個(gè)錯(cuò)誤驗(yàn)證(如右圖)。
關(guān)于自動(dòng)更正的一個(gè)主要問(wèn)題就是，用戶(hù)通常不會(huì)注意到更正(因?yàn)橛脩?hù)通常關(guān)注的是他們正在輸入什么，而不是已經(jīng)輸入的內(nèi)容)。如果更正是正確的，那就沒(méi)問(wèn)題，但如果更正是錯(cuò)誤的，那將會(huì)是很糟糕的事情。例如，在測(cè)試過(guò)程中多次碰到的例子，由于被試者并沒(méi)有注意到自動(dòng)更正，原本有效的地址信息被自動(dòng)更正為無(wú)效信息并被提交。
在沒(méi)有地址驗(yàn)證的網(wǎng)站上，這會(huì)導(dǎo)致訂單被送到錯(cuò)誤的地址，除非被試者特意仔細(xì)的查看訂單確認(rèn)頁(yè)(畢竟，自動(dòng)更正的信息通?？雌饋?lái)與輸入的信息非常相似，這也使得用戶(hù)很少會(huì)注意到信息是錯(cuò)誤的)。當(dāng)然，自動(dòng)更正在地址上的慘痛失敗并不僅僅是在邊界的例子(如”weatherman”)，而且在一些常見(jiàn)的(標(biāo)準(zhǔn)化)縮寫(xiě)也是如此，比如”Rd”會(huì)被自動(dòng)更正為”Ed”。
話(huà)雖這么說(shuō)，自動(dòng)更正在其他場(chǎng)景還是有用處的，會(huì)將無(wú)效數(shù)據(jù)更正為有效數(shù)據(jù)。因此，并不推薦在所有場(chǎng)景(如評(píng)論區(qū))禁用自動(dòng)更正。相反，要慎重使用自動(dòng)更正，只在詞典匱乏的場(chǎng)景禁用。這通常包括各式各樣的正確名稱(chēng)(街道，城市，人物)以及其他標(biāo)識(shí)(email地址，優(yōu)惠券代碼，等等)。
盡管看似簡(jiǎn)單，實(shí)踐起來(lái)這卻是迄今為止觸屏鍵盤(pán)可用性當(dāng)中最容易被忽視的部分;幾乎所有的熱門(mén)移動(dòng)電子商務(wù)網(wǎng)站都會(huì)犯這個(gè)錯(cuò)誤。上文提到的調(diào)查顯示，其中有92%的網(wǎng)站在地址輸入框里沒(méi)有禁用自動(dòng)更正。鑒于在地址和email地址輸入框使用自動(dòng)更正帶來(lái)問(wèn)題的嚴(yán)重性，卻幾乎沒(méi)有什么網(wǎng)站在這里禁用自動(dòng)更正，這真的很驚人。
你可以在標(biāo)簽上增加屬性并設(shè)置為關(guān)閉，來(lái)禁用自動(dòng)更正，就像這樣：
2、彈出不合適的鍵盤(pán)(60%的網(wǎng)站犯了此錯(cuò)誤)
問(wèn)題：彈出不合適的鍵盤(pán)會(huì)降低輸入速度，用戶(hù)經(jīng)常會(huì)因?yàn)闃?biāo)準(zhǔn)鍵盤(pán)上數(shù)字的很小的點(diǎn)擊區(qū)域以及間距而打錯(cuò)很長(zhǎng)一串?dāng)?shù)字。
智能手機(jī)上觸屏鍵盤(pán)的一個(gè)很大局限就是它的尺寸。字符本身也都是非常小的。事實(shí)上，在iPhone4豎屏?xí)r一個(gè)字符的大小是4*5.9毫米。
再來(lái)對(duì)照一下蘋(píng)果自己的設(shè)計(jì)準(zhǔn)則，其中提到所有可點(diǎn)擊的界面元素至少要有6.85*6.85毫米，因?yàn)槿魏涡∮谶@個(gè)尺寸的元素點(diǎn)擊準(zhǔn)確度都會(huì)非常的差(微軟和諾基亞同樣制定了最小點(diǎn)擊區(qū)域?yàn)?*7毫米)?？梢灶A(yù)見(jiàn)，這將會(huì)導(dǎo)致拼寫(xiě)錯(cuò)誤。
但是通過(guò)更改輸入框代碼的一到兩個(gè)屬性，你就可以讓用戶(hù)的手機(jī)自動(dòng)顯示所需輸入的最合適的鍵盤(pán)。例如，你可以為信用卡號(hào)輸入框調(diào)用數(shù)字鍵盤(pán)，為電話(huà)號(hào)碼輸入框調(diào)用撥號(hào)鍵盤(pán)，為電子郵件地址輸入框調(diào)用電子郵件的鍵盤(pán)。這樣可以節(jié)省用戶(hù)必須切換傳統(tǒng)鍵盤(pán)的時(shí)間，并且在輸入數(shù)字的場(chǎng)景中，最大限度的減少輸入錯(cuò)誤，因?yàn)檫@樣的專(zhuān)用鍵盤(pán)按鍵尺寸更大，會(huì)減少意外輸錯(cuò)的機(jī)率。
Best Buy的信用卡號(hào)輸入框調(diào)用了標(biāo)準(zhǔn)鍵盤(pán)，所以用戶(hù)必須先切換至數(shù)字和字符鍵盤(pán)，然后準(zhǔn)確無(wú)誤的輸入16位數(shù)字。這對(duì)于被試者是件很困難的事情，他們要來(lái)回看著信用卡和手機(jī)，小心翼翼的點(diǎn)擊數(shù)字鍵，不碰到旁邊的鍵。
在整個(gè)測(cè)試中，很多被試者都注意到了專(zhuān)用鍵盤(pán)，并對(duì)它們贊許有加。事實(shí)上，在iOS中，數(shù)字鍵盤(pán)的點(diǎn)擊區(qū)域要比標(biāo)準(zhǔn)鍵盤(pán)大471%(數(shù)字鍵盤(pán)209*108像素vs標(biāo)準(zhǔn)鍵盤(pán)52*76像素)。更重要的是，我們發(fā)現(xiàn)在數(shù)字輸入框里采用數(shù)字鍵盤(pán)時(shí)錯(cuò)別字明顯減少。這會(huì)導(dǎo)致更少的驗(yàn)證錯(cuò)誤，反過(guò)來(lái)，也可以將網(wǎng)站引向一個(gè)更好更無(wú)縫的購(gòu)物體驗(yàn)。這對(duì)于長(zhǎng)數(shù)字隊(duì)列尤為明顯，比如電話(huà)號(hào)碼以及信用卡號(hào)。
左圖，一個(gè)被試者由于標(biāo)準(zhǔn)鍵盤(pán)按鍵尺寸小且鄰近，在輸入”1″的時(shí)候不小心按到了橫劃線(xiàn)。這個(gè)時(shí)候調(diào)用數(shù)字鍵盤(pán)會(huì)更加合適。右圖，用戶(hù)在GAP網(wǎng)站上輸入”日間聯(lián)系電話(huà)”時(shí)，調(diào)出的是專(zhuān)門(mén)優(yōu)化過(guò)的鍵盤(pán)，按鍵比標(biāo)準(zhǔn)鍵盤(pán)大471%。
調(diào)用專(zhuān)用鍵盤(pán)的另一個(gè)好處就是可以表明需要輸入的是什么內(nèi)容，如果輸入框標(biāo)題滑出視線(xiàn)范圍或是用戶(hù)不確定要輸入什么的時(shí)候，這會(huì)很有用。然而，數(shù)字鍵盤(pán)也有一定的局限性，因?yàn)樗辉试S用戶(hù)輸入拼音字符，只有少量特殊字符或分隔符，也可能連這個(gè)都沒(méi)有。所以，只有最合適的時(shí)候再調(diào)用這樣的鍵盤(pán)，這很重要，比如輸入電話(huà)號(hào)碼、郵政編碼、信用卡號(hào)以及信用卡安全碼。同樣的，在調(diào)用鍵盤(pán)時(shí)，確保你給出的格式樣例是可以復(fù)制的。
根據(jù)給出的樣例格式(比如”555-555-5555″)輸入電話(huà)號(hào)碼在iOS上是不可能的，因?yàn)檎{(diào)出的鍵盤(pán)是沒(méi)有橫劃線(xiàn)的。(有趣的是，在A(yíng)ndroid系統(tǒng)上輸入是可以的，這也說(shuō)明了為什么在多個(gè)平臺(tái)測(cè)試有助于確保在格式樣例只在有些平臺(tái)上必須。)
說(shuō)了這么多可用性上的優(yōu)點(diǎn)，你可能會(huì)想這種專(zhuān)用鍵盤(pán)是被廣泛應(yīng)用的。然而，60%的熱門(mén)移動(dòng)電子商務(wù)網(wǎng)站在對(duì)應(yīng)的場(chǎng)景并沒(méi)有調(diào)用它們，如電子郵件(電子郵件鍵盤(pán))、電話(huà)號(hào)碼(撥號(hào)鍵盤(pán))以及信用卡號(hào)(數(shù)字鍵盤(pán))。
技術(shù)上來(lái)說(shuō)，有很多種方式可以調(diào)出數(shù)字鍵盤(pán)，每種鍵盤(pán)之間略有差別(如撥號(hào)鍵盤(pán)和數(shù)字鍵盤(pán))，不同平臺(tái)間行為也會(huì)有輕微的不同(iOS，Android等)。大體來(lái)說(shuō)有兩種HTML屬性可以調(diào)用數(shù)字鍵盤(pán)，分別是type和pattern屬性。
Type屬性承載語(yǔ)義的含義，僅僅當(dāng)輸入時(shí)有合適的類(lèi)型可調(diào)用時(shí)才會(huì)被用到，這主要是針對(duì)電話(huà)號(hào)碼和電子郵件地址的場(chǎng)景。不過(guò)對(duì)于數(shù)字輸入，更推薦使用pattern屬性來(lái)替代。(注意如果你僅僅是想要瀏覽器調(diào)用鍵盤(pán)，并不強(qiáng)制格式，可以加入novalidate屬性。)
針對(duì)任何電話(huà)號(hào)碼框，用如下代碼：
針對(duì)其他你想要調(diào)用數(shù)字鍵盤(pán)的輸入框，用如下代碼：
針對(duì)任何電子郵件地址框，用如下代碼：
正如上面提到的，各種數(shù)字鍵盤(pán)之間會(huì)有一些區(qū)別，在不同平臺(tái)之間也會(huì)有一些不同。例如，在iOS平臺(tái)上，上述代碼調(diào)出的電話(huà)鍵盤(pán)可以讓用戶(hù)輸入數(shù)字以及少量電話(huà)相關(guān)的特殊字符和分隔符，而調(diào)起的數(shù)字鍵盤(pán)只能輸入數(shù)字。與此同時(shí)，在A(yíng)ndroid平臺(tái)上，調(diào)起的電話(huà)鍵盤(pán)則有著更多的特殊字符，支持更多格式的電話(huà)號(hào)碼。
但是，由pattern屬性調(diào)起數(shù)字鍵盤(pán)在A(yíng)ndroid上根本不支持，相反，它只會(huì)調(diào)起常用的字母鍵盤(pán)。雖然在iOS和Android平臺(tái)上，你都可以使用type=”number”調(diào)起數(shù)字鍵盤(pán)，但將type設(shè)置為number帶有語(yǔ)義含義，在很多場(chǎng)景下并不合適(比如信用卡號(hào)是一個(gè)數(shù)字隊(duì)列，不單單是一個(gè)數(shù)字)。
所以，我們推薦更為保守的策略，使用pattern=”d*”，這樣在iOS平臺(tái)上可以有更好的體驗(yàn)，在其他不支持該屬性的平臺(tái)上也不會(huì)有什么影響。(當(dāng)然了，如果輸入框就是針對(duì)一個(gè)數(shù)字的，比如價(jià)格或是數(shù)量，那么顯然應(yīng)該使用type=”number”了。)
3、保持一致，調(diào)用合適的鍵盤(pán)(54%的網(wǎng)站犯了此錯(cuò)誤)
問(wèn)題：如果一個(gè)輸入框調(diào)用了專(zhuān)用鍵盤(pán)而其他類(lèi)似的輸入框卻沒(méi)有，那么在沒(méi)有調(diào)用專(zhuān)用鍵盤(pán)時(shí)用戶(hù)會(huì)感到困惑，并開(kāi)始質(zhì)疑這個(gè)輸入框所需輸入的類(lèi)型。
為特定輸入框調(diào)用合適的鍵盤(pán)是正確的做法(參見(jiàn)上面的推薦)，但是要確保在你的網(wǎng)站上保持一致，否則會(huì)讓用戶(hù)很困惑。換句話(huà)說(shuō)，如果郵政編碼的輸入框調(diào)用了數(shù)字鍵盤(pán)，那么類(lèi)似的輸入框也要有同樣的做法。
盡管這聽(tīng)起來(lái)是顯而易見(jiàn)的，但很多網(wǎng)站都沒(méi)有在調(diào)用專(zhuān)用鍵盤(pán)上保持一致。例如，花店FTD(如上圖)在填寫(xiě)信用卡號(hào)的時(shí)候調(diào)用了數(shù)字鍵盤(pán)，但在緊接著下面的安全碼輸入框卻沒(méi)有，雖然這兩個(gè)值都是數(shù)字。
在50個(gè)快速增長(zhǎng)的熱門(mén)在線(xiàn)零售商中，54%的網(wǎng)站在他們的移動(dòng)站點(diǎn)上犯了這個(gè)錯(cuò)誤，多多少少都會(huì)有一個(gè)或是多個(gè)電話(huà)輸入框，信用卡號(hào)碼或是信用卡核對(duì)(CVV)輸入框沒(méi)有調(diào)用數(shù)字鍵盤(pán)。這54%的數(shù)據(jù)細(xì)則如下(絕對(duì)值)：24%的網(wǎng)站沒(méi)有為這三類(lèi)中任何一種調(diào)用數(shù)字鍵盤(pán)(盡管這也是一致的，但是錯(cuò)誤的示范)，剩下30%的網(wǎng)站(包括FTD)不一致，只有在一部分輸入框才會(huì)調(diào)用數(shù)字鍵盤(pán)。
更令人驚訝的是，在整個(gè)可用性測(cè)試中，由于這樣的問(wèn)題讓一些被試者很困惑。他們開(kāi)始質(zhì)疑對(duì)于個(gè)別輸入框最初的解讀，認(rèn)為可能需要填寫(xiě)一些其他的內(nèi)容。例如，當(dāng)看到”信用卡安全碼”輸入框彈出了標(biāo)準(zhǔn)鍵盤(pán)時(shí)(如上圖FTD的網(wǎng)站)，被試者開(kāi)始懷疑這是否就是填寫(xiě)信用卡背面的那三個(gè)數(shù)字，或是印在卡上的其他字符串。
4、兌現(xiàn)”上一項(xiàng)”和”下一項(xiàng)”按鈕的行為(4%的網(wǎng)站犯了此錯(cuò)誤)
問(wèn)題：如果”上一項(xiàng)”和”下一項(xiàng)”按鈕把用戶(hù)帶去了不合邏輯順序的輸入框，用戶(hù)會(huì)很煩惱和困惑。
在測(cè)試中，被試者在未能兌現(xiàn)”上一項(xiàng)”"下一項(xiàng)”按鈕行為的網(wǎng)站上感到煩惱。用戶(hù)預(yù)期的行為很簡(jiǎn)單：當(dāng)用戶(hù)點(diǎn)擊”下一項(xiàng)”按鈕，他們會(huì)預(yù)期跳到表單中下一個(gè)合乎邏輯的輸入框，沒(méi)有其他變化，甚至提交表單。”上一項(xiàng)”按鈕也一樣，當(dāng)然是換個(gè)相反的方向。
這不僅僅是需要有正確的標(biāo)簽序列(雖說(shuō)這是一個(gè)好的開(kāi)始)。當(dāng)需要依賴(lài)于用戶(hù)先前的選擇處理動(dòng)態(tài)輸入控件時(shí)，事情往往會(huì)出差錯(cuò)。在這些情況下，我們已經(jīng)看到用戶(hù)數(shù)據(jù)被刪除或是標(biāo)簽序列被違反。我們也必須要格外注意自定義表單的接口。例如，在迪士尼商務(wù)網(wǎng)站，定制化的狀態(tài)選擇器不屬于標(biāo)簽序列(因?yàn)閺募夹g(shù)上來(lái)說(shuō)它并不是一個(gè)輸入元素)，所以用戶(hù)就會(huì)跳過(guò)這個(gè)狀態(tài)控件。
填寫(xiě)了郵政編碼以后(如左圖)，被試者點(diǎn)擊”下一項(xiàng)”按鈕，正確的跳轉(zhuǎn)到菜單中的下一項(xiàng)”場(chǎng)所類(lèi)型”(如右圖)。但如圖所示，網(wǎng)站清空了被試者前一個(gè)輸入的數(shù)據(jù)。很顯然，當(dāng)使用”下一項(xiàng)”和”上一項(xiàng)”按鈕時(shí)數(shù)據(jù)應(yīng)該是被保留的。
這些按鈕的功能基本上是充當(dāng)鍵盤(pán)上tab鍵的移動(dòng)版;所以，它們應(yīng)該采用和電腦鍵盤(pán)tab一樣的序列規(guī)則。它們應(yīng)該提供從一個(gè)輸入框到下一個(gè)輸入框的快捷方式，不需要任何點(diǎn)擊(不論是鼠標(biāo)還是手指)。這在手機(jī)上是尤為重要的，因?yàn)楫?dāng)鍵盤(pán)呼出的時(shí)候，屏幕空間是有限的，下一個(gè)輸入框可能被部分遮擋，這個(gè)時(shí)候”下一項(xiàng)”按鈕則用起來(lái)很方便。所以，盡管”上一項(xiàng)”和”下一項(xiàng)”按鈕有可能不會(huì)被所有用戶(hù)用到，但禁用這些按鈕的行為會(huì)導(dǎo)致很?chē)?yán)重的后果。
幸運(yùn)的是，大部分網(wǎng)站這一點(diǎn)都做的很好。只要代碼是清晰的，手機(jī)瀏覽器會(huì)默認(rèn)將輸入框出現(xiàn)的順序作為標(biāo)簽序列。在熱門(mén)移動(dòng)端網(wǎng)站中，只有4%的網(wǎng)站犯了此錯(cuò)誤。
5、在適當(dāng)?shù)那闆r下，禁用自動(dòng)大寫(xiě)(38%的網(wǎng)站犯了此錯(cuò)誤)
問(wèn)題：幾乎所有的被試者都認(rèn)為他們的電子郵件地址必須要小寫(xiě)，所以這項(xiàng)數(shù)據(jù)自動(dòng)大寫(xiě)會(huì)給整個(gè)過(guò)程帶來(lái)不必要的麻煩。
智能手機(jī)默認(rèn)會(huì)把標(biāo)準(zhǔn)文本輸入框的首字母大寫(xiě)，這在大部分情況下是合適的。然而，在有些情況下禁用自動(dòng)大寫(xiě)是更合適的，特別是像電子郵件地址這種絕大多數(shù)用戶(hù)都以為要小寫(xiě)的情況。
該名被試者注意到了首字母”J”，并移回光標(biāo)將其改為小寫(xiě)”j”，因?yàn)樗淮_定大寫(xiě)字母是不是可以通過(guò)驗(yàn)證。
測(cè)試中的大部分時(shí)候，被試者都注意到了大寫(xiě)字母，并明確的將其改為小寫(xiě)。最合理的解釋是他們不確定是否允許填寫(xiě)大寫(xiě)字母，或電子郵件地址是否區(qū)分大小寫(xiě)。在那些電子郵件輸入框禁用了自動(dòng)大寫(xiě)的網(wǎng)站上，沒(méi)有被試者會(huì)主動(dòng)將首字母大寫(xiě)。推薦大家在電子郵件或是其他合適的場(chǎng)景(如網(wǎng)址URL)禁用自動(dòng)大寫(xiě)。
在熱門(mén)移動(dòng)電子商務(wù)網(wǎng)站中，38%的網(wǎng)站在電子郵件地址輸入框沒(méi)有禁用自動(dòng)大寫(xiě)，把它們?cè)O(shè)置為純文本輸入框，給用戶(hù)留下非技術(shù)性的困惑。
可以在標(biāo)簽上加入autocapitalize屬性并設(shè)置為off，來(lái)禁用自動(dòng)大寫(xiě)，如下所示：
當(dāng)然，針對(duì)電子郵件輸入框，你也可以設(shè)置一個(gè)type屬性為email：
在iOS系統(tǒng)上，設(shè)置type屬性為email將會(huì)自動(dòng)禁用自動(dòng)大寫(xiě)。然而，最好仍然設(shè)置autocapitalize屬性，因?yàn)檫@不僅在iOS系統(tǒng)上奏效，而且在其他還不支持email輸入框類(lèi)型或是實(shí)現(xiàn)方式不同的平臺(tái)也可以使用。
測(cè)試以及絕密小抄
雖然這些基本原理看上去是顯而易見(jiàn)的，但是要記得全球最大的移動(dòng)電子商務(wù)網(wǎng)站中98%的網(wǎng)站違反了至少一條。70%的網(wǎng)站違反了兩條甚至更多的”基礎(chǔ)”觸摸鍵盤(pán)準(zhǔn)則。事實(shí)上，24%的網(wǎng)站根本沒(méi)有為觸屏鍵盤(pán)輸入做過(guò)什么優(yōu)化，就算是省掉標(biāo)準(zhǔn)鍵盤(pán)(在輸入電話(huà)、電子郵件、數(shù)字等情況)，偶爾調(diào)用專(zhuān)用鍵盤(pán)(一致性很差)，在合適的地方禁用自動(dòng)更正，抑或是在電子郵件地址輸入框禁用自動(dòng)大寫(xiě)，這些都沒(méi)有。
不遵守設(shè)計(jì)準(zhǔn)則的一個(gè)原因可能是，針對(duì)一個(gè)大型網(wǎng)站所做的全局測(cè)試需要去發(fā)現(xiàn)所有的明顯缺陷——故而，理想情況下的第三項(xiàng)建議中提到調(diào)用鍵盤(pán)的一致性問(wèn)題，是不必要被提及的。另外一個(gè)原因是，手機(jī)和觸屏界面是一個(gè)相對(duì)較新的平臺(tái)，它的全新的界面理論需要大家去關(guān)注無(wú)數(shù)的小的細(xì)節(jié)——這些細(xì)節(jié)對(duì)于我們網(wǎng)頁(yè)設(shè)計(jì)師和開(kāi)發(fā)者來(lái)說(shuō)還不習(xí)慣去主動(dòng)尋找和設(shè)計(jì)。
觸屏鍵盤(pán)的設(shè)計(jì)準(zhǔn)則相關(guān)文章：