上次分享了浮木雲的靜態頁面搭建，教我們在短時間內快速形成原型頁面，但好的原型設計怎麼可能少的了動態交互效果呢？因此，原型頁面的交互編排是至關重要的，本次就浮木雲平台的交互編排形成簡單的記錄，分享給大家共同成長。顧名思義，交互編排就是編排原型頁面之間關聯交互，使得頁面有動態交互的效果。
如果説原型頁面是原型設計的核心，那麼頁面之間的動態交互效果就是原型設計的點睛之筆，建立動態交互效果，無論是對客户還是對研發，都能通過原型設計很好的理解業務需求邏輯。我就不放鏈接了，如果大家感興趣的話自行搜索關鍵詞哈。在介紹靜態頁面搭建之前，我已經完成幾個靜態頁面的搭建，確保頁面之間都有動態交互的效果。

1 打開彈窗

當頁面設計中觸發某個按鈕，即可出現彈窗，這就是打開彈窗的交互效果。為實現這個效果，需要為這個按鈕和彈窗之間建立交互編排關係。以下圖為例，選中【添加企業】按鈕，在“交互編排”中對【添加企業】按鈕“新增事件編排”。

選擇“打開彈窗”卡片，放入畫布中，並與畫布頁面的兩個圖標建立連接，同時選中彈窗卡片，在畫布右側選擇需要觸發的彈窗組件，保存即可完成【添加企業】按鈕與“添加企業”彈窗之間的關聯關係，這樣看來頁面之間的動態交互制作也可以如此簡單呀。

2 重置組件

當用户通過查詢條件搜索特定數據之後，點擊【重置】按鈕，頁面就會實現刷新重置的效果。為實現這樣的效果，我們只需要對【重置】按鈕進行交互編排即可。選中“重置組件”卡片放置在畫布中，連接畫布中的兩個圖標，在右側選擇對應需要刷新的組件，保存即可完成重置按鈕的交互編排。

3 顯示組件&隱藏組件

這兩個組件會在同一場景同時觸發，例如你點擊某個按鈕，在相同頁面的相同位置需要切換不同的內容，就要用到顯示組件，觸發需要顯示的內容，同時用到隱藏組件，觸發需要隱藏的內容，這樣就會實現在相同頁面的相同位置顯示不同內容的效果。

4 打開新的頁面

在一些網站中，我們總是能看到觸發某個按鈕，就會打開新的網站頁面，這在浮木雲平台也可進行對應的交互編排實現相應的交互效果。選中“打開新的頁面”卡片，連接畫布中兩個圖標，在畫布右側選擇跳轉類型，包括內部頁面和外部頁面，內部頁面指的是目前創建的應用系統頁面，外部頁面可直接鏈接外部頁面。根據跳轉類型在“跳轉地址”中選擇對應的跳轉頁面，保存即可完成打開新的頁面的交互效果。

5 當前頁面跳轉

用户觸發某個按鈕，可實現從當前頁面進入下沉頁面，下沉頁面內容依然在當前頁面顯示，為實現這樣的效果，用户選中“當前頁面跳轉”卡片放置在畫布中，連接畫布中兩個圖標，並對選中的卡片設置跳轉類型和跳轉地址，點擊保存，即可實現在當前頁面跳轉的效果。

6 打開抽屜

該組件的交互跟打開彈窗是一樣的，用户在頁面點擊某個按鈕，頁面側面會彈出抽屜彈窗。為實現這樣的效果，用户只需要對某個需要觸發抽屜彈窗的按鈕進行交互編排即可，編排步驟和“打開彈窗”的交互編排步驟是一樣的。

7 關閉彈窗&關閉抽屜

在頁面交互中，我們往往會對一些彈窗或抽屜進行關閉的交互動作，這樣的效果就是對彈窗或抽屜上的某個按鈕交互編排，即可實現彈窗關閉或者抽屜彈窗關閉的效果。一般情況下，關閉彈窗的交互是通過點擊彈窗的【取消】按鈕或【確定】按鈕，彈窗就會關閉。下圖展示對【取消】按鈕進行關閉彈窗的交互編排。

進入交互編排頁面，選中“關閉彈窗”卡片放置在畫布中，並連接畫布中兩個圖標，在畫布右側選中需要關閉的彈窗組件，保存即可完成關閉彈窗的交互編排。

關閉抽屜的交互編排也是一樣的編排步驟，對抽屜彈窗上的按鈕進行關閉彈窗的交互編排，放置“關閉抽屜”卡片，連接畫布中兩個圖標，在畫布右側選擇需要關閉的抽屜組件，保存即可完成關閉抽屜的交互編排。

以上就是我分享的一些基本常用的交互編排了，希望對大家對浮木雲的瞭解有所幫助。由於其他的組件較為複雜，目前正在研究中~，待我學有所成，後續我會對每個複雜的交互編排一一介紹，望大家敬請期待~