主页 > V假生活 >Square的巧妙设计——单一文字框搞定信用卡讯息输入 >

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


2020-06-09

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

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

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

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

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

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

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

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

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

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

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

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


上一篇:
下一篇:

热门推荐
2020-06-15
台中、彰化、南投三律师公会日前举办「107年中彰投联合律师节庆祝大会」,中彰投律师会员及家属、全国各
2020-06-15
台中市政府教育局致力推动「中彰投苗四县市治理平台」政策,邀请彰化县、南投县、苗栗县国中、小学响应台中
2020-06-15
由南投县政府主办的「中彰投苗首长会议暨启动综合性运动赛事记者会」13日在县政府一楼大厅举办,四位县市
2020-06-15
台中、苗栗、南投、彰化四县市今日在中兴大学举办「中部地区石虎保育论坛」,邀集专家探讨减少石虎生存威胁
2020-06-15
台中市政府原住民族事务委员会将于8月31日在夏绿地公园举办「中原好物─2019原住民手工艺创作竞赛暨
2020-06-15
台中市政府于去年起率先联合彰、投、苗县政府,在东势林场举办单身民众联谊活动,获得广大迴响。今年4县市
随机文章
2020-06-25
时时都有新鲜事的大阪与京都,每隔一阵子都有值得造访的新景点名单,大至超人气的景点红马摩天轮、京都铁
2020-06-25
(中央社 食药署表示,国内虽无代理商进口贩售,但仍公布警讯并公布问题批号,提醒手边有相关产品民众暂停
2020-06-25
出国旅行时,除了查询饭店行程之外,也必须关注一下当地货币的汇率,如果选对时间换钱的话,省下来的钱或许
2020-06-25
京都祇园花见小路是日本超夯观光景点之一,但游客擅闯私有地等种种脱序行为,让地方人士与店家不堪其扰
2020-06-25
美中达成初步协议,不只激励市场信心,哈日族也跟着乐开怀,根据台银最新牌告汇率,日圆现钞卖出价来到 0
2020-06-25
(中央社 前日商汇率分析师李其展分析,最近日圆走势偏弱有2原因,一是国际股市转强,资金不再向日圆靠拢
宝马娱乐登录网址_澳门奥博集团登录网址8448|生活小技巧网站|影响力生活网|网站地图 申博官网备用网址_上葡京现场娱乐 申博官网备用网址_银河娱乐www1331网站