Axure原型設計案例教程:如何善用母版,讓你的工作事半功倍?

0 評論 865 瀏覽 0 收藏 12 分鐘

在Axure中,母版是非常常用和非常實用的一個功能之一,能幫我們節省不少時間精力,提高畫原型的效率。這篇文章,作者系統梳理了母版的相關知識,供大家參考。

一、為什么要使用母版

母版可以用來創建重復使用的各類原型設計元素,并對其進行全局管理,是整個項目中重復使用的元件容器。

母版常用于創建頁頭、頁尾、導航、模板和廣告等。你可以在任何頁面輕松的使用事先創建好的母版,而不必再次辛苦制作或復制粘貼,這就是母版帶給我們的便利,你可以在母版的版面對它們進行統一管理。

對母版進行的任何修改結果,修改后的結果都會同步到引用的頁面中。

一個頁面可以同時使用多個母版。

當每個頁面中有大量相同重復的元件時,使用母版能夠節省時間,極大的提高我們的工作效率。

先看下我們在Axure里使用母版做的高保真交互原型文件案例圖片示例如下:

Axure原型web端演示地址:https://odej85.axshare.com

Axure原型移動端演示地址:https://u4k7qj.axshare.com

二、如何制作母版

1. 創建母版

頂部導航

方法一:在母版面板中點擊“新增母版”,為新建母版命名,雙擊母版進入編輯界面。

方法二:在設計區域中首先選中要轉換為母版的元件,然后點擊右鍵,選擇“轉換為母版”,在彈出框的對話框中設置母版名稱,命名完成后,還可以設置母版的拖放行為,下文中會介紹拖放行為。

創建母版

2. 使用操作

使用母版面板對其進行管理

在母版面板中,可以對母版進行添加、刪除、排序等管理。

  • 重命名:雙擊母版或者右鍵選擇“重命名”。
  • 刪除母版:右鍵母版,在彈出的菜單列表中點擊刪除。
  • 排序:直接拖拽母版或右鍵,在彈出菜單中選擇移動,在右側展開的菜單欄中點擊上移或下移。

母版面板還可以添加文件夾,與站點地圖類似,母版還可以新增子母版。

母版的操作

3. 設計區域添加母版

直接拖拽母版至右側設計區域可以將母版添加到單個頁面中;

右鍵點擊母版,選擇“新增到頁面”,在彈出的“新增母版到頁面”對話框中選擇想要添加母版的頁面,可以實現母版的批量添加;

右鍵點擊母版,選擇“從頁面刪除”,可以在頁面中批量刪除母版。

母版的添加和刪除

母版上的遮罩:通常,添加的母版上會覆蓋一層粉紅色遮罩,這是為了讓我們能夠在設計元素中快速區分哪些是母版。

如果你不喜歡這種區分方式,可以通過點擊菜單中的“視圖>遮罩”,取消粉紅色的遮罩效果。

同樣的操作,在這里你也可以取消掉動態面板、中繼器、圖片熱區這些元件容器的遮罩效果,見下圖。

取消遮罩

三、母版類型

按照母版的拖放行為,可以將母版分為以下3類:拖放到指定位置、鎖定母版位置、從母版脫離。

要改變母版類型,右鍵點擊母版?!斑x擇拖放行為”,在彈出的菜單中進行選擇。

對模板類型的修改,只會影響到當前要拖放到設計區域的母版。

  • 任何位置:拖拽至設計區域,可以放置在設計區域中的任意位置
  • 鎖定母版位置:拖拽至設計區域,固定在設計區域的某一位置,不可以隨意移動
  • 從母版脫離:拖拽至設計區域,即表示脫離了母版,在此處進行任何修改,均不會影響原母版內容

母版的拖放行為

四、母版觸發事件

1. 觸發事件說明

觸發事件是創建在母版中,只有母版才具有觸發事件,允許為母版的每個不同實例添加不同的交互。

當你想讓母版內元件的操作影響到母版外元件時,也可以使用母版觸發事件。

觸發事件的效果是由母版內元件觸發的。

例如,在母版中添加了3個按鈕,并分別添加了鼠標單擊事件,點擊3個按鈕時,影響著母版外一個文本的顯示內容。

這樣做的好處是這里的按鈕是一個母版,對其操作維護比較方便,可以應用到其它需要有類似效果的頁面。雖然達到這種效果的方法有很多,但母版觸發事件的強大之處在于可以多次重復使用,達到一勞永逸的目的。

關于觸發事件的一些重點說明如下:

觸發事件只能用于母版內的元件創建 一個母版可以擁有多個觸發事件 創建觸發事件的步驟:

  1. 在母版的元件上創建觸發事件。
  2. 將母版拖拽到頁面的設計區域中,選中該母版,在元件交互面板中使用觸發事件創建交互來影響當前頁面的元素。

2. 創建和使用觸發事件

雙擊母版進入編輯狀態,選中母版要觸發的觸發元件,然后在元件交互面板中添加想要觸發的觸發事件的事件,在彈出的用例編輯器中第二步,添加“觸發事件”動作,然后在第四步配置動作中設定“觸發事件”的名稱,最后勾選事件名稱前的復選框,點擊確定,完成觸發事件的創建。

此外,還可以雙擊母版,進入編輯狀態;然后在菜單欄中的布局>管理母版觸發事件,對觸發事件進行管理。

觸發事件的添加和管理

創建完觸發事件后,將母版拖放到任意設計區域中,選中該母版,在元件交互面板中就可以看到剛剛添加的觸發事件。

觸發事件的操作方法和平時操作其他事件是一樣的。

3. 觸發事件使用案例

為了幫助大家進一步理解什么是母版的觸發事件及其重要性。

在這個案例中將演示如何通過母版的觸發事件影響著文本顯示的內容。

step1:拖動3個按鈕至設計區域,并在3個按鈕內分別輸入文字“發現”、“關注”和“消息”,拖動一個文本標簽至設計區域,文本內容默認輸入“這里顯示按鈕的文字”。

準備元件

step2:選中3個按鈕,右鍵設置為任意位置母版。雙擊母版,進入編輯狀態,為按鈕創建單擊事件,在事件編輯框中添加最下方的“觸發事件”,在配置動作中命名,這里我就偷懶,直接在系統默認名稱后加上數字編號“NewEvent1”,選中事件名稱前面的復選框,點擊確定;同樣的操作,為另外兩個按鈕添加觸發事件,事件名稱分別為“NewEvent2”和“NewEvent3”。

設置觸發事件

step3:返回到頁面當中,選中母版為剛才添加的觸發事件““NewEvent1”添加用例,在用例編輯面板中,添加設置文本動作,在配置動作中選擇名為text的文本,設置文本的值為按鈕1的文字,點擊fx進入編輯文本彈框界面,在設置這個值之前需要將按鈕1的文字定義為局部變量LVAR1,所以在配置動作中文本的值為局部變量LVAR1;按照同樣的操作,為另外兩個觸發事件添加用例,需要提醒的是,設置文本時,文本的值分別設置為其按鈕上的元件文字。

為文本配置賦值動作

為按鈕文字定義局部變量

step4:至此,所有的設置已經完成,按下F5,預覽測試下效果。

Axure8.0版本中稱之為“觸發事件”,也有一些中文版本翻譯為“引發事件”,Axure7.0版本稱之為“自定義事件”,雖然叫法不一樣,但表達的意思是一致的。

本文由 @PM_墨兮 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
海報
評論
評論請登錄
  1. 目前還沒評論,等你發揮!