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

---

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

免費下載Axure RP 優(yōu)惠購買Axure RP

---

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

小部件設置

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

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

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

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

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

顯示按鈕

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

• 在出現(xiàn)的下拉列表中選擇占位符小部件。

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

隱藏按鈕

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

切換按鈕

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

預覽互動

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

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

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

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

附加信息和提示

動畫制作

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

向前走

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

燈箱

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

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

彈出菜單

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

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

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

推/拉小部件

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

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

---

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

關注慧聚IT微信公眾號???，了解產(chǎn)品的最新動態(tài)及最新資訊。

>