Axure中繼器:便于維護及擴展的3級折疊菜單

21 評論 20204 瀏覽 75 收藏 20 分鐘

本文我們嘗試換一個思路來完成3級菜單,該思路兩樣適用于制作2級菜單,甚至更多層級的菜單。同時,對于后期需要調整菜單結構,添加新的菜單等,都比較方便。

  • 提示1:本篇教程可能不太適合新手,以及不了解中繼器、全局變量、系統變量等使用的…新手;
  • 提示2:文字其實不多,截圖太多,所以看上去很長,也可直接翻到末尾查看所有的用例,其實并不多。

之前有介紹過使用中繼器制作2級菜單,可以看出,使用中繼器完成類似的多重復列表時比較便捷,至少比在N層動態面板來回切不斷復制要輕松一些。

這回我們嘗試換一個思路來完成3級菜單,該思路兩樣適用于制作2級菜單,甚至更多層級的菜單。同時,對于后期需要調整菜單結構,添加新的菜單等,都比較方便。

先看效果(以省、市、區三級聯動為藍本):

寫在前面:原型只是過渡型產物,不是最終產品,實際工作過程中沒必要死磕,能做到表述清晰即可,最好的原型是溝通,是溝通,是溝通?。?!本文更多的是站在興趣愛好,及加強基礎邏輯能力角度,做了一些簡單的思考及嘗試,與大家一起分享共同交流。

以下為制作過程:

1、概況

指導思路

菜單展示 —— 父級菜單永遠排在子級菜單前面 —— 排序

菜單展開/收縮 —— 篩選/取消篩選

所需元件

  • 中繼器 * 1
  • 該中繼器下面的元件
  • 矩形 * 1:命名為“區域”
  • icon * 1 :展開/收縮圖標 ,命名為“展開標識”
  • 中繼器外部的元件
  • 矩形 * 2: 控制展開動作、控制收縮動作

涉及交互事件(用例):

  • 中繼器用例:載入時
  • 中繼器用例:每項加載時
  • 矩形用例:鼠標單擊時
  • 涉及動作:
  • 添加排序(中繼器)
  • 添加篩選(中繼器)
  • 更新行(中繼器)
  • 設置文本
  • 設置尺寸
  • 隱藏(元件)
  • 設置選中狀態
  • 旋轉(元件)
  • 觸發事件

涉及函數及變量

  • 全局變量 * 2- 命名為:ID1、ID2,默認值為空。用于記錄被點擊菜單的父級菜單、父父級菜單
  • Target:目標元件
  • width:元件寬度
  • height:元件高度

涉及動畫

無(最好不要動畫)

注意操作

用例的判斷條件

2、素材制作

(1)拖入一個中繼器,設置中繼器的行距為10(單擊中繼器,右側樣式最下選擇“間距”進行設置)。

雙擊中繼器,進入中繼器內部設置。

拖入一個矩形,命名為“區域”:

  • 設置(默認)寬高為:300*40;
  • 設置(默認)線段顏色為F2F2F2;
  • 右鍵矩形“區域”,進入交互樣式,
  • 設置鼠標懸停時填充顏色為F2F2F2;
  • 鼠標按下時填充顏色為E4E4E4;
  • 選中時填充顏色為CCCCCC。

拖入icon – 向右單角符,命名為“展開標識”:設置填充顏色為999999。

(2)拖入矩形,命名為“展開”,樣式隨便設置 —— 后面的觸發事件需要用到,樣式不重要。

(3)拖入矩形,命名為“收縮”,樣式隨便設置 —— 后面的觸發事件需要用到,樣式不重要 。

設置好之后大概長下面這個樣子:

注意:預覽效果中應將元件“展開”“收縮”隱藏,用戶不需要看到

3、中繼器數據

按以下屬性表規格為中繼器填入數據:

(圖1)

字段說明:

(1)type – 菜單類型,用于區分層級:

值域:

  1. 一級菜單 —— 此處指“省”
  2. 二級菜單?—— 此處指“市”
  3. 三級菜單?—— 此處指“區”

(2)ID – 菜單ID值,此處主要用于排序,需要按命名規則進行命名

命名規則:由ID1、ID2、ID3組合而成的至少6位正整數。

ID1(1位)+ID2(2位)+ID3(3位)

例如:ID1為1,ID2為2,ID3為3,則ID值為102003—— 中繼器加載時進行一次排序,就可以保證按照想要的樹結構來展現了。

(3)ID1、ID2、ID3

  1. ID1:一級菜單編號,不可為0
  2. ID2:二級菜單編號,可為0,一級菜單該值為0
  3. ID3:三級菜單編輯,可為0,一二級菜單該值為0

(4)name – 菜單名稱

(5)eye – 菜單是隱藏,或是否可見,作為后續中繼器篩選動作的篩選條件

值域:

  • 1:顯示
  • 0:隱藏

默認情況下除一級菜單之外的菜單都是被折疊的(即不可見),所以,示例中的兩個一級菜單:江西、浙江,基(默認)eye值為1。

