中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

那怎么讓用戶知道輸入的密碼達到了強度要求呢？

通過顏色遞進（紅->黃->綠）來顯示強度，這樣感知很直接！

Axure中實現的效果如下：

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

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

怎么在Axure中制作呢？

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

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

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

同步判別：

• 統計后的數量為0，則沒有密碼強度
• 有1個數量大于0，則密碼強度是弱
• 有2個數量大于0，則密碼強度是中
• 有3個數量大于0，則密碼強度是強

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

密碼強度組件雖然看起來簡單，但要實現的邏輯較多，第一次做這個組件還是挺花時間的。

邏輯已定，那就需要學習實現的方法啦，具體步驟如下：

1、拖拽如下默認元件進頁面：

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

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

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

3.1、如果是大寫并且當前動作不是刪除動作時 [見下面第一張圖片]，則大寫復選框勾上，并且大寫統計長度的值加1，再把值寫入副本上 [見下面第二張圖片]

3.2、如果是大寫并且當前動作是刪除時，則大寫統計長度的值減1，參數的設置和上一張圖片是一致的

3.3、如果是大寫統計長度的值等于0，則復選框取消勾選

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

5、然后根據復選框的狀態，去判斷密碼強度，通過動態面板根據不同的強度展示不同的樣子；這兒的判斷邏輯就是窮盡復選框之間的組織情況，然后切換至對應強度的面板，如下圖

6、清空密碼的實現方式較為簡單，不多描述，可下載直接查看

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

不過如果在輸入數字小寫時，將光標移到數字后再刪除，刪除的判斷就會有問題啦。如下：

但咱們要實現的是高保證原型圖，所以暫不用糾結。

但~~~~~是~~~~~~咱們在評審測試案例或者自己測試時，要關注這種測試場景，說不定就藏著bug呢！

關注交互細節，關注用戶體驗，peace~

本文由 @1526 原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議