#交互# ? Axure

dubble的注冊界面交互截圖有點(diǎn)多啊~~所以只弄了部分的界面交互。

其實(shí)一共才兩個(gè)界面，但是每一個(gè)控件的交互操作都截圖了，所以加起來的圖有點(diǎn)多了。

注冊流程：先輸入郵箱->輸入用戶名->輸入密碼->完成注冊。

輸入郵箱為第一個(gè)界面，輸入的郵箱符合注冊要求后，跳轉(zhuǎn)下一個(gè)界面。在第二個(gè)界面中輸入用戶名和密碼。

圖一 ~ 圖四，分別為輸入郵箱界面中的四個(gè)不同狀態(tài)的交互。

圖一（左上角）：默認(rèn)彈出郵箱鍵盤，在鍵盤上方的黑色背景矩形中提供相關(guān)的提示。

圖二（右上角）：在郵箱輸入框中輸入內(nèi)容時(shí)，輸入框右側(cè)顯示清除按鈕。鍵盤上方彈出了輸入內(nèi)容相關(guān)聯(lián)的字詞。

圖三（左下角）：APP對輸入框的內(nèi)容進(jìn)行判斷，當(dāng)輸入內(nèi)容出現(xiàn)了@xx.的時(shí)候，可以點(diǎn)擊下一步按鈕（應(yīng)該是使用了正則表達(dá)式對輸入內(nèi)容進(jìn)行了判斷，當(dāng)輸入內(nèi)容同時(shí)滿足字符@與字符.的時(shí)候，可以基本默認(rèn)用戶輸入的內(nèi)容為郵箱）

圖四（右下角）：點(diǎn)擊下一步后彈出提示框，顯示用戶輸入的郵箱地址，讓用戶判斷輸入的郵箱是否正確。進(jìn)行了二次判斷。

效果如下：

流程如下：

圖一

1. 從上一個(gè)界面中點(diǎn)擊注冊，跳轉(zhuǎn)新界面。

copy之前完成的登錄界面，刪除用戶名輸入框。

2. 修改密碼輸入框內(nèi)的提示語（設(shè)置提示文本居中），刪除密碼圖標(biāo)。

3. 繪制4*48，無邊框，內(nèi)部填充#9db7f2，圓角設(shè)置為5px的矩形。

4. 修改黑色矩形內(nèi)的提示語。完成了圖一。

圖二

5. 把圖一copy一下。

修改輸入框內(nèi)容，添加輸入框右側(cè)的清除按鈕。圖二完成。

圖三

6. 把圖二copy一下。

修改輸入框內(nèi)容，添加輸入框輸入內(nèi)容最后一個(gè)字符輸入的選中狀態(tài)

7. 添加輸入光標(biāo)，以及選中字符的選中狀態(tài)（繪制14*45，無邊框，內(nèi)填充#9db7f2，不透明度30%的矩形），放置于字符上方。

8. 修改下一步圖標(biāo)的填充顏色為#d19148。

9. 添加鍵盤上方提示的關(guān)聯(lián)字詞的右側(cè)的展開圖標(biāo)。

10.?添加鍵盤上方提示的關(guān)聯(lián)字詞。圖三完成。

圖四

11. 把圖三copy。

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

12. 添加遮罩圖層。繪制750*1334，無邊框，內(nèi)填充#000000，不透明度20%的矩形。

13. 繪制提示框，繪制540*283矩形。填充類型為漸變，左側(cè)的填充顏色選擇#f8f8f8,右側(cè)填充顏色#d0d0d0

14. 選擇一級標(biāo)題為提示框的標(biāo)題

15. 輸入提示框內(nèi)容，字體大小25px，字體顏色設(shè)置為#333333

16. 繪制提示框底部按鈕。繪制270*90，不設(shè)置填充顏色，矩形邊框顯示上、右，圓角設(shè)置為25px（只顯示左下角為圓角）

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