(6)xuan – 菜單是展開情況,用于控制元件“展開標識”的旋轉情況、及記錄當前菜單的展開狀態

值域:

  • 1:展開
  • 0:未展開

可延展:

  1. 如果需要更多的菜單(省市區),按照該形式繼續添加即可。
  2. 如果需要改為其他的類型(比如商品三級分類),修改一下name值即可。

4、交互設計

1. 中繼器部分

(1)中繼器加載數據 —— 用例:每項加載時

賦值及調整菜單樣式:

第1個動作:設置元件“區域”上的文字等于中繼器的屬性name值。

(圖2)

第2個動作:設置(調整)元件“區域”的尺寸 – 不同類型的菜單樣式上做區別。

(圖3)

說明:

  • [[Target.width – 20 * (item.type – 1) ]] :根據菜單的類型設置其寬度,即子菜單相較父級菜單寬度小20像素;
  • [[Target.height]]:高度不變,即所有菜單的高度都相同。

錨點,選擇右側,目的是為了右邊對齊——可以根據實際情況自行調整。

三級目錄不需要“展開標識” – 三級目錄不再再展開,所以不需要。

設置判斷條件:當菜單類型為三級菜單時

(圖4)

隱藏“展開標識”:

(圖5)

展開/未展開樣式:

a. 展開時

判斷條件,[[item.xuan]]等于1,代表是展開狀態。

(圖6)

第1個動作:設置元件“區域”為選中狀態 —— 進而其選中的樣式就體現出來了。

(圖7)

第2個動作:設置元件“展開標識”由原來的向右,變成向下 —— 圍繞元件中心旋轉到90度。

(圖8)

注意:

  1. 此處使用的是絕對角度,不是相對角度,原因:相對角度容易出錯。
  2. 不要使用動畫,原因:中繼器的篩選、排序、更新等,都會將所有的項都重新加載一遍,所以執行以上動作之后,可能會出現N個元件同時都在旋轉的情況。
  3. 結合前2點,所以方向是順時針或逆時針都可以。

b. 未展開時

判斷條件,[[item.xuan]]等于0,代表是未展開狀態。

(圖9)

第1個動作:設置元件“區域”為未選中狀態 —— 進而就恢復其默認樣式。

(圖10)

第2個動作:設置元件“展開標識”恢復默認狀態 – 旋轉角度為0。

(圖11)

注意:

  • 1-1-3的兩個用例,其關系為:if…else if,即,最多只執行其中一個用例
  • 1-1-1、1-1-2、1-1-3之間是平行的,依次都會執行

設置好之后的情況如下:

(圖12)

(2)中繼器載入時,添加排序及篩選

第1個動作:添加排序 – 按ID值升級排列 —— 結合ID的命名規則,可保證按預期的順序顯示菜單。

(圖13)

第2個動作:添加篩選 – 只顯示狀態為顯示(eye=1)的的項。

(圖14)

設置好之后的情況如下:

(圖15)

以上步驟完成之后先看一下預覽效果,應如下:

(圖16)

2. 中繼器內部操作 – 元件“區域”的交互

我們希望在點擊元件“區域”時,自動展開/收縮其子菜單。

細分下來為:

  1. 無子菜單時,即,點擊的是三級菜單,什么都不做;
  2. 點擊的是二級菜單時,展開/收縮其下的三級菜單;
  3. 點擊的是一級菜單時,展開其下的二級菜單(不展開三級菜單)或 收縮其下所有的二級菜單及三級菜單;
  4. 按以上思路,進行用例設計。

2-1 記錄上級菜單,給全局變量ID1、ID2賦值

(圖17)

2-2 根據當前展開狀態,執行展開或收縮動作

2-2-1 展開

第1步,添加判斷條件:該菜單為未展開狀態,且不是三級菜單時。

(圖18)

說明:

  • [[item.xuan]]==0:未展開狀態
  • [[item.type]]!=3:不是三級菜單

第2步:更新中繼器(下的屬性值),動作“更新行”,設置(該行的)xuan值為1。

(圖19)

第3步:觸發展開事件 – 具體展開的用例情況,下文中會有介紹。

(圖20)

2-2-1 收縮

第1步,添加判斷條件:該菜單為展開狀態,且不是三級菜單時。

(圖21)

第2步:更新中繼器(下的屬性值),動作“更新行”,設置(該行的)xuan值為0。

(圖22)

第3步:觸發收縮事件 – 具體收縮的用例情況,下文中會有介紹。

(圖23)

注意:

  • 展開、收縮用例是最多只執行一個就夠了的,所以其結構為if……else if
  • 觸發事件時,不要忘了勾選具體哪個動作(往往會點擊了元件,忘了勾選哪個動作)

3. 中繼器外部操作 – 元件“展開”、“收縮”的交互用例

為什么不直接放到用例“每項加載時”?

前面說過,中繼器的執行原理(至少8.0差不多是這樣),當有排序、篩選、更新、刪除等動作時,會將所有的項都重新加載一遍,所以如果將對中繼器的更新等動作,放在“每項加載時”很容易造成死循環,從而不產生任何效果。

3-1 元件“展開”的用例設計

