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

---

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

免費(fèi)下載Axure RP 優(yōu)惠購(gòu)買Axure RP

---

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

小部件設(shè)置

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

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

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

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

單擊按鈕時(shí)設(shè)置占位符的可見性

顯示按鈕

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

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

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

隱藏按鈕

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

切換按鈕

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

預(yù)覽互動(dòng)

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

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

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

可點(diǎn)擊隱藏和顯示小部件觀看視頻。

附加信息和提示

動(dòng)畫制作

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

向前走

• 當(dāng)顯示帶有Show（顯示）或Toggle（切換）選項(xiàng)的小部件時(shí)，您可以選中More Options（更多選項(xiàng)）下的Brin to Front（置于最前面）復(fù)選框，以將小部件自動(dòng)帶到設(shè)計(jì)的前面。這樣可以確保顯示時(shí)沒有小部件與之重疊。

燈箱

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

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

彈出菜單

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

例如，當(dāng)您查看導(dǎo)航菜單的子菜單項(xiàng)或查看頁(yè)面元素的工具提示時(shí)，您可能會(huì)看到彈出行為。

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

推/拉小部件

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

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

---

想要獲得Axure RP更多資源、正版授權(quán)的伙伴，請(qǐng)咨詢【慧都客服】了解

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

>