觸屏鍵盤設(shè)計準(zhǔn)則

(

通常來說，人們會理所當(dāng)然的認(rèn)為觸屏設(shè)備要比幾十年的電腦鼠標(biāo)和鍵盤直觀的多。用戶與觸屏直接交互，縮小了用戶行為與軟件響應(yīng)之間的距離。然而，在移動設(shè)備上——尤其是在智能手機(jī)上——打字是一件相當(dāng)恐怖的事情。因?yàn)槟羌嚷?，又痛苦，而且容易出錯。

最明顯的原因是鍵盤字符的尺寸和按鍵之間的臨近，但是還有很多其他重要因素需要考慮，包括：

•  適當(dāng)?shù)氖褂米詣痈淖值?
• 貼切的將字母自動大寫
• 提示輸入類型
• 保持標(biāo)簽順序
• 保持自定義鍵盤的一致性

在最近一次大規(guī)模的針對18個大的移動電子商務(wù)網(wǎng)站的1：1可用性測試中，我們觀察了在填寫表格過程中，現(xiàn)在的觸屏鍵盤的某些功能與限制是如何與用戶的預(yù)期相沖突的。一旦沖突出現(xiàn)，用戶的受挫感會立刻上升，比如表單字段驗(yàn)證錯誤的提示一個接一個的彈出來，或者更糟的是，用戶被卡住并最終放棄了網(wǎng)站。

當(dāng)面對一個不那么理想的觸屏鍵盤是，用戶會對網(wǎng)站失去信心，有的甚至懷疑自己用智能手機(jī)填完一個表單的能力。顯然，好的移動終端的用戶體驗(yàn)需要一個具有良好可用性的表單，觸屏鍵盤也是其中的關(guān)鍵一環(huán)。

在本篇文章里，我們將圍繞觸屏鍵盤的可用性問題做深入一點(diǎn)的探討，包括5條設(shè)計準(zhǔn)則，可以緩解一些問題。這個設(shè)計準(zhǔn)則摘自移動電子商務(wù)可用性報告中147條指南。前段時間我們在Smashing Magazine上看了移動電子商務(wù)10條準(zhǔn)則，這5條觸屏鍵盤的準(zhǔn)則會更具有通用性，可以應(yīng)用于用戶與觸屏鍵盤有交互的任何手機(jī)網(wǎng)站。

此外，我們還以這5條準(zhǔn)則為基準(zhǔn)審視了排名前50的在線零售商的移動端網(wǎng)站，發(fā)現(xiàn)98%的網(wǎng)站犯了一個或多個錯誤，70%的熱門移動端網(wǎng)站犯了至少兩個錯誤（截至到2013年7月31日）。盡管有些指南可能剛開始看起來是顯而易見的，但當(dāng)如此多的電子商務(wù)站點(diǎn)都犯了這樣的錯誤，我們顯然需要更仔細(xì)的審視這些指南。

1、當(dāng)詞典匱乏時，禁用自動更正（92%的網(wǎng)站犯了此錯誤）

問題：當(dāng)用戶真的注意到差勁的自動更正時會感到很挫敗，如果他們沒有注意到更改，將會是一件更糟糕的事情。

自動更正通常在以下情況表現(xiàn)非常糟糕：縮寫，街道名稱，email地址以及其他詞典里沒有的詞匯。這在整個測試過程中造成了很大的問題，隨著被試者完成購買，大量錯誤數(shù)據(jù)被提交。

關(guān)于自動更正的一個主要問題就是，用戶通常不會注意到更正（因?yàn)橛脩敉ǔｊP(guān)注的是他們正在輸入什么，而不是已經(jīng)輸入的內(nèi)容）。如果更正是正確的，那就沒問題，但如果更正是錯誤的，那將會是很糟糕的事情。例如，在測試過程中多次碰到的例子，由于被試者并沒有注意到自動更正，原本有效的地址信息被自動更正為無效信息并被提交。

