交互设计案例分析:银行卡号输入交互设计
发布时间：2018-05-17浏览次数：890
<p>
</p>
<table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr>
<td style="WORD-WRAP: break-word" bgcolor="#fdfddf">
<font color="#ff0000">网页制作Webjx文章简介：</font><font color="#000000">交互设计：银行卡号 有必要填两遍吗？</font>
</td>
</tr></tbody></table>
<p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">银行卡号 有必要填两遍吗？设计师觉得这个行为很傻很天真<br>那么 设计师能代表用户吗？<br>用户是怎么认为的呢？<br>有没有更好的办法来解决这个问题</p>
<p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">开篇，先讲讲我自己的趣事。早上出门后，我总会电梯里拼命回想，做完早饭我是不是关了煤气，没关的话会不会一把大火把家烧了。有时甚至，我会返回再次确认。<br>也许有些男性朋友不太理解这种行为。<br>那么，想想你们的爱车，关车门时是不是也会要反复确认？<br>为了减少意外的发生，我们总会对重要事务反复确认，这应该是一种天性。</p>
<p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">好吧 言归正传！<br>说说我为什么讲这个题目<br>背景—————————————————————————————————————————————————–<br>最近我捣鼓提现界面优化。首当其冲优化的，当然是填两遍银行卡。我觉得这是太多余的行为了。和优化小组JS&重构的同事说完以后，他们立刻跳出来反对我。<br>JS&重构同事：“填两遍银行卡当然有必要啊！用户填错了怎么办？”如下图：</p>
<p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><img style="MAX-WIDTH: 800px; BORDER-TOP: rgb(221,221,221) 1px solid; BORDER-RIGHT: rgb(221,221,221) 1px solid; BORDER-BOTTOM: rgb(221,221,221) 1px solid; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; PADDING-LEFT: 4px; BORDER-LEFT: rgb(221,221,221) 1px solid; PADDING-RIGHT: 4px; box-shadow: rgb(238, 238, 238) 0px 0px 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px" alt="null" src="http://www.webjx.com/files/allimg/131225/2037020.jpg"></p>
<p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">大家的看法—————————————————————————————————————————————————–<br>是不是应该填两遍？我采访了组里同学们的看法。</p>
<p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><img style="MAX-WIDTH: 800px; BORDER-TOP: rgb(221,221,221) 1px solid; BORDER-RIGHT: rgb(221,221,221) 1px solid; BORDER-BOTTOM: rgb(221,221,221) 1px solid; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; PADDING-LEFT: 4px; BORDER-LEFT: rgb(221,221,221) 1px solid; PADDING-RIGHT: 4px; box-shadow: rgb(238, 238, 238) 0px 0px 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px" alt="null" src="http://www.webjx.com/files/allimg/131225/2037021.png"></p>
<p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">大家都默认觉得，填两遍银行卡是非常愚蠢的行为。这不是明摆着让用户多操作一步吗？反正银行是可以校验姓名和卡号的，<br>即使用户不幸填错，也不会给他造成任何损失呀！<br>可我们不代表用户，用户呢？他们是怎么看这个问题的。</p>
<p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><img style="MAX-WIDTH: 800px; BORDER-TOP: rgb(221,221,221) 1px solid; BORDER-RIGHT: rgb(221,221,221) 1px solid; BORDER-BOTTOM: rgb(221,221,221) 1px solid; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; PADDING-LEFT: 4px; BORDER-LEFT: rgb(221,221,221) 1px solid; PADDING-RIGHT: 4px; box-shadow: rgb(238, 238, 238) 0px 0px 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px" alt="null" src="http://www.webjx.com/files/allimg/131225/2037022.jpg"></p>
<p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">对于用户而言，他们不知道银行卡可以验证姓名。他们只会认为，填错卡号，就意味着钱要到别人口袋去了。他们显得异常紧张。<br>即使觉得有点麻烦，但用户对于填两遍银行卡仍然不会反感。他们甚至会觉得，这是一个很有必要的事情。<br>因为 银行卡 钱 支付 这些对于用户而言，都是太敏感的信息</p>
<p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">小结：显然，填两遍银行卡不是一个好的设计，它增加了用户额外负担。其实用户真正的诉求不是填两遍银行卡，而是怎么样能让“我”的银行卡号不填错。</p>
<p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">解决方案-—————————————————————————————————————————————————-</p>
<p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">那么……怎么办？在用户填写银行卡时，我们需要解决两个问题：</p>
<p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">a 尽可能使用姓名和卡号即时校验，以最短时间告诉用户卡号与姓名是否匹配，卡号是否填写正确。<br>b 心理上，在填写银行卡的过程中给用户心理上的安全感，消除担心会填错卡号的恐惧心理。<br>有什么好的办法，既能不让用户那么麻烦的填写两遍，又能消除用户担心填错的心理呢？</p>
<p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">下面是我能想到的几个办法，抛砖引玉。</p>
<p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">1. 扫描卡号</p>
<p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">银行卡会填错，主要是信息在传递过程中出现了错误。用户填写银行卡出现了多次信息传递。用户通过眼睛看到卡号，再将卡号传递给大脑，通过大脑发送指令给手，手再进行输入。<br>如果能减少信息传递的次数，不需要通过用户多次传递，那么就能大大降低用户填错银行卡的几率。也不会给用户的心里造成太大的负担。<br>扫描卡号，就是一个不错的办法。</p>
<p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><img style="MAX-WIDTH: 800px; BORDER-TOP: rgb(221,221,221) 1px solid; BORDER-RIGHT: rgb(221,221,221) 1px solid; BORDER-BOTTOM: rgb(221,221,221) 1px solid; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; PADDING-LEFT: 4px; BORDER-LEFT: rgb(221,221,221) 1px solid; PADDING-RIGHT: 4px; box-shadow: rgb(238, 238, 238) 0px 0px 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px" alt="null" src="http://www.webjx.com/files/allimg/131225/2037023.jpg"></p>
<p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">2. 将信息分组也是防止用户填错卡号的有效方式。银行卡号输入后自动分隔显示。</p>
<p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><img style="MAX-WIDTH: 800px; BORDER-TOP: rgb(221,221,221) 1px solid; BORDER-RIGHT: rgb(221,221,221) 1px solid; BORDER-BOTTOM: rgb(221,221,221) 1px solid; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; PADDING-LEFT: 4px; BORDER-LEFT: rgb(221,221,221) 1px solid; PADDING-RIGHT: 4px; box-shadow: rgb(238, 238, 238) 0px 0px 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px" alt="null" src="http://www.webjx.com/files/allimg/131225/2037024.jpg"></p>
<p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">3. 银行卡号在输入框上方放大显示。当然，这个方法也有一定的弊端，会让用户在输入时分心，不能把所有注意力放在输入框内。</p>
<p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><img style="MAX-WIDTH: 800px; BORDER-TOP: rgb(221,221,221) 1px solid; BORDER-RIGHT: rgb(221,221,221) 1px solid; BORDER-BOTTOM: rgb(221,221,221) 1px solid; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; PADDING-LEFT: 4px; BORDER-LEFT: rgb(221,221,221) 1px solid; PADDING-RIGHT: 4px; box-shadow: rgb(238, 238, 238) 0px 0px 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px" alt="null" src="http://www.webjx.com/files/allimg/131225/2037025.jpg"></p>
<p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">4. 模拟真实银行卡形式输入。</p>
<p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><img style="MAX-WIDTH: 800px; BORDER-TOP: rgb(221,221,221) 1px solid; BORDER-RIGHT: rgb(221,221,221) 1px solid; BORDER-BOTTOM: rgb(221,221,221) 1px solid; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; PADDING-LEFT: 4px; BORDER-LEFT: rgb(221,221,221) 1px solid; PADDING-RIGHT: 4px; box-shadow: rgb(238, 238, 238) 0px 0px 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px" alt="null" src="http://www.webjx.com/files/allimg/131225/2037026.jpg"></p>
<p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">5. 再想得远一点，能不能在输入框中加一个小喇叭，点击小喇叭可以将卡号播放一遍。</p>
<p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><img style="MAX-WIDTH: 800px; BORDER-TOP: rgb(221,221,221) 1px solid; BORDER-RIGHT: rgb(221,221,221) 1px solid; BORDER-BOTTOM: rgb(221,221,221) 1px solid; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; PADDING-LEFT: 4px; BORDER-LEFT: rgb(221,221,221) 1px solid; PADDING-RIGHT: 4px; box-shadow: rgb(238, 238, 238) 0px 0px 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px" alt="null" src="http://www.webjx.com/files/allimg/131225/2037027.jpg"></p>
<p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">大家还有更好的办法么？—————-<br>总结： 显然，填两遍银行卡并非是防止用户填错卡号的好办法。它只是为了解决填错而迫不得已的一个解决方案。但设计师是有办法的人，我们可以通过更好的方式来帮助用户解决这个问题，<br>让用户在填写银行卡时有更好的体验。<br>另外还想说的：我们不是用户，就算是，也不是普通用户。永远不要以一个设计师的眼光来看待用户的行为。</p>
付款方式
苹果客户端
安卓客户端
官方微信
新浪微博
TOP
