Axure教程 | 輕量級的后臺原型框架

5 評論 19030 瀏覽 155 收藏 5 分鐘

本文主要是一個Axure教程,教你如何制作一個輕量級的后臺原型框架,教程總共分為六步,看完教程的大致思路,再結合源文件做一些測試,相信很快就能掌握繪制后臺原型的方法。

教你制作一個輕量級的后臺原型框架,先看看這一期有些啥:

先睹為快:【點我預覽】

教程開始:

第一步:規劃后臺的布局

把后臺分為三個部分:

  1. 頂部導航;
  2. 側面導航;
  3. 內容區域。

第二步:思考使用合適功能進行展示

第三步:制作頂部導航

1. 創建母版頁,順便創建好側面導航等母版頁面

2. 繪制頂部導航

需要將頂部導航的寬設置為瀏覽器的寬,高度可以固定高度。

第四步:制作左側導航

1.在側面導航母版中,繪制多個文本框,并設置為一個選項組,設定選中和懸停的樣式

2. 為所有文本框添加點擊事件:點擊的時候選中該文本框

給同一組矩形框定義了一個選項組,即可實現點擊效果的互斥,實現菜單選中效果。

3. 給母版菜單添加鼠標單擊的自定義事件,方便在其引用的頁面做菜單交互

第五步:創建頁面,使用母版中的導航,并創建內容區域

1. 創建頁面,創建內聯框架,指定內聯框架到默認菜單頁面

2. 設定內聯框架的最大尺寸,以適配屏幕,并設定滾動條和隱藏邊框?

第六步:為菜單添加交互,使內聯框架中的內容按需跳轉

以上步驟即可完成一個輕量級的后臺菜單,它足夠的簡單和靈活,內容區域可以根據內容的實際大小顯示滾動條。使用母版定義導航,足夠靈活,后續調整只需要調整母版和自定義事件。

看完教程的大致思路,再結合源文件做一些測試,相信很快就能掌握繪制后臺原型的方法。

內容下載地址:

作者鏈接:https://pan.baidu.com/s/1JmMRffzw96tTGatYjnjGfg 密碼: tivs

在線預覽:https://o8mk4j.axshare.com

 

本文由 @陳張良 原創發布于人人都是產品經理?,未經許可,禁止轉載。

題圖來自 Pexels,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 您好請問錄制的動態交互預覽gif用什么軟件實現的

    回復
  2. 在 給母版菜單添加鼠標單擊的自定義事件,方便在其引用的頁面做菜單交互 中:設置menu1 menu2 是什么意思?

    來自江蘇 回復