起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure教程：制作下拉選擇框部件的聯動效果
本文通過一個相對簡單的示例，介紹了如何制作下拉選擇框的聯通效果。
產品經理在制作產品原型的過程中，經常會遇到部件間聯動的效果設計。如果不能通過原型交互方式來完成，則會以“靜態頁面+文字說明+步驟指引”的方式達到目標。后者與前者相比不夠直觀，方式也更繁瑣。所以，如何制作部件間聯動效果，在實際工作中會起到事半功倍的作用。
接下來，小編主要介紹如何使用Axure制作下拉選擇框部件的聯動效果，大家可以通過相應的原理，嘗試其他部件間如何進行聯動效果設計。
效果說明
效果1：當選中“droplist-任務類型”下拉選擇框中的周期任務選項時，展示動態面板“panel-是否核心任務”；
效果2：當選中“droplist-任務類型”下拉選擇框中的手動任務選項時，隱藏動態面板“panel-是否核心任務”；
第1步，拖入兩個部件：下拉選擇框（Droplist）和文字標簽（Label）
在Axure操作界面中，拖入一個Droplist（中文名稱：下拉選擇框）部件和Label（中文名稱：文字標簽）。具體樣式如下圖所示：
第2步，對部件進行編輯和命名
雙擊“Label（文字標簽）”部件，輸入內容“任務類型”，然后選中該部件，將其命名為“label-任務類型”，具體如下圖所示：
雙擊“Droplist（下拉選擇框）”部件，點擊“Add（新增）”按鈕，添加枚舉值，分別i為“周期任務、手動任務、實時任務”。然后選中該部件，將其命名為“droplist-任務類型”，具體如下圖所示：
第3步：制作聯動部件
參照第二步驟，在操作界面中，分別拖入一個下拉選擇框（Droplist）部件和一個文字標簽（Label）部件，對后者進行編輯，輸入內容“是否是核心任務”。然后選中這兩個部件，創建動態面板，并將動態面板命名為“panel-是否核心任務”。具體如下圖所示：
第4步：事件觸發條件設置
選擇交互動作“Selection Changed”，然后點擊“Enable Cases”進行選項編輯，具體如下圖所示：
點擊“Enable Cases”后，彈出操作界面如下圖所示。點擊“Add Logic”進行設置。
點擊“Add Logic”，下方會自動生成一條記錄，設置“當選中droplist-任務類型下拉選擇框中的周期任務選項時“，具體如下圖所示：
點擊”ok“后，case1的發生條件就已經設置完成。該條件就是”當選中droplist-任務類型下拉選擇框中的周期任務選項時“。
第5步，事件結果設置
基于第4步，雙擊case1，彈出”交互編輯器（interaction Editor）“。選中”ADD ACTION（添加動作）“中的show（展示），并選擇需要展示的內容，本文中選擇的是動態面板”panel-是否核心任務“，具體結果如下圖所示：
同理，為了能夠有對比效果，我們設置一個”當選中droplist-任務類型下拉選擇框中的手動任務選項時，隱藏動態面板panel-是否核心任務“。最終完整的事件交互內容如下圖所示：
第6步，效果預覽
任務類型選中”周期任務“，下方會出現是否核心任務選項；
任務類型選中”手動任務“，下方隱藏是否核心任務選項；
在本文，小編通過一個相對簡單的示例，介紹了如何制作下拉選擇框的聯通效果。大家可以根據自己的實際場景和想象力，充分發揮和實驗，類似的效果也絕對不僅限于此。
作者：魚日，公眾號：issnail
本文由 @魚日 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
這個網站上講的都是這么基礎的內容嗎？