国产午夜亚洲精品国产成人_欧美屁股大的xxxxx_丰满巨肥大屁股bbw网站_日韩精品亚洲aⅴ在线影院_旧番剧精灵の森へようこそ

Axure——案例2:圖像選項(xiàng)組的交互應(yīng)用

  • 2022-03-16 19:05:00
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://www.gtalker.cn

我們?nèi)砸再?gòu)物網(wǎng)站中選擇尺碼的交互場(chǎng)景為例,當(dāng)我們單擊選擇尺碼M時(shí),L和XL變?yōu)榛疑ㄎ催x中)。同理,點(diǎn)擊L 碼時(shí), M和XL 變?yōu)榛疑ㄎ催x中),見圖31。

11.jpg

(圖31)

下面昆明網(wǎng)站建設(shè)小編就Axure RP8中使用給圖像“指定選項(xiàng)組”功能來實(shí)現(xiàn)這個(gè)交互效果。

首先,準(zhǔn)備好6張圖像素材,分別是3張未選中狀態(tài)和3張選中狀態(tài)的圖像,見圖32。

12.jpg

(圖32)

第一步:將3張未選中狀態(tài)的圖像導(dǎo)入Axure,并在右側(cè)的部件【屬性】面板中分別給其命名為M、L、XL,見圖33。

11.jpg

(圖33)

第二步:分別設(shè)置這三張圖像的【鼠標(biāo)懸停時(shí)】的交互樣式,上一個(gè)小案例中詳細(xì)介紹過哦。

1.先右鍵單擊圖像。

2.在彈出的關(guān)聯(lián)菜單中選擇【交互樣式】。

3.在彈出的【設(shè)置交互樣式】對(duì)話框頂部選擇【選中】。

4.勾選【圖像】并導(dǎo)入與之對(duì)應(yīng)的選中時(shí)的圖像。

5.點(diǎn)擊【確定】按鈕,關(guān)閉【設(shè)置交互樣式】對(duì)話框,見圖34。

12.jpg

(圖34)

第三步:在設(shè)計(jì)區(qū)域中選中圖像M,在部件【屬性】面板中雙擊【鼠標(biāo)單擊時(shí)】事件,在彈出的【用例編輯器】中添加【選中】動(dòng)作,并在右側(cè)的【配置動(dòng)作】中勾選圖像M,設(shè)置其選中狀態(tài)值為true,見圖35,然后單擊【確定】按鈕關(guān)閉用例編輯器。

第四步:使用同樣的方法給圖像 L和XL 添加【鼠標(biāo)點(diǎn)擊時(shí)】事件。

第五步:在設(shè)計(jì)區(qū)域中同時(shí)選中三張圖像,右鍵點(diǎn)擊其中任意一張,在彈出的關(guān)聯(lián)菜單中選擇【指定選項(xiàng)組】,見圖36。然后在彈出的【設(shè)置選項(xiàng)組】對(duì)話框中輸入組名稱,見圖37,單擊【確定】按鈕關(guān)閉【設(shè)置選項(xiàng)組】對(duì)話框。

11.jpg

(圖35)

12.jpg

(圖36)

微信圖片_20220316181426.jpg

(圖37)

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


當(dāng)前文章標(biāo)題:Axure——案例2:圖像選項(xiàng)組的交互應(yīng)用

當(dāng)前URL:http://www.gtalker.cn/news/wzzz/3378.html

上一篇:Axure——案例1:圖像交互樣式

下一篇:挑戰(zhàn)1:進(jìn)一步熟悉部件交互樣式

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