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

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

（圖265）

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

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

（圖266）

（圖267）

（圖268）

第四步：將 weibo.png 圖像拖入axure設計區域，并將其移動到zhihu.png圖像上方，單擊右鍵，在彈出的關聯菜單中選擇【轉換為動態面板】，給動態面板命名為weibo，見圖269。

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

（圖269）

（圖270）

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

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

（圖271）

（圖272）

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

（圖273）

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

（圖274）

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

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

（圖275）

（圖276）

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

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

（圖277）