使用Axure制作出一個左側(cè)二級切換效果具體操作流程

相信使用Axure的用戶還是蠻多的，不過你們曉得Axure如何制作出一個左側(cè)二級切換效果呢?下文就為你們帶來了使用Axure制作出一個左側(cè)二級切換效果的具體操作流程。

一、基礎準備工作
1、首先大家通過Axure的部件--矩形，建立如圖所示的圖樣。(基礎的我就不太細說了)，底色圖：灰色，w350/h500;三個彩色的矩形：w300/h40;分別命名為1,2,3，無色的三個矩形：w300/h100;分別對應彩色的命名11,22,33，調(diào)整一個彩色的矩形對應一個白色的矩形，排版如圖所示;

2、將11,22,33設置為隱藏狀態(tài) ，設置方法：選擇圖形，在右側(cè)的“部件屬性和樣式”，選擇hidden(隱藏) 。

3、調(diào)整位置，選擇2和22兩個矩形，向上移動，至1的下邊緣和2的上邊緣對齊。同樣移動3和33，與2的最下邊緣對齊，如圖所示

二、用例的設置方法
【使用Axure制作出一個左側(cè)二級切換效果具體操作流程】1、選擇藍色的矩形(也就是1);在“部件交互和注釋”-“鼠標單擊時”，右鍵“新增用例”;彈出用例編輯器

2、在用例編輯器，選擇"部件“-切換;在最右側(cè)“第四步配置動作”，選中"11",可見性選擇“切換” ，并在”更多選項“中選擇”展開部件“;選擇“22”，可見性選擇“隱藏” ，選中“收起部件”，其他默認;
選擇“33”，可見性選擇“隱藏”，選中“收起部件”，其他默認;點擊確認;設置完成后，如圖所示

3、選擇黃色矩形2，在“部件交互和注釋”-“鼠標單擊時” ，右鍵“新增用例”;彈出用例編輯器;在用例編輯器，選擇"部件“-切換;在最右側(cè)“第四步配置動作” ，選中"22",可見性選擇“切換”，并在”更多選項“中選擇”展開部件“;選擇“11” ，可見性選擇“隱藏”，選中“收起部件”，其他默認;選擇“33”，可見性選擇“隱藏”，選中“收起部件”，其他默認;點擊確認，設置完成后，如圖所示

4、選擇紅色矩形3 ，在“部件交互和注釋”-“鼠標單擊時”，右鍵“新增用例”;彈出用例編輯器;在用例編輯器，選擇"部件“-切換;在最右側(cè)“第四步配置動作”，選中"33",可見性選擇“切換”，并在”更多選項“中選擇”展開部件“;選擇“11”，可見性選擇“隱藏”，選中“收起部件”，其他默認;選擇“22” ，可見性選擇“隱藏”，選中“收起部件”，其他默認;點擊確認，設置完成后，如圖所示