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

動(dòng)態(tài)面板的功能很強(qiáng)大，了解了動(dòng)態(tài)面板的原理，便可以運(yùn)用自如。在目前的工作中，我把經(jīng)常使用動(dòng)態(tài)面板制作的交互總結(jié)了一下，希望與大家討論并分享。

動(dòng)態(tài)面板在交互中常常用在：

• 使用動(dòng)態(tài)面板制作輪播圖
• 使用動(dòng)態(tài)面板制作tab頁面切換。
• 使用動(dòng)態(tài)面板制作彈出對(duì)話框。
• 使用動(dòng)態(tài)面板……

今天我們來說說使用動(dòng)態(tài)面板制作TAB頁面切換。

什么是TAB頁面切換？

我的理解是：點(diǎn)擊不同的標(biāo)題或者標(biāo)簽，內(nèi)容顯示區(qū)顯示不同的結(jié)果。通常標(biāo)題或者標(biāo)簽是并列排放的。如攜程網(wǎng)首頁下面的部分。

注：對(duì)于上面的內(nèi)容區(qū)部分，是非常有規(guī)律的，這種使用中繼器來做會(huì)很簡單。

期望效果：

單擊不同的tab頁面切換顯示不同的tab內(nèi)容頁，且選中頁簽的標(biāo)題變紅色。

為了好理解，做一個(gè)簡單的5月份汽車銷量排行，分別按照轎車，SUV，MPV排行顯示。

制作步驟：

1.制作靜態(tài)頁面

在編輯區(qū)拖入一個(gè)矩形框。

單擊上圖中1處可以修出弧度，2處修改矩形為這種樣式，得到以下的圖，作為TAB標(biāo)簽的雛形。

復(fù)制2個(gè)進(jìn)行排列，且分別寫上標(biāo)簽名稱。為3個(gè)矩形標(biāo)簽分別命名（”jiaoche”,”SUV”,”MPV”）。

拖動(dòng)一個(gè)動(dòng)態(tài)面板進(jìn)入編輯區(qū)。

為動(dòng)態(tài)面板命名：xiaoliangpaihang，制作3個(gè)狀態(tài)：轎車，SUV，MPV。（不會(huì)做的可以參考：Axure原型設(shè)計(jì)：動(dòng)態(tài)面板之輪播圖顯示（附帶源文件）http://www.aharts.cn/rp/692728.html）

3種狀態(tài)下分別放置3種tab標(biāo)簽需要顯示的排行榜。

2.制作交互

靜態(tài)頁面做完成之后，便可以做交互了。點(diǎn)擊矩形“轎車”，進(jìn)入動(dòng)態(tài)面板的轎車頁面；

對(duì)點(diǎn)擊“轎車”的動(dòng)作，做3個(gè)交互的操作：

1）點(diǎn)擊后，動(dòng)態(tài)面板選中“轎車”的靜態(tài)頁面。

2）矩形“jiaoche”為選中狀態(tài)，其余2個(gè)tab頁簽為“未選中”狀態(tài)。

3）選中時(shí)，背景色變?yōu)榧t色。

設(shè)置選中的樣式，填充背景顏色。

重復(fù)上面的步驟制作點(diǎn)擊“SUV”和“MPV”的交互。這樣就完成了動(dòng)態(tài)面板的TAB頁簽的切換了。

延伸：

1. 在例子，動(dòng)態(tài)面板的每個(gè)狀態(tài)的頁面為一張圖片。我們也可以換成其他的控件，例如下拉列表框，單選框，輸入框，按鈕等，根據(jù)需要采用不同的控件，當(dāng)然也可以在動(dòng)態(tài)面板中繼續(xù)添加動(dòng)態(tài)面板來達(dá)到效果（動(dòng)態(tài)面板使用熟練后可以練習(xí)使用）。
2. 在例子中，頁簽選中為填充背景色，還可以有多種選中后的表現(xiàn)形式，例如字體變粗等，可以按照需要設(shè)置不同的交互。

制作源文件：鏈接: http://pan.baidu.com/s/1jH4kEFW 密碼: eeup

作者：小羊駝，產(chǎn)品經(jīng)理一枚，10年+產(chǎn)品經(jīng)驗(yàn)。

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