由于移動端的屏幕比較小，所以在APP的設(shè)計當中，菜單的設(shè)計尤其關(guān)鍵，比如有下方固定菜單，上方吸附菜單，點聚式菜單等等。側(cè)滑式菜單則是APP設(shè)計中最常見的菜單設(shè)計方式之一，它具有不占屏幕，順手勢，可容納內(nèi)容多等優(yōu)點。這一章就教大家如何使用axure原型工具制作側(cè)滑菜單。

第一步：拖拉擺放好整體布局控件

整體布局控件只需要兩個元件，一個是手機外形殼，命名為“手機殼”，另一個是動態(tài)面板，命名為“屏幕”。

第二步：拖拉擺放好“屏幕”state1面板狀態(tài)中的內(nèi)容

“屏幕”內(nèi)容主要包括3部分

1. 一個動態(tài)面板，命名為“主頁”，置于頂層。（大小等于“屏幕”大小，放在“屏幕”正中間）
2. 一個元件組合，命名為“菜單”，置于中層；（這個組合主要由一些水平線和一些文本標簽組成，組合高度等于“屏幕”高度，放在“屏幕”的左側(cè)）

3、一條垂直線元件，命名為“分界線”，置于底層。（高度等于“屏幕”高度，放在“屏幕”正中間）

第三步：拖拉擺放好“主頁”state1面板狀態(tài)中的內(nèi)容

其實也很簡單，只需一個大的灰色矩形和三個小的白色矩形即可，抽象設(shè)計下就行了，畢竟這一章側(cè)滑菜單才是重點。

第四步：為“主頁”添加載入時用例

設(shè)置OnLoadVariable的值為0

第五步：為“主頁”添加拖動時用例

用例中添加一個動作，即移動當前元件，移動方式為水平拖動，無動畫，左側(cè)邊界小于等于“菜單”的寬度，大于等于0。

第六步：為“主頁”添加拖動結(jié)束時用例

總共添加4個用例，分別對應(yīng)向右滑動“主頁”未接觸“分界線”、向右滑動“主頁”接觸“分界線”、向左滑動“主頁”未接觸“分界線”、向左滑動“主頁”接觸“分界線”4種情況。

每個用例中的條件和動作如下：

1、向右滑動“主頁”未接觸“分界線”

條件：當前元件未接觸“分界線”且OnLoadVariable的值為0

動作：

• 相對移動“主頁”，x軸移動距離為：“菜單”x軸坐標+“菜單”寬度-“主頁”x軸坐標，y軸移動距離為：0，動畫為線性，時間為100毫秒。
• 設(shè)置OnLoadVariable的值為1。

2、向右滑動“主頁”接觸“分界線”

條件：當前元件接觸“分界線”且OnLoadVariable的值為0

動作：相對移動“主頁”回到拖動前位置，動畫為線性，時間為100毫秒。

3、向左滑動“主頁”未接觸“分界線”

條件：當前元件未接觸“分界線”且OnLoadVariable的值為1

動作：相對移動“主頁”回到拖動前位置，動畫為線性，時間為100毫秒。

4、向左滑動“主頁”接觸“分界線”

條件：當前元件接觸“分界線”且OnLoadVariable的值為1

動作：

• 相對移動“主頁”，x軸移動距離為：“菜單”x軸坐標-“主頁”x軸坐標，y軸移動距離為：0，動畫為線性，時間為100毫秒。
• 設(shè)置OnLoadVariable的值為0。

好了，點擊預(yù)覽，然后左右拖動屏幕即可看到效果。

效果圖：axure原型設(shè)計之側(cè)滑菜單

附件下載：轉(zhuǎn)盤抽獎rp文件

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

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