天天看點

Axure-動态面闆制作下拉菜單

動态面闆是Axure RP 8中的一款進階元件,在隐藏與顯示、滑動效果 、拖動效果、多狀态效果切換等操作的場景中,動态面闆是你的不二選擇。
	下面為大家示範的是使用動态面闆制作下拉菜單;
           

1.從部件庫拉四個動态面闆到操作區組合在一起;

Axure-動态面闆制作下拉菜單
  1. 輕按兩下選中動态面闆,命名面闆名稱并且添加兩個狀态,分别命名為“狀态1”與“狀态2”.
    Axure-動态面闆制作下拉菜單
  2. 輕按兩下“狀态1”,添加矩形并且命名為目錄一
    Axure-動态面闆制作下拉菜單
  3. 輕按兩下“狀态2”編輯其狀态
    Axure-動态面闆制作下拉菜單
  4. 複制狀态1的矩形并且添加三個矩形作為子目錄,并且分别命名為“子目錄1,2 , 3”。
    Axure-動态面闆制作下拉菜單
  5. 回到Home頁,目錄已經被編輯好。
    Axure-動态面闆制作下拉菜單
  6. 按照編輯動态面闆1的步驟把下面三個面闆依次命名,接下來為目錄一添加用例。
    Axure-動态面闆制作下拉菜單
  7. 按照圖中操作依次實作的效果為:單擊目錄一時會由狀态1變展開成狀态2。
    Axure-動态面闆制作下拉菜單
  8. 回到Home,則目錄一的用例1已近建立完畢,選擇更多事件,選擇更多事件,注意選擇動态面闆調整大小以适應内容。
    Axure-動态面闆制作下拉菜單
  9. 選擇滑鼠移出時,為實作收起效果。
    Axure-動态面闆制作下拉菜單
  10. 按照圖中操作依次實作的效果為:滑鼠移開目錄一時,會由狀态2變展開成狀态1。
    Axure-動态面闆制作下拉菜單
  11. 目錄一的下拉與收起用例都已近建立完畢。
    Axure-動态面闆制作下拉菜單
  12. 按照目錄一的方法建立目錄二的下拉和收起用例,并且添加目錄二的狀态2.
    Axure-動态面闆制作下拉菜單

14.目錄三和目錄四的狀态2也需要有相應的内容(頁面填充,如果沒有,那麼在自适應内容的時候,會變為消失狀态),相關操作流程和目錄一一樣。

15. 點選右上角預覽,單機目錄一,子目錄展現,移開滑鼠子目錄收回。

繼續閱讀