編輯導(dǎo)讀：移動(dòng)端PM需要學(xué)會(huì)畫出常見移動(dòng)端組件并且制作成自己的移動(dòng)端元件庫，后續(xù)畫原型的時(shí)候可以節(jié)省很多重復(fù)工作時(shí)間。本文仔細(xì)介紹了用Axure實(shí)現(xiàn)折疊面板效果的步驟與注意要點(diǎn)，希望對(duì)你有所啟發(fā)。

折疊面板是移動(dòng)端APP中常見的組件之一，有時(shí)候也稱之為手風(fēng)琴。咱們先看下Axure畫出的折疊面板原型效果，然后再對(duì)該組件進(jìn)行詳細(xì)講解。

演示地址：https://6eq1iq.axshare.com/#g=1

一、組件介紹

二、實(shí)際案例

三、畫出原型

1. 畫出無交互原型步驟

1、先畫面板標(biāo)題。從默認(rèn)元件庫拖動(dòng)“矩形1”到工作區(qū)合適位置，修改尺寸為375*40，雙擊輸入名稱，左側(cè)對(duì)齊，邊距左側(cè)15，字號(hào)修改為14。

2、再畫對(duì)應(yīng)圖標(biāo)。從默認(rèn)元件庫拖動(dòng)“圖片”到工作區(qū)合適位置，修改尺寸為20*20，雙擊導(dǎo)入本地圖片表示更多(請(qǐng)?zhí)崆皬?a >阿里巴巴矢量圖標(biāo)庫網(wǎng)站搜索并下載)

3、復(fù)制2個(gè)標(biāo)題和圖標(biāo)。

4、點(diǎn)擊第3個(gè)的收起圖標(biāo)，雙擊導(dǎo)入本地圖片表示展開(請(qǐng)?zhí)崆皬?a >阿里巴巴矢量圖標(biāo)庫網(wǎng)站搜索并下載)

5、再畫面板內(nèi)容。從默認(rèn)元件庫拖動(dòng)“矩形1”到工作區(qū)合適位置，修改尺寸為375*200，填充色修改為#F2F2F2。

6、點(diǎn)擊“預(yù)覽”按鈕，然后在瀏覽器中查看原型效果。

2. 畫出有交互原型步驟

7、從默認(rèn)元件庫中拖動(dòng)“中繼器”到工作區(qū)合適位置，命名為“折疊面板”。

8、雙擊進(jìn)入中繼器內(nèi)部，刪除自帶的矩形。選擇面板標(biāo)題&收起圖標(biāo)&面板內(nèi)容，移動(dòng)到中繼器內(nèi)部(0,0)。

9、點(diǎn)擊更多圖標(biāo)，右鍵點(diǎn)擊“交互樣式”，切換到“選中”，勾選“圖片”并導(dǎo)入本地圖片表示展開狀態(tài)(請(qǐng)?zhí)崆皬?a >阿里巴巴矢量圖標(biāo)庫網(wǎng)站搜索并下載)

10、點(diǎn)擊“面板內(nèi)容”元件，命名為“面板內(nèi)容”，右鍵點(diǎn)擊“設(shè)為隱藏”。

11、選擇標(biāo)題&圖標(biāo)，右鍵點(diǎn)擊“組合”。

12、點(diǎn)擊該組合，右側(cè)邊欄切換到“交互”，點(diǎn)擊“新建交互”按鈕，添加事件“單擊時(shí)”。添加動(dòng)作“設(shè)置選中”，目標(biāo)選擇“當(dāng)前元件”，設(shè)置“值”為“切換”，點(diǎn)擊“完成”按鈕。

點(diǎn)擊“+”按鈕，添加動(dòng)作“顯示/隱藏”，目標(biāo)選擇“面板內(nèi)容”，值為“切換”，點(diǎn)擊“更多選項(xiàng)”，選擇“拉動(dòng)元件”，點(diǎn)擊“完成”按鈕。

13、點(diǎn)擊“預(yù)覽”按鈕，然后在瀏覽器中查看原型效果。

四、制作元件庫

畫出該組件的常見交互樣式，添加到自己的Axure元件庫，方便后續(xù)畫移動(dòng)端原型的時(shí)候使用(或者直接從浪子移動(dòng)端組件元件庫拖動(dòng)該組件到畫布中合適位置。根據(jù)需求修改相應(yīng)的面板名稱和面板內(nèi)容)

#專欄作家#

浪子，公眾號(hào)：浪子畫原型(langzipm)。擅長于APP原型設(shè)計(jì)和產(chǎn)品架構(gòu)。

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

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