1. 首頁 > 生活經驗 > >

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

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

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

一、基礎準備工作
1、首先大家通過Axure的部件--矩形，建立如圖所示的圖樣 。(基礎的我就不太細說了)，底色圖：灰色，w350/h500;三個彩色的矩形：w300/h40;分別命名為1,2,3，無色的三個矩形：w300/h100;分別對應彩色的命名11,22,33，調整一個彩色的矩形對應一個白色的矩形，排版如圖所示;
使用Axure制作出一個左側二級切換效果具體操作流程

2、將11,22,33設置為隱藏狀態 ， 設置方法：選擇圖形，在右側的“部件屬性和樣式”，選擇hidden(隱藏) 。
使用Axure制作出一個左側二級切換效果具體操作流程

3、調整位置，選擇2和22兩個矩形，向上移動，至1的下邊緣和2的上邊緣對齊 。同樣移動3和33，與2的最下邊緣對齊 ， 如圖所示
使用Axure制作出一個左側二級切換效果具體操作流程

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

2、在用例編輯器，選擇"部件“-切換;在最右側“第四步 配置動作”，選中"11",可見性選擇“切換” ， 并在”更多選項“中選擇”展開部件“;選擇“22”，可見性選擇“隱藏” ， 選中“收起部件”，其他默認;
選擇“33”，可見性選擇“隱藏”，選中“收起部件”，其他默認;點擊確認;設置完成后 ， 如圖所示
使用Axure制作出一個左側二級切換效果具體操作流程

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

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

5、點擊F5預覽或者生產原型文件 。建議用IE查閱 。完成后如圖，大家點擊試試吧 。
使用Axure制作出一個左側二級切換效果具體操作流程

按照上文為你們分享的使用Axure制作出一個左側二級切換效果的具體操作流程 ， 你們是不是都學會操作的方法啦!

相關經驗推薦