English version also available: TinyCreditCard: A clear and animated credit card input workflow implement
在手机平台下，内容输入是一个比较麻烦的行为，UI需要提供足够的提示和引导，用户操作也比观看内容繁琐很多，特别是表单输入。
我们在App中面对最多的表单输入应该就是信用卡输入和地址输入。地址虽然要输入的内容更多，但我认为信用卡输入对于用户来说更加困难。因为地址是大家脑海中已经清晰的内容，而信用卡信息我相信很少人会记得吧，绝大部分人都需要看着信用卡来输入相应信息，而且信用卡是关乎金钱的内容，人面对金钱相关的操作就会特别谨慎。
所以我编写了TinyCreditCard来解决信用卡输入繁琐的问题。下文的内容就是我对信用卡输入流程实现的看法，基础的设计是受 Paweł Szymankiewicz(@p_szymankiewicz) 的一张原型设计图片所启发：
也非常感谢Paweł分享所用的字体资源给我，而除了原型图里面的基本设计外，所有交互和细节设计都是我自己的理念。总体效果如下：
本文主要分享交互设计上的理念，代码方面的内容将在下一篇文章中分享，当然如果你感兴趣，你可以随时查看项目的源码。
让用户清楚需要输入的内容
其实信用卡要输入的内容并不多，只有短短的四项：
- 卡号
- 持卡人名称
- 过期时间
- 安全码
但虽然大家都很经常使用信用卡，却对这些信息一点都不熟悉，因为我们在线下使用信用卡的时候刷一下就好了，并不用管这些信息。当然目前有些信用卡扫描库尝试通过摄像头直接扫描解决输入繁琐的问题，但摄像头扫描对于操作和环境还有设备摄像头存在一定的要求，所以手动输入对于很多用户来说还是最简单直接的方式。
输入内容最简单的方式就是直接四个输入框，让用户逐个输入。但就是因为信用卡上的信息我们平常根本用不到，所以对于部分用户来说，在卡上找到这些内容也有一定的学习成本。毕竟在卡上和在输入框的称呼并没有清晰的对应。这在我看来是最大的一个理解成本，所以TinyCreditCard在基础设计就把卡片的图示展示出来，用户只需要拿着卡对着位置查看然后输入，不用找内容位置或者熟悉内容含义。
大家可以看到，上方是信用卡的效果，以直观的方式把实体卡的内容带到界面上，然后以橙色提示框提醒用户当前需要输入的内容位置。然后下方是纯粹属于虚拟的输入框，给用户输入初始的信息，同时这些内容会实时反映到卡上，以实现输入内容和实体卡内容的一种关联提示，也方便用户核对。
让用户方便地切换输入内容
既然有四项输入的内容，我们当然需要四个输入框，但如果四个输入框同时出现在界面上，用户就会不自觉去理解这四个看似相同的内容，我们就需要增加描述文字，界面复杂度也更高，所以这里采用横排切换的方式，你可以在界面中分辨到是否有下一个需要输入的内容，但你的专注力和界面的说明都始终集中在当前的输入项中。
切换到其他输入项提供了几种方式：
- 当输入的内容被认定为“可能完整”的时候，输入框会出现一个按钮，用户可以点击按钮进行下一步的操作如进行下一步输入。
- 因为用户主要操作都集中在下方的键盘中，所以为了方便用户手指不需要移动太远，键盘的
returnKey也实现了同样的效果，但因为数字键盘没有returnKey，所以还在键盘上加了一个简单的工具栏实现取消和returnKey的效果
- 输入框可以直接横向滑动，切换到任意一个输入框
- 卡上的输入内容区域其实也可以直接点击，直接切换到相应的内容输入状态。
看起来同一个行为有很多不同的途径执行，显得有点繁琐，但因为大部分操作并不会给UI增加元素，而且所有操作都是跟已有的元素配合的，例如点击操作配合橙色提示区域，滑动操作配合横向排列的输入框，所以增加这些操作一方面是方便用户的不同习惯，另一方面是响应用户看到一些熟悉的元素时最直觉的操作。
棘手的安全码提示
安全码输入向来是信用卡输入内容里面最难以理解的一个。因为安全码这个概念远没有其他内容好理解。卡号在卡上最显眼的位置，而且大部分卡都有卡号的概念。持卡人姓名和过期日期都是有特定格式且能被人直接阅读理解的内容，而且很多卡上还有个小标题作为提示。但安全码并无任何标示，而且还是四个输入内容中唯一一个放在卡背面的。而且安全码的概念是信用卡的一个特有概念，更别说连个统一的称呼都没有，下面是Wiki上的一个说明：
在很多信用卡输入的设计上，安全码都需要额外的提示内容，告知用户信息在卡的背面，然后用个示例图圈出安全码大概的位置，然后再给用户一个输入框输入。但在TinyCreditCard的设计中完全不需要。需要提醒用户内容在卡背面么？让我们在输入安全码的时候把上方的卡翻转过来就好了，用户也很清晰，信息位置提示同样通过橙色的提示区域实现，因为前面已经经历了三个内容的输入，因此这些提示信息变得非常容易理解。
以上内容就是TinyCreditCard中针对信用卡添加流程输入繁琐问题的一些关键处理，希望对大家有启发。下一篇文章将分享编写TinyCreditCard时候的一些代码经验。
