Axure交互技巧：控制彈框的可見性，這一個動作就夠了

前言

今天和大家聊一聊如何利用Axure實現彈框的顯示與隱藏。在學習製作彈框交互之前，我們先了解下常見的彈框有哪幾種。通常互聯網產品的彈框有三種：提示彈框、模態彈框、toast彈框。

提示類彈框主要向用戶展示一些提示信息，或者需要用戶進行一些確認操作；模態彈框需要用戶處理事務，用戶需要輸入信息執行操作；toast彈框則是一種輕量級的提示，用戶只需要知曉即可，無需進行任何操作，通常toast提示的信息比較簡短。下面我們就來分析下如何實現這3類框的顯示與隱藏。

提示彈框

提示彈框示意圖

首先我們將彈框轉換為動態面板，利用動態面板的位置固定屬性，將彈框設置為上下居中、左右居中，這樣可以確保彈框始終顯示在窗口的中間位置。

固定彈框位置

為觸發顯示彈框的按鈕添加鼠標單擊事件，添加動作“顯示”，顯示的對象為彈框，在動作配置中可以根據我們的需要，添加一個逐漸顯示的動畫，動畫時間為500毫秒，將彈框置於頂層，選擇“燈箱效果”為頁面增加一個遮罩層，當然我們還可以為遮罩層選擇背景顏色，默認情況下為灰色，一般使用默認顏色即可。

顯示提示彈框

為彈框中的兩個按鈕添加鼠標單擊事件，添加動作“隱藏”，隱藏對象選擇彈框，隱藏時設置一個逐漸隱藏的動畫效果，動畫時間為500毫秒。隱藏的動畫時間與顯示的動畫時間儘量保持一致。彈框中確定按鈕與取消按鈕的交互配置是一樣的。

隱藏提示彈框

模態彈框

模態彈框的交互配置過程與提示類彈框基本相同，一般模態類彈框會額外增加一個關閉按鈕，關閉按鈕的配置與確定按鈕相同。一般實際開發過程中，確定按鈕還會檢查輸入信息的合法性，這裡我們主要講解彈框的顯示與隱藏，輸入信息的判斷就不在這裡講解了，通常原型不需要檢查信息的合法性。

模態彈框示意圖

toast彈框

toast彈框示意圖

與提示類彈框相同，首先需要將彈框內容轉換為動態面板，並利用動態面板的位置固定屬性，將彈框固定在屏幕窗口的中間位置。

固定彈框位置

為觸發顯示彈框的按鈕添加鼠標單擊事件，添加動作“顯示/隱藏”，顯示toast彈框，動畫效果設置為逐漸顯示，動畫時間為500毫秒；添加第二個動作“等待”，等待時間設置為1000毫秒（1秒）；添加第三個動作“顯示/隱藏”，隱藏toast彈框，動畫效果設置為逐漸隱藏，動畫時間為500毫秒。

toast彈框的顯示與隱藏

關注並轉發後，可私信關鍵字“彈框”可獲取本節課案例的源文件。

【Axure原型設計】專注分享Axure基礎教程、交互案例以及經驗技巧，並不定期贈送各種資源福利，包含：系統組件庫、頁面模板、實戰案例等。