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

  本文译者@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

  (雷锋网 Warlial专稿,转载请注明来自雷锋网及作者)

时间: 2024-08-22 14:53:56

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

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

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 [编者按]:本文译者@C7210 移动应用的设计师们一直在努力降低用户的输入量.屏幕太小了,手指无法精准触摸,输入过程中产生错误简直是家常便饭. 输入量是无法被无限制的降低的,很多时候我们更需要考虑的是怎样使输入变得更加容易. 输入蒙板是一种限制内容格式.避免输入错误的方式.举个例子,我们可以使电话号码输入框只接受数字内容,而不对其它任何类型

交互设计与用户体验:满足用户需求的交互设计

     本文,我主要想表达的意思是:交互设计师一多半的时间其实是在做逻辑分析,从业务逻辑到产品逻辑的迁移:然后另一部分时间是在做按钮的摆放.(注意,我说的是部分,不是全部!)在这两个过程里需要注意的最重要的问题就是不能懒!(京东商城的设计完全不具备交互性,不做分析).对照"看人下菜碟"的说法,我们来看看哪些是可以改进的.       1.如果用户没有登录(注册),用户是否需要去点击"兑换"OR"评论"按钮?答案是否定的.这个时候用户最需要什么交

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

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

用户体验设计研究:中文网页文本框设计

我一直觉得,文本框的这个东西,在有输入法的国家,是我们这些懒人的杯具,文本框的自动完成功能,在配合输入法下,简直是个鸡肋.一次次的切换Ctrl+Space,是否有让你崩溃想敲烂键盘呢? 上面的那张图已经很明显的让我们感觉到了三个问题: 输入法把自动完成遮挡住了,我看不见. 使用键盘↑↓键只能切换输入法内的选字,无法选择自动完成内的选项.想用却用不到. 当你懊恼的打算用鼠标去点自动完成列表内的文字时,杯具发生了,你发觉,你点了,事实上什么效果都没有.你的文本框变成一遍空白.(在Chrome下多种中

交互设计研究:用户注册和用户登录的交互细节设计

文章描述:交互细节分析--注册&登录. 注册&登录是一个网站的门户,它的设计姿态就是对待客人的态度.虽然用户可能每次都只花极少的时间在注册&登录互动,但是这个"瞬间"却举足轻重,用户与注册&登录之间的交互关系承上启下的一个节点.注册&登录所有的细节影响了能否完成产品战略定位所设定的最基本任务去吸纳其所希望的用户的使命.基于很多交互设计前辈的研究,作了一些细节中的细节分析.感谢身边帮助我的朋友们. 1.注册流程剖析对比: 1.1.注册和登陆用户体验

交互设计最重要的是态度:通过交互来引导用户

文章简介:我不只是交互. 从事交互有很多想法观点一直在脑中趁着这个分享的机会大概总结下,以下我说的"谬论"不一定对,很多东西个人也一直在摸索思考总结中,现在写出来抛砖引玉,极力欢迎各种不同的观点一起交流哈哈. 首先谈一下日常工作中交互方面的点滴: 交互体验的一些参照原则: 操作前,结果可预知. 让用户在操作前就大概能预测到自己可以有哪些操作,自己的操作会得到什么样子的结果,会提前对产品有个心理预测,例如迅雷XMP播放器,用户只要一启动就会知道可以使用播放器来播放本地影片,播放在线影片.

交互设计借鉴一:生活中的交互之小户型设计

在房价高涨的今天,对于年轻的家庭以及单身一族来说,通常会选择小户型作为过渡.小户型设计却仍然要求"麻雀虽小,五脏俱全",小面积与增加功能的矛盾日益加深.与小户型设计及其相似的还有近些年来兴起的手机交互设计.现在各个企业都如火如荼的进行着手机客户端的设计开发,手机界面尺寸有限,如何尽量少的形式表达出用户真正的需求,又让用户有好的体验呢? 1. 减少不必要的 在小空间设计上,不能要求面面俱到,要懂得牺牲的魅力.开放式设计可以让空间得到最大的利用,将卧室.客厅.餐厅打通,形成大空间态势,减少

交互设计理论:浅析电影中的未来交互

在一次交互例会上,有同学提到电影中的未来交互,引发了我的兴趣,所以收集了一些电影中的资料,做一些粗浅的分析,希望能够抛砖引玉,引发出一些思考. 新颖的人机交互方式一直是科幻电影夺目的亮点之一,好莱坞的科幻大片投入了大量金钱.精力到电影的细节设计中,比如汤姆克鲁斯主演的<少数派报告>,主创团队邀请了HCI科学家参与电影制作,电影的视觉设计师特意走访了MIT 多媒体实验室,观看了各种姿态识别的前沿技术.斯皮尔伯格说服了John Underkoffler(著名的手势识别专家)以及Jaron Lanier

Axure交互效果实例:提示文本框和拖拽效果

Axure是现在交互设计师必不可少的交互原型设计工具,其实和任何一款工具一样,只要根据常用效果实例多练练,基本就会知道各个控件的使用.今天分享一些在Axure经常用到的交互实例:带提示的文本框和拖拽效果. 实例下载:Axure常用交互效果实例.rar 1.带提示的文本框 将提示信息放置于文本框内是一种常见的交互方式.当文本框获得焦点时,提示文字消失.当文本框失去焦点时,提示文字重新显示出来.现在就让我们看下这种控件的制作方法. 第一步: 从widget库中拖出text field控件.双击控件在