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

動(dòng)態(tài)面板是Axure里最重要的元件之一，一些稍微高級(jí)一點(diǎn)的原型，都離不開(kāi)動(dòng)態(tài)面板的應(yīng)用，因此一定要掌握動(dòng)態(tài)面板的用法。

作為動(dòng)態(tài)面板的使用場(chǎng)景案例，導(dǎo)航菜單、自動(dòng)幻燈片和屬性頁(yè)是非常適合于用來(lái)理解動(dòng)態(tài)面板的用法。我們以微信的導(dǎo)航菜單為例，看看如何使用不同的方式來(lái)應(yīng)用動(dòng)態(tài)面板，最終的交互效果是一致的。

第一個(gè)例子不復(fù)雜，但常常被作為典型案例來(lái)講解。

內(nèi)容區(qū)域+導(dǎo)航菜單作為一個(gè)動(dòng)態(tài)面板

這是其中最簡(jiǎn)單的實(shí)現(xiàn)方式，并且易于理解。

一、界面布局

簡(jiǎn)單布局一下微信的界面，包括標(biāo)題欄，內(nèi)容區(qū)域和導(dǎo)航菜單。

1、添加一個(gè)標(biāo)題欄，大小448*48，黑底白字，文字大小為20，居左對(duì)齊，左邊距為10

2、添加一個(gè)有邊框矩形，大小448*580，灰色背景，只保留上、下邊框，雙擊矩形框，設(shè)置文字內(nèi)容為“微信內(nèi)容”，將矩形框放在標(biāo)題欄下方

3、添加一個(gè)灰色無(wú)邊框矩形，大小112*60，文字顏色為深灰色，設(shè)置文字內(nèi)容“微信”，作為導(dǎo)航菜單的按鈕，放在內(nèi)容區(qū)域的下方

4、設(shè)置“微信”按鈕的交互樣式，選中按鈕，右鍵選擇“交互樣式”，設(shè)置選中狀態(tài)的文字顏色為綠色（#46C01B）

5、按ctrl鍵+“微信”按鈕拖動(dòng)，復(fù)制三個(gè)相同矩形框，作為微信導(dǎo)航菜單的其它按鈕，修改文字分別為“通訊錄”、“發(fā)現(xiàn)”和“我”

二、動(dòng)態(tài)面板處理

界面基本元件已經(jīng)添加完成，選中“微信內(nèi)容”矩形框和下方的四個(gè)導(dǎo)航按鈕，右鍵轉(zhuǎn)換為動(dòng)態(tài)面板，命名為nav，將State1命名為“微信”：

微信的導(dǎo)航菜單分為四部分內(nèi)容，因此我們可以將動(dòng)態(tài)面板的”微信”再?gòu)?fù)制3份，以通訊錄為例，在狀態(tài)“微信”上右鍵，選擇“復(fù)制狀態(tài)”：

修改復(fù)制出來(lái)的動(dòng)態(tài)名稱為“通訊錄”：

雙擊通訊錄，打開(kāi)動(dòng)態(tài)面板，修改里面內(nèi)部部分的矩形框文字為“通訊錄列表”（這樣在切換導(dǎo)航菜單時(shí)可以看到確實(shí)切換到不同的狀態(tài)了）：

同理，復(fù)制為“發(fā)現(xiàn)”和“我”兩個(gè)狀態(tài)，并修改其中的文字內(nèi)容，完成后，動(dòng)態(tài)面板有四個(gè)狀態(tài)：

微信在默認(rèn)情況下，顯示的是導(dǎo)航菜單“微信”處于選中狀態(tài)，目前動(dòng)態(tài)面板中狀態(tài)為“微信”是顯示在最上面，我們雙擊狀態(tài)“微信”打開(kāi)，選擇“微信”按鈕，右鍵選擇“選中”：

同理：

• 雙擊打開(kāi)狀態(tài)“通訊錄”，右鍵設(shè)置“通訊錄”按鈕為選中。
• 雙擊打開(kāi)狀態(tài)“發(fā)現(xiàn)”，右鍵設(shè)置“發(fā)現(xiàn)”按鈕為選中。
• 雙擊打開(kāi)狀態(tài)“我”，右鍵設(shè)置“我”按鈕為選中。

