99久久精品国产片-99久久精品国产免费-99久久精品国产麻豆-99久久精品国产国产毛片-99久久精品国产高清一区二区-99久久精品费精品国产一区二区

實例分析拆解:如何設計登錄注冊?

2018-8-10    博博

實例分析拆解:如何設計登錄注冊?

人人都是產品經理 2018-08-09 18:42:15

如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里


最近對我們的APP的賬戶體系進行了改版,研究了各類產品的設計。賬戶體系雖然幾乎是通用標配功能,但是各APP的都有差別,都是針對當前的產品形態、發展階段和用戶量級做出了符合自己的設計。賬戶體系的關鍵點在登錄注冊流程上。登錄注冊流程看似簡單,實際考量設計功力。網上關于登錄注冊的綜述有很多了,但是從零到一整合分析的很少,以下,將以實際的產品為例,精細分析如何設計賬戶體系。

實例分析拆解:如何設計登錄注冊?

一、立項背景

我們的產品第一版賬戶體系由于歷史原因,做的比較生硬。

初期主攻社交,希望可以沉淀用戶信息,手機賬號會是第一優先選擇,當時的方案是手機號注冊+賬號密碼登錄/第三登錄+立刻綁定手機賬號。

如你日常體驗那樣,第三方登錄+立刻綁定手機的方式,直接抵消了第三方登錄的便利,比直接手機號注冊更麻煩。而且,設計上,手機號注冊需要設置兩次密碼,密碼需要一致;設置之后,還得進入登錄界面,再次填寫賬號密碼,正確匹配才可以進入APP。

總的來說,用戶進入APP的路徑相當長,步驟多,用戶體驗低分。

近況是,產品方向探索,將重點落在商城上。完成交易的流程本身就多步驟,再疊加原來的登錄注冊,路徑過深,對拉新損耗大,急需改進。

二、需求分析

從業務發展趨勢來看,微信會是重要的用戶來源,后續會布局更多的微信運營活動,和商城小程序,設計引流到APP,需重點突出微信登錄。

而商城交易需要保證安全性,同時兼容老用戶,手機注冊密碼登錄必不可少。考慮到用戶文化水平,和互聯網產品使用習慣,需要在常規的基礎上做簡化。

第三方登錄需要在關鍵點綁定,商城推廣員提現時變更銀行卡,需加以驗證身份。

新用戶剛進來,可以先瀏覽熟悉產品內容,在需要身份信息時,再進行引導登錄。

三、功能點梳理

登錄注冊流程:微信/QQ第三方登錄、驗證碼登錄/注冊、密碼登錄、找回密碼。

賬戶體系配套:關鍵點引導綁定手機、關鍵點強制綁定手機、驗證碼驗證賬號、賬號相互綁定。

細節功能點見下方的賬戶體系功能點梳理圖。

實例分析拆解:如何設計登錄注冊?

四、流程圖(登錄注冊)

未登錄用戶,到達需要獲取用戶身份信息的界面(為了平衡效率和體驗,一般是除一級界面以外的),則觸發注冊登錄流程。用戶完成注冊登錄之后,才可使用和操作絕大部分的功能。

本流程圖需要配合頁面交互原型理解。

實例分析拆解:如何設計登錄注冊?

五、關鍵頁面交互設計

登錄注冊體系將包含五個部分,主界面、驗證碼登錄/注冊、密碼登錄、忘記密碼和新用戶注冊,在實際流程操作中會根據用戶的選擇,和系統的判斷進行切換。賬戶體系的配套將會略過,以下是登錄注冊的頁面交互設計、設計考量和功能點介紹。

1.主界面

  • 布局:主界面集合三種登錄方式,將微信登錄作為主方式。
  • 前提:成功登錄的前提條件是必須先勾選同意用戶協議,否則報錯。
  • 授權:第三方的登錄,點擊微信orQQ,授權成功后,即可登錄進入APP,自動獲取用戶的昵稱性別頭像信息填充社交頁。
實例分析拆解:如何設計登錄注冊?

2.驗證碼登錄/注冊

(1)設計解析

  • 手機賬號登錄,考慮簡單又快速進行,突出驗證碼快速登錄/注冊,輔以密碼注冊。
  • 密碼注冊的弊端是很容易忘記密碼,忘記之后,找回密碼流程也繁瑣。
  • 驗證碼登錄,雖然對頻繁換手機的用戶是個噩耗,短信也有達到率的問題,但考慮到效率跟成本,特別在拉新環節,還是作為主方式。

其實基于驗證碼到達率和安全性,我考慮過換移動認證,就是手機號碼一鍵登錄,無需密碼跟驗證碼。可惜實際接洽的時候行不通,而放棄了,文本會介紹下這個事情。

