這個(gè)案例昆明網(wǎng)站制作小編將簡(jiǎn)單介紹一下微博登錄模塊的顯示與隱藏,為了節(jié)省篇幅并減少操作步驟,直擊本案例要講解的知識(shí)點(diǎn),此處的微博登錄模塊直接使用截圖代替,不再使用文本、矩形、按鈕等部件制作登錄模塊。
第一步:準(zhǔn)備好案例所需的圖像素材,見(jiàn)圖265。
(圖265)
第二步:將 zhihu.png和normal.png 兩張圖像拖入Axure設(shè)計(jì)區(qū)域,見(jiàn)圖266。
第三步:將 normal.png 移動(dòng)到恰當(dāng)位置,并為其添加【左鍵按下時(shí)】的交互效果,導(dǎo)入 tap.png,見(jiàn)圖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,見(jiàn)圖269。
第五步:選中weibo這個(gè)動(dòng)態(tài)面板,單擊右鍵,在彈出的關(guān)聯(lián)菜單中選擇【設(shè)為隱藏】(在頂部工具欄和【部件樣式】面板中均可將部件設(shè)為隱藏),接下來(lái)昆明網(wǎng)站建設(shè)小編要給weibo_login圖標(biāo)添加交互,但此時(shí)weibo_login按鈕被動(dòng)態(tài)面板覆蓋住了,見(jiàn)圖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.通過(guò)【Outline:頁(yè)面】面板直接選中目標(biāo)部件進(jìn)行操作,見(jiàn)圖271。在【Outline:頁(yè)面】面板中可以看到當(dāng)前頁(yè)面中的所有部件,也可以通過(guò)右上角的過(guò)濾按鈕對(duì)部件進(jìn)行過(guò)濾顯示,見(jiàn)圖272。
(圖271)
(圖272)
3.在【Outline:頁(yè)面】面板中可以將指定的動(dòng)態(tài)面板在設(shè)計(jì)區(qū)域中隱藏(注意,此處的隱藏只提拱了工作方便,取消指定動(dòng)態(tài)面板在設(shè)計(jì)區(qū)域中的可見(jiàn)性,當(dāng)在瀏覽器中預(yù)覽或者生成HTML時(shí)依然正常顯示),見(jiàn)圖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%】,見(jiàn)圖274。單擊【確定】按鈕關(guān)閉【用例編輯器】。
(圖274)
單擊工具欄中的預(yù)覽按鈕,在瀏覽器中打開(kāi)原型,現(xiàn)在單擊微博登錄按鈕就可以正常顯示了,繼續(xù)為其添加隱藏交互。
第七步:在【Outline:頁(yè)面】面板中雙擊weibo動(dòng)態(tài)面板下的State1(注意,在【Outline:頁(yè)面】面板中,當(dāng)鼠標(biāo)懸停在某個(gè)部件時(shí),左側(cè)都會(huì)顯示該部件的縮略圖便于我們查找所需部件,見(jiàn)圖275),然后在【部件】面板中拖放一個(gè)熱區(qū)部件,覆蓋到微博圖像的【關(guān)閉】按鈕上,并給【熱區(qū)】命名為weibo_close,見(jiàn)圖276。
(圖275)
(圖276)
選中熱區(qū)部件,在右側(cè)部件【屬性】面板中雙擊【鼠標(biāo)單擊時(shí)】事件,在彈出的【用例編輯器】中新增【隱藏】動(dòng)作,在右側(cè)【配置動(dòng)作】中勾選weibo動(dòng)態(tài)面板,動(dòng)畫【淡入淡出】,動(dòng)畫時(shí)間【200】毫秒,見(jiàn)圖277。單擊【確定】按鈕關(guān)閉【用例編輯器】。
第八步:在頂部的工具欄中單擊【預(yù)覽】按鈕,或者按下快捷鍵F5/Shift+Command+P,快速預(yù)覽交互效果。
(圖277)
當(dāng)前文章標(biāo)題:案例12:知乎APP微博登錄部件顯示/隱藏
當(dāng)前URL:http://www.gtalker.cn/news/wzzz/3408.html
下一篇:母版詳解之母版基礎(chǔ)