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

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

（圖265）

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

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

（圖266）

（圖267）

（圖268）

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

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

（圖269）

（圖270）

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

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

（圖271）

（圖272）

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

（圖273）

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

（圖274）

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

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

（圖275）

（圖276）

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

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

（圖277）