• <abbr id="qqgmy"></abbr>
      <menu id="qqgmy"><abbr id="qqgmy"></abbr></menu>
    • <rt id="qqgmy"><code id="qqgmy"></code></rt>
      • Axure——案例1:圖像交互樣式

        • 2022-03-16 18:55:04
        • 閱讀次數(shù):
        • 作者:盈嵐科技小編
        • 來源:http://www.margaycoffee.com

        在我們?yōu)g覽購物網(wǎng)站時,經(jīng)常見到這種交互效果,如選擇商品的尺碼、顏色,見圖16。

        下面昆明網(wǎng)站建設(shè)小編就帶大家來看看我們在Axure RP8中使用圖像的交互樣式實現(xiàn)這個簡單的交互效果。

        首先,準(zhǔn)備好三張圖像素材,見圖17。

        微信圖片_20220316181426.jpg

        (圖16)

        A:選中時

        B:鼠標(biāo)懸停時

        C:未觸發(fā)交互樣式

        11.jpg

        (圖17)

        第一步:將 unselected.jpg 拖入Axure設(shè)計區(qū)域,或者使用圖像部件導(dǎo)入,見圖18。

        12.jpg

        (圖18)

        第二步:右鍵單擊圖像,在彈出的關(guān)聯(lián)菜單中選擇【交互樣式】,見圖19。然后在彈出的【設(shè)置交互樣式】對話框中選擇【鼠標(biāo)懸?!浚催x【圖像】并導(dǎo)入 hover.jpg,見圖20。

        11.jpg

        (圖19)

        12.jpg

        (圖20)

        第三步:選擇【選中】,勾選【圖像】并導(dǎo)入 selected.jpg,見圖21。然后單擊【確定】,關(guān)閉【設(shè)置交互樣式】對話框。

        11.jpg

        (圖21)

        第四步:在設(shè)計區(qū)域中選中圖像部件,然后在右側(cè)的部件【屬性】面板中雙擊【鼠標(biāo)單擊時】事件,見圖22,然后在彈出的【用例編輯器】對話框中進行配置,見圖23。

        在【用例編輯器】中配置完動作后,點擊【確定】按鈕,關(guān)閉【用例編輯器】,此時在部件【屬性】面板中可以看到剛剛配置好的用例,見圖24。

        11.jpg

        (圖22)

        11.jpg

        (圖23)

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

        11.jpg

        (圖24)

        分割/裁剪圖像:圖像部件可以被水平或垂直分割,這樣可以非常方便地處理導(dǎo)入的截圖。右鍵單擊圖片,選擇【分割圖像】或【裁剪圖像】或在部件【屬性】面板中選擇,見圖25。

        1:輸入用例名稱(在學(xué)習(xí)階段應(yīng)養(yǎng)成給用例命名的好習(xí)慣)。

        2:在左側(cè)添加【選中】動作。

        3:組織動作(有多個動作時,可以組織動作的執(zhí)行順序)。

        4:在右側(cè)的配置動作中勾選【圖像部件】。

        5:設(shè)置選中狀態(tài)值為true。

        分割圖像(Slice):將圖像分割成多個水平或垂直的部分。

        裁剪圖像(Crop):設(shè)置想保留的圖片區(qū)域。

        圖像邊框和圓角:通過選擇工具欄中的線寬和線條顏色就可以給圖像添加邊框。也可以通過拖動部件左上角的圓角半徑控制手柄,或是進入部件的樣式面板設(shè)置圖像圓角,見圖26(A: 自左至右分別是圖像線條顏色、線條寬度、線條樣式;B: 圓角半徑控制手柄)。

        11.jpg

        (圖25)

        12.jpg

        (圖26)

        圖像的不透明度:導(dǎo)入的圖像可以調(diào)整透明度,在部件樣式面板中輸入不透明度百分比即可,見圖27。

        優(yōu)化圖像:大圖像會使你的RP文件增大,還會影響瀏覽質(zhì)量,使用優(yōu)化圖像可以在不改變圖像尺寸的前提下減小圖像大小,但是這有可能影響圖片質(zhì)量。要優(yōu)化圖片,右鍵單擊圖像并選擇【優(yōu)化圖像】,見圖28。

        11.jpg

        (圖27)

        11.jpg

        (圖28)

        小提示:導(dǎo)入GIF動畫圖像時不要使用優(yōu)化圖像,這樣會導(dǎo)致圖像失去動態(tài)效果。

        保護邊角:該功能類似于九宮格切圖和.9png制作,它可以在調(diào)整圖像大小時保護邊角不變,見圖29。

        11.jpg

        (圖29)

        A:拉伸之前的圖像。

        B:未使用保護邊角拉伸后的圖像。

        C:使用保護邊角拉伸后的圖像。

        指定選項組:和單選按鈕組相似,圖像也可以被指定選擇組,當(dāng)選擇組中的圖像設(shè)置了選中時的交互樣式后,點選其中一張圖像,其他圖像都會被設(shè)置為默認(rèn)樣式(未選中狀態(tài))。要將圖像設(shè)置到選項組,先選擇多張圖像,然后單擊右鍵選擇【指定選項組】,或者在部件【屬性】面板底部選擇“設(shè)置選項組”,見圖30。

        11.jpg

        (圖30)


        當(dāng)前文章標(biāo)題:Axure——案例1:圖像交互樣式

        當(dāng)前URL:http://www.margaycoffee.com/news/wzzz/3377.html

        上一篇:Axure——部件詳解

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

        網(wǎng)站建設(shè)、抖音推廣、頭條推廣、微信朋友圈推廣、快手推廣專線:15368242187(微信同號)
        在线一区视频二区三区,av无码久久久不卡网站,亚洲国产人成精品,国产成人白丝视频
        • <abbr id="qqgmy"></abbr>
          <menu id="qqgmy"><abbr id="qqgmy"></abbr></menu>
        • <rt id="qqgmy"><code id="qqgmy"></code></rt>