在沒有地址驗(yàn)證的網(wǎng)站上，這會導(dǎo)致訂單被送到錯誤的地址，除非被試者特意仔細(xì)的查看訂單確認(rèn)頁（畢竟，自動更正的信息通?？雌饋砼c輸入的信息非常相似，這也使得用戶很少會注意到信息是錯誤的）。當(dāng)然，自動更正在地址上的慘痛失敗并不僅僅是在邊界的例子（如“weatherman”），而且在一些常見的（標(biāo)準(zhǔn)化）縮寫也是如此，比如“Rd”會被自動更正為“Ed”。

話雖這么說，自動更正在其他場景還是有用處的，會將無效數(shù)據(jù)更正為有效數(shù)據(jù)。因此，并不推薦在所有場景（如評論區(qū)）禁用自動更正。相反，要慎重使用自動更正，只在詞典匱乏的場景禁用。這通常包括各式各樣的正確名稱（街道，城市，人物）以及其他標(biāo)識（email地址，優(yōu)惠券代碼，等等）。

盡管看似簡單，實(shí)踐起來這卻是迄今為止觸屏鍵盤可用性當(dāng)中最容易被忽視的部分；幾乎所有的熱門移動電子商務(wù)網(wǎng)站都會犯這個錯誤。上文提到的調(diào)查顯示，其中有92%的網(wǎng)站在地址輸入框里沒有禁用自動更正。鑒于在地址和email地址輸入框使用自動更正帶來問題的嚴(yán)重性，卻幾乎沒有什么網(wǎng)站在這里禁用自動更正，這真的很驚人。

你可以在標(biāo)簽上增加屬性并設(shè)置為關(guān)閉，來禁用自動更正，就像這樣：

2、彈出合適的鍵盤（60%的網(wǎng)站犯了此錯誤）

問題：彈出不合適的鍵盤會降低輸入速度，用戶經(jīng)常會因?yàn)闃?biāo)準(zhǔn)鍵盤上數(shù)字的很小的點(diǎn)擊區(qū)域以及間距而打錯很長一串?dāng)?shù)字。

智能手機(jī)上觸屏鍵盤的一個很大局限就是它的尺寸。字符本身也都是非常小的。事實(shí)上，在iPhone4豎屏?xí)r一個字符的大小是4*5.9毫米。

再來對照一下蘋果自己的設(shè)計準(zhǔn)則，其中提到所有可點(diǎn)擊的界面元素至少要有6.85*6.85毫米，因?yàn)槿魏涡∮谶@個尺寸的元素點(diǎn)擊準(zhǔn)確度都會非常的差（微軟和諾基亞同樣制定了最小點(diǎn)擊區(qū)域?yàn)?*7毫米）。可以預(yù)見，這將會導(dǎo)致拼寫錯誤。

但是通過更改輸入框代碼的一到兩個屬性，你就可以讓用戶的手機(jī)自動顯示所需輸入的最合適的鍵盤。例如，你可以為信用卡號輸入框調(diào)用數(shù)字鍵盤，為電話號碼輸入框調(diào)用撥號鍵盤，為電子郵件地址輸入框調(diào)用電子郵件的鍵盤。這樣可以節(jié)省用戶必須切換傳統(tǒng)鍵盤的時間，并且在輸入數(shù)字的場景中，大限度的減少輸入錯誤，因?yàn)檫@樣的專用鍵盤按鍵尺寸更大，會減少意外輸錯的機(jī)率。

在整個測試中，很多被試者都注意到了專用鍵盤，并對它們贊許有加。事實(shí)上，在iOS中，數(shù)字鍵盤的點(diǎn)擊區(qū)域要比標(biāo)準(zhǔn)鍵盤大471%（數(shù)字鍵盤209*108像素vs標(biāo)準(zhǔn)鍵盤52*76像素）。更重要的是，我們發(fā)現(xiàn)在數(shù)字輸入框里采用數(shù)字鍵盤時錯別字明顯減少。這會導(dǎo)致更少的驗(yàn)證錯誤，反過來，也可以將網(wǎng)站引向一個更好更無縫的購物體驗(yàn)。這對于長數(shù)字隊(duì)列尤為明顯，比如電話號碼以及信用卡號。