3-1-1 展開的是一級菜單

第1步,添加判斷條件:全局變量ID2=0—— 我們在點擊“區域”元件時,會先對ID1、ID2進行賦值操作。

(圖24)

第2步:執行展開動作 – 通過更新行值實現(然后會自動觸發中繼器“載入時”的動作)。

(圖25)

說明:

  • [[(item.ID1 == ID1)&&(item.type == ‘2’)]]:定位到該一級菜單下的所有二級菜單。
  • eye = 1,將符合匹配條件的項的eye值更新為1,即顯示狀態。

3-1-2 展開的是二級菜單

第1步,配置判斷條件。

因為與3-1-1為if…else if關系,所以此處的判斷條件可以寫為 else if true。

操作方法:右鍵相應動作(示例為“鼠標單擊時”)選擇“添加用例”即可,默認條件即為else if true。

(圖26)

第2步,執行展開動作 – 通過更新行值實現。

(圖27)

說明:

與一級菜單的菜單匹配條件有區別,匹配條件公式為:[[(item.ID1 == ID1)&&(item.ID2 == ID2)&&(item.type == ‘3’)]]。

設置好之后的情況如下:

(圖28)

3-2 元件“收縮”的用例設計

3-2-1 收縮一級菜單

(圖29)

說明:

  • [[(item.ID1 == ID1) && (item.type != 1)]]:定位到該一級菜單下的所有二、三級菜單(不能包括自己);
  • eye = 0,將符合匹配條件的項的eye值更新為0,即隱藏狀態;
  • xuan = 0,將符合匹配條件的項的xuan值更新為0,即不展開狀態(父級菜單收縮后,所有的子菜單都為收縮狀態)。

3-2-1 收縮二級菜單

(圖30)

說明:

與一級菜單的菜單匹配條件有區別,匹配條件公式為:[[(item.ID1 == ID1)&&(item.ID2 == ID2)&&(item.type == 3)]],定位到該二級菜單下的所有三級菜單(不能包括自己)。

設置好之后的情況如下:

(圖31)

以上,所有的交互都設計完成,再核對一下用例情況。

(圖32)

最后,因為元件“展開”“收縮”不需要在前臺顯示,所以將這兩個元件隱藏即可(不影響交互效果)

OK,來預覽一下,看看效果出來了嗎?

原型預覽地址:?https://e881q6.axshare.com

有任何問題歡迎在評論中指出!

 

本文由 @?牧逸 原創發布于人人都是產品經理。未經許可,禁止轉載

?題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 作者您好,我想請教一下,我擴展了四級菜單,然后將中繼器交互的三級目錄不能擴展改為四級目錄不能擴展,展開和收縮矩形交互中增加了三級菜單“[[(Item.ID1==ID1)&&(Item.ID2==ID2)&&(Item.ID3==ID3)&&(Item.type==’4′)]]”的條件。但是預覽的時候四級菜單顯示不出來是為什么呢?

    來自四川 回復
  2. 作者您好,我想問下,如果我想做一個選中一個三級菜單以后,自動收起其他沒選中的菜單,要怎么實現呢

    來自廣東 回復
  3. 請問axure9里面按規則更新行失敗要怎么處理呢?

    來自廣東 回復
    1. 終于好了,那兩個單獨的展開和收縮是精髓

      來自廣東 回復
    2. 你是自已重做了一個,還是改的原文件?

      來自云南 回復
    3. 自己重做的

      來自廣東 回復
  4. “中繼器加載時進行一次排序”,怎么增加?卡住了。。。

    來自重慶 回復
  5. 菜單打開鏈接效果的說明有么

    回復
  6. 展開和收縮的兩個矩形是應該放在頁面上面還是放在進入中繼器原件選項的框里面呢

    來自安徽 回復
  7. 想修改成單展開,請問怎么改呀

    來自四川 回復
  8. 請問作者,我一模一樣做好的三級菜單為什么點擊展開什么都沒有,是缺少什么設置嗎?

    來自上海 回復
  9. 為什么設置尺寸的時候,要用target,不可以用this,或者局部變量area?

    來自廣東 回復
  10. 更新item.eye字段更新后不能沒想加載顯示正確,sos!

    來自江蘇 回復
    1. 什么意思,沒看明白。。。

      來自浙江 回復
  11. 請問一下那個鼠標單擊——記錄上級菜單交互在哪?找不到

    來自河北 回復
    1. 中繼器每個項的點擊事件中,第一步
      全局變量ID1=item.ID1
      全局變量ID2=item.ID2

      來自浙江 回復
  12. 原型文件下載地址:https://quqi.com/s/787633/3vQtkOX6xPj9Jvu2/120

    來自浙江 回復
    1. 大神,地址失效了哈,可以更新下嗎

      來自福建 回復
    2. 大佬 ,這個地址文件是在,但點了下載完全沒反應啊。

      來自云南 回復
    3. 剛又試了下,原來它挑瀏覽器。谷歌可下

      來自云南 回復
    4. 提示網絡錯誤 無法保存啊 怎么破?

      來自山東 回復