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

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

（圖265）

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

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

（圖266）

（圖267）

（圖268）

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

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

（圖269）

（圖270）

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

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

（圖271）

（圖272）

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

（圖273）

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

（圖274）

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

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

（圖275）

（圖276）

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

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

（圖277）