從用例、流程、頁面三個層面,拆解手勢密碼設(shè)計

6 評論 7726 瀏覽 74 收藏 5 分鐘

在涉及金融業(yè)務(wù)的APP中經(jīng)常會使用手勢密碼作為驗證條件之一,在產(chǎn)品環(huán)節(jié)中,這個功能需要如何設(shè)計呢?

產(chǎn)品賬戶設(shè)計和產(chǎn)品的私密性、安全性相關(guān),與金錢相關(guān)的產(chǎn)品安全性、私密性較高,比如銀行APP、理財類、支付類的APP。

銀行類的APP用戶每次啟動時都要重新輸入密碼才能進入頁面進行操作,絕大多數(shù)私密性、安全性沒有那么高的APP用戶的賬號和密碼保存在本地,用戶啟動APP時,系統(tǒng)自動發(fā)送賬號和密碼到服務(wù)器上獲取用戶的數(shù)據(jù),不需要用戶輸入賬號和密碼。

手勢密碼介于中間,既可以方便用戶操作,又能夠在一定程度上保證用戶資金的安全,一般應用于理財類和支付類的產(chǎn)品,例如桔子理財和支付寶。

本文以桔子理財為例,主要從用例、流程、頁面三個層面來分析手勢密碼的設(shè)計。

一、用例分析

手勢密碼的用例包括:

二、流程和頁面

六個用例的流程和頁面設(shè)計,用例包括:繪制手勢密碼、手勢密碼登錄,修改手勢密碼、忘記手勢密碼、開通手勢密碼、關(guān)閉手勢密碼。

1. 繪制手勢密碼

場景:首次注冊完成后,繪制手勢密碼;用戶關(guān)閉手勢密碼,重新開通時需要重新設(shè)置手勢密碼,以防用戶忘記之前設(shè)置過的密碼;如果手勢密碼保存在本地的話,用戶卸載后重新下載、或使用其他手機登錄時需要重新設(shè)置。

流程:

限制條件:手勢密碼連接點4-9個

頁面:根據(jù)以上流程圖、限制條件,頁面包括首頁,第一次繪制-正確,第一次繪制-錯誤,第二次繪制-正確,第二次繪制-錯誤。

注意:繪制時用戶可以選擇跳過,頁面要有跳過功能;

?注意:第二次繪制手勢密碼錯誤時,用戶可以重新設(shè)置

2. 手勢密碼登錄

場景:APP關(guān)閉后重新啟動;APP在后臺運行,但是距離上一次點擊超過30秒

前提:用戶設(shè)置了手勢密碼

流程圖:

頁面:包括首頁,輸入錯誤頁面,輸入正確時直接進入首頁無需額外頁面展示;頁面應包括忘記手勢密碼和其他賬號登錄功能。

3. 忘記、修改、開通、關(guān)閉手勢密碼

流程:

頁面:

 

本文由 @zhepburn 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自 Unsplash ,基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 您好,請問一般手勢密碼是存在本地,還是存在賬號上。如果換了新設(shè)備,手勢密碼要重新驗證嗎?

    回復
  2. 請問手勢登錄有有效期限制嗎?比如超過多少天不使用app就手勢密碼失效?

    回復
  3. 大部分理財APP都有設(shè)計手勢密碼,作者偏偏就舉了個桔子,不免有做廣告嫌疑啊。其實就說XX理財就好了,這樣整篇文章不顯得這么功利了。

    來自浙江 回復
    1. 哈哈,我不是桔子的員工,文章只是以桔子為參考,沒有想要打廣告 ??

      來自廣東 回復
    2. 謝謝提醒 ??

      來自廣東 回復