Axure 学习案例：简书注册登录页

最近在学习 Axure ，元旦假期做了个案例练手，模仿简书注册登录页面。简书的登录页面总体来说比较简洁，完成度会比较高，适合类似我这种菜鸟学习。

本案例原型演示页面：<a href="http://j888oe.axshare.com/">http://j888oe.axshare.com/</a>

简书注册登录页面主要包含：注册页面、登录页面、找回密码页面，主要就是实现三个页面之间的跳转，输入文本框、提交按钮等简单的控件。

<strong>注册页面</strong>

@注册页面|center

主要实现注册、昵称、密码等输入文本框，对应的文本框类型分别选择Email、Text、Password，验证码暂时使用占位控件替代，因为简书使用的是一家验证服务商的服务，需要通过前端和后面技术写入才能实现。

其中还有底部的第三方账号登录按钮，鼠标划过停留的时候显示高亮闪现的形式，这里就需要设置对应的图标控件在鼠标悬停时的交互样式为插入大小相同而颜色不同的图标。

@鼠标悬停交互样式设计|center

<strong>登录页面</strong>

@登录页面|center

实现手机/邮箱、密码输入框，也是选择对应的文本框类型。采用复选框设计是否输入密码按钮，并且增加忘记密码文本，支持跳转到找回密码页面。同样的，验证码控件暂时使用占位控件替代。在登录下方，还有支持海外手机号登录，选择海外手机号登录之后，就可以选择手机号前面的国际标准编号。

<strong>找回密码</strong>

@找回密码界面|center

找回密码界面提供发送邮件的方式重置密码，在发送邮件的时候同时需要输入验证码，暂时使用占位控件替代。

再加上页面左边的导航栏，整个页面就基本完善了，一个简单的简书登录页面原型完成。

<strong>思考</strong>

1. 登录页面中，选择海外手机号登录的时候，可切换手机号输入框的国际标准码编号，是怎么做到？
2. 左侧导航栏中，鼠标停留手机图标的时候，出来的简书APP二维码的空间怎么实现？

欢迎各位朋友指出上面的两个提问，谢谢！

<strong>文件下载</strong>

链接：<a href="http://pan.baidu.com/s/1craX0i">http://pan.baidu.com/s/1craX0i </a>密码：pjts

原型演示地址：<a href="http://j888oe.axshare.com">http://j888oe.axshare.com</a>

<strong>特别声明</strong>

此原型只是为了学习Axure软件，是为了让自己对 Axure 控件有更多的熟悉，所以可能跟简书原始原型有出入。本人作为初学者，这是使用Axure做的第一个较完整原型，其中难免有错误和不足，欢迎大家评论留言指出不妥指出，谢谢。

本案例使用到的简书注册登录页面的 Logo 图片，还有<a href="http://www.iconfont.cn/">iconfont</a>网站的部分图标，仅作学习参考，不能商用。

本文为原创文章，如需转载请注明原文出处：<a href="http://wp.me/p86ISR-fQ">原文链接</a>