設(shè)計案例分享之指紋識別

3 評論 9085 瀏覽 17 收藏 5 分鐘

本文筆者分享了指紋識別的設(shè)計案例,詳細地介紹了設(shè)計過程,并對過程中出現(xiàn)的問題進行了復(fù)盤總結(jié),供大家參考學(xué)習(xí)。

指紋識別的功能是以前做過的小案例,當(dāng)時做的時候,出現(xiàn)了很多小問題,現(xiàn)在復(fù)盤總結(jié)一下幫助自己加深記憶,也希望能夠幫助到大家~

一、需求內(nèi)容

1. 在手機的【設(shè)置】頁面內(nèi)新增一個【指紋識別】的功能,該功能要滿足以下三項要求:

①用戶最多可以定制十個指紋

②每個指紋都可以在手機鎖屏?xí)r快速解鎖

③每個指紋都可以在解鎖的同時開啟一個手機app

2. 繪制出此功能內(nèi)含有的全部頁面,包括各類可能出現(xiàn)的交互情況(比如彈窗、滑動、跳轉(zhuǎn)等等)

二、需求分析

1. “錄制指紋最多可定制十個指紋” — 要考慮到三種狀態(tài):空狀態(tài)(0個指紋)、使用狀態(tài)(1-9個指紋)和極限狀態(tài)(10個指紋)

2. 新建指紋的流程,要考慮到正常情況和異常情況,如長時間無法識別指紋、指紋命名重復(fù)、指紋錄入失敗

3. 編輯指紋(刪改查)

4. “每個指紋都可以在解鎖的同時立即開啟一個手機app”–不同的指紋可以綁定同一個app、相同的指紋只可以錄入一次

案例設(shè)計之指紋識別

三、設(shè)計過程

(1) 添加指紋流程

存在兩處很明顯的設(shè)計問題:

案例設(shè)計之指紋識別

問題A: 前面是空狀態(tài)流程,到A頁面提示“已存在重復(fù)指紋,請修改指紋名稱”是使用狀態(tài)(已有指紋時)可能會出現(xiàn)的頁面,這種情況是流程場景弄混淆了,做空狀態(tài)流程時,就要是空狀態(tài)應(yīng)該出現(xiàn)的頁面,特殊的情況可以在旁邊標(biāo)注上。設(shè)計是需要嚴謹?shù)模灰驗閭€人輸出文檔時的失誤,導(dǎo)致項目延遲,所以在制作交互文檔的時候,一定要謹慎,謹慎,再謹慎;

問題B:底部按鈕出現(xiàn)兩個功能,一般APP都是這樣做的,如電商類app,加入購物車和立即購買按鈕;但是硬件的功能按鈕不允許這么設(shè)計的,會給系統(tǒng)帶來不穩(wěn)定的隱患;

(2)對已有指紋的刪改查

添加指紋后,不能對指紋本身進行修改,只能對該指紋對應(yīng)的名字與綁定的app進行修改;指紋本身不可修改只可以刪除;

案例設(shè)計之指紋識別

編輯A頁面的指紋名稱和對應(yīng)打開的APP,需要點擊跳轉(zhuǎn)到B頁面,B頁面的設(shè)計包含了對該指紋的刪改查,頂部是對指紋名稱進行修改,中間部分是更改對應(yīng)的APP(只能選擇一個),最下部分是對指紋進行保存和刪除的功能,這樣做的目的是提高用戶的操作效率,在一個頁面完成所有的操作;

但是從用戶體驗角度詳細分析,內(nèi)容的詳情頁展示過于飽滿,導(dǎo)致頁面的操作效率不但沒有提高反而降低了,還有如果后期迭代需要對指紋再增加幾項功能,頁面完全不能容納,會需要架構(gòu)的重構(gòu),所以需要增加一項編輯頁面,劃分邏輯,提高操作效率;

修改后的如下:

根據(jù)上邊的分析,增加了一頁編輯頁面,不僅提高了效率,功能邏輯也更加清晰。

案例設(shè)計之指紋識別

以上就是我對“指紋識別”交互設(shè)計的總結(jié)~

 

作者:杜昭,微信:17611113635,微信公眾號:設(shè)計的威嚴

本文由@杜昭 原創(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è)計,會帶來不穩(wěn)定的隱患????怎么理解???

    來自浙江 回復(fù)
    1. 未來不可預(yù)知哈,指紋技術(shù)、面部識別技術(shù)、……這些出現(xiàn)之前我們也沒想到過,一切皆有可能!

      來自北京 回復(fù)
    2. 來自廣東 回復(fù)