這個案例昆明網(wǎng)站制作小編將簡單介紹一下微博登錄模塊的顯示與隱藏，為了節(jié)省篇幅并減少操作步驟，直擊本案例要講解的知識點，此處的微博登錄模塊直接使用截圖代替，不再使用文本、矩形、按鈕等部件制作登錄模塊。

第一步：準備好案例所需的圖像素材，見圖265。

（圖265）

第二步：將 zhihu.png和normal.png 兩張圖像拖入Axure設(shè)計區(qū)域，見圖266。

第三步：將 normal.png 移動到恰當位置，并為其添加【左鍵按下時】的交互效果，導(dǎo)入 tap.png，見圖267，給weibo.png圖像部件命名為weibo_login（在移動設(shè)備APP中，當手指單擊圖標時，圖標的樣式大多會發(fā)生變化，如圖268）。

（圖266）

（圖267）

（圖268）

第四步：將 weibo.png 圖像拖入axure設(shè)計區(qū)域，并將其移動到zhihu.png圖像上方，單擊右鍵，在彈出的關(guān)聯(lián)菜單中選擇【轉(zhuǎn)換為動態(tài)面板】，給動態(tài)面板命名為weibo，見圖269。

第五步：選中weibo這個動態(tài)面板，單擊右鍵，在彈出的關(guān)聯(lián)菜單中選擇【設(shè)為隱藏】（在頂部工具欄和【部件樣式】面板中均可將部件設(shè)為隱藏），接下來昆明網(wǎng)站建設(shè)小編要給weibo_login圖標添加交互，但此時weibo_login按鈕被動態(tài)面板覆蓋住了，見圖270。當遇到部件被覆蓋的情況時有三種解決方法。

（圖269）

（圖270）

1．鼠標慢速單擊要操作的部件，每單擊一次就會選中下一層部件。例如，當前案例中第一次單擊weibo_login圖標時選中的是weibo這個隱藏的動態(tài)面板，再單擊一次就可以選中我們想要操作的圖標了。

2．通過【Outline：頁面】面板直接選中目標部件進行操作，見圖271。在【Outline：頁面】面板中可以看到當前頁面中的所有部件，也可以通過右上角的過濾按鈕對部件進行過濾顯示，見圖272。

（圖271）

（圖272）

3．在【Outline：頁面】面板中可以將指定的動態(tài)面板在設(shè)計區(qū)域中隱藏（注意，此處的隱藏只提拱了工作方便，取消指定動態(tài)面板在設(shè)計區(qū)域中的可見性，當在瀏覽器中預(yù)覽或者生成HTML時依然正常顯示），見圖273。

（圖273）

第六步：選中weibo_login圖標，在右側(cè)部件【屬性】面板中雙擊【鼠標單擊時】事件，在彈出的【用例編輯器】中新增【顯示】動作，在右側(cè)【配置動作】中勾選weibo動態(tài)面板，動畫【淡入淡出】，時間【200】毫秒，更多選項【燈箱效果】，背景色【黑色】，不透明度【70%】，見圖274。單擊【確定】按鈕關(guān)閉【用例編輯器】。

（圖274）

單擊工具欄中的預(yù)覽按鈕，在瀏覽器中打開原型，現(xiàn)在單擊微博登錄按鈕就可以正常顯示了，繼續(xù)為其添加隱藏交互。

第七步：在【Outline：頁面】面板中雙擊weibo動態(tài)面板下的State1（注意，在【Outline：頁面】面板中，當鼠標懸停在某個部件時，左側(cè)都會顯示該部件的縮略圖便于我們查找所需部件，見圖275），然后在【部件】面板中拖放一個熱區(qū)部件，覆蓋到微博圖像的【關(guān)閉】按鈕上，并給【熱區(qū)】命名為weibo_close，見圖276。

（圖275）

（圖276）

選中熱區(qū)部件，在右側(cè)部件【屬性】面板中雙擊【鼠標單擊時】事件，在彈出的【用例編輯器】中新增【隱藏】動作，在右側(cè)【配置動作】中勾選weibo動態(tài)面板，動畫【淡入淡出】，動畫時間【200】毫秒，見圖277。單擊【確定】按鈕關(guān)閉【用例編輯器】。

第八步：在頂部的工具欄中單擊【預(yù)覽】按鈕，或者按下快捷鍵F5/Shift+Command+P，快速預(yù)覽交互效果。

（圖277）