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

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

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

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

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

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

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

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

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

第四步：為“主頁(yè)”添加載入時(shí)用例

設(shè)置OnLoadVariable的值為0

第五步：為“主頁(yè)”添加拖動(dòng)時(shí)用例

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

第六步：為“主頁(yè)”添加拖動(dòng)結(jié)束時(shí)用例

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

每個(gè)用例中的條件和動(dòng)作如下：

1、向右滑動(dòng)“主頁(yè)”未接觸“分界線”

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

動(dòng)作：

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

2、向右滑動(dòng)“主頁(yè)”接觸“分界線”

條件：當(dāng)前元件接觸“分界線”且OnLoadVariable的值為0

動(dòng)作：相對(duì)移動(dòng)“主頁(yè)”回到拖動(dòng)前位置，動(dòng)畫(huà)為線性，時(shí)間為100毫秒。

3、向左滑動(dòng)“主頁(yè)”未接觸“分界線”

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

動(dòng)作：相對(duì)移動(dòng)“主頁(yè)”回到拖動(dòng)前位置，動(dòng)畫(huà)為線性，時(shí)間為100毫秒。

4、向左滑動(dòng)“主頁(yè)”接觸“分界線”

條件：當(dāng)前元件接觸“分界線”且OnLoadVariable的值為1

動(dòng)作：

• 相對(duì)移動(dòng)“主頁(yè)”，x軸移動(dòng)距離為：“菜單”x軸坐標(biāo)-“主頁(yè)”x軸坐標(biāo)，y軸移動(dòng)距離為：0，動(dòng)畫(huà)為線性，時(shí)間為100毫秒。
• 設(shè)置OnLoadVariable的值為0。

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

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

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

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

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