APP登錄模塊設(shè)計-詳細分析

智能手機已經(jīng)成為人類不可分割的器官篙骡,人們在線上處理生活的方方面面的習(xí)慣已經(jīng)形成囚似,APP作為線上渠道最
主要的方式之一闻伶,已被各行各業(yè)廣泛使用滨攻。這里將持續(xù)的和大家一同談?wù)撽P(guān)于APP產(chǎn)品設(shè)計的各模塊、細節(jié)的設(shè)
計方式及思考

在APP產(chǎn)品的設(shè)計過程中蓝翰,登錄功能看似簡單無奇光绕,但其實會跟進產(chǎn)品業(yè)務(wù)、功能關(guān)聯(lián)霎箍、用戶體驗緊密聯(lián)系,也就需要產(chǎn)品經(jīng)理花大量的時間去思考澡为,思考如何設(shè)計出更高質(zhì)量的登錄環(huán)節(jié)

是否需要登錄環(huán)節(jié)

在準備進行登錄模塊設(shè)計前漂坏,我們首相要考慮清楚自身產(chǎn)品是否真正的需要登錄模塊,例如手電筒媒至、計算器顶别、錄音機等純工具類的產(chǎn)品其實是不需要擁有登錄模塊。所以在設(shè)計前拒啰,我們可以從用戶角度驯绎、業(yè)務(wù)角度、產(chǎn)品功能角度三個角度進行思考和分析:

1. 功能角度

1)整個產(chǎn)品是基于登錄為前提進行設(shè)計的谋旦,如果不登錄剩失,整個產(chǎn)品將無法使用。例如即時通訊的產(chǎn)品是必須基于用戶已登錄的前提下進行的册着、王者榮耀必須基于用戶已登錄的前提下進行的等

2)產(chǎn)品中有較多功能和用戶身份掛鉤拴孤,不知道用戶身份便無法開展服務(wù)。例如如果想看愛奇藝的會員電影甲捏,你只有登錄了具有會員標示的賬戶才能看演熟,否則就只能看免費內(nèi)容

2. 用戶角度

1)用戶需要和其他用戶產(chǎn)生聯(lián)系,需要登錄才能滿足。例如關(guān)注芒粹、交流兄纺、點贊、打賞等

2)用戶需要很多登錄后才能使用的功能和服務(wù)化漆。例如電商產(chǎn)品估脆、即時通訊產(chǎn)品等(很多產(chǎn)品的設(shè)計就是站在這個角度設(shè)計出很多很棒的功能,但是只有用戶登錄后才能使用获三,也就是變相的促使用戶注冊登錄的一種方法)

3. 業(yè)務(wù)角度

1)產(chǎn)品需要搭建用戶體系

2)企業(yè)需要收集到用戶的關(guān)鍵信息旁蔼。例如手機號、身份證號疙教、姓名等棺聊,為二次觸達用戶提供渠道。例如:通過收集到的手機號/郵箱贞谓,企業(yè)可以通過這些渠道再次觸達到用戶限佩,進行運營

3)企業(yè)需要收集用戶的使用數(shù)據(jù),進行數(shù)據(jù)分析裸弦,為產(chǎn)品運營做支持祟同。

4)出于法律規(guī)定或安全性考慮,企業(yè)需要知道用戶信息

以上理疙,我們在進行登錄設(shè)計前要考量自身產(chǎn)品是否滿足以上的三個角度的要求晕城,如果不滿足則無需登錄模塊,反之則需要窖贤。這三點是有嚴格的順序關(guān)系的砖顷,只有產(chǎn)品功能上有登錄的需要,才會激發(fā)出用戶登錄的需求赃梧,最后我們才能達到業(yè)務(wù)上的目的滤蝠,這是一個嚴格的遞進關(guān)系。所以說如果我們想達到某些業(yè)務(wù)角度的需要授嘀,從產(chǎn)品功能上找辦法就相對容易物咳。

登錄模塊的設(shè)計原則

確定產(chǎn)品需要登錄模塊之后,我們接著需要思考登錄模塊的設(shè)計原則蹄皱,即登錄模塊該設(shè)計什么樣子览闰。同樣我們也從三個角度來思考分析:

1.用戶角度

1)用戶在登錄需求產(chǎn)生后,需要立刻釋放需求巷折,如果不釋放或釋放時間過長將導(dǎo)致用戶體驗降低甚至失去客戶焕济。故我們需要滿足用戶能夠快速釋放需求的愿望

