中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語：很多頁面都可以用中繼器來制作，比如網(wǎng)頁的列表展示等等，使用中繼器可以方便快捷的解決很多問題；本文作者分享了關(guān)于用中繼器制作直播視頻的卡片列表的Axure教程，我們一起來了解一下。

Hello，今天教大家用中繼器制作卡片列表，本教程以直播視頻卡片為案例，學(xué)習(xí)完成之后，你們也可以根據(jù)實(shí)際的需要，制作商品、課程、視頻等的卡片列表；另外，使用中繼器制作的卡片，也方便我們維護(hù)，只需要在表格中導(dǎo)入圖片和填寫文字，自動(dòng)生成交互效果，所以強(qiáng)烈推薦給大家使用。

原型預(yù)覽地址：https://9qtbbc.axshare.com

一、材料準(zhǔn)備

中繼器——將其余材料如圖所示擺放中繼器內(nèi)部。

矩形1（推薦文字）——作為直播的分類標(biāo)簽，例如大神推薦、職業(yè)選手、人氣美女等等。

矩形2（畫質(zhì)文字）——作為畫質(zhì)的分類表臉，例如高清、超清、藍(lán)光4M、藍(lán)光8M等等。

矩形3（灰色背景）——默認(rèn)隱藏，不同明度為50%，后面會(huì)用于制作鼠標(biāo)移入時(shí)的交互效果。

矩形4（白色背景）——默認(rèn)有陰影。

播放按鈕——默認(rèn)隱藏，后面會(huì)用于制作鼠標(biāo)移入時(shí)的交互效果。

文字1——標(biāo)題文字（設(shè)置選中時(shí)變成藍(lán)色的文字樣式，后面制作動(dòng)態(tài)交互）。

文字2——主播名字。

文字3——人氣值。

圖片1——直播圖片（需要轉(zhuǎn)為動(dòng)態(tài)面板并取消動(dòng)態(tài)面板自動(dòng)調(diào)整尺寸，后面制作動(dòng)態(tài)交互）。

圖片2——主播頭像（圓角調(diào)滿）。

人氣圖標(biāo)——為了更加美觀，非必要。

二、中繼器表格設(shè)置

picture列：這里對應(yīng)圖片1（直播圖片），我們右鍵導(dǎo)入本地圖片即可，如果是網(wǎng)絡(luò)圖片就填寫圖片url地址。

biaoti列：對應(yīng)文字1（標(biāo)題文字），直接輸入或者在excel復(fù)制過來即可。

photo列：對應(yīng)圖片1（主播頭像），也是右鍵導(dǎo)入圖片或者填寫圖片的網(wǎng)絡(luò)地址即可。

name列：對應(yīng)文字2（主播名字），直接輸入或者在excel復(fù)制過來即可。

number列：對應(yīng)文字3（人氣值），具體數(shù)值直接輸入或者在excel復(fù)制過來即可。

huazhi列：對應(yīng)矩形2（畫質(zhì)文字），直接輸入或者在excel復(fù)制過來即可。

tuijian列：對應(yīng)矩形1（推薦文字），直接輸入或者在excel復(fù)制過來即可。

三、交互設(shè)置

1. 中繼器每項(xiàng)加載時(shí)

設(shè)置文本（將中繼器內(nèi)存放的文本設(shè)置到對應(yīng)的元件中）：

主播名字==item.name；

人氣值==item.number，因?yàn)檫@里的單位是萬，所以碎了表格number列的值后面加了wan的單位。

標(biāo)題文字==item.biaoti

畫質(zhì)文字==item.huazhi

推薦文字==item.tuijain

設(shè)置圖片（將中繼器內(nèi)存放的圖片設(shè)置到對應(yīng)的圖片元件中）：

設(shè)置圖片1（直播圖片）的值==item.picture

設(shè)置圖片2（主播頭像）的值==item.photo

2. 鼠標(biāo)移入時(shí)的動(dòng)態(tài)交互設(shè)置

首先我們把中繼器內(nèi)部所有元件組合。

選中標(biāo)題文字——因?yàn)槲覀冊跍?zhǔn)備材料時(shí)設(shè)置了標(biāo)題文字選中時(shí)的樣式為藍(lán)色，所以鼠標(biāo)移入時(shí)，我們設(shè)置標(biāo)題文字選中，這樣就有個(gè)變色的效果。

顯示——這里把默認(rèn)隱藏的播放按鈕和灰色背景顯示出來。

設(shè)置尺寸——這里做一個(gè)移入放大圖片的效果，所以我們將直播圖片放大為原來的1.1倍；target.width就是對象的寬度，target.height就是對象的高度，這里對象是直播圖片，所以相當(dāng)于將直播圖片的寬和高放大1.1倍。設(shè)置完之后加個(gè)線性的動(dòng)畫效果。

3. 鼠標(biāo)移出時(shí)的動(dòng)態(tài)交互設(shè)置

鼠標(biāo)移出時(shí)，其實(shí)我們就是要進(jìn)行還原，所以將鼠標(biāo)移入時(shí)的交互反著來做就行：

取消選中標(biāo)題文字——將移入時(shí)選中的文字還原。

隱藏——將移入時(shí)顯示的灰色背景和播放按鈕隱藏。

設(shè)置尺寸——移入時(shí)將圖片放大了1.1倍，所以我會(huì)回復(fù)時(shí)只需要將圖片的寬和高除以1.1即可。

那到這里我們就完成了整個(gè)直播視頻卡片的制作了，以后我們維護(hù)卡片數(shù)據(jù)只需要在中繼器表格里填寫文字，導(dǎo)入圖片即可，是不是非常方便呢？

以上就是本期的全部內(nèi)容了~

本文由 @做產(chǎn)品但不是經(jīng)理 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。