#交互# 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. 提示框置于界面居中位置。图四完成