調(diào)用專用鍵盤的另一個好處就是可以表明需要輸入的是什么內(nèi)容，如果輸入框標(biāo)題滑出視線范圍或是用戶不確定要輸入什么的時候，這會很有用。然而，數(shù)字鍵盤也有一定的局限性，因?yàn)樗辉试S用戶輸入拼音字符，只有少量特殊字符或分隔符，也可能連這個都沒有。所以，只有最合適的時候再調(diào)用這樣的鍵盤，這很重要，比如輸入電話號碼、郵政編碼、信用卡號以及信用卡安全碼。同樣的，在調(diào)用鍵盤時，確保你給出的格式樣例是可以復(fù)制的。

說了這么多可用性上的優(yōu)點(diǎn)，你可能會想這種專用鍵盤是被廣泛應(yīng)用的。然而，60%的熱門移動電子商務(wù)網(wǎng)站在對應(yīng)的場景并沒有調(diào)用它們，如電子郵件（電子郵件鍵盤）、電話號碼（撥號鍵盤）以及信用卡號（數(shù)字鍵盤）。

技術(shù)上來說，有很多種方式可以調(diào)出數(shù)字鍵盤，每種鍵盤之間略有差別（如撥號鍵盤和數(shù)字鍵盤），不同平臺間行為也會有輕微的不同（iOS，Android等）。大體來說有兩種HTML屬性可以調(diào)用數(shù)字鍵盤，分別是type和pattern屬性。

Type屬性承載語義的含義，僅僅當(dāng)輸入時有合適的類型可調(diào)用時才會被用到，這主要是針對電話號碼和電子郵件地址的場景。不過對于數(shù)字輸入，更推薦使用pattern屬性來替代。（注意如果你僅僅是想要瀏覽器調(diào)用鍵盤，并不強(qiáng)制格式，可以加入novalidate屬性。）

針對任何電話號碼框，用如下代碼：

針對其他你想要調(diào)用數(shù)字鍵盤的輸入框，用如下代碼：

針對任何電子郵件地址框，用如下代碼：

正如上面提到的，各種數(shù)字鍵盤之間會有一些區(qū)別，在不同平臺之間也會有一些不同。例如，在iOS平臺上，上述代碼調(diào)出的電話鍵盤可以讓用戶輸入數(shù)字以及少量電話相關(guān)的特殊字符和分隔符，而調(diào)起的數(shù)字鍵盤只能輸入數(shù)字。與此同時，在Android平臺上，調(diào)起的電話鍵盤則有著更多的特殊字符，支持更多格式的電話號碼。

但是，由pattern屬性調(diào)起數(shù)字鍵盤在Android上根本不支持，相反，它只會調(diào)起常用的字母鍵盤。雖然在iOS和Android平臺上，你都可以使用type=“number”調(diào)起數(shù)字鍵盤，但將type設(shè)置為number帶有語義含義，在很多場景下并不合適（比如信用卡號是一個數(shù)字隊(duì)列，不單單是一個數(shù)字）。

所以，我們推薦更為保守的策略，使用pattern=“\d*”，這樣在iOS平臺上可以有更好的體驗(yàn)，在其他不支持該屬性的平臺上也不會有什么影響。（當(dāng)然了，如果輸入框就是針對一個數(shù)字的，比如價格或是數(shù)量，那么顯然應(yīng)該使用type=“number”了。）

3、保持一致，調(diào)用合適的鍵盤（54%的網(wǎng)站犯了此錯誤）

問題：如果一個輸入框調(diào)用了專用鍵盤而其他類似的輸入框卻沒有，那么在沒有調(diào)用專用鍵盤時用戶會感到困惑，并開始質(zhì)疑這個輸入框所需輸入的類型。

為特定輸入框調(diào)用合適的鍵盤是正確的做法（參見上面的推薦），但是要確保在你的網(wǎng)站上保持一致，否則會讓用戶很困惑。換句話說，如果郵政編碼的輸入框調(diào)用了數(shù)字鍵盤，那么類似的輸入框也要有同樣的做法。

盡管這聽起來是顯而易見的，但很多網(wǎng)站都沒有在調(diào)用專用鍵盤上保持一致。例如，花店FTD（如上圖）在填寫信用卡號的時候調(diào)用了數(shù)字鍵盤，但在緊接著下面的安全碼輸入框卻沒有，雖然這兩個值都是數(shù)字。

