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

編輯導(dǎo)語(yǔ)：在做原型設(shè)計(jì)時(shí)，我們經(jīng)常會(huì)使用到卡片。當(dāng)卡片內(nèi)容比較多時(shí)，為了頁(yè)面美觀與重點(diǎn)突出，會(huì)采用伸縮卡片。那么，如何利用中繼器做伸縮卡片呢？本文對(duì)該步驟進(jìn)行了梳理，分享給你，希望對(duì)你有所幫助。

在原型設(shè)計(jì)時(shí)，我們經(jīng)常會(huì)用到卡片，例如人物信息卡片、商品信息卡片、視頻信息卡片；對(duì)比傳統(tǒng)的表格，使用卡片會(huì)更加的靈活，而且樣式更加美觀。當(dāng)卡片內(nèi)容較多時(shí)，我們往往會(huì)用伸縮卡片，突出重點(diǎn)內(nèi)容，吸引關(guān)注，如果用戶感興趣時(shí)就可以展開(kāi)查看詳細(xì)內(nèi)容。

所以今天作者就教大家如何制作高保真的伸縮卡片原型。該原型主要使用中繼器制作，從而挺高卡片的復(fù)用性，制作完成后，只需填寫(xiě)中繼器表格內(nèi)容，自動(dòng)實(shí)現(xiàn)交互效果，完成后如下如所示效果：

原型地址：https://e7z1fd.axshare.com/#g=1

一、材料準(zhǔn)備

1. 默認(rèn)顯示區(qū)域材料（重要內(nèi)容區(qū)域）

圖片*1、文本標(biāo)簽*n（中文名稱(chēng)、英文名稱(chēng)、手機(jī)號(hào)碼、微信號(hào)碼、星座）、更多按鈕*1、白色矩形背景*1

如下圖上半部分所示，文本標(biāo)簽的內(nèi)容可以根據(jù)實(shí)際情況設(shè)置。

2. 默認(rèn)隱藏區(qū)域材料（更多內(nèi)容區(qū)域）

文本標(biāo)簽*n（用戶ID、qq號(hào)碼、生日日期、性別、工作年齡、工作行業(yè)、工作單位、工作職位、工作城市、工作地址、工作郵箱……）、白色矩形背景*1

如下圖下半部分所示，文本標(biāo)簽的內(nèi)容可以根據(jù)實(shí)際情況設(shè)置，改區(qū)域內(nèi)的背景和文本標(biāo)簽組合，命名為隱藏內(nèi)容。

3. 中繼器設(shè)置

將上述1和2所有元件復(fù)制粘貼到中繼器內(nèi)部，中繼器每行間距設(shè)置為20，填寫(xiě)中繼器表格內(nèi)容，具體如下圖所示：

• pic——對(duì)應(yīng)上面的人物圖片、右鍵導(dǎo)入圖片即可；username——用戶名（中文名稱(chēng)）；
• name——英文名；tele——電話號(hào)碼；
• wechat——微信號(hào)；constellation——星座；
• ID——用戶號(hào)；QQ——qq號(hào)碼；bir——出生日期；
• sex——性別；working_age——工作年齡；
• pro——工作行業(yè)；cor——工作單位；
• job——工作職位；
• workcity——工作城市；
• workadress——工作地址；
• workemail——工作郵箱。

表格內(nèi)容大家根據(jù)實(shí)際需求設(shè)置，能夠和文本標(biāo)簽一一對(duì)應(yīng)即可。

二、交互制作

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

在中繼器每項(xiàng)加入時(shí)，我們只需要將將表格內(nèi)圖片和文字設(shè)置到對(duì)應(yīng)的內(nèi)容即可

• 設(shè)置文本——將每列的內(nèi)容設(shè)置到對(duì)應(yīng)的文本標(biāo)簽內(nèi)，例如設(shè)置中文名稱(chēng)的文本標(biāo)簽=item.usrename
• 設(shè)置圖片——設(shè)置頭像圖片的值為item.pic

2.更多按鈕點(diǎn)擊時(shí)

當(dāng)鼠標(biāo)單擊更多按鈕時(shí)，我們首先要顯示隱藏區(qū)域的內(nèi)容，這里用顯示事件將隱藏內(nèi)容的組合顯示即可；顯示完成后，考慮到已經(jīng)沒(méi)有更多內(nèi)容了，所以我們要將改按鈕的文本設(shè)置為收起。

當(dāng)鼠標(biāo)收起按鈕時(shí)，我們就要用隱藏事件，將隱藏內(nèi)容的組合隱藏，然后再將該按鈕的文本改為更多。

因?yàn)槭峭粋€(gè)按鈕，所以在鼠標(biāo)單擊時(shí)我們就需要添加條件，分情況設(shè)置交互：

情況1：如果當(dāng)前按鈕文字為更多，我們顯示隱藏內(nèi)容，并且設(shè)置當(dāng)前文本為收起，這里我們可以用設(shè)置富文本的事件，將收起的文本設(shè)置為紅色。

情況2：如果當(dāng)前按鈕的文字不是更多（即收起），這是我們用隱藏時(shí)間將隱藏內(nèi)容隱藏，在設(shè)置當(dāng)前文本為更多，同樣，我們也是用設(shè)置富文本的時(shí)間，將更多的文本設(shè)為藍(lán)色。

這樣，我們就完成了整個(gè)伸縮卡片的原型模板了，以后使用的話，我們可以直接在excel表格中填寫(xiě)好數(shù)據(jù)，再?gòu)?fù)制到中繼器表格即可，是不是很方便快捷呢？

那以上就是本期的全部?jī)?nèi)容了，感謝您的閱讀，我們下期見(jiàn)，88~~

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

題圖來(lái)自pexels，基于CC0協(xié)議。