Axure教程|原型設(shè)計之抽屜列表

3 評論 19717 瀏覽 72 收藏 4 分鐘

這么常見的設(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)載

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 謝謝分享

    來自湖北 回復(fù)
  2. 倒是放一個預(yù)覽地址或源文件啊…

    來自廣東 回復(fù)
    1. 有放了,被審核員刪了,暈死,直接到我的博客看吧,http://weidublog.com/

      來自廣東 回復(fù)