关于几种验证码获取布局的讨论

今天在交互交流群里，有朋友发起了关于验证码获取布局的讨论，觉得挺有收获的，就记下来分享。

1.动态口令获取在用户名与输入框之间

2.获取位于输入框

有些论证的人认为，第一种布局方式会好一些，因为一条操作流程直线下来很流畅，效率会相对高一些，而第二种方式就会要求视线在左右来回移动，会增加用户登录带来的负担。

在我看来，第二种方式觉得更好一些。首先，在web端上的因为屏幕想对大，可以将眼动的区域近似为一线运动，但是这个页面的载体是手机这样的移动设备，在小屏设备上，眼球注意到的区域用面移动来描述比线移动更佳准确；第二，图一种的布局太过于紧凑，获取button与input框过于接近，在移动端有限的操作区域上不易点击，较为容易发生误点，会让用户产生挫败感这样不好的体验。第三，第二种方式提供了icon＋提示文字的引导方式，用户不需要很仔细的阅读文字信息也能清楚当前输入的内容，第一种方式缺少图形元素，纯文本的方式降低了浏览的效率，一般情况下图形比文字更容易被大脑识别。

验证码获取button紧贴跟随的input框不同

认为第一种方式较好的理由是，获取button紧贴着手机号input框，可以让用户了解到验证码的获取途径方式是通过手机短信获取，而第二种方式没有表述出这样一种信息来源；

认为第二种较为优秀的是，input框内输入的字符量与input框更贴合，手机号码为11个数字，验证码多数为6个，字符内容较多的信息应该给予更多的展示空间，验证码内容较少，在横向布置的时候，划出一部分空间给获取验证码会协调一些。这里还有一个隐藏的逻辑关系，在第一种方式里，我是获取了验证码，再进行输入；第二种方式则是，我了解到了我需要输入验证码，再对验证码获取。换一种说法就是，第一种方式让我知道，我怎么得到激活码；第二种方式，让我知道为什么需要激活码，各有优劣，但我还是倾向于第二种字符量与input框大小相适应的布局方式。

这些都是基于每人各自的观点来表述的，在真实的使用场景中进行讨论会更有实际价值。