在50個快速增長的熱門在線零售商中，54%的網(wǎng)站在他們的移動站點(diǎn)上犯了這個錯誤，多多少少都會有一個或是多個電話輸入框，信用卡號碼或是信用卡核對（CVV）輸入框沒有調(diào)用數(shù)字鍵盤。這54%的數(shù)據(jù)細(xì)則如下（絕對值）：24%的網(wǎng)站沒有為這三類中任何一種調(diào)用數(shù)字鍵盤（盡管這也是一致的，但是錯誤的示范），剩下30%的網(wǎng)站（包括FTD）不一致，只有在一部分輸入框才會調(diào)用數(shù)字鍵盤。

更令人驚訝的是，在整個可用性測試中，由于這樣的問題讓一些被試者很困惑。他們開始質(zhì)疑對于個別輸入框最初的解讀，認(rèn)為可能需要填寫一些其他的內(nèi)容。例如，當(dāng)看到“信用卡安全碼”輸入框彈出了標(biāo)準(zhǔn)鍵盤時（如上圖FTD的網(wǎng)站），被試者開始懷疑這是否就是填寫信用卡背面的那三個數(shù)字，或是印在卡上的其他字符串。

4、兌現(xiàn)“上一項(xiàng)”和“下一項(xiàng)”按鈕的行為（4%的網(wǎng)站犯了此錯誤）

問題：如果“上一項(xiàng)”和“下一項(xiàng)”按鈕把用戶帶去了不合邏輯順序的輸入框，用戶會很煩惱和困惑。

在測試中，被試者在未能兌現(xiàn)“上一項(xiàng)”“下一項(xiàng)”按鈕行為的網(wǎng)站上感到煩惱。用戶預(yù)期的行為很簡單：當(dāng)用戶點(diǎn)擊“下一項(xiàng)”按鈕，他們會預(yù)期跳到表單中下一個合乎邏輯的輸入框，沒有其他變化，甚至提交表單?！吧弦豁?xiàng)”按鈕也一樣，當(dāng)然是換個相反的方向。

這不僅僅是需要有正確的標(biāo)簽序列（雖說這是一個好的開始）。當(dāng)需要依賴于用戶先前的選擇處理動態(tài)輸入控件時，事情往往會出差錯。在這些情況下，我們已經(jīng)看到用戶數(shù)據(jù)被刪除或是標(biāo)簽序列被違反。我們也必須要格外注意自定義表單的接口。例如，在迪士尼商務(wù)網(wǎng)站，定制化的狀態(tài)選擇器不屬于標(biāo)簽序列（因?yàn)閺募夹g(shù)上來說它并不是一個輸入元素），所以用戶就會跳過這個狀態(tài)控件。

這些按鈕的功能基本上是充當(dāng)鍵盤上tab鍵的移動版；所以，它們應(yīng)該采用和電腦鍵盤tab一樣的序列規(guī)則。它們應(yīng)該提供從一個輸入框到下一個輸入框的快捷方式，不需要任何點(diǎn)擊（不論是鼠標(biāo)還是手指）。這在手機(jī)上是尤為重要的，因?yàn)楫?dāng)鍵盤呼出的時候，屏幕空間是有限的，下一個輸入框可能被部分遮擋，這個時候“下一項(xiàng)”按鈕則用起來很方便。所以，盡管“上一項(xiàng)”和“下一項(xiàng)”按鈕有可能不會被所有用戶用到，但禁用這些按鈕的行為會導(dǎo)致很嚴(yán)重的后果。

幸運(yùn)的是，大部分網(wǎng)站這一點(diǎn)都做的很好。只要代碼是清晰的，手機(jī)瀏覽器會默認(rèn)將輸入框出現(xiàn)的順序作為標(biāo)簽序列。在熱門移動端網(wǎng)站中，只有4%的網(wǎng)站犯了此錯誤。

5、在適當(dāng)?shù)那闆r下，禁用自動大寫（38%的網(wǎng)站犯了此錯誤）

問題：幾乎所有的被試者都認(rèn)為他們的電子郵件地址必須要小寫，所以這項(xiàng)數(shù)據(jù)自動大寫會給整個過程帶來不必要的麻煩。

