http://beforweb.com/node/134
大家周四下午好。打破每周日上一篇译文的规矩,临时来一发。今天刚刚看到的东西,很简短的图文,介绍了一个蛮赞的交互模式,于是把拿来把译文做掉,特别推荐给交互设计师们。走你!
移动应用的设计师们一直在努力降低用户的输入量。屏幕太小了,手指无法精准触摸,输入过程中产生错误简直是家常便饭。输入量是无法被无限制的降低的,很多时候我们更需要考虑的是怎样使输入变得更加容易。
输入蒙板是一种限制内容格式、避免输入错误的方式。举个例子,我们可以使电话号码输入框只接受数字内容,而不对其它任何类型的字符做出响应。所接纳的数字也可以被限定在某个范围或模式当中。不过,输入蒙板的功能不仅限于防错,它同样可以被用在更加“积极”的地方,例如将多项输入内容合并为一个逻辑序列,使用户不必在多个输入框中来回切换。
最近我(英文原文作者)在Square的iPhone应用(Square Wallet)当中见到的输入方式就蛮有意思的,用户在一个输入框当中就可以完成信用卡类型、卡号、有效期、CVV号(卡片背后的3位数字)和邮政编码的填写。
输入框当中的最左端是一个代表信用卡的图标,主要内容部分用于输入卡号,蒙板规则是典型的4位分隔。随着用户的输入,系统会根据卡号判断卡片的类别,例如VISA或MasterCard,并相应的改变左侧的信用卡图标。这种方式帮用户省掉了一个选择卡片类型的步骤,而且是一种很积极的信息回馈方式,让用户能够感受到系统对他们的操作产生了响应(相关阅读:为用户的成功操作提供正面反馈)。
当用户正确的完成了16位卡号的填写,文本框会自动改变显示模式,之前输入的卡号只会显示出最后的4位,节省出的3个字段就分配给了有效期、CVV码和邮编。用户在键入这些内容的时候同样会得到输入蒙板的辅助,例如格式限定、日期有效性的判定、自动添加斜杠、自动聚焦到下一个字段等。
这里有一个很棒的细节,当用户在输入CVV码时,左侧的图标会发生变化(如上图所示),提示用户所谓的CVV码就是卡片背后的3位数字;非常贴心。
目前看来人们对这套交互模式的反响很好;这简直是一定的。只用到一个文本框,即有效的利用了输入蒙板的防错与辅助功能,又极大减少了传统模式当中文本框的使用量——Squre给力!
另外值得一提的是,Zachary Forrest通过前端技术将这套交互模式“移植”到了Web端,有兴趣的朋友们也不妨去围观。
本文整合编译自两篇相关文章:Collecting Payment Information Within a Single Input和Making beautiful forms; Square and Recurly
分享到:
相关推荐
js达到文本框的最大长度时跳到下一个文本框 达到文本框的最大长度跳到下一个文本框 达到文本框的最大长度切换到下一个文本框 达到文本框的最大长度自动跳到下一个文本框 js达到文本框的最大长度时跳到下一个文本框 ...
NET文本框输入显示提示信息,在文本框中输入文字,下面出现以输入的信息相同的记录
1.文本框只能输入数字代码(小数点也不能输入) 2.只能输入数字,能输小数点. 4.只能输入字母和汉字 等等
C#文本框TextBox只有输入数字 C#文本框输入数字 C#文本框数字 C#TextBox只有输入数字 C#TextBox只能输入数字
一个文本框只能输入字母不可以复制粘贴 控制文本输入 禁用复制 禁用粘贴
javasxript的常用文本框的输入限制代码 有正则,有keyup,也有粘贴限制
下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框....
各种防止文本框中输入的方法 javascript
JavaScript,HTML建立一个简单界面,要求文本框中只能输入字母.这是网上常见的实验指导书里面的作业,个人练习捣鼓出来的东西,希望对小白们有所帮助
C#文本框输入提示功能。有完整的代码,可供参考,获得焦点后就会自动消失
1. 编写一个 Java 程序, 在程序中建立一个窗口, 有两个文本框和一个按钮, 单击按钮, 能把左边文本框中的内容复制到右边文本框中.
一个Ajax文本框输入提示效果,当用户输入与搜索内容相匹配的字符时,下拉框中会适时显示相关的内容提示,用户可选择这些相关的内容,进而下拉打开搜索页,免去输入的麻烦,提升用户体验。 注:顺利测试本实例,请...
ACCESS 部分锁定文本框和在文本框输入时避免输入空格的实例
有关输入的文本框限制大写写和只能输入字母的设置 就是只能输入小写字母,其余东西一概不允许输入
自定义IP文本框输入,用于输入正确的IP地址
文本框输入 @ 符号的输入提示的JS代码,类似搜索框的提示,输入指定的字符会弹出提示。和自动完成功能有些区别。
自己写了个winForm处理文本框只能输入数字,与大家分享
Javascript实现的网页文本框输入提示 实现原理: 文本框输入内容后,搜索字符串数组,将匹配内容写入DIV以下拉列表形式展现,并支持方向键选择,效果类似搜索网站的输入提示。 友情提示: 较为粗糙的实现方法,...
C++语言,基于图形界面编辑框空间的程序。实现在文本编辑框中输入内容,该内容同步显示到静态文本框中。代码清晰,适合初学者学习。
WINFORM文本框实现只能输入数字和小数点