起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識Axure教程：制作APP折疊面板
編輯導讀：移動端PM需要學會畫出常見移動端組件并且制作成自己的移動端元件庫，后續(xù)畫原型的時候可以節(jié)省很多重復工作時間。本文仔細介紹了用Axure實現(xiàn)折疊面板效果的步驟與注意要點，希望對你有所啟發(fā)。
折疊面板是移動端APP中常見的組件之一，有時候也稱之為手風琴。咱們先看下Axure畫出的折疊面板原型效果，然后再對該組件進行詳細講解。
演示地址：https://6eq1iq.axshare.com/#g=1
一、組件介紹
二、實際案例
三、畫出原型
1. 畫出無交互原型步驟
1、先畫面板標題。從默認元件庫拖動“矩形1”到工作區(qū)合適位置，修改尺寸為375*40，雙擊輸入名稱，左側對齊，邊距左側15，字號修改為14。
2、再畫對應圖標。從默認元件庫拖動“圖片”到工作區(qū)合適位置，修改尺寸為20*20，雙擊導入本地圖片表示更多(請?zhí)崆皬?a >阿里巴巴矢量圖標庫網站搜索并下載)
3、復制2個標題和圖標。
4、點擊第3個的收起圖標，雙擊導入本地圖片表示展開(請?zhí)崆皬?a >阿里巴巴矢量圖標庫網站搜索并下載)
5、再畫面板內容。從默認元件庫拖動“矩形1”到工作區(qū)合適位置，修改尺寸為375*200，填充色修改為#F2F2F2。
6、點擊“預覽”按鈕，然后在瀏覽器中查看原型效果。
2. 畫出有交互原型步驟
7、從默認元件庫中拖動“中繼器”到工作區(qū)合適位置，命名為“折疊面板”。
8、雙擊進入中繼器內部，刪除自帶的矩形。選擇面板標題&收起圖標&面板內容，移動到中繼器內部(0,0)。
9、點擊更多圖標，右鍵點擊“交互樣式”，切換到“選中”，勾選“圖片”并導入本地圖片表示展開狀態(tài)(請?zhí)崆皬?a >阿里巴巴矢量圖標庫網站搜索并下載)
10、點擊“面板內容”元件，命名為“面板內容”，右鍵點擊“設為隱藏”。
11、選擇標題&圖標，右鍵點擊“組合”。
12、點擊該組合，右側邊欄切換到“交互”，點擊“新建交互”按鈕，添加事件“單擊時”。添加動作“設置選中”，目標選擇“當前元件”，設置“值”為“切換”，點擊“完成”按鈕。
點擊“+”按鈕，添加動作“顯示/隱藏”，目標選擇“面板內容”，值為“切換”，點擊“更多選項”，選擇“拉動元件”，點擊“完成”按鈕。
13、點擊“預覽”按鈕，然后在瀏覽器中查看原型效果。
四、制作元件庫
畫出該組件的常見交互樣式，添加到自己的Axure元件庫，方便后續(xù)畫移動端原型的時候使用(或者直接從浪子移動端組件元件庫拖動該組件到畫布中合適位置。根據需求修改相應的面板名稱和面板內容)
#專欄作家#
浪子，公眾號：浪子畫原型(langzipm)。擅長于APP原型設計和產品架構。
本文由 @浪子 原創(chuàng)發(fā)布于人人都是產品經理。未經許可，禁止轉載。
題圖來自Unsplash，基于CC0協(xié)議。
謝謝，學到了
請問2.8的操作里，“選擇面板標題&收起圖標&面板內容，移動到中繼器內部(0,0)”，那個“選擇”操作，是如何做的，謝啦？我沒有能夠理解
然后又是如何移入的呢？
這里的選擇是指按住Ctrl然后就能同時選擇這3個圖標，mac系統(tǒng)是command鍵。
選擇這3個圖標后，Ctrl+X剪切，然后雙擊中繼器進入內部，然后Ctrl+V粘貼，然后確定位置是否是(0,0)。
如果還是不會，那就加我微信吧langzipm
剪切或復制然后粘貼，這個會，哈哈哈哈。謝啦謝啦
我最開始以為是有什么功能按鈕，能夠選擇不同的原件進行“選擇”及“移入”之類的操作，結果找半天沒有找到
基操啊，不過確實需要稍微轉一下彎兒，下次我描述更詳細點。
我想改面板名稱的話是三個一起改的，怎么樣能分別改呢？
使用中繼器的每項加載時，設置不同的名稱。你可以看我之前寫過的APP列表頁這個文章。