欧美综合天天夜夜久久,中文字幕无码日韩中文字幕,99re热视频这里只精品

搜索

APP

起點(diǎn)課堂會(huì)員權(quán)益

職業(yè)體系課特權(quán)

線下行業(yè)大會(huì)特權(quán)

個(gè)人IP打造特權(quán)

30+門專項(xiàng)技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導(dǎo)直播

12場專業(yè)技能直播

會(huì)員專屬社群

榮耀標(biāo)識(shí)

發(fā)布

注冊(cè) | 登錄

Axure 9 案例教程，如何利用情形實(shí)現(xiàn)B站圖文登錄驗(yàn)證？

默林

2021-03-15

0 評(píng)論 3543 瀏覽 5 收藏

13 分鐘

編輯導(dǎo)語：在很多時(shí)候，我們遇到登陸頁面是，總是會(huì)跳出一個(gè)驗(yàn)證碼登錄，有時(shí)是輸入數(shù)字，有時(shí)是圖文登錄的形式；并且圖文登錄還分為很多方式，本文作者將介紹B站圖文登錄驗(yàn)證的步驟，我們一起來了解一下。

你知道最常見的登錄驗(yàn)證方式是什么嗎？

估計(jì)大家第一時(shí)間想到的是驗(yàn)證碼，不錯(cuò)，驗(yàn)證碼的確是最常見也是最經(jīng)典的登錄驗(yàn)證方式。

那么其他的登錄驗(yàn)證方式，你知道有哪些呢？比如下面圖片中的這種方式（B站的圖文登錄驗(yàn)證），你是否見過？

B站的圖文登錄驗(yàn)證

大家可以看到，B站的圖文登錄驗(yàn)證效果主要組成包括：

1）點(diǎn)擊文字時(shí)顯示排序號(hào)

2）點(diǎn)擊<確定>按鈕，判斷點(diǎn)擊順序是否正確：

順序錯(cuò)誤時(shí)，提示驗(yàn)證失敗，并刷新圖文重新驗(yàn)證；
順序正確時(shí)，提示驗(yàn)證成功。

那么本篇就來給大家講解一下，如何繪制B站的圖文登錄驗(yàn)證效果（注：本篇教程屬于Axure 9 基本元件的復(fù)合應(yīng)用，適合1年左右的產(chǎn)品經(jīng)理，大牛請(qǐng)繞行）。

01 第一步：設(shè)置第一個(gè)點(diǎn)擊交互

為了節(jié)省時(shí)間，我們事先把圖文驗(yàn)證界面繪制好了，包括驗(yàn)證圖文（邊框、提示文字、驗(yàn)證圖片、刷新按鈕、確認(rèn)按鈕）、點(diǎn)擊提示（圓形1和2）、驗(yàn)證結(jié)果提示（驗(yàn)證通過、驗(yàn)證失敗）。

圖文驗(yàn)證界面

首先拖入一個(gè)熱區(qū)，設(shè)置其大小為70×70，并拖動(dòng)熱區(qū)至驗(yàn)證圖片上，覆蓋在“轉(zhuǎn)”字上面；然后在右側(cè)工具欄的交互上，點(diǎn)擊新建交互，再依次點(diǎn)擊單擊時(shí)_顯示/隱藏_圓形1，將其設(shè)為顯示（默認(rèn)為顯示），并勾選置于頂層。

拖入熱區(qū)，設(shè)置大小為70×70，并拖到轉(zhuǎn)字上

點(diǎn)擊新建交互_單擊時(shí)_顯示/隱藏_圓形1，并勾選置于頂層

接著在交互“單擊時(shí)”中點(diǎn)擊+號(hào)（添加動(dòng)作），依次點(diǎn)擊設(shè)置文本_圓形1，設(shè)置值為1。

點(diǎn)擊添加動(dòng)作

依次點(diǎn)擊設(shè)置文本_圓形1，設(shè)置值為1。

這里交互的意思是，當(dāng)點(diǎn)擊“轉(zhuǎn)”字時(shí)，顯示點(diǎn)擊提示（圓形1）并置于頂層，排序號(hào)顯示為1。

02 第二步：設(shè)置多種情形的點(diǎn)擊交互

由于點(diǎn)擊順序有正確和錯(cuò)誤兩種情況，上一步只是其中的一種情況，所以我們就要運(yùn)用到交互中的情形。

運(yùn)用情形設(shè)置多種交互

首先點(diǎn)擊啟用情形，在情形編輯彈窗中，點(diǎn)擊添加條件，然后點(diǎn)擊第一個(gè)下拉菜單，選擇元件可見，點(diǎn)擊第二個(gè)下拉菜單，選擇圓形2，點(diǎn)擊最后的下拉菜單，選擇假。

