小羊駝關(guān)注作者? ? ? ? ?2017-06-19? ? ? ? ? ? ?9 評(píng)論6.9萬 瀏覽135 收藏
B端產(chǎn)品建設(shè)難法竞？缺乏系統(tǒng)方法論前弯？戳此GET一套B端產(chǎn)品從業(yè)務(wù)邏輯到產(chǎn)品構(gòu)建的核心方法>>
動(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ì)很簡(jiǎn)單肉津。
/ 期望效果：
單擊不同的tab頁面切換顯示不同的tab內(nèi)容頁强胰，且選中頁簽的標(biāo)題變紅色。
為了好理解妹沙，做一個(gè)簡(jiǎn)單的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.woshipm.com/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頁簽的切換了。
延伸：
在例子罩旋，動(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í)使用）。
在例子中靠闭，頁簽選中為填充背景色帐我，還可以有多種選中后的表現(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)載媚朦。
