案例12:知乎APP微博登錄部件顯示/隱藏

  • 2022-04-07 17:35:47
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://m.supportcoffeeroasters.com

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

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

11.jpg

(圖265)

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

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

11.jpg

(圖266)

11.jpg

(圖267)

11.jpg

(圖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圖標(biāo)添加交互,但此時weibo_login按鈕被動態(tài)面板覆蓋住了,見圖270。當(dāng)遇到部件被覆蓋的情況時有三種解決方法。

11.jpg

(圖269)

11.jpg

(圖270)

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

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

11.jpg

(圖271)

11.jpg

(圖272)

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

11.jpg

(圖273)

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

11.jpg

(圖274)

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

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

11.jpg

(圖275)

11.jpg

(圖276)

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

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

11.jpg

(圖277)


當(dāng)前文章標(biāo)題:案例12:知乎APP微博登錄部件顯示/隱藏

當(dāng)前URL:http://m.supportcoffeeroasters.com/news/wzzz/3408.html

上一篇:案例11:iOS APP標(biāo)簽欄視圖切換

下一篇:母版詳解之母版基礎(chǔ)

網(wǎng)站建設(shè)、抖音推廣、頭條推廣、微信朋友圈推廣、快手推廣專線:15368242187(微信同號)