axure商城

Axure案例:用中繼器實現便捷好用的3級菜單

提示1:本篇教程可能不太適合新手,以及不了解中繼器、全局變量、系統變量等使用的…新手

提示2:文字其實不多,截圖太多,所以看上去很長,也可直接翻到末尾查看所有的用例,其實并不多

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

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

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

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

以下為制作過程

1.1 概況

指導思路:

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

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

所需元件:

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

涉及交互事件(用例):

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

涉及函數及變量

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

涉及動畫:

  • 無(最好不要動畫)

注意操作:

  • 用例的判斷條件

1.2 素材制作

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

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

1-1、拖入一個矩形,命名為“區域”

設置(默認)寬高為:300*40;

設置(默認)線段顏色為F2F2F2;

右鍵矩形“區域”,進入交互樣式,

設置鼠標懸停時填充顏色為F2F2F2;

鼠標按下時填充顏色為E4E4E4;

選中時填充顏色為CCCCCC

1-2、拖入icon – 向右單角符?,命名為“展開標識”

設置填充顏色為999999

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

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

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

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

1.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

ID1:一級菜單編號,不可為0

ID2:二級菜單編號,可為0,一級菜單該值為0

ID3:三級菜單編輯,可為0,一二級菜單該值為0

4、name – 菜單名稱

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

值域:

1:顯示

0:隱藏

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

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

值域:

1:展開

0:未展開

可延展:

1、如果需要更多的菜單(省市區),按照該形式繼續添加即可。

2、如果需要改為其他的類型(比如商品三級分類),修改一下name值即可

1.3 交互設計

1、中繼器部分

1-1、中繼器加載數據 —— 用例:每項加載時

1-1-1、賦值及調整菜單樣式

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

(圖2)

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

(圖3)

說明:

[[Target.width – 20 * (item.type – 1) ]] :根據菜單的類型設置其寬度,即子菜單相較父級菜單寬度小20像素

[[Target.height]]:高度不變,即所有菜單的高度都相同

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

1-1-2、三級目錄不需要“展開標識” – 三級目錄不再再展開,所以不需要

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

(圖4)

隱藏“展開標識”

(圖5)

1-1-3、展開/未展開樣式

a、展開時

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

(圖6)

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

(圖7)

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

(圖8)

注意:

a1、此處使用的是絕對角度,不是相對角度。原因:相對角度容易出錯

a2、不要使用動畫。原因:中繼器的篩選、排序、更新等,都會將所有的項都重新加載一遍,所以執行以上動作之后,可能會出現N個元件同時都在旋轉的情況

a3、結合前2點,所以方向是順時針或逆時針都可以

b、未展開時

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

(圖9)

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

(圖10)

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

注意:

1、1-1-3的兩個用例,其關系為:if…else if,即,最多只執行其中一個用例

2、1-1-1、1-1-2、1-1-3之間是平行的,依次都會執行

設置好之后的情況如下:

(圖12)

1-2、中繼器載入時,添加排序及篩選

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

(圖13)

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

(圖14)

設置好之后的情況如下:

(圖15)

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

(圖16)

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

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

細分下來為

a、無子菜單時,即,點擊的是三級菜單,什么都不做

b、點擊的是二級菜單時,展開/收縮其下的三級菜單

c、點擊的是一級菜單時,展開其下的二級菜單(不展開三級菜單);或 收縮其下所有的二級菜單及三級菜單

按以上思路,進行用例設計

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)

注意:

a、展開、收縮用例是最多只執行一個就夠了的,所以其結構為if……else if

b、觸發事件時,不要忘了勾選具體哪個動作(往往會點擊了元件,忘了勾選哪個動作)

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

給TA買糖
共{{data.count}}人
人已贊賞
案例教程

Axure教程:廣告圖片自動輪播+點擊切換

2018-9-17 15:32:07

案例教程

1、雷達效果 —— Axure實用交互

2018-10-10 16:08:26

axure商城
0 條回復 A文章作者 M管理員
    暫無討論,說說你的看法吧
?
個人中心
購物車
優惠劵
今日簽到
有新私信 私信列表
搜索
俄罗斯videoxxxoo