axure如何用中繼器做柱狀圖（Axure教程用中繼器製作樹形表格）

2023-08-03 17:38:08

製作完成之應具備以下交互效果：

原型地址：https://r4neb0.axshare.com/#g=1

那接下來，我們以銀行基礎指標的樹形表格為案例教大家製作樹形表格。

這個原型裡我們主要用到的元件包括：中繼器、矩形、三角形狀（箭頭）

矩形我們主要用於製作表格的表頭和內容：

表頭我們有多少列就用幾個矩形，具體尺寸和樣式可以自行設置；

中繼器表格裡，我們需要放置用到矩形、三角形狀（箭頭）、文本標籤製作，裡面的矩形和表頭的各個矩形的寬度要對應好，這樣才能夠對齊，最後一個矩形對應的是操作（查看列表），所以我們要增加懸停樣式——下劃線，這樣滑鼠移入就有一個可以點擊的交互樣式。表格內容的矩形設置為透明，然後我們在他們底部增加一個大矩形，默認透明，選中樣式是灰色，禁用樣式是淺藍色，這裡主要是做一個變色的效果。將上述元件組合好，如下圖所示擺放：

中繼器表格裡我們需要增加以下幾列的內容：

Column1~6：這裡對應表格1~6列展示的內容，大家可以根據實際需要增加或者減少列數

jiantou：這裡我們用這個值來空時該行是否顯示箭頭，如果值為1就顯示箭頭，否則就隱藏箭頭，後續我們會通過交互實現。案例中如果是一級分行就是有對應的二級支行，所以分行的jiantou值都填寫1，支行的jiantou值都默認為空值

fangxiang：這裡是控制箭頭方向的值，後續通過交互實現，箭頭向下（打開下級內容）就填1，默認向右（隱藏下級內容）就不需填寫。這裡一般都是默認為空即可

xianshi：控制該行內容是否顯示，後續通過交互實現，一般一級默認顯示填寫1，二級默認隱藏就不需要填寫，當然如果你想二級默認顯示也可以填寫1，這裡箭頭的方向也要對應修改。

shangyiji：該行對應的的父級是什麼，這裡對應的是Column1，如果是第一級（沒有父級）就不需要填寫。

1. 中繼器每項加載時

設置文本：我們用設置文本的交互，將Column1~6的值設置到表格內對應的矩形元件裡

隱藏箭頭：這裡要添加一個條件判斷，如果jiantou列的值不等於1，那麼我們就用隱藏的交互將箭頭隱藏即可。有的同學可能會問，那麼如果jiantou的值等於1，那是不是需要用顯示的交互，將箭頭顯示出來呢？其實並不需要，因為箭頭默認就是顯示的，所以寫不寫並沒有影響

旋轉箭頭：同樣我們要根據fangxiang列的值來添加條件判斷，如果方向列的值等於1，那我們就用旋轉的交互，把箭頭旋轉到向下的文字，案例中用的箭頭素材是0°的時候就是向下的，所以我們用選擇到達，度數為0°，這裡不同的素材會有不同，具體旋轉的度數根據實際素材來設置。和上面道理一樣，我們只需要寫箭頭向下的交互，因為默認就是向右的，如果上麵條件不符合，就默認向右了

隱藏組合：這裡是根據xianshi列的值來添加條件，如果顯示列的值不等於1，那麼我們用隱藏的組合把中繼器內的整個組合隱藏起來即可

選中背景矩形：這裡是希望二級行的也和一級行的顏色有所區分，所以前面我們在材料準備的時候就把背景矩形的選中顏色設置為灰色，所以我們只需要根據他是否有上一級來決定是否需要控制他選中變色。我們增加條件，如果有上一級我們就用設置選中的交互，將矩形設置為真就可以了

2. 滑鼠移入組合時交互

滑鼠移入組合時，我們對應行有一個高亮變色的效果，本來應該用選中的樣式的，但是前面用了選中的樣式來區分1級和2級行的顏色了，所以這裡我們就用禁用樣式來代替。

滑鼠移入時：我們用禁用的交互將背景矩形禁用，這樣他就會有一個變色的效果

滑鼠移出時：我們用啟用的交互將背景矩形啟用，這樣他就回復之前的樣式

3. 滑鼠點擊箭頭時交互

這裡我們要分條件來說明；

第一種情況滑鼠單擊之前如果箭頭是向下的，那麼我們要首先把箭頭變成向右，那麼我們前面設置了箭頭方向是取決於jiantou列的值的，所以我們用更新行的交互，把jiantoulie的值更新為0，這樣他就向右了。除了要改變箭頭列的值，我們還要把子級隱藏起來，那我們又知道一行是否顯示，是通過xianshi列來控制的，所以我們把所有對應的子級的xianshi列的值更新為0即可，對應的條件就是，子級行裡的shangji列的值跟當前行第一列的顯示的分行值是一樣的。

第二種情況就是和上面是相反的，即點擊之前箭頭是向右的，那麼我們就把箭頭變回下，所以我們用更新行的交互，把jiantoulie的值更新為1。然後我們還要把對應的子級顯示出來，所以我們把所有對應的子級的xianshi列的值更新為1即可,對應的條件也是不變的。

這樣我們就完成樹形表格原型模板的製作了，以後使用時只需要在中繼器表格裡填寫內容，就可自動生成樹形表格，是不是很方便呢。

那以上就是用中繼器製作樹形表格原型模板的全部內容了，感謝您的閱讀，我們下期見。

本文由 @Axure高保真原型 原創發布於人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基於 CC0 協議。