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

知乎——與世界分享你的知識、經驗和見解。

這是知乎精神，今天我們來分享一下它的注冊與登錄界面原型，小小功能卻是最常見的應用場景。

可以到知乎網站zhihu.com直接體驗一下，然后再來體驗一下下面的原型。

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

我們來拆分一下首頁的功能結構。

1、一個LOGO，一個中文slogan。

2、注冊頁面

• 輸入提示框，未輸入時顯示的是輸入提示，有輸入時提示信息隱藏
• 隨機驗證碼生成
• 注冊校驗，如果輸入的信息不合法，會在當前輸入框的右側滑動顯示提示信息，很有趣
• 鼠標移動到驗證碼上，提示可刷新，單擊后可生成新的隨機碼

3、登錄頁面

登錄與注冊界面基本沒有差別，只是少了姓名輸入框，按鈕標題變成了登錄

4、社交帳號登錄列表，包括微信、微博和QQ（這部分沒有去做了）

5、交互效果

• 單擊注冊與登錄鏈接，在注冊與登錄界面之間切換，并動態移動藍色線條表示當前選中的功能。
• 輸入錯誤時，注冊或登錄時提示錯誤信息
• 登錄界面點擊“無法登錄”時彈出幫助提示

參照上面的功能點說明，開始動手做原型。

一、界面布局

注冊和登錄，兩個功能，界面基本差不多，首先想到的自然是使用動態面板的兩個狀態來分別表示注冊和登錄狀態，先處理注冊界面，然后復制一份界面布局，作為登錄界面，稍作修改就可以了。

輸入框這里的提示信息有一點點小技巧，因為輸入框不支持設置默認提示信息，所以為了能在焦點落入輸入框后能仍然看到提示信息，使用了兩個部件，一個矩形框，一個文本框，文本框樣式設置為無邊框且透明的，這樣就能 看到后面的矩形框，這樣看起來就像是文本輸入框的外邊框，其實不是它的邊框。

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

其它手機號、密碼、驗證碼都是一樣的文本輸入框，直接復制第一個姓名的組合輸入框后，改改里面的提示信息就行了。

添加注冊知乎按鈕、社交帳號的圖標，這里偷懶了，直接截圖了，因為后面不打算處理社交帳號登錄部分。

二、隨機驗證碼的生成

隨機驗證碼是顯示在一個模糊背景上的四位隨機字母和數字，這里只需要從26個大寫英文字母和10個數字中隨機獲取一位字符，四個字符拼成一個隨機驗證碼。設置一個變量，變量的值就是26個大寫英文字母和10個數字，使用字符串截取函數及數學的隨機函數來獲得隨機字符：

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

重復以上[[]]之間內四個值就生成了四位隨機驗證碼。

三、“注冊知乎”按鈕事件

給“注冊知乎”按鈕添加處理事件，做了簡單的規則校驗，如果四個輸入框都沒有輸入，則水平滑動提示用戶需要如何填寫，再次單擊輸入框時，隱藏提示信息，當然，也是帶滑動效果。

四、登錄界面

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

五、添加“無法登錄”的彈出提示

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

顯示和隱藏這個彈出窗口使用了淡入淡出效果+移動效果。

大功告成，串起來跑一下看看效果吧！

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

本文由 @Axure原型設計工場?原創發布于人人都是產品經理?，未經許可，禁止轉載。