因太久沒有更新，本先講講登錄界面的原型設計。可關注後續的註冊、重置密碼篇。
登錄界面結構
需要準備哪些東西
矩形、文本、圖片（作為產品圖標使用，沒有也可以）、輸入框、賬號/密碼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協議
閱讀更多 人人都是產品經理 的文章