(2)設計點

  • 驗證碼登錄:登錄注冊界面為驗證碼登錄,附以密碼登錄。
  • 按鈕:登錄注冊的按鈕合二為一。也就是說,用戶不需要選擇是登錄還是注冊,將判斷交給了后臺。只要用戶的手機號碼還在,直接憑驗證碼進入即可。比起選擇密碼登錄之后忘記密碼,或者是干脆就不記得自己是否注冊過,在錯誤的界面輸入信息之后來回切換,二合一的方式更加友好,也是本次設計的一個亮點。
  • 手機號碼:采用更加清晰的的3-3-4數值格式,輸入框末尾配清除按鈕,錯誤輸入后可一鍵清除。手機號碼輸入框也有記憶功能,可獲取前一次登錄的手機賬號,可以獲取同一次登錄注冊已填過的賬號信息。
  • 驗證碼:手機號碼位數輸入正確類型和位數之后,才激活驗證碼功能。否則點擊會報錯。之后,驗證碼的激活以變色表現,這是個視覺指示。輸入完成第一行,人眼會自然而言的落在第二行的開頭,如無例外,用戶需要尋找一番,才會覺知過來,去點擊獲取驗證碼。
  • 加載指示:數據傳輸到服務端,判斷對錯,再返回結果。這個流程費些時間,用加載小菊花,表示后臺正在處理,舒緩下等待的焦急。
實例分析拆解:如何設計登錄注冊?

3.密碼登錄

(1)設計解析

密碼登錄考慮到向后兼容,老用戶的賬號以密碼登錄;也是適應本期的新用戶注冊。

同時標配忘記密碼,也可切換新用戶注冊,或驗證碼登錄,這些元素的布置考慮,是基于流程的。

密碼的輸入,其實正如設置密碼,應該做格式限制。但是因為第一版沒限制,不清楚用戶設置了什么,所以此處不能輕易填坑。

數據輸入都該考慮下限制的,為什么?在給產品經理講技術這書里,要是你看到黑科技SQL注入攻擊也會很印象深刻的……

(2)流程

跟驗證碼的簡單路徑不一樣,密碼登錄因重在流程上邏輯自洽,更需配流程圖查看才好理解。

正常流程是:輸入手機號->輸入密碼->點擊登錄->登錄成功。

異常流程是:

  • 輸入手機號->輸入密碼->點擊登錄->提醒“未注冊”->點擊新用戶注冊or返回上一級驗證碼登錄/注冊。
  • 輸入手機號->輸入密碼->點擊登錄->提醒“未注冊”->賬號或密碼不對->重新輸入or忘記密碼or驗證碼登錄。
實例分析拆解:如何設計登錄注冊?

4.忘記密碼

(1)設計解析

步驟:忘記密碼此處分兩步,一步驗證,一步設置。設置完之后,直接登錄進入APP,無需再重復密碼登錄的步驟。(記不住密碼更痛苦的事情是,忘記密碼剛找回來,在下一步重新登錄的時候又忘記了)。

異常流程:忘記密碼此處還有個異常流程,是該賬號不存在。有童鞋會說,正是密碼輸錯才會到來這界面,這么還會有賬號不存在的情況?對,情理上其實不大可能發生,但是程序邏輯上有這個可能,但是又無法通過前面的步驟過濾掉,是要補充下的。

此處判斷賬號不存在的提醒,是點擊獲取驗證碼之后,亮點之一。這里是考慮辛辛苦苦獲取驗證碼,填寫完畢之后才來告訴用戶賬號不存在,有些不厚道的……

(2)設計點:

驗證賬號:常規的做法,先驗證碼驗證手機號,再下一步設置密碼。

有些APP會將驗證賬號跟設置密碼放在同一個頁面,其實拆開會更清晰。而且,驗證手機號碼步驟復用率是很高的,比如,可以復用到推廣員更改綁定銀行卡時,作為賬號驗證。

設置密碼:密碼設置要限定格式,之后僅需輸入一次就可以直接登錄進入了。

重復兩次數據,再次校驗肯定更穩妥,但是登錄成本提高了,以我們用戶的耐心,我們的產品就沒必要承擔這個教育成本了。如果說擔心手誤輸錯了的,可以用驗證碼登錄的,再不濟可以用找回密碼的。但是大多數用戶其實只考慮本次能快點進入就好。

實例分析拆解:如何設計登錄注冊?

5.新用戶注冊

(1)設計解析

