這么常見的設(shè)計元素，不好好鉆研鉆研怎么行呢？

抽屜列表實在是太常見了，一般做后臺設(shè)計的產(chǎn)品經(jīng)理特別熟悉，因為基本大多數(shù)后臺的菜單都是以抽屜列表的形式存在著，因為抽屜列表可伸縮，能夠存放很多菜單項。

還有一個是大家特別熟悉的，那就是QQ的好友列表。這章就教大家如何使用axure原型工具設(shè)計抽屜列表。

第一步：拖拉擺放好第一個抽屜的相關(guān)控件

1、一個180X360的白底黑框長矩形；

2、一個180X30的灰底黑框矩形，命名為“文章管理”，放在長矩形的上方；

3、一個180X59的動態(tài)面板，命名為“文章管理子列表”，緊挨“文章管理”下方放好，初始狀態(tài)設(shè)置為隱藏；

4、“文章管理子列表”的state1面板狀態(tài)中豎列放置兩個180X30的白底黑框矩形，文字分別設(shè)置為“新建文章”和“文章列表”。

第二步：為“文章管理”添加一個鼠標點擊時用例

用例中的條件設(shè)為“文章管理子列表”可見等于false；

用例中的動作設(shè)為顯示“文章管理子列表”，動畫為向下滑動，時間為200毫秒，更多選項為推動元件，方向為下方，動畫為線性，時間為200毫秒。

第三步：為“文章管理”再添加一個鼠標點擊時用例

用例中的條件設(shè)為“文章管理子列表”可見等于true；

用例中的動作設(shè)為隱藏“文章管理子列表”，動畫為向上滑動，時間為200毫秒，更多選項為拉動元件，方向為下方，動畫為線性，時間為200毫秒。

第四步：復(fù)制粘貼其他列表項

“文章管理”以及“文章管理子列表”為一個列表項，通過復(fù)制再建兩個列表項并按層次擺放好。

其中一個列表項分別改名為“用戶管理”和“用戶管理子列表”，“用戶管理子列表”里面兩個矩形的文字分別為“新建用戶”和“用戶列表”。

另一個列表項分別改名為“多媒體管理”和“多媒體管理子列表”，“多媒體管理子列表”里面兩個矩形的文字分別為“圖片”和“視頻”。

再有，每個交互用例也要做相對應(yīng)的修改。

OK，點擊預(yù)覽，并點擊選擇列表即可以看到效果。

作者：維度。個人博客：http://weidublog.com/

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