二維碼
        企資網(wǎng)

        掃一掃關(guān)注

        當(dāng)前位置: 首頁(yè) » 企業(yè)資訊 » 咨詢 » 正文

        Axure高保真教程_為什么片列表

        放大字體  縮小字體 發(fā)布日期:2022-11-27 19:56:39    作者:江昭騏    瀏覽次數(shù):100
        導(dǎo)讀

        導(dǎo)讀:支持列表是常用得展示方式,所以今天就和大家分享,在Axure里如何用中繼器制作一個(gè)能夠查看大圖得支持列表。一、制作完成后應(yīng)具備以下效果鼠標(biāo)移入支持時(shí),支持有有一個(gè)放大縮小得效果鼠標(biāo)單擊支

        導(dǎo)讀:支持列表是常用得展示方式,所以今天就和大家分享,在Axure里如何用中繼器制作一個(gè)能夠查看大圖得支持列表。

        一、制作完成后應(yīng)具備以下效果

        鼠標(biāo)移入支持時(shí),支持有有一個(gè)放大縮小得效果

        鼠標(biāo)單擊支持時(shí),顯示對(duì)應(yīng)支持得大圖,空白地方隱藏大圖

        制作完成后,再次使用時(shí),僅需要在中繼器表格內(nèi)導(dǎo)入支持,自動(dòng)生成交互效果

        原型地址:2a9rvm.axshare/#g=1

        二、制作材料準(zhǔn)備

        制作得原型得元件包括:中繼器、支持元件,動(dòng)態(tài)面板。

        1. 中繼器內(nèi)部元件

        我們首先添加一個(gè)中繼器原件,講中繼器內(nèi)部自帶得矩形刪除,然后在中繼器放置一個(gè)支持元件,案例中支持寬為200,高為200,這里根據(jù)你需要展示得支持比例設(shè)置即可。完成后鼠標(biāo)右鍵將支持轉(zhuǎn)為動(dòng)態(tài)面板,后續(xù)需要通過動(dòng)態(tài)面板做移入放大縮小得效果,這里動(dòng)態(tài)面板需要取消自適應(yīng)內(nèi)容。

        中繼器表格表格第壹列我們可以改名為picture,在下面表格里鼠標(biāo)右鍵導(dǎo)入支持,或者直接復(fù)制粘貼支持進(jìn)去即可。

        2. 中繼器外部元件

        外部只需要一個(gè)支持得元件,這個(gè)支持是大圖,支持大小自己設(shè)定即可,寬和高得比例應(yīng)該和中繼器里得支持得比例一致,案例中是寬500,高500。然后我們需要將大圖轉(zhuǎn)為動(dòng)態(tài)面板,然后固定在瀏覽器中部,默認(rèn)隱藏。

        三、交互制作1. 中繼器每項(xiàng)加載時(shí)交互

        中繼器每項(xiàng)加載時(shí),我們要把存放在中繼器表格里面得支持,設(shè)置到中繼器內(nèi)得支持元件。這里我們用設(shè)置支持得交互,選擇值==item.picture,設(shè)置完成后得效果如下圖所示

        2. 鼠標(biāo)移入支持時(shí)交互

        鼠標(biāo)移入支持時(shí),我們希望對(duì)應(yīng)支持有個(gè)動(dòng)態(tài)得縮放效果。我們通過設(shè)置尺寸得交互,將支持得尺寸先設(shè)置為原來(lái)得1.1倍,錨點(diǎn)在中部,設(shè)置尺寸得交互需要增加線性得動(dòng)畫,動(dòng)畫時(shí)間為500毫秒。再用等待得交互,等待動(dòng)畫時(shí)間介紹,因?yàn)榍懊娴脛?dòng)畫時(shí)間是500毫秒,所以這里也是等待500毫秒。最后我們?cè)俅斡迷O(shè)置尺寸得交互,將支持大小還原,因?yàn)榍懊媸欠糯罅?.1倍,所以這里也是縮小1.1倍,同樣地,我們也給他增加一個(gè)線性得動(dòng)畫,動(dòng)畫時(shí)間為500毫秒。

        3. 鼠標(biāo)單擊支持時(shí)交互

        鼠標(biāo)中繼器內(nèi)得支持時(shí),我們用顯示得交互,將大圖得動(dòng)態(tài)面板顯示,這里需要勾選燈箱效果,這樣空白得地方大圖才會(huì)自動(dòng)隱藏,燈箱得顏色為黑色,50%透明度。最后,我們還需要將鼠標(biāo)單擊支持得值傳到大圖里,這里支持得值其實(shí)就是保留在中繼器表格里picture列得值,所以我們?cè)O(shè)置大圖得值==item.picture

        這樣我們就完成了中繼器支持列表放大支持得原型模板了,下次使用時(shí),我們只需要導(dǎo)入支持即可自動(dòng)生成交互,是不是很方便呢?感興趣得同學(xué)們可以動(dòng)手試試哦。

        那本期得教程就到此為止了,感謝您得閱讀,我們下期見,88~

        感謝由 等AI產(chǎn)品人 來(lái)自互聯(lián)網(wǎng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止感謝

        題圖來(lái)自Unsplash,基于CC0協(xié)議

         
        (文/江昭騏)
        免責(zé)聲明
        本文僅代表作發(fā)布者:江昭騏個(gè)人觀點(diǎn),本站未對(duì)其內(nèi)容進(jìn)行核實(shí),請(qǐng)讀者僅做參考,如若文中涉及有違公德、觸犯法律的內(nèi)容,一經(jīng)發(fā)現(xiàn),立即刪除,需自行承擔(dān)相應(yīng)責(zé)任。涉及到版權(quán)或其他問題,請(qǐng)及時(shí)聯(lián)系我們刪除處理郵件:weilaitui@qq.com。
         

        Copyright ? 2016 - 2025 - 企資網(wǎng) 48903.COM All Rights Reserved 粵公網(wǎng)安備 44030702000589號(hào)

        粵ICP備16078936號(hào)

        微信

        關(guān)注
        微信

        微信二維碼

        WAP二維碼

        客服

        聯(lián)系
        客服

        聯(lián)系客服:

        在線QQ: 303377504

        客服電話: 020-82301567

        E_mail郵箱: weilaitui@qq.com

        微信公眾號(hào): weishitui

        客服001 客服002 客服003

        工作時(shí)間:

        周一至周五: 09:00 - 18:00

        反饋

        用戶
        反饋

        主站蜘蛛池模板: 国产在线视频一区二区三区98| 国产精品亚洲一区二区三区| 亚洲男人的天堂一区二区| AV无码精品一区二区三区宅噜噜| 亚洲国产精品一区二区久久hs| 美女福利视频一区二区 | 乱码人妻一区二区三区| 国产在线无码一区二区三区视频 | 无码人妻精品一区二区三区夜夜嗨| 在线观看视频一区二区| 高清精品一区二区三区一区| 久久久无码精品国产一区 | 国产成人无码aa精品一区| 亚欧在线精品免费观看一区| 无码人妻精品一区二区三区66| 四虎永久在线精品免费一区二区| 成人毛片一区二区| AA区一区二区三无码精片| 国产精品久久一区二区三区 | 国产亚洲欧洲Aⅴ综合一区| 全国精品一区二区在线观看| 国产传媒一区二区三区呀| 国产乱码精品一区二区三区四川人| 亚洲国产激情在线一区| 老熟女高潮一区二区三区| 蜜桃无码一区二区三区| 亚洲国产一区二区三区在线观看| 精品一区二区三区在线观看视频| 少妇特黄A一区二区三区| 久久久久人妻一区精品性色av| 久久综合精品不卡一区二区| 久久国产免费一区| 伊人久久精品一区二区三区| 亚洲国产系列一区二区三区 | 国产成人欧美一区二区三区 | 亚洲av无码一区二区三区乱子伦| 国产区精品一区二区不卡中文| 久久精品一区二区三区不卡| 久久精品国产一区二区三区肥胖| 无码国产精品一区二区免费vr | 人妻体内射精一区二区三区|