当前位置:主页 > Z生活禅 >Square的巧妙设计——单一文字框搞定信用卡讯息输入 >

Square的巧妙设计——单一文字框搞定信用卡讯息输入

Square的巧妙设计——单一文字框搞定信用卡讯息输入

行动 app 的设计师们一直在努力降低使用者输入文字的量。因为萤幕太小,手指无法精準控制,在输入过程中出错简直是家常便饭。而输入量不会无限地降低,常常我们更需要考虑的是如何使输入讯息变得更加容易。

格式限制是一种限制内容格式、避免输入错误的方式。举个例子,我们可以使电话号码输入框只接受数字,而不对其它任何类型的文字、符号做出反应。甚至接受的数字也可以被限定在某个範围或模式。不过,格式限制的功能不仅限于防错,它还可以被用在更「积极」的地方,例如将多种输入的内容合併成一个逻辑序列,让使用者不必在多个输入框来回切换。

最近我在 Square 的 iPhone app当中见到的输入方式就很有意思,使用者在一个输入框就可以完成信用卡类型、卡号、有效期限、CVV和邮递区号的填写。

Square的巧妙设计——单一文字框搞定信用卡讯息输入

输入框当中的最左端是一个代表信用卡的图示,主要内容部分用于输入卡号,格式限制是典型的四位分隔。随着使用者输入数字,系统会根据卡号判断卡片的类别,例如 VISA 或 MasterCard,并且配合改变左侧的信用卡图示。这种方式帮使用者省掉一个选择卡片类型的步骤,而且是一种很积极的讯息回应方式,让使用者能够感受到系统对他们的操作产生反应。

Square的巧妙设计——单一文字框搞定信用卡讯息输入

当使用者正确完成 16 码卡号填写后,文字框会自动改变显示模式,之前输入的卡号只会显示出最后的四位,节省出的三个段落就分配给有效期限、CVV 和邮递区号。使用者在键入这些内容的时候同样会得到格式限制的辅助,例如格式、日期有效性的判定、自动加入斜线、自动切换到下一段文字等。

Square的巧妙设计——单一文字框搞定信用卡讯息输入

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

目前看来人们对这套互动模式的反应都很好;这简直是一定的。只用一个输入框,有效的利用格式限制的防错与辅助功能,又极大减少传统模式输入框的使用量——Square 厉害!

另外值得一提的是,Zachary Forrest 用网页前端技术将这套互动模式「移植」到网页上,有兴趣的朋友们也不妨去看看。

  
上一篇: 下一篇: