正文之前的BB时间
前段时间学习了一下Axure，对照着官方文档使用了一下，还看了一些网上的博客和教程，但还是感觉有点虚，于是找了这个简单的实战案例做下试试。
毕竟是做的第一个案例，学习时间比较短（一周左右。。。==），也没啥经验，在这里记录一下做的过程，就当积累经验以后可以借鉴。
这里使用的是Axure RP 8 企业版。
下面正文开始~~
这里是正文
简书登录界面主要包含四个界面：登录界面、注册界面、手机找回密码界面、邮箱找回密码界面。除此之外我还加了一个简单的登录成功界面。
页面清单.png
这里所有的尺寸都是跟简书原来的win10登录界面一致的，可以通过chrome的开发者工具，查到每个页面中各个部件的尺寸大小、各种颜色参数信息。
参数.png
尺寸1.png
登录界面
原始界面：
原始登录界面汇总.png
界面各组件总汇：
-
登录选择键（按钮）：点击刷新当前登录页面
-
注册选择键（按钮）：1）鼠标移入出现下滑线段；2）点击打开注册页面
-
账号输入栏&密码输入栏（矩形+文本框+图标原型）：文本不为空 隐藏“请输入账号”提示栏&隐藏“请输入密码”提示栏
-
验证栏：没有实现
-
记住我（复选框）：点击可以钩
-
登录遇到问题？（按钮）：点击按钮出现选项，点击不同选项出现不同界面
-
登录键（按钮）：鼠标单击判断账号输入栏&密码输入栏是否为空：1）账号空弹出“请输入账号”提示栏；2）密码空弹出“请输入密码”提示栏；3）都不空登录成功，打开登录成功界面，传入账号文本为OnLoadVariable
-
社交账号登录：没有实现
部分重要部件的设置:
-
注册选择键：
登录界面注册键.png
-
账号输入栏：
登录界面账号文本框.png
-
登录键：
登录界面登录键.png
登录界面成品效果图：
登录界面的GIF.gif
注册界面
原始界面：
原始注册界面汇总.png
界面各组件总汇：
-
登录选择键（按钮）：1）鼠标移入出现下滑线段；2）点击打开登录页面
-
注册选择键（按钮）：点击刷新当前注册页面
-
昵称输入栏&手机号输入栏&密码输入栏（矩形+文本框+图标原型）：文本不为空 隐藏“请输入昵称”提示栏&隐藏“请输入手机号”提示栏&隐藏“密码长度”提示栏
-
发送验证码（按钮）：手机号长度小于11时变灰隐藏不能点击，手机号长度为11时变亮才能点击 【这里我在实现的时候设计了两个键，一个灰色一个亮色，放在同一个位置灰色在上亮色在下，手机号文本框长度到11就隐藏上面 的灰色键】
-
注册键（按钮）：鼠标单击判断昵称输入栏&手机号输入栏&密码输入栏状态：1）昵称空弹出“请输入昵称”提示栏；2）手机号空弹出“请输入手机号”提示栏；3）密码长度小于6，弹出“密码长度”提示栏；4）都不空注册成功，转到登录界面
-
社交账号直接注册：没有实现
部分重要部件的设置:
- 手机号输入栏：
注册界面手机号文本框.png
- 注册键：
注册界面注册键.png
注册界面成品效果图：
注册界面的GIF.gif
手机号重置密码界面
原始界面：
原始手机重置界面汇总.png
界面各组件总汇：
-
区号栏（下拉列表框）：下拉可选各国区号，有国家提示
-
手机号输入栏&新密码输入栏：由于前面的登录页面和注册页面已经实现了两次空行提示了，这里避免重复工作就没实现
-
发送验证码（按钮）：手机号长度小于11时变灰隐藏不能点击，手机号长度为11时变亮才能点击
-
返回登录注册：点击转到登录界面
手机号重置密码界面成品效果图：
手机号重置密码界面的GIF.gif
邮箱重置密码界面
【这里与手机号手机号重置密码界面几乎相同，就不细讲了】
邮箱重置密码界面成品效果图：
邮箱重置密码界面的GIF.gif
登录成功界面
组件：
只有一个矩形，接受了前面登录界面传入的账号文本为OnLoadVariable，显示“Welcome,[账户名]”
登录成功界面效果图：
登录成功界面的GIF.gif
完成！
成品请访问：https://5o7bep.axshare.com
正文之后再BB两句
这是我做的第一个原型，做完还是很有成就感的！
之前也没有经过系统的Axure学习和培训，可能有很多不规范的地方，有的功能可能有其他更通用、更简单的方式，希望看到这篇文章的小伙伴多多提建议，谢谢啦~~
在写这篇博客的过程中，发现了很多做原型的时候忽略的小问题，于是就边写边改，看来写博客（或者说做完事情整理一下全过程？？）还是很有必要滴！以后养成做完一个事情就梳理一下全过程的习惯吧~
还有就是发现积累元件库的工作真的很有必要，这可以成为一个长期的、不断完善的工作，更丰富的元件库可以帮我们做出更好的原型！！毕竟巧妇难为无米之炊嘛~
网友评论