Day059 - Registration confirmation
优化对象
手机淘宝 iOS
用户场景
过年了，想给家人买点东西邮寄回去，在淘宝选好后，点击提示我登录。由于我的手机安装了手机淘宝App，于是提示我手机登录。
遭遇问题
打开手机淘宝App后，我以为会和微信一样，直接有一个大按钮，点击就直接登录了。可手机淘宝App的首页却什么都没有。我瞅了半天才在右上角发现了一个小红点（这个小红点在满屏橙黄色的情况下就不是那么显眼了）
点击这个小红点后，是消息列表。在消息列表中有手机登录的消息，点击这个消息才是手机登录按钮。由于是Html做的，所以体验也不好。
于是，往后再提示我手机登录的时候，我就选择输入账号密码登录，不再使用手机登录了。
思考过程
这个体验实在是不能忍，虽然我可做创新性设计的地方不多。但作为一个淘宝十年老用户，真心忍受不了这样的登录方式，太虐心了。
我的理解是：手机登录提示界面，是与用户的电脑端操作时刻关联着的。
只有用户在电脑端进行了“手机登录”操作，手机端才会显示这个界面。它的及时性非常强。当进行此操作时，说明用户正急需登录确认，所以手机端就应该立刻显示此确认登录的界面。
无论用户的手机是打开手机淘宝，还是别的软件，只要用户在电脑端进行了此手机登录操作，那么打开手机淘宝就应该立刻调起确认登录界面。
无论用户在手机端浏览手机淘宝到了哪一个界面，只要用户在电脑端进行了此手机登录操作，那么手机淘宝也应该立刻调起确认登录界面。
解决方案
如图所示，当用户在电脑端进行了手机登录操作，立刻调起此界面。
写在最后的话
这个界面我尝试了各种形式，做了10几个版本进行对比。最后采用了参考微信的形式。
因为我发现微信在这个界面的设计上非常的讲究。比如：
1、在750x1334分辨率中，线的粗细是2px，这样就与文字中的线粗细保持一致，更加有统一感。
2、电脑的图标中，外边框的线是2px，中间的是1px。
3、登录按钮和取消登录，能够形成一种线的对比。若是取消登录换为“取消”，则会被视为一个圆，而不是一个线。对比的时候就不是很好看（这里我还没有找到合适的设计理论来论证这一点）。但是两个版本放在一起来看，的确是线与线之间的对比，要比线与圆之间的对比更加和谐。若要形成对比，则对比越强烈越好看，“登录”与“取消登录”除了在颜色字号上的对比以外，再加上了一个文字数量的对比。
4、三种字号能够形成对比，避免了同样字号带来的呆板无趣
5、由于整体画面较轻，且上部的电脑是线框型的，所以使用线框的按钮，比图形的按钮更能保持统一的风格。
6、由于上部的电脑占的面积并不大，所以底部按钮没有使用通栏的大按钮，而是使用一个相比较小的按钮。这样上下的重量能够平衡。底部的按钮比上部的按钮要宽一些，但是高度会少很多，这也是为了视觉上的“平衡”。
评论