中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導語：本文作者根據一個咖啡訂購APP的設計稿，制作了一個高保真的原型，并對功能進行分析，分享了交互的制作過程，一起來學習一下吧。

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

01 原網站設計稿（Figma格式）

02 高保真原型（Axure9格式）

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

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

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

03 功能分析

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

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

實現上面的效果，我們會用到以上幾個元件。

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

04 功能制作

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

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

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

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

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

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

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

選中按鈕添加點擊的事件，同時增加判斷，用于驗證。這里設置的是當email的輸入框內容不包含@時，設置email的輸入框為選中狀態。

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

完成以上的步驟，F5預覽一下效果。

本文由 @IMZQZ 原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議