知乎——與世界分享你的知識(shí)、經(jīng)驗(yàn)和見(jiàn)解。

這是知乎精神，今天我們來(lái)分享一下它的注冊(cè)與登錄界面原型，小小功能卻是最常見(jiàn)的應(yīng)用場(chǎng)景。

可以到知乎網(wǎng)站zhihu.com直接體驗(yàn)一下，然后再來(lái)體驗(yàn)一下下面的原型。

1. 知乎首頁(yè) www.zhihu.com，這是真品哦
2. 知乎首頁(yè)原型設(shè)計(jì)在線demo（內(nèi)有源文件下載），這是原型設(shè)計(jì)效果演示頁(yè)面

我們來(lái)拆分一下首頁(yè)的功能結(jié)構(gòu)。

1、一個(gè)LOGO，一個(gè)中文slogan。

2、注冊(cè)頁(yè)面

• 輸入提示框，未輸入時(shí)顯示的是輸入提示，有輸入時(shí)提示信息隱藏
• 隨機(jī)驗(yàn)證碼生成
• 注冊(cè)校驗(yàn)，如果輸入的信息不合法，會(huì)在當(dāng)前輸入框的右側(cè)滑動(dòng)顯示提示信息，很有趣
• 鼠標(biāo)移動(dòng)到驗(yàn)證碼上，提示可刷新，單擊后可生成新的隨機(jī)碼

3、登錄頁(yè)面

登錄與注冊(cè)界面基本沒(méi)有差別，只是少了姓名輸入框，按鈕標(biāo)題變成了登錄

4、社交帳號(hào)登錄列表，包括微信、微博和QQ（這部分沒(méi)有去做了）

5、交互效果

• 單擊注冊(cè)與登錄鏈接，在注冊(cè)與登錄界面之間切換，并動(dòng)態(tài)移動(dòng)藍(lán)色線條表示當(dāng)前選中的功能。
• 輸入錯(cuò)誤時(shí)，注冊(cè)或登錄時(shí)提示錯(cuò)誤信息
• 登錄界面點(diǎn)擊“無(wú)法登錄”時(shí)彈出幫助提示

參照上面的功能點(diǎn)說(shuō)明，開始動(dòng)手做原型。

一、界面布局

注冊(cè)和登錄，兩個(gè)功能，界面基本差不多，首先想到的自然是使用動(dòng)態(tài)面板的兩個(gè)狀態(tài)來(lái)分別表示注冊(cè)和登錄狀態(tài)，先處理注冊(cè)界面，然后復(fù)制一份界面布局，作為登錄界面，稍作修改就可以了。

輸入框這里的提示信息有一點(diǎn)點(diǎn)小技巧，因?yàn)檩斎肟虿恢С衷O(shè)置默認(rèn)提示信息，所以為了能在焦點(diǎn)落入輸入框后能仍然看到提示信息，使用了兩個(gè)部件，一個(gè)矩形框，一個(gè)文本框，文本框樣式設(shè)置為無(wú)邊框且透明的，這樣就能 看到后面的矩形框，這樣看起來(lái)就像是文本輸入框的外邊框，其實(shí)不是它的邊框。

給輸入框添加事件，在輸入的文本的長(zhǎng)度大小0，表示有輸入文本，這時(shí)候就可以設(shè)置后面矩形框文本的提示信息為空，如果不斷刪除文本的內(nèi)容到空時(shí)，則重新設(shè)置后面的矩形框文本為提示信息。

其它手機(jī)號(hào)、密碼、驗(yàn)證碼都是一樣的文本輸入框，直接復(fù)制第一個(gè)姓名的組合輸入框后，改改里面的提示信息就行了。

添加注冊(cè)知乎按鈕、社交帳號(hào)的圖標(biāo)，這里偷懶了，直接截圖了，因?yàn)楹竺娌淮蛩闾幚砩缃粠ぬ?hào)登錄部分。

二、隨機(jī)驗(yàn)證碼的生成

隨機(jī)驗(yàn)證碼是顯示在一個(gè)模糊背景上的四位隨機(jī)字母和數(shù)字，這里只需要從26個(gè)大寫英文字母和10個(gè)數(shù)字中隨機(jī)獲取一位字符，四個(gè)字符拼成一個(gè)隨機(jī)驗(yàn)證碼。設(shè)置一個(gè)變量，變量的值就是26個(gè)大寫英文字母和10個(gè)數(shù)字，使用字符串截取函數(shù)及數(shù)學(xué)的隨機(jī)函數(shù)來(lái)獲得隨機(jī)字符：

[[random_str.substr(random_str.length*Math.random(),1)]]
random_str=ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789

重復(fù)以上[[]]之間內(nèi)四個(gè)值就生成了四位隨機(jī)驗(yàn)證碼。

三、“注冊(cè)知乎”按鈕事件

給“注冊(cè)知乎”按鈕添加處理事件，做了簡(jiǎn)單的規(guī)則校驗(yàn)，如果四個(gè)輸入框都沒(méi)有輸入，則水平滑動(dòng)提示用戶需要如何填寫，再次單擊輸入框時(shí)，隱藏提示信息，當(dāng)然，也是帶滑動(dòng)效果。

四、登錄界面

復(fù)制登錄界面布局，刪除第一個(gè)姓名輸入框，修改登錄按鈕的事件中各個(gè)提示信息文本的初始位置，及移動(dòng)的目標(biāo)位置，到這里基本改動(dòng)不多了。

五、添加“無(wú)法登錄”的彈出提示

這是個(gè)彈出窗口，因此將它放在最外層，設(shè)置好布局樣式。外邊框設(shè)置陰影效果，調(diào)整陰影大小，模擬陰影邊框。添加兩個(gè)按鈕“找回密碼”和“使用手機(jī)驗(yàn)證碼登錄”，單擊這兩個(gè)按鈕和右上角的關(guān)閉按鈕后隱藏這個(gè)彈出窗口。

顯示和隱藏這個(gè)彈出窗口使用了淡入淡出效果+移動(dòng)效果。

大功告成，串起來(lái)跑一下看看效果吧！

注：教程里并不會(huì)詳細(xì)說(shuō)明每個(gè)事件里的設(shè)置，需要你自己下載源文件研究一下哦，教程的目的主要是提供思路和方法，如果有不清楚的，歡迎找我交流哦。

本文由 @Axure原型設(shè)計(jì)工場(chǎng)?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。