Axure学习笔记:dubble登录界面

#交互#   Axure


dubble的登录界面流程。从上一个界面中点击login,跳转这个登录界面,显示用户名输入框、密码输入框、置灰的按钮。

默认弹出键盘。

点击输入框后进行输入,输入框内的内容长度>0时,输入框右侧显示清空按钮。输入用户名与密码后,可点击按钮进行登录。

点击按钮后,回收键盘,显示加载框,若登录失败加载框内显示登录失败后加载框消失。


效果如下:


流程如下:

1. 截取界面顶部的合成照片

Axure学习笔记:dubble登录界面_第1张图片

2. 导入键盘

Axure学习笔记:dubble登录界面_第2张图片

3. 绘制输入框背景矩形

Axure学习笔记:dubble登录界面_第3张图片

4. 绘制键盘上方的黑色矩形

Axure学习笔记:dubble登录界面_第4张图片

5. 绘制输入框的人图标、提示语、下一步按钮图标

Axure学习笔记:dubble登录界面_第5张图片

6. 绘制忘记密码按钮

Axure学习笔记:dubble登录界面_第6张图片

7. 绘制左上角的返回按钮

Axure学习笔记:dubble登录界面_第7张图片

图二-用户名输入框处于编辑状态

8. 复制上一个界面,导入清除按钮

Axure学习笔记:dubble登录界面_第8张图片

9. 导入键盘,调整键盘所在图层,图二完成

Axure学习笔记:dubble登录界面_第9张图片



图三-密码输入框处于编辑状态

10. 绘制密码输入框内容、修改清除按钮位置

Axure学习笔记:dubble登录界面_第10张图片

11. 修改下一步按钮填充颜色

Axure学习笔记:dubble登录界面_第11张图片




图四-点击下一步按钮界面

12. 点击下一步按钮后,键盘回收。删除键盘图层,绘制黑色矩形做背景

Axure学习笔记:dubble登录界面_第12张图片

13. 添加750*1334,#000000,不透明度20%的矩形作为遮罩效果

Axure学习笔记:dubble登录界面_第13张图片

14. 添加加载框

Axure学习笔记:dubble登录界面_第14张图片




素材:

Axure学习笔记:dubble登录界面_第15张图片
Axure学习笔记:dubble登录界面_第16张图片
Axure学习笔记:dubble登录界面_第17张图片

你可能感兴趣的:(Axure学习笔记:dubble登录界面)