小羊駝關(guān)注作者? ? ? ? ?2017-06-19? ? ? ? ? ? ?9 評(píng)論6.9萬(wàn) 瀏覽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頁(yè)面切換。
? ? ? · 使用動(dòng)態(tài)面板制作彈出對(duì)話框。
? ? ? · 使用動(dòng)態(tài)面板……
今天我們來(lái)說(shuō)說(shuō)使用動(dòng)態(tài)面板制作TAB頁(yè)面切換。
// 什么是TAB頁(yè)面切換？
我的理解是：點(diǎn)擊不同的標(biāo)題或者標(biāo)簽，內(nèi)容顯示區(qū)顯示不同的結(jié)果。通常標(biāo)題或者標(biāo)簽是并列排放的。如攜程網(wǎng)首頁(yè)下面的部分。
注：對(duì)于上面的內(nèi)容區(qū)部分，是非常有規(guī)律的，這種使用中繼器來(lái)做會(huì)很簡(jiǎn)單。
/ 期望效果：
單擊不同的tab頁(yè)面切換顯示不同的tab內(nèi)容頁(yè)，且選中頁(yè)簽的標(biāo)題變紅色。
為了好理解，做一個(gè)簡(jiǎn)單的5月份汽車銷量排行，分別按照轎車，SUV，MPV排行顯示。
/ 制作步驟：
1.制作靜態(tài)頁(yè)面
在編輯區(qū)拖入一個(gè)矩形框。
單擊上圖中1處可以修出弧度，2處修改矩形為這種樣式，得到以下的圖，作為TAB標(biāo)簽的雛形。
復(fù)制2個(gè)進(jìn)行排列，且分別寫(xiě)上標(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)頁(yè)面做完成之后，便可以做交互了。點(diǎn)擊矩形“轎車”，進(jìn)入動(dòng)態(tài)面板的轎車頁(yè)面；
對(duì)點(diǎn)擊“轎車”的動(dòng)作，做3個(gè)交互的操作：
1）點(diǎn)擊后，動(dòng)態(tài)面板選中“轎車”的靜態(tài)頁(yè)面。
2）矩形“jiaoche”為選中狀態(tài)，其余2個(gè)tab頁(yè)簽為“未選中”狀態(tài)。
3）選中時(shí)，背景色變?yōu)榧t色。
設(shè)置選中的樣式，填充背景顏色。
重復(fù)上面的步驟制作點(diǎn)擊“SUV”和“MPV”的交互。這樣就完成了動(dòng)態(tài)面板的TAB頁(yè)簽的切換了。
延伸：
在例子，動(dòng)態(tài)面板的每個(gè)狀態(tài)的頁(yè)面為一張圖片。我們也可以換成其他的控件，例如下拉列表框，單選框，輸入框，按鈕等，根據(jù)需要采用不同的控件，當(dāng)然也可以在動(dòng)態(tài)面板中繼續(xù)添加動(dòng)態(tài)面板來(lái)達(dá)到效果（動(dòng)態(tài)面板使用熟練后可以練習(xí)使用）。
在例子中，頁(yè)簽選中為填充背景色，還可以有多種選中后的表現(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)載。
