原型設計工具Axure RP新手教程（三）：隱藏和顯示小部件教程

---

Axure RP是一套專門為網站或應用程序所設計的快速原型設計工具， 可以讓應用網站策劃人員或網站功能界面設計師更加快速方便的建立Web AP和Website的線框圖、流程圖、原型和規格。

免費下載Axure RP 優惠購買Axure RP

---

在文本中，您將學習如何在Web瀏覽器中動態隱藏和顯示窗口小部件。您還將學習如何設置動畫，彈出菜單和燈箱。（可點擊此處觀看視頻）

小部件設置

• 打開一個新的RP文件，然后在Pages（頁面）窗格中雙擊Page1（頁面1）以在畫布上將其打開。

• 從Libraries（庫）窗格中將一個占位符小部件和三個按鈕小部件拖到畫布上。

• 將按鈕上的文本更改為Show（顯示）, Hide（隱藏）, 和Toggle（切換）。

• 通過選擇占位符并單擊樣式工具欄或Style（樣式）窗格中的Hidden（隱藏）圖標來隱藏占位符。

單擊按鈕時設置占位符的可見性

顯示按鈕

• 選擇Show（顯示）按鈕，然后在Interactions（交互）窗格中單擊Click（單擊）或Tap（點擊）→Set Visibility（設置可見性）。

• 在出現的下拉列表中選擇占位符小部件。

• 保持顯示為選中狀態，然后單擊確定以保存操作。

隱藏按鈕

• 使用Hide（隱藏）按鈕重復上述步驟，但是選擇Hide（隱藏）而不是Show（顯示）。

切換按鈕

• 使用Toggle（切換）按鈕重復上述步驟，但是選擇Toggle（切換）而不是Show（顯示）。

預覽互動

• 預覽頁面，然后單擊Show（顯示）按鈕以顯示隱藏的占位符。

• 單擊Hide（隱藏）按鈕以再次隱藏占位符。

• 單擊切換按鈕幾次以交替顯示和隱藏占位符。

可點擊隱藏和顯示小部件觀看視頻。

附加信息和提示

動畫制作

• 顯示和隱藏窗口小部件時，可以使用多種動畫，包括淡入淡出，滑動和翻轉。這些可在Show/Hide（顯示/隱藏）操作的Animate（動畫）下拉列表中找到。 在下拉列表中選擇動畫的類型，然后在其旁邊的字段中設置動畫的持續時間（以毫秒為單位）。

向前走

• 當顯示帶有Show（顯示）或Toggle（切換）選項的小部件時，您可以選中More Options（更多選項）下的Brin to Front（置于最前面）復選框，以將小部件自動帶到設計的前面。這樣可以確保顯示時沒有小部件與之重疊。

燈箱

• 當使用Show（顯示）選項顯示小部件時，您可以選擇使其顯示為燈箱。在Show/Hide（顯示/隱藏）操作底部的More Options（更多選項）下的下拉列表中，此選項可用。

• 燈箱小部件的后面帶有彩色蒙版，覆蓋了設計的其余部分。 單擊此蒙版上的任何位置將再次隱藏小部件。您可以使用選中Treat as Lightbox（作為燈箱對待）選項時出現的Background Color（背景顏色）顏色選擇器來更改蒙版的顏色和不透明度。

彈出菜單

• 當使用Show（顯示）選項顯示小部件時，可以選擇將其視為彈出窗口。 只要光標停留在彈出窗口小部件或顯示它的窗口小部件上，它就可見。 一旦光標離開窗口小部件的區域，彈出窗口小部件將自動再次隱藏。

例如，當您查看導航菜單的子菜單項或查看頁面元素的工具提示時，您可能會看到彈出行為。

• 在Show/Hide（顯示/隱藏）操作底部的More Options（更多選項）下的下拉列表中，此選項可用。

推/拉小部件

• 顯示窗口小部件時，您可以選擇在頁面的右側或右側pushed（推動）頁面上放置其他窗口小部件，以為顯示的窗口小部件騰出空間。隱藏窗口小部件時，可以選擇在頁面上或向左pulled（拉）其他窗口小部件以填充隱藏窗口小部件留下的空白。

• 在Show/Hide（顯示/隱藏）操作底部的More Options（更多選項）下的下拉列表中，此選項可用。

---

想要獲得Axure RP更多資源、正版授權的伙伴，請咨詢了解

關注慧聚IT微信公眾號???，了解產品的最新動態及最新資訊。

>