可以很直观地看出页面二在视觉上更聚焦，页面一所有内容平铺显示，视觉中心不够突出。但当列表项较多时，页面二不容易滚动选中想要的资金源，且不可用资金源在该方式下需要隐藏。

　　2、输入支付密码弹层or页面

图10.输入支付密码两种方式

　　跟产品经理争论了很久输入支付密码时应该用整屏的页面还是半透明弹层。

　　产品经理的理由有两个，一是使用整屏的页面无需考虑数字安全键盘在不同屏幕的适配问题（数字安全键盘由外部提供，我们公司内部可控性较低），二是微信在支付过程也出现整屏输入支付密码的页面。

　　我一开始也纳闷，为什么微信会在收银台使用两种输入支付密码方式（微信截图如下）？

图11.微信输入支付密码两种方式截图

　　思考清楚后，发现弹层和页面分别对应着两种不同的场景。

　　弹层的场景是：输入支付密码为了达到某个目标（充值、提现、转账等），此场景下输入支付密码只是流程中的一个步骤，希望用户快速操作以达到目标。

　　页面的场景是：输入支付密码本身就是目标（验证身份），所以此处交互上并没有希望用户快速输入，反而需要用户较为仔细慎重地进行操作。

　　3、总结了金额输入框的数字金额规则，如下

　　a、首位输入小数点，输入框显示为“0.”；

　　b、首位输入“0”后，输入框显示为“0.”；删除小数点时，输入框同时删除“0.”（此处原来想的是如果输入“081”，输入框显示“81”，跟同事讨论时，同事觉得“0”在数字键盘上的位置，用户误操作的可能性较低。我俩还拿了传统的计算器看首位输入“0”的效果，最终敲定方案）；

　　c、小数点后只能有两位数字，继续输入，输入框无反应；

　　d、不可输入两次小数点，第二次输入小数点时，直播，输入框无反应。

　　4、xx卡充值时输入框的规则（xx卡是我们公司内部的充值卡，类似话费卡充值；卡号为16位，密码为8位。）

图12.xx卡充值

　　a、为保证卡号的可读性，卡号每4位中间隔空格，若用户发现输入错误，要删除，务必删除“空格”；

　　b、密码不需要脱敏（因为纸质的xx卡上就印有密码，所以app内也没必要做“不可见”处理；另外密码不是用户自己设置的，密码可见可降低输错率）；

　　c、如果卡号超过16位，再输入字符，输入框没有反应；如果密码超过8位，再输入字符，输入框没有反应；

　　d、卡号一输入，及时未满16位，“下一步”按钮高亮；密码未输满8位，“下一步”按钮置灰（此处考虑到卡号为16位，位数较长，用户单肉眼看可能不容易发现输漏，点击按钮后弹窗提示更为直观）。

　　投稿邮箱：[email protected]

　　本文由作者授权早读课发表，转载请联系作者。

　　3月29日，100offer 邀请了被称作「架构师的摇篮」的阿里中间件参加知乎 Live。

　　阿里中间件承载了世界上最有挑战的场景，应对了一次次双十一的流量洪峰，他们对人才的要求指引优秀架构师之路的方向。

　　扫描二维码，参与 Live 会让你了解怎么样的架构师才能胜任顶尖团队中的工作。