智能手機(jī)默認(rèn)會把標(biāo)準(zhǔn)文本輸入框的首字母大寫，這在大部分情況下是合適的。然而，在有些情況下禁用自動大寫是更合適的，特別是像電子郵件地址這種絕大多數(shù)用戶都以為要小寫的情況。

測試中的大部分時候，被試者都注意到了大寫字母，并明確的將其改為小寫。最合理的解釋是他們不確定是否允許填寫大寫字母，或電子郵件地址是否區(qū)分大小寫。在那些電子郵件輸入框禁用了自動大寫的網(wǎng)站上，沒有被試者會主動將首字母大寫。推薦大家在電子郵件或是其他合適的場景（如網(wǎng)址URL）禁用自動大寫。

在熱門移動電子商務(wù)網(wǎng)站中，38%的網(wǎng)站在電子郵件地址輸入框沒有禁用自動大寫，把它們設(shè)置為純文本輸入框，給用戶留下非技術(shù)性的困惑。

可以在標(biāo)簽上加入autocapitalize屬性并設(shè)置為off，來禁用自動大寫，如下所示：

當(dāng)然，針對電子郵件輸入框，你也可以設(shè)置一個type屬性為email：

在iOS系統(tǒng)上，設(shè)置type屬性為email將會自動禁用自動大寫。然而，最好仍然設(shè)置autocapitalize屬性，因?yàn)檫@不僅在iOS系統(tǒng)上奏效，而且在其他還不支持email輸入框類型或是實(shí)現(xiàn)方式不同的平臺也可以使用。

測試以及絕密小抄

雖然這些基本原理看上去是顯而易見的，但是要記得全球大的移動電子商務(wù)網(wǎng)站中98%的網(wǎng)站違反了至少一條（參看任務(wù)完成列表）。70%的網(wǎng)站違反了兩條甚至更多的“基礎(chǔ)“觸摸鍵盤準(zhǔn)則。事實(shí)上，24%的網(wǎng)站根本沒有為觸屏鍵盤輸入做過什么優(yōu)化，就算是省掉標(biāo)準(zhǔn)鍵盤（在輸入電話、電子郵件、數(shù)字等情況），偶爾調(diào)用專用鍵盤（一致性很差），在合適的地方禁用自動更正，抑或是在電子郵件地址輸入框禁用自動大寫，這些都沒有。

不遵守設(shè)計準(zhǔn)則的一個原因可能是，針對一個大型網(wǎng)站所做的全局測試需要去發(fā)現(xiàn)所有的明顯缺陷——故而，理想情況下的第三項(xiàng)建議中提到調(diào)用鍵盤的一致性問題，是不必要被提及的。另外一個原因是，在前一篇文章中提到的，手機(jī)和觸屏界面是一個相對較新的平臺，它的全新的界面理論需要大家去關(guān)注無數(shù)的小的細(xì)節(jié)——這些細(xì)節(jié)對于我們網(wǎng)頁設(shè)計師和開發(fā)者來說還不習(xí)慣去主動尋找和設(shè)計。

綜合以上原因，我們將用一個絕密小抄來作為文章的結(jié)尾，此小抄是設(shè)計觸屏界面輸入框最常見的細(xì)節(jié)點(diǎn)，包括可復(fù)制粘貼代碼以及正確調(diào)用了鍵盤的手機(jī)觸屏優(yōu)化demo，你可以把它當(dāng)作是一個設(shè)計開發(fā)手機(jī)端以及桌面端網(wǎng)站的清單。

•  可交互的觸屏鍵盤小抄，以及手機(jī)端優(yōu)化demo

這些輸入框通常都會出現(xiàn)在以下類型的表單中：帳號注冊，帳號登錄，搜索，調(diào)查，完整的結(jié)賬過程，注釋表單以及聯(lián)系表單。我們建議你搜索整個代碼庫，來捕獲到每一個實(shí)例。

本文標(biāo)題：觸屏鍵盤設(shè)計準(zhǔn)則
文章位置：http://muchs.cn/news/168110.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、網(wǎng)站改版、網(wǎng)站策劃、App設(shè)計、軟件開發(fā)、品牌網(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)