網(wǎng)站登錄以及注冊界面如何設(shè)置

　　為什么會有這么大的差異？我認(rèn)為在于思路的混亂和不一致。只有掌握了嚴(yán)謹(jǐn)和邏輯的設(shè)計思路，不僅簡單的登錄和注冊會給用戶留下良好的第一印象，也會讓你在其他業(yè)務(wù)模塊的產(chǎn)品設(shè)計中行云流水。

　　下面就跟隨磊叔來一次登錄和注冊的產(chǎn)品設(shè)計之旅。磊叔拿工資向你保證，這將是你人生中最精彩的旅行之一。

　　1. 萬事第一問：為什么

　　5W思維工具的第一個W即是WHY，為什么。

　　產(chǎn)品經(jīng)理接到需求的本能反應(yīng)應(yīng)該是問一句：為什么要做這個需求？搞清楚需求的前世今生和來龍去脈，再加上“知己知彼百戰(zhàn)不殆”的指導(dǎo)思想，對于接下來的需求分析、業(yè)務(wù)實現(xiàn)、功能落地都有莫大的好處。

　　為什么要做登錄和注冊？

　　登錄和注冊的需求來源部門或許有著五花八門的回答，也許是建立用戶體系的需要，也許是收集用戶信息的需要，也許是用戶運(yùn)營的需要，很多也許。多不要 緊，但至少我們知道了實現(xiàn)“登錄和注冊”對于業(yè)務(wù)有著至關(guān)重要的作用，且會對很多業(yè)務(wù)功能產(chǎn)生重大影響，需要產(chǎn)品經(jīng)理認(rèn)真、慎重的進(jìn)行設(shè)計。

　　到此為止，即可。

　　2. 抽絲剝繭：搞定主要矛盾先

　　搞清楚了來龍去脈，明確了重要性，現(xiàn)在就來點(diǎn)實用知識，開始進(jìn)入實際操作，從登錄和注冊的最核心業(yè)務(wù)開始分析。

　　很明顯，登錄和注冊的主要矛盾就是完成兩件事：用戶登錄和用戶注冊。

　　登錄，就是提供給用戶某種user interface，簡稱UI，即用戶接口，讓用戶填入某些標(biāo)識信息來與系統(tǒng)中已有數(shù)據(jù)進(jìn)行身份驗證匹配，并賦予用戶某些特殊功能使用權(quán)限的過程。

　　聽上去很復(fù)雜，實際上登錄的主要矛盾就是：

　　讓用戶能夠輸入某種專有信息，例如獨(dú)特的字符串、電話、身份證、電子信箱等等，總之能唯一表明這個用戶的身份信息即可

　　為了解決這個主要矛盾，我們就設(shè)計兩個輸入接口：

　　身份標(biāo)識：暫定用戶名、手機(jī)、電子郵箱三者選一

　　密 碼：暫定6位字符

　　注冊，就是將用戶的信息保存在系統(tǒng)中，用以日后的登錄匹配信息之用。

　　實際上注冊的主要矛盾就是：你到底要保存用戶的哪些信息？

　　為了解決這個主要矛盾，我們就設(shè)計采集并保存以下用戶信息：

　　身份標(biāo)識：暫定用戶名、手機(jī)、電子郵箱三者選一

　　密 碼：暫定6位字符

　　沒錯，和登錄一模一樣，為什么？

　　注冊的目的是滿足登錄信息匹配之用，最最基礎(chǔ)的匹配就必然要求登錄和注冊的所需字段必須一模一樣，就好像兩個齒輪一樣必須嚙合。

　　聽上去是廢話？不，我就見過很多初入門的產(chǎn)品經(jīng)理將登錄所用字段和注冊所用字段設(shè)計的不一致，被研發(fā)劈頭蓋臉的痛罵。

　　到這一步，我們?yōu)榈卿浐妥栽黾恿说谝慌膬蓚€頁面：登錄頁和注冊頁。

　　3. 深入一點(diǎn)：業(yè)務(wù)要閉環(huán)

　　有了兩個最基礎(chǔ)頁面還不算完，在流程圖上還是兩個獨(dú)立的點(diǎn)，因為業(yè)務(wù)流程沒有閉環(huán)。這個時候就要問自己幾個問題：

　　登錄成功去哪里？

　　登錄失敗又去哪里？

　　注冊成功去哪里？

　　注冊失敗又去哪里？

　　為了完成這個業(yè)務(wù)流程的閉環(huán)，我們就需要增加幾個頁面：