添加情形條件，設(shè)置為：if 元件可見于圓形2 == 假

這里我們是，通過判斷圓形2是否顯示，來確定當(dāng)前熱區(qū)的點(diǎn)擊順序：

情形一，當(dāng)圓形2不顯示時(shí)，說明當(dāng)前熱區(qū)是第一個(gè)被點(diǎn)擊的，圓形1的排序號(hào)要顯示為1；
情形二，當(dāng)圓形2顯示時(shí)，說明當(dāng)前熱區(qū)是第二個(gè)被點(diǎn)擊的，圓形1的排序號(hào)應(yīng)該顯示為2。

所以我們接著來添加這第二種情形，點(diǎn)擊選中第一個(gè)情形，按Ctrl+C將其復(fù)制到剪貼板，再按Ctrl+V，將其復(fù)制多一份（交互是可以復(fù)制粘貼的）。

復(fù)制多一份情形

雙擊交互打開交互編輯器，在彈窗中再雙擊第二個(gè)情形打開情形編輯窗（或直接點(diǎn)擊第二個(gè)情形的情形條件）；在情形編輯窗中，修改情形名稱為情形2，點(diǎn)擊最后的下拉菜單，選擇真；再在交互編輯器上，點(diǎn)擊情形2中的設(shè)置文本的內(nèi)容，將值設(shè)為2（即設(shè)置圓形1的排序號(hào)為2）。

設(shè)置情形條件為：if 元件可見于圓形2 == 真

設(shè)置圓形1的排序號(hào)為2

03 第三步：設(shè)置第二個(gè)點(diǎn)擊交互

第三步我們來設(shè)置第二個(gè)點(diǎn)擊的交互，第二個(gè)點(diǎn)擊交互與第一個(gè)大同小異，所以我們可以將前面的熱區(qū)，按Ctrl+鼠標(biāo)左鍵，拖拉復(fù)制多一份，用作第二個(gè)熱區(qū)，并將其拖至“面”字上面。

復(fù)制多一份熱區(qū)，拖至“面”字上

接著點(diǎn)擊選中第二個(gè)熱區(qū)，雙擊右側(cè)工具欄的交互，打開交互編輯器，再點(diǎn)擊情形1的情形條件，打開在情形編輯窗，然后點(diǎn)擊第二個(gè)下拉菜單，修改為圓形1。

打開第二熱區(qū)的情形1，修改第二個(gè)菜單為圓形1

再接著在交互編輯器中，點(diǎn)擊顯示隱藏的內(nèi)容，修改目標(biāo)為圓形2；然后點(diǎn)擊設(shè)置文本的內(nèi)容，修改目標(biāo)為圓形2。

修改顯示隱藏的目標(biāo)為圓形2

修改設(shè)置文本的目標(biāo)為圓形2

最后我們依照情形1的修改方法，來再修改情形2，即修改情形條件的目標(biāo)為圓形1、顯示隱藏的目標(biāo)為圓形2、設(shè)置文本的目標(biāo)為圓形2。

依照情形1來修改情形2

04 第四步：設(shè)置判斷交互

前面三步我們已經(jīng)完成了點(diǎn)擊交互的設(shè)置，接下來就要設(shè)置<確定>按鈕的判斷交互了。

首先點(diǎn)擊選中<確定>按鈕，在右側(cè)工具欄的交互上，依次點(diǎn)擊新建交互_單擊時(shí)_顯示隱藏_驗(yàn)證通過，將其設(shè)為顯示（默認(rèn)為顯示），并勾選置于頂層。

選中<確定>按鈕，點(diǎn)擊新建交互

依次點(diǎn)擊單擊時(shí)_顯示隱藏_驗(yàn)證通過，勾選置于頂層

05 第五步：設(shè)置多種情形的判斷交互

與點(diǎn)擊交互一樣，由于驗(yàn)證提示有通過和失敗兩種情況，上一步只是其中的一種情況，所以我們繼續(xù)要運(yùn)用到交互中的情形。

繼續(xù)使用情形

首先，在交互“單擊時(shí)”上點(diǎn)擊啟用情形，打開情形編輯窗，在彈窗中點(diǎn)擊添加條件，再點(diǎn)擊第二個(gè)下拉菜單，選擇圓形1，在最后一欄填上1；然后點(diǎn)擊+號(hào)再添加一行，再點(diǎn)擊第二個(gè)下拉菜單，選擇圓形2，在最后一欄填上2。