新用戶注冊界面近乎跟忘記密碼是一樣的流程,區別在點擊獲取驗證碼,此處的異常流程是該賬號已存在。此處設置優化的流程,判斷是已有賬號之后,會直接跳轉到驗證碼登錄/注冊界面處,直接獲取已填寫的手機號碼,驗證就行,對新用戶盡量友好。

經過前面的界面篩選,此處的賬號不存在的發生概率很少,但是作為關鍵流程而言,完整性是必要的。

實例分析拆解:如何設計登錄注冊?

(2)移動認證

文內留個懸念要談談移動認證,移動認證是什么?最直接的體驗是,無需輸入任何數據,直接點擊授權就登錄。是不是很黑科技?! 但是為什么最終放棄了呢,請聽細講。

理想情況

移動認證是運營商移動提供的,基于手機sim卡和移動網絡直接認證登錄的技術,米家、愛回收跟同花順應用在了自家APP里。當時上手體驗,驚艷,簡直零感登錄;況且移動官網也有免費的sdk,更是竊喜。以移動認證為主登錄的原型設計完畢,就立刻接洽移動認證sdk的接入。

現實情況:

但是呢,很快就被開發文檔打臉了,簡言之,就是層層篩選之下,能一鍵登錄的用戶遠沒有想象的多。

移動認證的原理是基于移動網絡通信的。首先基于sim卡識別本機號碼,在移動網絡開啟的前提下傳輸信息以授權通過,此時可順利登陸;但是如果沒開移動網絡,就沒轍了;如果WiFi跟移動網絡同開,以WiFi為主,那將強制占道先驗證再釋放WiFi。如果移動網絡通信不成,那就通過短信收發來完成數據傳輸。

所以,這么流氓的做法蘋果肯定是不樂意的;電信不參與;oppo的ROM不支持此流程……層層篩選下來,加上關閉移動網絡的,能順利使用的其實不多;而且,除非付費,否則移動認證的logo說明只能用官方的,簡直是給移動打廣告….這些阻力遠高于收益,所以,果斷放棄了,采取了本文講述的方案。

果然,合適的才是最好的。

本文由 @閱天 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自 Pexels ,基于 CC0 協議


藍藍設計www.lapeinture.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務



日歷

鏈接

個人資料

藍藍設計的小編 http://www.lapeinture.cn

存檔