2)用戶習(xí)慣的登錄方式為手機號登錄、賬號登錄盔几、郵箱登錄晴弃、第三方快捷登錄、手機驗證碼快捷登錄、指紋快捷登錄上鞠。每一種登錄方式面向不對需求的用戶:

  • 手機號登錄:目前主流的登錄注冊方式之一际邻。符合國人使用習(xí)慣,手機號也是業(yè)務(wù)層面最想要的數(shù)據(jù)之一

  • 賬號登錄:某些產(chǎn)品還具有的功能芍阎,操作不夠方便世曾,現(xiàn)在并不主流。例如QQ

  • 郵箱登錄:郵箱在輸入時相對復(fù)雜谴咸,且國人對郵箱的使用習(xí)慣普遍沒有手機號高轮听,但對于涉及到海外用戶的產(chǎn)品還是需要郵箱登錄的入口的,畢竟外國用戶使用郵箱為登錄名的習(xí)慣早已養(yǎng)成

  • 第三方登錄:目前主流的登錄方式之一岭佳,極大的縮短了用戶登錄的流程和時間血巍,新用戶使用等三方快捷登錄還可以省略注冊環(huán)節(jié),對體驗有極大的提升珊随,且可以獲得用戶在第三方的一部分數(shù)據(jù)述寡,例如用微信登錄后,產(chǎn)品能得到用戶的微信昵稱叶洞、微信頭像鲫凶、微信好友等。目前主流的第三方登錄有微信衩辟、QQ螟炫、微博,還有如支付寶艺晴、頭條昼钻、釘釘?shù)鹊卿浄绞剑迷谀承┯刑厥庖蟮漠a(chǎn)品上

  • 手機驗證碼快捷登錄:越來越普及的登錄方式财饥。不需要密碼换吧,只需要用戶輸入手機號+驗證碼即可注冊和登錄完折晦,對老用戶和新用戶的體驗都很友好钥星。安全的角度上有些許欠缺,但是損失少許安全而大大提升體驗的行為满着,很多人還是表示能夠接受(我是不接受的)

  • 指紋快捷登錄:起初常應(yīng)用于銀行類產(chǎn)品谦炒,現(xiàn)在在其他行業(yè)的產(chǎn)品中也陸續(xù)普及開。歸功于現(xiàn)在技術(shù)的發(fā)展风喇,智能手機對指紋的使用越來越簡單和普遍宁改。在安全性上和操作效率上相對其他方式都更加出色,唯一麻煩的是對用戶錄入指紋的引導(dǎo)魂莫,畢竟指紋在用戶心理等價于安全

    以上还蹲,可知我們需要滿足不同的用戶、不同的場景、不用產(chǎn)品的登錄方式愿望

2.業(yè)務(wù)角度

對于企業(yè)來說都是希望能獲得用戶的數(shù)據(jù)的谜喊,尤其是像手機號這種關(guān)鍵數(shù)據(jù)潭兽,越快獲得越好。

3.安全性角度

1)用戶安全:因為用戶會在產(chǎn)品中留下自己的言論或內(nèi)容等信息斗遏,這些信息的安全就需要一定保護山卦,不能說隨便什么人知道一個手機號后通過無限試密碼的手段就可登錄他人賬號,故我們需要提供一定安全保護措施诵次。例如密碼連續(xù)錯誤5次凍結(jié)一段時間等

2)企業(yè)利益安全:某些無良的競品會采用機器人的方式账蓉,循環(huán)獲取手機驗證碼,增加信息成本逾一,這其實就是對企業(yè)利益的損害铸本。故我們需要提供一定的保護措施避免企業(yè)利益受損。例如驗證碼每60s才允許再次發(fā)送的設(shè)置等

以上嬉荆,通過分析我們可總結(jié)出登錄模塊的設(shè)計原則(一句話):提供安全归敬、快速、多方式的登錄模塊設(shè)計

登錄模塊的元素組成

下圖截取了四個App Store免費榜前幾名的登錄頁:

通多對大量已有產(chǎn)品的匯總和思考鄙早,可將登錄模塊包含的元素進行梳理歸納汪茧,如下:

登錄頁組成元素

確定了登錄模塊的元素構(gòu)成后,我們就需要把登錄模塊中涉及到的所有流程邏輯全部梳理且整合起來

元素流程邏輯

1. 登錄方式

1)賬號密碼登錄

手機號+密碼限番、郵箱+密碼等

2)免密碼登錄/短信登錄

3)第三方登錄

4)指紋登錄

2. 服務(wù)協(xié)議和隱私協(xié)議

