国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

編輯導(dǎo)語：本文作者根據(jù)一個咖啡訂購APP的設(shè)計稿，制作了一個高保真的原型，并對功能進行分析，分享了交互的制作過程，一起來學(xué)習(xí)一下吧。

很久沒有來更新了，最近休假，收集了一些移動端的APP設(shè)計稿，這款A(yù)PP是UI8上看到的，從設(shè)計風(fēng)格、配色、操作上，都比較符合我的口味，所以制作了一個高保真的原型，今天和大家一起交流一下制作過程。

01 原網(wǎng)站設(shè)計稿（Figma格式）

02 高保真原型（Axure9格式）

其實這個項目的原型，在制作過程中，UI部分的素材都可以從設(shè)計稿中獲取到，交互功能沒有太多，主要涉及幾個點：

• 注冊、登錄的表單驗證
• 底部菜單的切換

下面以注冊登錄的表單驗證和大家分享一下。

03 功能分析

登錄頁的交互，包含以下幾點：

• 輸入框獲取焦點狀態(tài)的樣式變化
• 輸入的密碼顯示/隱藏效果
• 郵箱的格式驗證，是否包含@作為判斷標(biāo)準(zhǔn)，不包含則高亮顯示

實現(xiàn)上面的效果，我們會用到以上幾個元件。

• 輸入密碼的input
• 顯示密碼的input
• 顯示/隱藏密碼的按鈕
• 驗證交互的按鈕

04 功能制作

原型的繪制就略過了，主要分享一下，交互的制作。

第一步：我們將默認(rèn)的密碼input命名為“pwd”，顯示密碼的input命名為“showpwd”，同時將“showpwd”設(shè)為隱藏狀態(tài)，并且與“pwd”進行對齊。

第二步：將顯示和隱藏按鈕移動到合適的位置，并且將2個圖標(biāo)，命名為“顯示密碼按鈕”和“隱藏密碼按鈕”，同時將“隱藏密碼按鈕”默認(rèn)設(shè)置為隱藏。

第三步：為顯示和隱藏按鈕設(shè)置交互，點擊“顯示密碼按鈕”，添加單擊的事件，為“showpwd”的input增加設(shè)置文本的動作，如果所示，作用是當(dāng)點擊“顯示密碼按鈕”時，將用戶輸入的密碼，在showpwd元件中顯示。

同時在增加“顯示/隱藏”的動作，將“showpwd”和“隱藏密碼按鈕”進行顯示，同時將“顯示密碼按鈕”設(shè)為隱藏。

第四步：設(shè)置郵箱的高亮效果，這里的高亮，是通過對元件的選中狀態(tài)來實現(xiàn)的。首先，我們選中郵箱輸入框，設(shè)置它的選中效果，邊框設(shè)為紅色，寬度為2。

第五步：設(shè)置按鈕的交互，點擊按鈕的交互，是為了實現(xiàn)驗證郵箱格式的，當(dāng)用戶輸入的郵箱不包含@時，則激活選中的樣式，達到高亮的效果。

選中按鈕添加點擊的事件，同時增加判斷，用于驗證。這里設(shè)置的是當(dāng)email的輸入框內(nèi)容不包含@時，設(shè)置email的輸入框為選中狀態(tài)。

同時在設(shè)置一個包含@的判斷，如果包含，則進入主界面。

完成以上的步驟，F(xiàn)5預(yù)覽一下效果。

本文由 @IMZQZ 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議