交互设计:利用输入蒙板提高文本框的交互质量

  【编者按】:本文译者@C7210 移动应用的设计师们一直在努力降低用户的输入量。屏幕太小了,手指无法精准触摸,输入过程中产生错误简直是家常便饭。

  输入量是无法被无限制的降低的,很多时候我们更需要考虑的是怎样使输入变得更加容易。

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

  以下译文以原作者的第一人称视角翻译。

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

  

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

  

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

  

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

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

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

  Via:lukew & FunctionSource

  译者博客:BeForWeb

http://beforweb.com/

时间: 2024-11-08 21:24:42

交互设计:利用输入蒙板提高文本框的交互质量的相关文章

交互设计:利用蒙板提高文本框交互质量

本文译者@C7210 移动应用的设计师们一直在努力降低用户的输入量.屏幕太小了,手指无法精准触摸,输入过程中产生错误简直是家常便饭. 输入量是无法被无限制的降低的,很多时候我们更需要考虑的是怎样使输入变得更加容易. 输入蒙板是一种限制内容格式.避免输入错误的方式.举个例子,我们可以使电话号码输入框只接受数字内容,而不对其它任何类型的字符做出响应.所接纳的数字也可以被限定在某个范围或模式当中.不过,输入蒙板的功能不仅限于防错,它同样可以被用在更加"积极"的地方,例如将多项输入内容合并为一

利用亮度蒙板进行曝光合成的基础实验

  拍摄的注意事项: 相机治愈三脚架上,尽量使用快门线,用相同的设置拍摄最少2张不同曝光的照片,这里举例我们选择比较简单的2张照片,一张对着太阳曝光,让太阳有比较正确的显示,另外一张我们对着礁石曝光让岩石有正确的曝光. 图一:1/100秒,图二1/40秒 其他设置完全相同. 在Lightroom里面选中2张照片,点击右键 选择在应用程序中编辑,然后选择在Photoshop中作为层打开. Photoshop自动打开2张图片,并作为2个图层,请注意把欠曝的那张放在上面,把过曝的那张放在下面. 选中欠

PS利用剪贴蒙板制作“遮遮掩掩”的动画效果

利用剪贴蒙板相对还是比较容易的,以剪贴蒙板的基底的分布方式划分大致也就分两种,一种是直线运动的,一种是平面运动的. 直线运动的 1 上下运动 2 左右运动   平面运动 3 对角线 4 对角线 5 转圈   6 "8" 字 7 折射(乱编的) 以上是一堆效果图,只要你愿意它就可以千变万化 基础工作 1 新建500*200 画布 2 导入(拖入,置入)四张素材 3 分别命名ABCD,复制最上面的图拖到最下层 4 新建4个图层(1234)填充白色,为什么选白色?因为一白遮百丑 5 把图层1

求大神指教。-html 怎么做一个输入ip地址的文本框

问题描述 html 怎么做一个输入ip地址的文本框 解决方案 四个文本框没有边框,夹杂3个小点,放在一个有边框的div内,同时用js限制每个文本框输入的长度http://blog.csdn.net/jemofh159/article/details/7945639 解决方案二: # 不要想太复杂的,4个输入框每个限制3位数字输入,连在一起 . 号分隔:剩下的就是调整样式了

c#-如何使用C#设计类似词典软件的提醒文本框

问题描述 如何使用C#设计类似词典软件的提醒文本框 在金山.有道等词典中,你查询"a",在文本框里会出现几条"a"开头的单词,这是怎么做到的? 解决方案 http://zhidao.baidu.com/link?url=0txFRMeB43RGnmXxMh9y_75UVBKjN0ciK7Ulpy9dkTQx66c_esJ1fD-rd3u2hlLxNnJjmT12L2ZmwzimKOMESEy0vNUQKc5-5AGC8NA9On_ http://blog.csdn.

C#语音输入到指定的文本框内

问题描述 C#语音处理后,将值输入到指定的文本框内,如何实现? 解决方案 解决方案二:textBox1.Text="我是语音输入转换成的文字"; 解决方案三:输入到任意文本框解决方案四:引用2楼lengfengzhongdebing的回复: 输入到任意文本框 用委托解决方案五:privatevoidUpdateSounds(TextBoxtbName,stringsound){if(!string.IsNullOrEmpty(sound)){this.BeginInvoke(newAc

手机产品交互设计:利用设计规避的问题

文章描述:作为手机产品交互设计师,利用设计规避问题,提升产品用户体验,把体验转化成价值,是我们所追求的境界.手机产品设计禁忌,是笔者遇到的一些设计问题,欢迎各路高手协同补充遇到的问题,共同避免重复发明轮子. 在做手机产品设计的过程中,遇到很多看似很小,且很容易被忽略的问题,正是这些小问题,一次次的撩拨用户的耐心,让用户对你的产品心生怨念.刚出道的朋友没有经过实战,对细节注意不多,往往都会遇到类似的问题,强调多次后,觉得不如写下来,给新人共勉. 1.没有不可点击的效果 一般按钮会有四态,不可点击效

移动设备的交互设计:避免输入

常有用户常抱怨iPhone的输入按键太小,难以点击,手机的输入速度一直是个难点.因此手机交互设计如要出现输入框,要重点考虑如何减少输入,提升用户操作的流畅度.另外,手机的显示能力有限,不能像网页那样提供大量的选项供用户选择,每个界面都必须提供最有价值的信息. 提供选项.对于用户经常输入的字符可以提炼为热门选项,便于用户选择. 比如使用手机购买数字点卡,对于购买量大的的热门点卡(魔兽和Q币等),QVGA(240*320像素)的手机可以提供10个选项.如用户已购买过某类商品时,可替换热门点卡的数据,

交互设计:支付宝即时到账交易确认付款页面的交互设计

因为昨天被支付宝强行关闭了"余额支付",所以一笔钱没有完成付款,刚刚来公司的时候,登录web去付款,体验了一下新设计的"即时到账交易付款确认页面",我觉得在交互设计上,存在几个问题,找茬一把. 在上图片前,还是要说,这一次的支付宝改版是不错的,最大的优点是更加的专注和简洁.好了.恭维的说完,就开始找茬: 看上图,上面的1,2,3 各自区域,是我眼睛注释的顺序,我先看到1,觉得没有我需要确认的信息,然后看2,也没有看到我需要的信息,然后看到了3,发现25写的很大,而我