服務(wù)協(xié)議舱污、隱私協(xié)議、用戶協(xié)議等原只用于賬號注冊頁面弥虐,但由于現(xiàn)在存在手機號快捷登錄以及第三方登錄扩灯,使得注冊環(huán)節(jié)和登錄環(huán)節(jié)融合在一起,故需將協(xié)議置于登錄頁面中

3. 忘記密碼/找回密碼

此功能入口霜瘪,只存在于賬號密碼登錄頁面中

關(guān)于返回上一頁/關(guān)閉的流程邏輯珠插,把握好返回前后的頁面選擇,不造成用戶認知前后不匹配即可颖对,這里就不再贅述了捻撑。

(模塊中的各元素流程邏輯會依據(jù)不同的實際因素形成不同的設(shè)計流程,不可能被標準化缤底,我以上的流程邏輯不適用所有產(chǎn)品)

將各元素的流程邏輯梳理清楚后顾患,再將其整合在一起后,我們就可以基本得到登錄模塊整體的邏輯骨架了个唧。隨后即可完善線框圖等后續(xù)工作

設(shè)計細節(jié)

登錄模塊所包含的元素很多江解,也就為體驗的升級提供了更多的空間和想象。滿足登錄功能的前提下提升用戶的體驗也是必不可少的徙歼,能用的功能和好用的功能區(qū)別很是非常之大的犁河。針對登錄模塊各組成元素會有一些細節(jié)設(shè)計來提升用戶體驗:

  1. 輸入框獲得焦點后喚起對應(yīng)的鍵盤鳖枕。例如在如手機號的時喚起的是數(shù)字鍵盤,在輸入密碼時喚起的是字母鍵盤等

  2. 在輸入框中加入清空按鈕桨螺。在需要清除輸入框文本的場景下非常實用

  3. 密碼的可見和隱藏按鈕耕魄。便于用戶進行密碼的查看、校對和修改

  4. 按鈕的可用和禁用狀態(tài)彭谁。例如當(dāng)信息沒有填寫完成時吸奴,登錄按鈕為禁用狀態(tài);信息填寫完成后缠局,登錄按鈕為可用狀態(tài)

  5. 從體驗的角度考慮则奥,在一段時間內(nèi)使用自動登錄的機制,免除用戶重復(fù)操作狭园;從安全的角度考慮读处,在一段時間內(nèi)用戶沒有登錄APP,則將賬號登出唱矛,下次進入時需重新登錄罚舱,一定程度上確保安全性。

  6. 反饋機制要完整绎谦,任何點擊管闷、滑動、長按窃肠、bug等觸發(fā)時都需要讓用戶感知到包个,避免用戶產(chǎn)生疑惑感,提高用戶體驗感冤留。例如碧囊,向手機號發(fā)送驗證碼后,需Toast提醒用戶告知用戶:驗證碼已發(fā)送152xxxxxxxx纤怒,請查收糯而。常用的反饋提示方式為Toast、Dialog和直接展示頁面上三種方式

  • Dialog作為對話框泊窘,將信息呈現(xiàn)給用戶熄驼,和用戶發(fā)生交互。一定程度上增加用戶操作負擔(dān)州既,非必要情況下少采用這種方式

  • Toast是Android種用來顯示信息的一種機制谜洽,和Dialog不一樣的萝映,Toast沒有交點吴叶,顯示時長有限,時間一到就會自動消失序臂。顯示的時間可以進行修改蚌卤,可以達到即不增加用戶負擔(dān)有提醒到信息的作用实束,故現(xiàn)在被使用的很廣泛

  • 直接展示頁面的方式,優(yōu)點在于不需要用戶交互逊彭,且沒有時間限制咸灿,很適合用于信息填寫時的反饋。例如在填寫手機號時侮叮,如果格式不正確便會在下方用紅字顯示格式不正確避矢。缺點在于需要占據(jù)一定的頁面空間,故在Web端常見這種設(shè)計而移動端較少

  1. 登錄頁面增加幫助功能囊榜。在登錄失敗且用戶不知原因的情況下审胸,提供給用戶一個解決方法的入口。便于產(chǎn)品收集并解決不知明問題
  1. 鍵盤彈出后卸勺,要保證須填寫的輸入框置于鍵盤之上砂沛。便于用戶邊輸入邊校對

  2. 視覺上,當(dāng)焦點落于哪個輸入框時曙求,對應(yīng)輸入框繼續(xù)高亮/異色等突出顯示碍庵,集中用戶數(shù)據(jù)重點

  3. 上一次登錄提示。由于現(xiàn)在登錄方式眾多悟狱,且不同登錄方式是獨立的賬號(合并賬號除外)静浴,此時通過記錄并提示用戶上一次的登錄方式,可減免用戶思考成本挤渐,體驗更佳

  1. 產(chǎn)品經(jīng)理在頁面文本的編寫上要簡短易懂马绝。避免過多文字造成頁面擁擠、增加用戶理解成本

