BeFor Web
为网而生 - 关注互联网及移动端产品的用户体验设计

一个文本框搞定信用卡相关信息的输入

一个文本框搞定信用卡相关信息的输入

大家周四下午好。打破每周日上一篇译文的规矩,临时来一发。今天刚刚看到的东西,很简短的图文,介绍了一个蛮赞的交互模式,于是把拿来把译文做掉,特别推荐给交互设计师们。走你!

移动应用的设计师们一直在努力降低用户的输入量。屏幕太小了,手指无法精准触摸,输入过程中产生错误简直是家常便饭。输入量是无法被无限制的降低的,很多时候我们更需要考虑的是怎样使输入变得更加容易。

输入蒙板是一种限制内容格式、避免输入错误的方式。举个例子,我们可以使电话号码输入框只接受数字内容,而不对其它任何类型的字符做出响应。所接纳的数字也可以被限定在某个范围或模式当中。不过,输入蒙板的功能不仅限于防错,它同样可以被用在更加“积极”的地方,例如将多项输入内容合并为一个逻辑序列,使用户不必在多个输入框中来回切换。

最近我(英文原文作者)在Square的iPhone应用(Square Wallet)当中见到的输入方式就蛮有意思的,用户在一个输入框当中就可以完成信用卡类型、卡号、有效期、CVV号(卡片背后的3位数字)和邮政编码的填写。

01-credit-card-screen-payment-information-input-single-input.jpg

输入框当中的最左端是一个代表信用卡的图标,主要内容部分用于输入卡号,蒙板规则是典型的4位分隔。随着用户的输入,系统会根据卡号判断卡片的类别,例如VISA或MasterCard,并相应的改变左侧的信用卡图标。这种方式帮用户省掉了一个选择卡片类型的步骤,而且是一种很积极的信息回馈方式,让用户能够感受到系统对他们的操作产生了响应(相关阅读:为用户的成功操作提供正面反馈)。

02-card-number-date-cvv-screen-payment-information-input-single-input.png

当用户正确的完成了16位卡号的填写,文本框会自动改变显示模式,之前输入的卡号只会显示出最后的4位,节省出的3个字段就分配给了有效期、CVV码和邮编。用户在键入这些内容的时候同样会得到输入蒙板的辅助,例如格式限定、日期有效性的判定、自动添加斜杠、自动聚焦到下一个字段等。

03-input-mask-card-number-date-cvv-screen-payment-information-input-single-input.png

这里有一个很棒的细节,当用户在输入CVV码时,左侧的图标会发生变化(如上图所示),提示用户所谓的CVV码就是卡片背后的3位数字;非常贴心

目前看来人们对这套交互模式的反响很好;这简直是一定的。只用到一个文本框,即有效的利用了输入蒙板的防错与辅助功能,又极大减少了传统模式当中文本框的使用量——Squre给力!

另外值得一提的是,Zachary Forrest通过前端技术将这套交互模式“移植”到了Web端,有兴趣的朋友们也不妨去围观

本文整合编译自两篇相关文章:Collecting Payment Information Within a Single InputMaking beautiful forms; Square and Recurly

译文代表原作者观点。欢迎发表评论,或到译者微博进一步交流探讨。

本站原创编译文章。如需转载,请注明:本文来自Be For Web
译者信息: C7210 - UI/UX 设计布道师,设计师,译者,猫奴,音乐玩家。
评论 (5)
赞一个。有人提到怎么去检查卡号的正确性问题。如果想修改的花,下意识的都会去点击卡号的末尾4个号码。 Zachary Forrest做的web版本是可以返回再修改的。
不错,改错的方式找了半天,是双击输入框就自动出现之前输入的数字,输入框失去焦点后又只显示后三位。用户不容易识别到这个功能。
的确很赞,不过如果卡号输错如何改? 如果输入完卡号直接跳转会不会有些唐突,一般人在输入完一大串数字后都应该试图重新校对一遍吧?
真的不错的设计,在少数情况下,需要修改卡号,是如何处理的呢?点击卡的icon?或者实际是一个长长的输入框,可以拖动回去?或者卡号输完就立即验证正确了?
很贴心的细节设计,简化了操作!