　　登錄成功頁：通常是跳轉(zhuǎn)到首頁，或者個人相關(guān)的頁面，或者其他有特殊需要的頁面。

　　登錄失敗頁：通常是跳轉(zhuǎn)到登錄失敗頁，告訴用戶登錄失敗的原因。

　　注冊成功頁：通常跳轉(zhuǎn)到有特殊需要的頁面。

　　注冊失敗頁：通常是跳轉(zhuǎn)到注冊失敗頁，告訴用戶注冊失敗的原因。

　　到這一步，我們完成了登錄和注冊的業(yè)務(wù)閉環(huán)，登錄和注冊的業(yè)務(wù)可以打包為獨(dú)立的業(yè)務(wù)模塊，至此增加了四個輔助頁面：登錄成功頁、登錄失敗頁、注冊成功頁和注冊失敗頁，總計六個頁面。

　　4. 再深入一點(diǎn)：將業(yè)務(wù)嵌入使用場景

　　登錄和注冊的業(yè)務(wù)流程已經(jīng)閉環(huán)，且已被打包為獨(dú)立的業(yè)務(wù)模塊，接下里就要做有很強(qiáng)代入感和參與感的產(chǎn)品使用場景分析，然后把登錄和注冊塞進(jìn)需要的流程中。

　　因為只有融入業(yè)務(wù)流程的產(chǎn)品設(shè)計才能體現(xiàn)出價值，否則，和咸魚有什么區(qū)別。

　　那么問題來了，有哪些使用場景呢？

　　首頁或著陸頁：用戶看到平臺的第一頁，也是最容易聯(lián)想到的頁面。

　　涉及需要用戶身份驗證的頁面：例如支付、發(fā)布內(nèi)容、查看特殊權(quán)限的內(nèi)容等。

　　那么問題又來了，如何將登錄和注冊嵌入呢？

　　對于首頁和著陸頁，我們在頁面上明顯位置增加登錄和注冊按鈕或超鏈接，盡可能的引導(dǎo)用戶完成登錄和注冊。

　　對于需要用戶身份驗證的頁面，在需要的按鈕或超鏈接上（例如支付、發(fā)布、回復(fù)、下載等）判斷當(dāng)前用戶身份，非認(rèn)證用戶即轉(zhuǎn)入登錄和注冊流程。

　　到這一步，我們將登錄和注冊嵌入到了平臺的業(yè)務(wù)流程中。至此，登錄和注冊的產(chǎn)品功能和業(yè)務(wù)設(shè)計基本上完成了。

　　5. 琢玉成器：用戶體驗是需要手工打磨的

　　且慢，產(chǎn)品功能和業(yè)務(wù)設(shè)計只完成了50%，還有50%就是前端產(chǎn)品經(jīng)理常常掛在嘴邊的用戶體驗。

　　用戶體驗這回事比較虛，也比較主觀，這里就拋磚引玉幾個思考點(diǎn)吧：

　　如果用戶名使用電子信箱，如何讓用戶能夠快速完成電子信箱的錄入？

　　如何設(shè)計良好的登錄頁錯誤提示？

　　是否需要記住密碼？還是需要2周內(nèi)不用登錄？

　　能否不用鼠標(biāo)來切換用戶名和密碼框？

　　能否用回車鍵來替代鼠標(biāo)完成登錄或提交的操作？

　　如何讓用戶快速完成注冊頁的各種字段錄入？

　　如何限定注冊頁的必填字段？

　　如何設(shè)計密碼強(qiáng)度的提示？

　　如何設(shè)計良好的注冊頁錯誤提示？

　　如果注冊頁有用戶頭像，是否需要鎖定頭像比例？是否提供在線裁剪？

　　是否需要給用戶設(shè)置默認(rèn)頭像？

　　如何快速切換注冊頁的各個字段輸入框？

　　注冊頁各個字段的填寫提示是否簡潔清晰無歧義？

　　其實還會有很多很多問題，需要我們慢慢打磨、細(xì)化。

　　6. 豐滿羽翼：加持業(yè)務(wù)部門的需求

　　截至目前，登錄和注冊既實現(xiàn)了功能和業(yè)務(wù)，也優(yōu)化了用戶體驗，照理說可以打完收工了。不過，建議此時的產(chǎn)品經(jīng)理主動出擊，去了解、收集其他業(yè)務(wù)部門的需求。

    更多類似資訊，可以訪問2898站長資源平臺建站欄目：http://afrimangol.com/web/ 謝謝！