說在后面

在任何模塊的設(shè)計中時間和成本是產(chǎn)品經(jīng)理必定要考慮的事情

  • 常說優(yōu)秀的產(chǎn)品經(jīng)理都是時間管理的好手挣菲。產(chǎn)品不是概念富稻,而是具有交付能力的實體,沒有結(jié)果白胀、沒有交付的東西稱不上產(chǎn)品椭赋。所以產(chǎn)品經(jīng)理在進行產(chǎn)品設(shè)計時,一定要把握設(shè)計時間或杠、開發(fā)時間哪怔、測試時間、上線時間向抢、運營時間等環(huán)節(jié)的時間節(jié)點认境,在預(yù)期時間內(nèi)完成產(chǎn)品的交付

  • 同樣需要考慮產(chǎn)品對企業(yè)成本的消耗,例如人工成本挟鸠、時間成本叉信、金錢成本等,在可獲得的成本下進行最優(yōu)的產(chǎn)品設(shè)計艘希、推廣

    在實際工作中硼身,產(chǎn)品所擁有的資源都是極其有限的硅急,這就需要我們對產(chǎn)品進行合理拆分、分布進行以滿足時間和成本上的要求


通過對模塊的被需要程度佳遂、設(shè)計原則营袜、組成元素、模塊邏輯丑罪、設(shè)計細節(jié)幾方面的思考和分析荚板,再結(jié)合產(chǎn)品的時間、成本等實際情況吩屹,盡可能設(shè)計更優(yōu)質(zhì)的登錄模塊

隨著時間的推移啸驯,新的設(shè)計理念和交互形式會不斷迭代更新,也就需要我們自身也不斷升級迭代祟峦。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末罚斗,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子宅楞,更是在濱河造成了極大的恐慌针姿,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,311評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件厌衙,死亡現(xiàn)場離奇詭異距淫,居然都是意外死亡,警方通過查閱死者的電腦和手機婶希,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2 382
  • 文/潘曉璐 我一進店門榕暇,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人喻杈,你說我怎么就攤上這事彤枢。” “怎么了筒饰?”我有些...
    開封第一講書人閱讀 152,671評論 0 342
  • 文/不壞的土叔 我叫張陵缴啡,是天一觀的道長。 經(jīng)常有香客問我瓷们,道長业栅,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,252評論 1 279
  • 正文 為了忘掉前任谬晕,我火速辦了婚禮碘裕,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘攒钳。我一直安慰自己帮孔,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 64,253評論 5 371
  • 文/花漫 我一把揭開白布夕玩。 她就那樣靜靜地躺著你弦,像睡著了一般。 火紅的嫁衣襯著肌膚如雪燎孟。 梳的紋絲不亂的頭發(fā)上禽作,一...
    開封第一講書人閱讀 49,031評論 1 285
  • 那天,我揣著相機與錄音揩页,去河邊找鬼旷偿。 笑死,一個胖子當(dāng)著我的面吹牛爆侣,可吹牛的內(nèi)容都是我干的萍程。 我是一名探鬼主播,決...
    沈念sama閱讀 38,340評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼兔仰,長吁一口氣:“原來是場噩夢啊……” “哼茫负!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起乎赴,我...
    開封第一講書人閱讀 36,973評論 0 259
  • 序言:老撾萬榮一對情侶失蹤忍法,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后榕吼,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體饿序,經(jīng)...
    沈念sama閱讀 43,466評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,937評論 2 323
  • 正文 我和宋清朗相戀三年羹蚣,在試婚紗的時候發(fā)現(xiàn)自己被綠了原探。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,039評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡顽素,死狀恐怖咽弦,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情胁出,我是刑警寧澤离唬,帶...
    沈念sama閱讀 33,701評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站划鸽,受9級特大地震影響输莺,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜裸诽,卻給世界環(huán)境...
    茶點故事閱讀 39,254評論 3 307
  • 文/蒙蒙 一嫂用、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧丈冬,春花似錦嘱函、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽疏唾。三九已至,卻和暖如春函似,著一層夾襖步出監(jiān)牢的瞬間槐脏,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工撇寞, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留顿天,地道東北人。 一個月前我還...
    沈念sama閱讀 45,497評論 2 354
  • 正文 我出身青樓蔑担,卻偏偏與公主長得像牌废,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子啤握,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,786評論 2 345

推薦閱讀更多精彩內(nèi)容