Axure--使用動態面板製作tab頁面切換3.zhizuo

什麼是TAB頁面切換?

我的理解是:點擊不同的標題或者標籤,內容顯示區顯示不同的結果。通常標題或者標籤是並列排放的。如攜程網首頁下面的部分。

注:對於上面的內容區部分,是非常有規律的,這種使用中繼器來做會很簡單。

期望效果:

單擊不同的tab頁面切換顯示不同的tab內容頁,且選中頁籤的標題變紅色。

爲了好理解,做一個簡單的5月份汽車銷量排行,分別按照轎車,SUV,MPV排行顯示。

製作步驟:

1.製作靜態頁面

在編輯區拖入一個矩形框。

單擊上圖中1處可以修出弧度,2處修改矩形爲這種樣式,得到以下的圖,作爲TAB標籤的雛形。

複製2個進行排列,且分別寫上標籤名稱。爲3個矩形標籤分別命名(”jiaoche”,”SUV”,”MPV”)。

拖動一個動態面板進入編輯區。

爲動態面板命名:xiaoliangpaihang,製作3個狀態:轎車,SUV,MPV。(不會做的可以參考:Axure原型設計:動態面板之輪播圖顯示(附帶源文件)http://www.woshipm.com/rp/692728.html)

3種狀態下分別放置3種tab標籤需要顯示的排行榜。

2.製作交互

靜態頁面做完成之後,便可以做交互了。點擊矩形“轎車”,進入動態面板的轎車頁面;

對點擊“轎車”的動作,做3個交互的操作:

1)點擊後,動態面板選中“轎車”的靜態頁面。

2)矩形“jiaoche”爲選中狀態,其餘2個tab頁籤爲“未選中”狀態。

3)選中時,背景色變爲紅色。

設置選中的樣式,填充背景顏色。

重複上面的步驟製作點擊“SUV”和“MPV”的交互。這樣就完成了動態面板的TAB頁籤的切換了。

延伸:

  1. 在例子,動態面板的每個狀態的頁面爲一張圖片。我們也可以換成其他的控件,例如下拉列表框,單選框,輸入框,按鈕等,根據需要採用不同的控件,當然也可以在動態面板中繼續添加動態面板來達到效果(動態面板使用熟練後可以練習使用)。
  2. 在例子中,頁籤選中爲填充背景色,還可以有多種選中後的表現形式,例如字體變粗等,可以按照需要設置不同的交互。
  3. 製作tab下面帶下劃線

轉:http://www.woshipm.com/u/280623

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章