国产一精品一aⅴ一免费-国产一精品一av一免费-国产一精品一av一免费爽爽-国产一久久香蕉国产线看观看-国产一卡2卡3卡四卡高清-国产一卡二卡3卡4卡视频

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

　　問題：彈出不合適的鍵盤會降低輸入速度，用戶經常會因為標準鍵盤上數字的很小的點擊區域以及間距而打錯很長一串數字。

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

　　再來對照一下蘋果自己的設計準則，其中提到所有可點擊的界面元素至少要有6.85*6.85毫米，因為任何小于這個尺寸的元素點擊準確度都會非常的差（微軟和諾基亞同樣制定了最小點擊區域為7*7毫米）。可以預見，這將會導致拼寫錯誤。

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

　　Best Buy的信用卡號輸入框調用了標準鍵盤，所以用戶必須先切換至數字和字符鍵盤，然后準確無誤的輸入16位數字。這對于被試者是件很困難的事情，他們要來回看著信用卡和手機，小心翼翼的點擊數字鍵，不碰到旁邊的鍵。

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

　　左圖，一個被試者由于標準鍵盤按鍵尺寸小且鄰近，在輸入“1”的時候不小心按到了橫劃線。這個時候調用數字鍵盤會更加合適。右圖，用戶在GAP網站上輸入“日間聯系電話”時，調出的是專門優化過的鍵盤，按鍵比標準鍵盤大471%。

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

　　根據給出的樣例格式（比如“555-555-5555”）輸入電話號碼在iOS上是不可能的，因為調出的鍵盤是沒有橫劃線的。（有趣的是，在Android系統上輸入是可以的，這也說明了為什么在多個平臺測試有助于確保在格式樣例只在有些平臺上必須。）

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

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

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

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

　　針對其他你想要調用數字鍵盤的輸入框，用如下代碼：

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

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

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

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