編輯導(dǎo)讀：為了防止被盜號(hào)，用戶和平臺(tái)都希望自己的密碼強(qiáng)度越大越好。一些平臺(tái)會(huì)給用戶直觀的看到自己輸入的密碼達(dá)到了什么強(qiáng)度，那怎么讓用戶知道輸入的密碼達(dá)到了強(qiáng)度要求呢？本文作者對此進(jìn)行了分析，希望對你有幫助。

平時(shí)我們在注冊新賬號(hào)設(shè)置密碼時(shí)，填寫的密碼要符合強(qiáng)度才會(huì)設(shè)置成功；我們在設(shè)計(jì)密碼輸入框時(shí)可以加上密碼強(qiáng)度，這么做提高了用戶的賬戶安全；同時(shí)為了提升友好性，也要讓用戶直觀的看到自己輸入的密碼達(dá)到了什么強(qiáng)度。

那怎么讓用戶知道輸入的密碼達(dá)到了強(qiáng)度要求呢？

通過顏色遞進(jìn)（紅->黃->綠）來顯示強(qiáng)度，這樣感知很直接！

Axure中實(shí)現(xiàn)的效果如下：

1、輸入的密碼包含“數(shù)字”、“大寫”、“小寫”、“字符”其中一種，密碼強(qiáng)度顯示為弱；有2種則為中；超過2種則為強(qiáng)

2、隨著密碼的刪除，再次判定密碼包含“數(shù)字”、“大寫”、“小寫”、“字符”中的幾種，并變化密碼強(qiáng)度

怎么在Axure中制作呢？

制作方法是本人學(xué)習(xí)了交互元件庫（Quick）后梳理出來的，稍微有點(diǎn)難度，但如果理清邏輯后，就不難了。

在Axure中直接判斷輸入的文本是否包含了“數(shù)字”、“大寫”、“小寫”、“字符”是無法實(shí)現(xiàn)的，所以需要轉(zhuǎn)變思路。

我們可以循環(huán)判斷用戶輸入的文字和輸入的行為，是大寫、小寫、數(shù)字還是字符，是不是刪除動(dòng)作，然后加減各自的數(shù)量；

同步判別：

• 統(tǒng)計(jì)后的數(shù)量為0，則沒有密碼強(qiáng)度
• 有1個(gè)數(shù)量大于0，則密碼強(qiáng)度是弱
• 有2個(gè)數(shù)量大于0，則密碼強(qiáng)度是中
• 有3個(gè)數(shù)量大于0，則密碼強(qiáng)度是強(qiáng)

如果寫過代碼，可能會(huì)容易理解這段邏輯。不過沒關(guān)系，我還畫了邏輯圖，一起看看吧。

密碼強(qiáng)度組件雖然看起來簡單，但要實(shí)現(xiàn)的邏輯較多，第一次做這個(gè)組件還是挺花時(shí)間的。

邏輯已定，那就需要學(xué)習(xí)實(shí)現(xiàn)的方法啦，具體步驟如下：

1、拖拽如下默認(rèn)元件進(jìn)頁面：

• 1個(gè)矩形，里面寫“密碼框”
• 1個(gè)文本框，外面套1個(gè)矩形，在矩形下面放1個(gè)動(dòng)態(tài)面板，里面4個(gè)面板狀態(tài)分別是“無”、“弱”、“中”、“強(qiáng)”，每個(gè)面板中分別放置3個(gè)矩形，“無”面板中的3個(gè)矩形的填充顏色都為#e4e4e4；“弱”面板中的第一個(gè)為#ff5722，其他都是#e4e4e4；“中”面板分別為#ff5722、#ff9800、#e4e4e4；“強(qiáng)”面板分別為#ff5722、#ff9800、#1ec695，通過切換面板狀態(tài)來顯示密碼強(qiáng)度
• 一個(gè)圖片，圖片是個(gè)清除按鈕，點(diǎn)擊可以清除密碼
• 4個(gè)復(fù)選框，分別是“大寫”、“數(shù)字”、“小寫”、“字符”，用于統(tǒng)計(jì)密碼中包含幾種情況，后面再加4個(gè)矩形，里面寫“0”，用來統(tǒng)計(jì)各類型的數(shù)量
• 1個(gè)文本框，用于存儲(chǔ)密碼框輸入的值

2、輸入框“文本改變時(shí)”，首先會(huì)判定長度是否為0 [見下面第一張圖片]，如果是0的話，會(huì)將所有的控件初始化，包括復(fù)選框取消勾選，統(tǒng)計(jì)值初始成0，副本值初始成空，隱藏清除按鈕 [見下面第二張圖片]

3、文本開始輸入時(shí)，會(huì)判斷副本上最后一位的字符（獲取最后一位字符的函數(shù)方法可參考https://www.axure.com.cn/5068）：

3.1、如果是大寫并且當(dāng)前動(dòng)作不是刪除動(dòng)作時(shí) [見下面第一張圖片]，則大寫復(fù)選框勾上，并且大寫統(tǒng)計(jì)長度的值加1，再把值寫入副本上 [見下面第二張圖片]

3.2、如果是大寫并且當(dāng)前動(dòng)作是刪除時(shí)，則大寫統(tǒng)計(jì)長度的值減1，參數(shù)的設(shè)置和上一張圖片是一致的

3.3、如果是大寫統(tǒng)計(jì)長度的值等于0，則復(fù)選框取消勾選

4、小寫、數(shù)字、字符都是同樣的判斷邏輯，小寫字母在unidecode中的位置為97-122，數(shù)字為48-57，字符就比較復(fù)雜，分別為32-47、58-64、91-96、123-126

5、然后根據(jù)復(fù)選框的狀態(tài)，去判斷密碼強(qiáng)度，通過動(dòng)態(tài)面板根據(jù)不同的強(qiáng)度展示不同的樣子；這兒的判斷邏輯就是窮盡復(fù)選框之間的組織情況，然后切換至對應(yīng)強(qiáng)度的面板，如下圖

6、清空密碼的實(shí)現(xiàn)方式較為簡單，不多描述，可下載直接查看

5、再隱藏復(fù)選框、文本框、密碼清除按鈕等，點(diǎn)擊預(yù)覽，就能看到最開始展示的效果啦

不過如果在輸入數(shù)字小寫時(shí)，將光標(biāo)移到數(shù)字后再刪除，刪除的判斷就會(huì)有問題啦。如下：

但咱們要實(shí)現(xiàn)的是高保證原型圖，所以暫不用糾結(jié)。

但~~~~~是~~~~~~咱們在評(píng)審測試案例或者自己測試時(shí)，要關(guān)注這種測試場景，說不定就藏著bug呢！

關(guān)注交互細(xì)節(jié)，關(guān)注用戶體驗(yàn)，peace~

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

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