成人a大片高清在线观看| 国产成人精品综合在线| 亚洲爆爽| 欧美日本韩国| 国产一区二区精品在线观看| 亚洲第一页乱| 国产成人精品综合| 国产伦精品一区二区三区无广告 | 九九久久国产精品大片| 美国一区二区三区| 日本久久久久久久 97久久精品一区二区三区 狠狠色噜噜狠狠狠狠97 日日干综合 五月天婷婷在线观看高清 九色福利视频 | 九九干| 午夜久久网| 国产麻豆精品免费密入口| 精品国产一区二区三区国产馆| 国产成人女人在线视频观看 | 美女免费毛片| 国产一区二区精品久久91| 欧美日本韩国| 精品国产一区二区三区精东影业| 国产韩国精品一区二区三区| 日韩av片免费播放| 天天做日日爱夜夜爽| 亚洲 男人 天堂| 日本在线不卡视频| 欧美夜夜骑 青草视频在线观看完整版 久久精品99无色码中文字幕 欧美日韩一区二区在线观看视频 欧美中文字幕在线视频 www.99精品 香蕉视频久久 | 欧美1区2区3区| a级毛片免费观看网站| 一级女人毛片人一女人| 九九精品在线| 免费毛片播放| 久久久久久久男人的天堂| 一级女性全黄久久生活片| 99色视频| 国产精品自拍一区| 亚洲天堂在线播放| 国产网站免费| 久久福利影视| 国产一区二区福利久久| 国产综合91天堂亚洲国产| 国产激情一区二区三区| 久久99欧美| 国产一区免费在线观看| 青青久久网| 免费国产在线观看不卡| 欧美激情一区二区三区在线 | 91麻豆精品国产高清在线| 久久国产精品只做精品| 91麻豆高清国产在线播放| 日本在线不卡免费视频一区| 日韩中文字幕在线观看视频| 青青久在线视频| 日韩综合| 欧美1区2区3区| 天堂网中文在线| 日韩在线观看视频免费| 日本免费乱人伦在线观看| 精品久久久久久中文| 亚洲精品永久一区| 亚洲天堂免费| 国产一级生活片| 欧美夜夜骑 青草视频在线观看完整版 久久精品99无色码中文字幕 欧美日韩一区二区在线观看视频 欧美中文字幕在线视频 www.99精品 香蕉视频久久 | 欧美一区二区三区在线观看| 国产网站免费| 欧美国产日韩在线| 成人免费观看视频| 成人影院久久久久久影院| 美女被草网站| 美女免费精品高清毛片在线视 | 精品久久久久久综合网| 欧美国产日韩在线| 久久国产一区二区| 成人高清护士在线播放| 台湾毛片| 天堂网中文在线| 国产不卡福利| 99久久精品国产高清一区二区| 欧美18性精品| 韩国妈妈的朋友在线播放| 九九久久国产精品| 99热热久久| 久久成人综合网| 国产精品自拍一区| 国产一区二区精品久久| 日本伦理片网站| 九九精品影院| 四虎精品在线观看| 成人免费观看视频| 国产欧美精品午夜在线播放| 在线观看成人网| 成人高清免费| 精品久久久久久中文| 国产伦久视频免费观看视频| 一 级 黄 中国色 片| 二级片在线观看| 99久久精品国产麻豆| 黄视频网站在线观看| 日韩专区亚洲综合久久| 久久精品欧美一区二区| 日韩男人天堂| 美女免费黄网站| 欧美日本免费| 成人a级高清视频在线观看| 欧美大片a一级毛片视频| 韩国毛片免费| 可以免费在线看黄的网站| 国产一区国产二区国产三区| 国产亚洲免费观看| 麻豆网站在线看| 999久久狠狠免费精品| 尤物视频网站在线观看| 欧美激情在线精品video| 麻豆午夜视频| 国产网站免费视频| 国产美女在线一区二区三区| 夜夜操天天爽| 国产成人精品综合久久久| 欧美一区二区三区在线观看| 黄视频网站免费| 久久成人综合网| 国产一区精品| 欧美a级大片| 日本伦理片网站| 91麻豆国产级在线| 国产精品1024永久免费视频| 国产网站免费视频| 欧美激情一区二区三区视频高清| 四虎影视库国产精品一区| 青草国产在线| 欧美夜夜骑 青草视频在线观看完整版 久久精品99无色码中文字幕 欧美日韩一区二区在线观看视频 欧美中文字幕在线视频 www.99精品 香蕉视频久久 | 国产不卡福利| 日韩免费在线| 免费的黄色小视频| 欧美夜夜骑 青草视频在线观看完整版 久久精品99无色码中文字幕 欧美日韩一区二区在线观看视频 欧美中文字幕在线视频 www.99精品 香蕉视频久久 | 精品视频一区二区三区| 高清一级淫片a级中文字幕| 九九久久国产精品| 午夜欧美成人香蕉剧场| 黄色福利| 国产不卡在线观看视频| 韩国妈妈的朋友在线播放| 日韩中文字幕一区二区不卡| 国产高清视频免费| 国产伦久视频免费观看 视频| 91麻豆精品国产片在线观看| 99色视频| 韩国毛片| 青青久久网| 亚洲精品久久久中文字| 日韩一级黄色| 精品国产三级a| 九九精品在线| 日韩在线观看视频黄| 精品视频在线看| 毛片电影网| 欧美大片一区| 91麻豆tv| 日韩在线观看网站| 99久久精品国产国产毛片| 欧美日本免费| 久久久成人影院| 91麻豆精品国产高清在线| 日本免费看视频| 九九免费精品视频| 欧美1区| 精品久久久久久中文字幕2017| 欧美1区2区3区| 日本久久久久久久 97久久精品一区二区三区 狠狠色噜噜狠狠狠狠97 日日干综合 五月天婷婷在线观看高清 九色福利视频 | 韩国三级香港三级日本三级| 亚欧视频在线| 欧美国产日韩一区二区三区| 九九九国产| 成人高清免费| 久久国产精品永久免费网站| 韩国三级视频网站| 精品国产一级毛片| 国产伦精品一区二区三区无广告 | 精品久久久久久中文字幕2017| 日韩在线观看视频免费| 国产视频一区二区在线观看| 黄视频网站免费看| 欧美夜夜骑 青草视频在线观看完整版 久久精品99无色码中文字幕 欧美日韩一区二区在线观看视频 欧美中文字幕在线视频 www.99精品 香蕉视频久久 | 日韩中文字幕在线观看视频| 成人免费观看的视频黄页| 国产伦精品一区三区视频| 成人高清免费| 韩国毛片免费| 精品在线观看一区| 久久久久久久久综合影视网| 欧美日本二区| 成人高清免费| 四虎影视久久| 久久久久久久男人的天堂| 精品国产香蕉伊思人在线又爽又黄| 欧美a免费| 成人a级高清视频在线观看| 国产麻豆精品免费视频| 精品国产一区二区三区精东影业| 国产精品免费精品自在线观看| 国产不卡在线观看|