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

因太久沒有更新，本先講講登錄界面的原型設計?？申P注后續的注冊、重置密碼篇。

登錄界面結構

需要準備哪些東西

矩形、文本、圖片（作為產品圖標使用，沒有也可以）、輸入框、賬號/密碼icon。

學完將學會什么

了解登錄界面的布局以及各種元素，用戶在操作時需要有哪些反饋，怎么做體驗較好，本次內容先按基礎的做法為你展示，學完相信你會做出更好的交互原型。

下面開始剖解制作步驟……

制作方式

步驟一、畫出所有元素

先用矩形畫一個手機界面，尺寸為375*667；·制作界面的狀態欄、頂部欄，把頂部欄的文本元素補上去（這些沒有可以在公眾號輸入“移動端元件庫”）。

用矩形畫出兩個輸入框的長、寬度，設置圓角（圖中尺寸為280*40、圓角2）；再放置一個文本框，設置文本提示文案；設置手機號輸入框文本長度為13（后面做講解），密碼輸入框長度為20（控制密碼最長的長度）；·最后再用矩形、文本作為按鈕，分別放置：登錄、注冊、忘記密碼（不清楚的看圖）。

步驟二、設置交互樣式

·給兩個輸入框背景添加交互樣式“選中的”效果，然后設置輸入框“獲取焦點時”設置背景為選中（true），“失去焦點時”設置背景為取消選中（false）。

·在添加手機號輸入框中添加一個“清空”icon，設置用例“文本改變時”條件：文本框文本長度≥1時，顯示“清空”icon，否則隱藏。同時設置清空按鈕用例“鼠標單擊時”，清空文本框的值。

為密碼欄做一個密碼顯示/隱藏功能，首先找到顯示/隱藏的兩個icon，然后兩個icon分別放在一個動態面板的兩個狀態里（默認隱藏）。同時密碼的輸入框也需要做一個動態面面板，兩個狀態一個顯示、一個隱藏（默認隱藏），點擊顯示/隱藏時，切換密碼輸入框的顯示狀態。

步驟三、場景設置

設置點擊登錄按鈕時會有各種場景如：手機號為空、密碼為空、手機號或密碼錯誤、登錄成功。把四個toast放在一個動態面板內（默認隱藏），使用用例“鼠標單擊時”分別有四個case，不同場景顯示不同的toast提示。

做完以上的步驟基本上已經可以完成一個登陸界面的高保真交互原型了，下面再來了解一下進階部分……

步驟四、進階

如果已經做完以上的步驟，可以還嘗試做以下還有可以優化的地方。如手機號11位數的自動分段（344的格式），還有賬號輸入框輸入完11位數后，自動換行到輸入密碼欄……嘗試做一下。

在手機號輸入框設置用例“文本改變時”，該輸入框的值為以上函數，同學可以直接復制：[[This.text.replace(‘ ‘,”).substr(0,3).concat(‘ ‘).concat(This.text.replace(‘ ‘,”).substr(3,4)).concat(‘ ‘).concat(This.text.replace(‘ ‘,”).substr(7)).trim()]]·

前面已經設置好元件文字長度，現在此處就不要再設置了。

完成，來看一下效果案例鏈接： https://fm3meu.axshare.com

#專欄作家#

Donny，微信公眾號：UE_diary，人人都是產品經理專欄作家。工作兩年多的產品交互設計師，不定分享一些產品交互細節。

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

題圖來自Unsplash，基于CC0協議