這樣，在切換到相關(guān)狀態(tài)時(shí)，當(dāng)前狀態(tài)對(duì)應(yīng)的按鈕即為選中狀態(tài)。

三、動(dòng)態(tài)面板事件處理

這里有兩個(gè)地方需要添加事件處理：

1、左右滑動(dòng)內(nèi)容區(qū)域時(shí)切換動(dòng)態(tài)面板狀態(tài)

選擇前面的動(dòng)態(tài)面板，雙擊添加“向左拖動(dòng)結(jié)束時(shí)”事件：

1. 選擇動(dòng)態(tài)面板
2. 添加“向左拖動(dòng)結(jié)束時(shí)”事件
3. 設(shè)置面板狀態(tài)，選擇當(dāng)前動(dòng)態(tài)面板
4. 在向左滑動(dòng)結(jié)束時(shí)，我們將動(dòng)態(tài)面板設(shè)置為下一個(gè)狀態(tài)，即為“Next”
5. 設(shè)置動(dòng)畫和退出動(dòng)畫為“逐漸”，也就是淡入淡出效果

同更，添加“向右拖動(dòng)結(jié)束時(shí)”事件，只是上面的第4步中的選擇狀態(tài)為“Previous”，其它設(shè)置相同。

2、點(diǎn)擊導(dǎo)航菜單按鈕切換動(dòng)態(tài)面板狀態(tài)

擊導(dǎo)航菜單按鈕時(shí)的狀態(tài)切換，和上面的左右滑動(dòng)的效果是一樣的。

我們先添加狀態(tài)“微信”中的四個(gè)按鈕。

雙擊打開(kāi)第一個(gè)狀態(tài)——“微信”，選擇按鈕“微信”，添加單擊事件：

1. 選擇“微信”按鈕
2. 添加鼠標(biāo)單擊事件
3. 設(shè)置面板狀態(tài)
4. 選擇動(dòng)態(tài)面板nav
5. 設(shè)置狀態(tài)為“微信”，進(jìn)入退出動(dòng)畫為逐漸

添加其它三個(gè)按鈕事件，步驟相同，選擇對(duì)應(yīng)按鈕時(shí)顯示對(duì)應(yīng)的狀態(tài)。

現(xiàn)在可以按下F5鍵預(yù)覽一下效果了：

1. 左右拖動(dòng)內(nèi)容區(qū)域查看
2. 單擊導(dǎo)航菜單按鈕查看

僅內(nèi)容區(qū)域作為一個(gè)動(dòng)態(tài)面板

導(dǎo)航菜單的實(shí)現(xiàn)方式有多種，下面我們使用另外一種方式，只將內(nèi)容區(qū)域作為動(dòng)態(tài)面板，而將導(dǎo)航菜單按鈕獨(dú)立出來(lái)，不再放在動(dòng)態(tài)面板中。

一、界面布局

界面布局部分和上面的方式完全一致，此處不再贅述，直接進(jìn)入動(dòng)態(tài)面板處理

二、動(dòng)態(tài)面板處理

選擇內(nèi)容區(qū)域的矩形框，右鍵轉(zhuǎn)換為動(dòng)態(tài)面板，命名為content，復(fù)制該狀態(tài)3個(gè)，修改狀態(tài)名稱分別為通訊錄、發(fā)現(xiàn)和我，并修改里面矩形框的文字內(nèi)容以便于識(shí)別：

將下方的四個(gè)按鈕分別命名為bWeixin,bTongxunlu,bFaxian,bWo，選擇按鈕“微信”，右鍵設(shè)置為選中狀態(tài)：

三、事件處理

同樣包括動(dòng)態(tài)面板content的左右拖動(dòng)處理，以及導(dǎo)航菜單按鈕的單擊事件。

1、左右滑動(dòng)內(nèi)容區(qū)域時(shí)切換動(dòng)態(tài)面板狀態(tài)

事件和第一種的方法一樣，只是需要再補(bǔ)充一下事件內(nèi)容，因?yàn)橹笆钦w切換動(dòng)態(tài)面板的，而按鈕是在動(dòng)態(tài)面板里的，但這次因?yàn)榘粹o是獨(dú)立開(kāi)來(lái)的，需要增加對(duì)按鈕的設(shè)置。

