Axure RP官方教程翻譯(3):顯示隱藏的部件

1 評論 13507 瀏覽 40 收藏 4 分鐘

文章分享了通過Axure來實現點擊觸發顯示隱藏的部件的具體過程,一起看看吧~

本教程翻自Axure官方教程第3篇《Show Hidden widget》,通過點擊觸發顯示隱藏的部件,實現效果如下:

STEP 0:下載練習文件

如果你還沒有練習文件,下載AxureTraining.rp文件并且在Axure RP打開它。這個文件包含了Axure培訓網站上每個教程用到的相關頁面。我們建議一直都用我們準備的這個文件來完成教程,但是如果你不想,那也是ok的——即使你沒有使用我們的培訓文件,我們總是會告訴你為了完成每一個教程需要在新文件中創建什么。

AxureTraining.rp文件打開后如下:

STEP 1:配置

打開培訓文件中的“Show hidden widget”頁面。這里你會看到一張圖片部件和一個對話氣泡框部件。

(要將圖片設置成圓形,你可以通過拖拽圖片部件左上角黃色的倒三角“圓角控制器”到部件的中間。要制作一個氣泡對話框,首先添加一個形狀部件,然后通過部件右上角灰色圓圈“形狀選擇器”選擇對話氣泡框。你可以通過點擊和拖拽它的端點將對話框的箭頭移動到左側。)

通過點擊勾選“Hidden”復選框來隱藏氣泡對話框部件,不管是在上方Style工具欄還是在右側Inspector面板中的Style標簽欄來勾選都能達到同樣的效果。

STEP 2:添加點擊交互行為

  • 選擇圖片部件。在右側Inspector面板的Properties標簽欄,雙擊“OnClick”來添加一個點擊實例。
  • 在Case Editor(OnClick)對話框,在左側選擇行為“Show”。
  • 在右側“Configure actions”標簽下,選擇“(Speech Bubble)”部件。
  • 點擊確定關閉對話框

STEP 3:預覽

預覽原型。點擊圖片來展現氣泡對話框。

 

譯者:Eugene

原文鏈接:https://www.axure.com/support/training/show-hidden-widget-tutorial

本文由 @Eugene 翻譯發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. xe

    回復