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

編輯導(dǎo)語：在系統(tǒng)原型設(shè)計中，手風(fēng)琴也是一個常見的樣式設(shè)計。那么，若不想用動態(tài)面板或其他方式、而想采用中繼器進(jìn)行手風(fēng)琴原型制作的話，應(yīng)該如何操作呢？本篇文章里，作者總結(jié)了中繼器制作手風(fēng)琴原型模板的流程，一起來看一下。

手風(fēng)琴是系統(tǒng)原型很常用的一個原型，但在Axure里的原生元件并沒有手風(fēng)琴，所以當(dāng)我們需要用到手風(fēng)琴的時候就需要自己制作了。

很多同學(xué)都會制作簡單的手風(fēng)琴效果，他們往往用動態(tài)面板、隱藏顯示等事件去制作，目前很少有人真正用到中繼器去做一個手風(fēng)琴的模板，這樣就會導(dǎo)致效率的低下，每次維護(hù)內(nèi)容都要進(jìn)行很多次復(fù)制粘貼等重復(fù)的工作，如果要做交互的話，那么就會更加麻煩。

所以作者今天教大家用中繼器制作手風(fēng)琴的原型模板，以后再次使用時，我們只需要在表格內(nèi)填寫文字即可，一鍵生成高保真的手風(fēng)琴。

今天主要教大家制作兩種效果的手風(fēng)琴，一種是鼠標(biāo)移入時自動展開全部內(nèi)容，另一種是鼠標(biāo)單擊時才展開全部內(nèi)容。

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

下面我們一起來學(xué)習(xí)吧~~~

一、材料準(zhǔn)備

標(biāo)題矩形——用于顯示標(biāo)題文字，適當(dāng)調(diào)整矩形的大小、填充顏色和邊框線顏色。

內(nèi)容矩形——用于顯示內(nèi)容文字，適當(dāng)調(diào)整矩形的大小、填充顏色和邊框線顏色，默認(rèn)隱藏，并設(shè)置單項組。

向下箭頭——內(nèi)容展開或收起的標(biāo)志，讓手風(fēng)琴更加清晰。

中繼器——將上面三個元件組合到一塊，然后復(fù)制到中繼器內(nèi)部，如下圖所示擺放。

中繼器表格增加2列：

1. title列——代表對應(yīng)每個手風(fēng)琴內(nèi)的標(biāo)題；
2. text列——代表對應(yīng)每個手風(fēng)琴內(nèi)該標(biāo)題下面隱藏的內(nèi)容。

如下圖所示，在表格內(nèi)填入內(nèi)容即可：

注：中繼器要取消勾選隔離列表之間的選項組。

二、交互制作

1. 中繼器每項加載時

設(shè)置文本——中繼器每項加載時，我們要把中繼器列表里的item.title列的文字設(shè)置到標(biāo)題矩形，把item.text列的文字設(shè)置到內(nèi)容矩形。

設(shè)置選中——我們是通過設(shè)置內(nèi)容矩形是否選中來控制內(nèi)容矩形的顯示與隱藏。這部分后續(xù)會詳細(xì)介紹，這里要介紹的是，我們會默認(rèn)顯示第一行手風(fēng)琴的內(nèi)容，其余隱藏，所以我們在這加一個條件，如果item.index==1，就是第一行的意思，設(shè)置選中內(nèi)容矩形為真。

2. 內(nèi)容矩形選中時

顯示——當(dāng)內(nèi)容矩形選中時，我們就顯示當(dāng)前元件，即顯示內(nèi)容矩形。由于內(nèi)容矩形默認(rèn)是隱藏的，所以在中繼器加載第一行時，會選中第一行的內(nèi)容矩形，這樣內(nèi)容矩形就會顯示出來。

旋轉(zhuǎn)——內(nèi)容矩形顯示時，將向下箭頭旋轉(zhuǎn)180度，這樣向下的箭頭就會變成向上。

3. 內(nèi)容矩形取消選中時

隱藏——當(dāng)內(nèi)容矩形取消選中時，我們就隱藏當(dāng)前元件，即隱藏內(nèi)容矩形。

有的同學(xué)可能會問，沒有看到有觸發(fā)內(nèi)容矩形取消選中的事件，其實這里我們不需要寫取消選中的事件，因為我們開始的時候?qū)?nèi)容矩形設(shè)置成單選組，所以當(dāng)另外一行被選中時，當(dāng)前選中的狀態(tài)就會自動取消，這也是單選組的妙用之處。

旋轉(zhuǎn)——內(nèi)容矩形隱藏時，將箭頭旋轉(zhuǎn)180度，這樣就可以恢復(fù)原來位置了。

4. 鼠標(biāo)移入顯示內(nèi)容

鼠標(biāo)移入中繼器內(nèi)組合時，設(shè)置內(nèi)容矩形為選中狀態(tài)，這樣就可以顯示鼠標(biāo)當(dāng)前所在手風(fēng)琴內(nèi)的隱藏內(nèi)容了。可以簡單地理解為，鼠標(biāo)移入觸發(fā)了選中，選中又觸發(fā)了顯示，而又因為是單選組，當(dāng)這行內(nèi)容顯示時有導(dǎo)致其他內(nèi)容隱藏。

5. 鼠標(biāo)單擊顯示內(nèi)容

鼠標(biāo)單擊時中繼器內(nèi)組合時，同樣也是設(shè)置矩形為選中狀態(tài)，和上面的是一模一樣的，原理也是相同的。一般而言，鼠標(biāo)移入效果和鼠標(biāo)單擊效果二者選一，你們可以根據(jù)實際的需求設(shè)置。

三、后續(xù)拓展

恭喜你已經(jīng)學(xué)會用中繼器制作手風(fēng)琴了，后續(xù)你可以根據(jù)實際的需要，在隱藏內(nèi)容里邊添加不同大小顏色的文本、圖片、鏈接。原理同時一樣的，需要拓展的話在中繼器內(nèi)添加對應(yīng)列的內(nèi)容，然后把選中隱藏內(nèi)容矩形變成需要隱藏組合即可。

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

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

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