本文譯者@C7210 移動應用的設計師們一直在努力降低用戶的輸入量。屏幕太小了，手指無法精準觸摸，輸入過程中產(chǎn)生錯誤簡直是家常便飯。

輸入量是無法被無限制的降低的，很多時候我們更需要考慮的是怎樣使輸入變得更加容易。

輸入蒙板是一種限制內(nèi)容格式、避免輸入錯誤的方式。舉個例子，我們可以使電話號碼輸入框只接受數(shù)字內(nèi)容，而不對其它任何類型的字符做出響應。所接納的數(shù)字也可以被限定在某個范圍或模式當中。不過，輸入蒙板的功能不僅限于防錯，它同樣可以被用在更加“積極”的地方，例如將多項輸入內(nèi)容合并為一個邏輯序列，使用戶不必在多個輸入框中來回切換。

以下譯文以原作者的第一人稱視角翻譯。

最近我(英文原文作者)在Square的iPhone應用(Square Wallet)當中見到的輸入方式就蠻有意思的，用戶在一個輸入框當中就可以完成信用卡類型、卡號、有效期、CVV號(卡片背后的3位數(shù)字)和郵政編碼的填寫。

輸入框當中的最左端是一個代表信用卡的圖標，主要內(nèi)容部分用于輸入卡號，蒙板規(guī)則是典型的4位分隔。隨著用戶的輸入，系統(tǒng)會根據(jù)卡號判斷卡片的類別，例如VISA或MasterCard，并相應的改變左側(cè)的信用卡圖標。這種方式幫用戶省掉了一個選擇卡片類型的步驟，而且是一種很積極的信息回饋方式，讓用戶能夠感受到系統(tǒng)對他們的操作產(chǎn)生了響應(相關閱讀：為用戶的成功操作提供正面反饋)。

當用戶正確的完成了16位卡號的填寫，文本框會自動改變顯示模式，之前輸入的卡號只會顯示出最后的4位，節(jié)省出的3個字段就分配給了有效期、CVV碼和郵編。用戶在鍵入這些內(nèi)容的時候同樣會得到輸入蒙板的輔助，例如格式限定、日期有效性的判定、自動添加斜杠、自動聚焦到下一個字段等。

這里有一個很棒的細節(jié)，當用戶在輸入CVV碼時，左側(cè)的圖標會發(fā)生變化(如上圖所示)，提示用戶所謂的CVV碼就是卡片背后的3位數(shù)字；非常貼心。

目前看來人們對這套交互模式的反響很好；這簡直是一定的。只用到一個文本框，即有效的利用了輸入蒙板的防錯與輔助功能，又極大減少了傳統(tǒng)模式當中文本框的使用量——Squre給力！

另外值得一提的是，Zachary Forrest通過前端技術將這套交互模式“移植”到了Web端，有興趣的朋友們也不妨去圍觀。

Via：lukew & FunctionSource

譯者博客：BeForWeb

（雷鋒網(wǎng) Warlial專稿，轉(zhuǎn)載請注明來自雷鋒網(wǎng)及作者）

標簽： 移動應用 蒙板規(guī)則 交互設計 

版權(quán)申明：本站文章部分自網(wǎng)絡，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。