左右滑動(dòng)的事件里，只是設(shè)置了顯示下一個(gè)或者上一個(gè)狀態(tài)，因此無(wú)法直接判斷出當(dāng)前狀態(tài)在哪里，這樣就沒(méi)辦法去定位當(dāng)前的導(dǎo)航菜單按鈕應(yīng)該顯示是哪個(gè)（左右滑動(dòng)時(shí)，下方的導(dǎo)航按鈕也要正確對(duì)應(yīng)）。

注意：以下技巧很重要

利用“觸發(fā)事件”來(lái)處理復(fù)雜邏輯。

我們可以添加一個(gè)控制元件，例如熱區(qū)元件（因?yàn)椴豢梢?jiàn)，比較適合，設(shè)置小一點(diǎn)），給它添加一下單擊事件（內(nèi)有邏輯判斷），然后在動(dòng)態(tài)面板的左右滑動(dòng)時(shí)觸發(fā)熱區(qū)元件的單擊事件，這樣就能達(dá)到邏輯判斷的目的了。

添加一個(gè)熱區(qū)元件，命名為control，添加單擊事件：

1. 添加事件分支1
2. 添加條件狀態(tài)，動(dòng)態(tài)面板content當(dāng)前狀態(tài)等于“微信”
3. 先取消四個(gè)按鈕的選中狀態(tài)
4. 設(shè)置“微信”按鈕為選中狀態(tài)

同理，添加其它三個(gè)事件分支，分別判斷動(dòng)態(tài)面板content的當(dāng)前狀態(tài)，設(shè)置對(duì)應(yīng)按鈕的選中狀態(tài)。（可以直接復(fù)制/粘貼事件，修改條件和事件）

下面，雙擊動(dòng)態(tài)面板的Case1，修改動(dòng)態(tài)面板content的左右拖動(dòng)事件，觸發(fā)熱區(qū)事件：

1. 添加等待600毫秒，因?yàn)樵陲@示淡入淡出動(dòng)畫時(shí)用了500毫秒，我們希望在動(dòng)畫顯示完成后，正確顯示下方對(duì)應(yīng)導(dǎo)航按鈕的選中狀態(tài)
2. 觸發(fā)熱區(qū)的單擊事件

2、點(diǎn)擊導(dǎo)航菜單按鈕切換動(dòng)態(tài)面板狀態(tài)

1. 選擇“微信”按鈕
2. 添加鼠標(biāo)單擊事件
3. 先取消四個(gè)導(dǎo)航按鈕的選中狀態(tài)
4. 設(shè)置當(dāng)前按鈕為選中狀態(tài)
5. 設(shè)置動(dòng)態(tài)面板content的狀態(tài)為“微信”

復(fù)制“微信”按鈕的事件，粘貼到其它三個(gè)按鈕的鼠標(biāo)單擊事件，然后修改上面第5步動(dòng)態(tài)面板狀態(tài)為對(duì)應(yīng)狀態(tài)。

事件處理完成，再一次按下F5鍵預(yù)覽一下效果。

內(nèi)容區(qū)域、導(dǎo)航菜單按鈕分別作為動(dòng)態(tài)面板

最后，我們也可以將內(nèi)容區(qū)域作為一個(gè)動(dòng)態(tài)面板，將導(dǎo)航菜單的4個(gè)按鈕也作為一個(gè)動(dòng)態(tài)面板，同樣可以實(shí)現(xiàn)微信的導(dǎo)航菜單效果。

這個(gè)留給愛(ài)學(xué)習(xí)的你自己實(shí)踐一下吧?。ê竺娴脑次募幸烟峁┝舜藢?shí)現(xiàn)方式）

小結(jié)

實(shí)現(xiàn)原型的方式有多種，只要能達(dá)到想要的效果，哪種方式都可以，不局限于一定要用哪種方式，只需要你清楚你想要的原型效果。

這里是三種原型的實(shí)現(xiàn)方式下載地址：鏈接: https://pan.baidu.com/s/1o8Pnxiy 密碼: khur

本文由 @Axure原型設(shè)計(jì)工場(chǎng) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。