Axure学习笔记：dubble注册界面1

#交互#   Axure

---

dubble的注册界面交互截图有点多啊~~所以只弄了部分的界面交互。

其实一共才两个界面，但是每一个控件的交互操作都截图了，所以加起来的图有点多了。

注册流程：先输入邮箱->输入用户名->输入密码->完成注册。

输入邮箱为第一个界面，输入的邮箱符合注册要求后，跳转下一个界面。在第二个界面中输入用户名和密码。

图一 ~ 图四，分别为输入邮箱界面中的四个不同状态的交互。

图一（左上角）：默认弹出邮箱键盘，在键盘上方的黑色背景矩形中提供相关的提示。

图二（右上角）：在邮箱输入框中输入内容时，输入框右侧显示清除按钮。键盘上方弹出了输入内容相关联的字词。

图三（左下角）：APP对输入框的内容进行判断，当输入内容出现了@xx.的时候，可以点击下一步按钮（应该是使用了正则表达式对输入内容进行了判断，当输入内容同时满足字符@与字符.的时候，可以基本默认用户输入的内容为邮箱）

图四（右下角）：点击下一步后弹出提示框，显示用户输入的邮箱地址，让用户判断输入的邮箱是否正确。进行了二次判断。

---

效果如下：

---

流程如下：

图一

1. 从上一个界面中点击注册，跳转新界面。

copy之前完成的登录界面，删除用户名输入框。

2. 修改密码输入框内的提示语（设置提示文本居中），删除密码图标。

3. 绘制4*48，无边框，内部填充#9db7f2，圆角设置为5px的矩形。

4. 修改黑色矩形内的提示语。完成了图一。

---

图二

5. 把图一copy一下。

修改输入框内容，添加输入框右侧的清除按钮。图二完成。

---

图三

6. 把图二copy一下。

修改输入框内容，添加输入框输入内容最后一个字符输入的选中状态

7. 添加输入光标，以及选中字符的选中状态（绘制14*45，无边框，内填充#9db7f2，不透明度30%的矩形），放置于字符上方。

8. 修改下一步图标的填充颜色为#d19148。

9. 添加键盘上方提示的关联字词的右侧的展开图标。

10. 添加键盘上方提示的关联字词。图三完成。

---

图四

11. 把图三copy。

绘制界面下方的黑色矩形。

12. 添加遮罩图层。绘制750*1334，无边框，内填充#000000，不透明度20%的矩形。

13. 绘制提示框，绘制540*283矩形。填充类型为渐变，左侧的填充颜色选择#f8f8f8,右侧填充颜色#d0d0d0

14. 选择一级标题为提示框的标题

15. 输入提示框内容，字体大小25px，字体颜色设置为#333333

16. 绘制提示框底部按钮。绘制270*90，不设置填充颜色，矩形边框显示上、右，圆角设置为25px（只显示左下角为圆角）

17. 提示框置于界面居中位置。图四完成