抽屜列表實在是太常見了凫海，一般做后臺設(shè)計的產(chǎn)品經(jīng)理特別熟悉芥喇，因為基本大多數(shù)后臺的菜單都是以抽屜列表的形式存在著，因為抽屜列表可伸縮壹店，能夠存放很多菜單項绑警。還有一個是大家特別熟悉的求泰，那就是QQ的好友列表。既然這么常見的設(shè)計元素计盒，不好好鉆研鉆研怎么行呢渴频？哈哈哈，這章就教大家如何使用axure原型工具設(shè)計抽屜列表北启。
第一步：拖拉擺放好第一個抽屜的相關(guān)控件
1卜朗、一個180X360的白底黑框長矩形；
2咕村、一個180X30的灰底黑框矩形场钉，命名為“文章管理”，放在長矩形的上方培廓；
3惹悄、一個180X59的動態(tài)面板，命名為“文章管理子列表”肩钠，緊挨“文章管理”下方放好泣港，初始狀態(tài)設(shè)置為隱藏；
4价匠、“文章管理子列表”的state1面板狀態(tài)中豎列放置兩個180X30的白底黑框矩形当纱，文字分別設(shè)置為“新建文章”和“文章列表”。
第二步：為“文章管理”添加一個鼠標(biāo)點擊時用例
用例中的條件設(shè)為“文章管理子列表”可見等于false踩窖；
用例中的動作設(shè)為顯示“文章管理子列表”坡氯，動畫為向下滑動，時間為200毫秒，更多選項為推動元件箫柳，方向為下方手形，動畫為線性，時間為200毫秒悯恍。
第三步：為“文章管理”再添加一個鼠標(biāo)點擊時用例
用例中的條件設(shè)為“文章管理子列表”可見等于true库糠；
用例中的動作設(shè)為隱藏“文章管理子列表”，動畫為向上滑動涮毫，時間為200毫秒瞬欧，更多選項為拉動元件，方向為下方罢防，動畫為線性艘虎，時間為200毫秒。
第四步：復(fù)制粘貼其他列表項
“文章管理”以及“文章管理子列表”為一個列表項咒吐，通過復(fù)制再建兩個列表項并按層次擺放好野建。
其中一個列表項分別改名為“用戶管理”和“用戶管理子列表”，“用戶管理子列表”里面兩個矩形的文字分別為“新建用戶”和“用戶列表”恬叹。
另一個列表項分別改名為“多媒體管理”和“多媒體管理子列表”贬墩，“多媒體管理子列表”里面兩個矩形的文字分別為“圖片”和“視頻”。
再有妄呕，每個交互用例也要做相對應(yīng)的修改。
OK嗽测，點擊預(yù)覽绪励，并點擊選擇列表即可以看到效果。同時也可以隨時關(guān)注我的個人博客：http://weidublog.com唠粥，因為工作過程中有很多這些axure原型設(shè)計小技巧的例子疏魏，所以我會堅持分享下去，希望對大家有幫助晤愧，你們對我的關(guān)注就是我的動力大莫。
附件下載：抽屜列表rp文件
作者：維度
轉(zhuǎn)載請注明出處：http://weidublog.com/index.php/2017/03/24/246/
