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