最近對我們的app的賬戶體系進行了改版，研究了各類產品的設計。賬戶體系雖然幾乎是通用標配功能，但是各app的都有差別，都是針對當前的產品形態、發展階段和使用者量級做出了符合自己的設計。賬戶體系的關鍵點在登入註冊流程上。登入註冊流程看似簡單，實際考量設計功力。網上關於登入註冊的綜述有很多了，但是從零到一整合分析的很少，以下，將以實際的產品為例，精細分析如何設計賬戶體系。
我們的產品第一版賬戶體系由於歷史原因，做的比較生硬。
初期主攻社交，希望可以沉澱使用者資訊，手機賬號會是第一優先選擇，當時的方案是手機號註冊+賬號密碼登入/第三登入+立刻繫結手機賬號。
如你日常體驗那樣，第三方登入+立刻繫結手機的方式，直接抵消了第三方登入的便利，比直接手機號註冊更麻煩。而且，設計上，手機號註冊需要設定兩次密碼，密碼需要一致；設定之後，還得進入登入介面，再次填寫賬號密碼，正確匹配才可以進入app。
總的來說，使用者進入app的路徑相當長，步驟多，使用者體驗低分。
近況是，產品方向探索，將重點落在**上。完成交易的流程本身就多步驟，再疊加原來的登入註冊，路徑過深，對拉新損耗大，急需改進。
從業務發展趨勢來看，微信會是重要的使用者**，後續會布局更多的微信運營活動，和**小程式，設計引流到app，需重點突出微信登入。
而**交易需要保證安全性，同時相容老使用者，手機註冊密碼登入必不可少。考慮到使用者文化水平，和網際網路產品使用習慣，需要在常規的基礎上做簡化。
第三方登入需要在關鍵點繫結，**推廣員提現時變更銀行卡，需加以驗證身份。
新使用者剛進來，可以先瀏覽熟悉產品內容，在需要身份資訊時，再進行引導登入。
登入註冊流程：微信/qq第三方登入、驗證碼登入/註冊、密碼登入、找回密碼。
賬戶體系配套：關鍵點引導繫結手機、關鍵點強制繫結手機、驗證碼驗證賬號、ydopyou賬號相互繫結。
細節功能點見下方的賬戶體系功能點梳理圖。
未登入使用者，到達需要獲取使用者身份資訊的介面（為了平衡效率和體驗，一般是除一級介面以外的），則觸發註冊登入流程。使用者完成註冊登入之後，才可使用和操作絕大部分的功能。
本流程圖需要配合頁面互動原型理解。
登入註冊體系將包含五個部分，主介面、驗證碼登入/註冊、密碼登入、忘記密碼和新使用者註冊，在實際流程操作中會根據使用者的選擇，和系統的判斷進行切換。賬戶體系的配套將會略過，以下是登入註冊的頁面互動設計、設計考量和功能點介紹。
（1）設計解析
其實基於驗證碼到達率和安全性，我考慮過換移動認證，就是手機號碼一鍵登入，無需密碼跟驗證碼。可惜實際接程式設計客棧洽的時候行不通，而放棄了，文字會介紹下這個事情。
（2）設計點
（1）設計解析
密碼登入考慮到向後相容，老使用者的賬號以密碼登入；也是適應本期的新使用者註冊。
同時標配忘記密碼，也可切換新使用者註冊，或驗證碼登入，這些元素的布置考慮，是基於流程的。
密碼的輸入，其實正如設定密碼，應該做格式限制。但是因為第一版沒限制，不清楚使用者設定了什麼，所以此處不能輕易填坑。
資料輸入都該考慮下限制的，為什麼？在給產品經理講技術這書裡，要是你看到黑科技sql注入攻擊也會很印象深刻的…程式設計客棧…
（2）流程
跟驗證碼的簡單路徑不一樣，密碼登入因重在流程上邏輯自洽，更需配流程圖檢視才好理解。
正常流程是：輸入手機號->輸入密碼->點選登入->登入成功。
異常流程是：
（1）設計解析
步驟：忘記密碼此處分兩步，一步驗證，一步設定。設定完之後，直接登入進入app，無需再重複密碼登入的步驟。（記不住密碼更痛苦的事情是，忘記密碼剛找回來，在下一步重新登入的時候又忘記了）。
異常流程：忘記密碼此處還有個異常流程，是該賬號不存在。有童鞋會說，正是密碼輸錯才會到來這介面，這麼還會有賬號不存在的情況？對，情理上其實不大可能發生，但是程式邏輯上有這個可能，但是又無法通過前面的步驟過濾掉，是要補充下的。
此處判斷賬號不存在的提醒，是點選獲取驗證碼之後，亮點之一。這裡是考慮辛辛苦苦獲取驗證碼，填寫完畢之後才來告訴使用者賬號不存在，有些不厚道的……
（2）設計點：
驗證賬號：常規的做法，先驗證碼驗證手機號，再下一步設定密碼。
有些app會將驗證賬號跟設定密碼放在同乙個頁面，其實拆開會更清晰。而且，驗證手機號碼步驟復用率是很高的，比如，可以復用到推廣員更改繫結銀行卡時，作為賬號驗證。
設定密碼：密碼設定要限定格式，之後僅需輸入一次就可以直接登入進入了。
重複兩次資料，再次校驗肯定更穩妥，但是登入成本提高了，以我們使用者的耐心，我們的產品就沒必要承擔這個教育成本了。如果說擔心手誤輸錯了的，可以用驗證碼登入的，再不濟可以用找回密碼的。但是大多數使用者其實只考慮本次能快點進入就好。
（1）設計解析
新使用者註冊介面近乎跟忘記密碼是一樣的流程，區別在點選獲取驗證碼，此處的異常流程是該賬號已存在。此處設定優化的流程，判斷是已有賬號之後，會直接跳轉到驗證碼登入/註冊介面處，直接獲取已填寫的手機號碼，驗證就行，對新使用者盡量友好。
經過前面的介面篩選，此處的賬號不存在的發生概率很少，但是作為關鍵流程而言，完整性是必要的。
文內留個懸念要談談移動認證，移動認證是什麼？最直接的體驗是，無需輸入任何資料，直接點選授權就登入。是不是很黑科技？！
但是為什麼最終放棄了呢，請聽細講。
理想情況：
移動認證是運營商移動提供的，基於手機sim卡和流動網路直接認證登入的技術，公尺家、愛**跟同花順應用在了自家app裡。當時上手體驗，驚豔，簡直零感登入；況且移動官網也有免費的sdk，更是竊喜。以移動認證為主登入的原型設計完畢，就立刻接洽移動認證sdk的接入。
現實情況：
但是呢，很快就被開發文件打臉了，簡言之，就是層層篩選之下，能一鍵登入的使用者遠沒有想象的多。
移動認證的原理是基於流動網路通訊的。首先基於sim卡識別本機號碼，在流動網路開啟的前提下傳輸資訊以授權通過，此時可順利登陸；但是如果沒開流動網路，就沒轍了；如果wif程式設計客棧i跟流動網路同開，以wifi為主，那將強制佔道先驗證再釋放wifi。如果流動網路通訊不成，那就通過簡訊收發來完成資料傳輸。
所以，這麼流氓的做法蘋果肯定是不樂意的；電信不參與；oppo的rom不支援此流程……層層篩選下來，加上關閉流動網路的，能順利使用的其實不多；而且，除非付費，否則移動認證的logo說明只能用官方的，簡直是給移動打廣告….這些阻力遠高於收益，所以，果斷放棄了，採取了本文講述的方案。
果然，合適的才是最好的。
本文位址:
以小見大 如何設計註冊登入頁？
乙個合格的註冊登入頁面，應該是具有清晰的操作流程。乙個合格的註冊登入頁面，應該是具有清晰的操作流程，良好的互動細節和美觀的視覺設計。不需要註冊登入 第三方賬號登入 郵箱註冊 最開始的時候註冊登入是基於pc的，也就是基於網頁，pc時代的網際網路產品多使用郵箱作為唯一id。所以郵箱註冊成為主流，而且註冊...
Discuz 如何實現自動註冊登入
本文實現功能 1.從原有系統進入論壇自動登入和註冊 2.實現彈框在本頁面，不進行跳轉 3.js在頁面載入時直接發起註冊請求 這個功能之前使用的uc user register這個函式來處理的，但是今天在開發使用者空間時就會出現問題。在我們原有的系統上新增乙個論壇，但是使用者資訊需要共享。實現方法 在...
分析ECMall的註冊與登入機制
1 isset request trim request 2 act isset request act trim request act default act 如果是註冊，act member那麼 1 ucfirst 2 例項化控制器 3 new 1include root path inclu...