因太久沒有更新，本先講講登錄界面的原型設(shè)計(jì)?？申P(guān)注后續(xù)的注冊(cè)、重置密碼篇。

登錄界面結(jié)構(gòu)

需要準(zhǔn)備哪些東西

矩形、文本、圖片（作為產(chǎn)品圖標(biāo)使用，沒有也可以）、輸入框、賬號(hào)/密碼icon。

學(xué)完將學(xué)會(huì)什么

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

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

制作方式

步驟一、畫出所有元素

先用矩形畫一個(gè)手機(jī)界面，尺寸為375*667；·制作界面的狀態(tài)欄、頂部欄，把頂部欄的文本元素補(bǔ)上去（這些沒有可以在公眾號(hào)輸入“移動(dòng)端元件庫”）。

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

步驟二、設(shè)置交互樣式

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

·在添加手機(jī)號(hào)輸入框中添加一個(gè)“清空”icon，設(shè)置用例“文本改變時(shí)”條件：文本框文本長度≥1時(shí)，顯示“清空”icon，否則隱藏。同時(shí)設(shè)置清空按鈕用例“鼠標(biāo)單擊時(shí)”，清空文本框的值。

為密碼欄做一個(gè)密碼顯示/隱藏功能，首先找到顯示/隱藏的兩個(gè)icon，然后兩個(gè)icon分別放在一個(gè)動(dòng)態(tài)面板的兩個(gè)狀態(tài)里（默認(rèn)隱藏）。同時(shí)密碼的輸入框也需要做一個(gè)動(dòng)態(tài)面面板，兩個(gè)狀態(tài)一個(gè)顯示、一個(gè)隱藏（默認(rèn)隱藏），點(diǎn)擊顯示/隱藏時(shí)，切換密碼輸入框的顯示狀態(tài)。

步驟三、場(chǎng)景設(shè)置

設(shè)置點(diǎn)擊登錄按鈕時(shí)會(huì)有各種場(chǎng)景如：手機(jī)號(hào)為空、密碼為空、手機(jī)號(hào)或密碼錯(cuò)誤、登錄成功。把四個(gè)toast放在一個(gè)動(dòng)態(tài)面板內(nèi)（默認(rèn)隱藏），使用用例“鼠標(biāo)單擊時(shí)”分別有四個(gè)case，不同場(chǎng)景顯示不同的toast提示。

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

步驟四、進(jìn)階

如果已經(jīng)做完以上的步驟，可以還嘗試做以下還有可以優(yōu)化的地方。如手機(jī)號(hào)11位數(shù)的自動(dòng)分段（344的格式），還有賬號(hào)輸入框輸入完11位數(shù)后，自動(dòng)換行到輸入密碼欄……嘗試做一下。

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

前面已經(jīng)設(shè)置好元件文字長度，現(xiàn)在此處就不要再設(shè)置了。

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

#專欄作家#

Donny，微信公眾號(hào)：UE_diary，人人都是產(chǎn)品經(jīng)理專欄作家。工作兩年多的產(chǎn)品交互設(shè)計(jì)師，不定分享一些產(chǎn)品交互細(xì)節(jié)。

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

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