「原型設計」善用母版,讓你的設計效率加倍

「原型設計」善用母版,讓你的設計效率加倍

繪製原型

母版基礎知識講解

01 為什麼要使用母版

母版可以用來創建重複使用的各類原型設計元素,並對其進行全局管理,是整個項目中重複使用的元件容器。母版常用於創建頁頭、頁尾、導航、模板和廣告等。你可以在任何頁面輕鬆的使用事先創建好的母版,而不必再次辛苦製作或複製粘貼,這就是母版帶給我們的便利,你可以在母版的版面對它們進行統一管理。對母版進行的任何修改結果,修改後的結果都會同步到引用的頁面中。一個頁面可以同時使用多個母版。當每個頁面中有大量相同重複的元件時,使用母版能夠節省時間,極大的提高我們的工作效率。

「原型設計」善用母版,讓你的設計效率加倍

頂部導航

02 創建母版

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

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

「原型設計」善用母版,讓你的設計效率加倍

創建母版

03 母版的使用操作

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

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

重命名:雙擊母版或者右鍵選擇“重命名”。

刪除母版:右鍵母版,在彈出的菜單列表中點擊刪除。

排序:直接拖拽母版或右鍵,在彈出菜單中選擇移動,在右側展開的菜單欄中點擊上移或下移。

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

「原型設計」善用母版,讓你的設計效率加倍

母版操作

設計區域添加母版

直接拖拽母版至右側設計區域可以將母版添加到單個頁面中;右鍵點擊母版,選擇“新增到頁面”,在彈出的“新增母版到頁面”對話框中選擇想要添加母版的頁面,可以實現母版的批量添加;右鍵點擊母版,選擇“從頁面刪除”,可以在頁面中批量刪除母版。

「原型設計」善用母版,讓你的設計效率加倍

母版的添加和刪除

母版上的遮罩:通常,添加的母版上會覆蓋一層粉紅色遮罩,這是為了讓我們能夠在設計元素中快速區分哪些是母版。如果你不喜歡這種區分方式,可以通過點擊菜單中的“視圖>遮罩”,取消粉紅色的遮罩效果。同樣的操作,在這裡你也可以取消掉動態面板、中繼器、圖片熱區這些元件容器的遮罩效果,見下圖-5。

「原型設計」善用母版,讓你的設計效率加倍

取消遮罩

04母版類型

按照母版的拖放行為,可以將母版分為以下3類:拖放到指定位置、鎖定母版位置、從母版脫離。要改變母版類型,右鍵點擊母版。“選擇拖放行為”,在彈出的菜單中進行選擇。對模板類型的修改,只會影響到當前要拖放到設計區域的母版。

任何位置:拖拽至設計區域,可以放置在設計區域中的任意位置

鎖定母版位置:拖拽至設計區域,固定在設計區域的某一位置,不可以隨意移動

從母版脫離:拖拽至設計區域,即表示脫離了母版,在此處進行任何修改,均不會影響原母版內容

「原型設計」善用母版,讓你的設計效率加倍

母版的拖放行為


母版觸發事件

01觸發事件說明

觸發事件是創建在母版中,只有母版才具有觸發事件,允許為母版的每個不同實例添加不同的交互。當你想讓母版內元件的操作影響到母版外元件時,也可以使用母版觸發事件。觸發事件的效果是由母版內元件觸發的。

例如,在母版中添加了3個按鈕,並分別添加了鼠標單擊事件,點擊3個按鈕時,影響著母版外一個文本的顯示內容。這樣做的好處是這裡的按鈕是一個母版,對其操作維護比較方便,可以應用到其它需要有類似效果的頁面。雖然達到這種效果的方法有很多,但母版觸發事件的強大之處在於可以多次重複使用,達到一勞永逸的目的。關於觸發事件的一些重點說明如下:

觸發事件只能用於母版內的元件創建

一個母版可以擁有多個觸發事件

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

02創建和使用觸發事件

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

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

「原型設計」善用母版,讓你的設計效率加倍

觸發時間的添加和管理

創建完觸發事件後,將母版拖放到任意設計區域中,選中該母版,在元件交互面板中就可以看到剛剛添加的觸發事件。觸發事件的操作方法和平時操作其他事件是一樣的。


觸發事件使用案例

為了幫助大家進一步理解什麼是母版的觸發事件及其重要性。在這個案例中將演示如何通過母版的觸發事件影響著文本顯示的內容。

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

「原型設計」善用母版,讓你的設計效率加倍

準備元件

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

「原型設計」善用母版,讓你的設計效率加倍

設置觸發事件

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

「原型設計」善用母版,讓你的設計效率加倍

為文本賦值

「原型設計」善用母版,讓你的設計效率加倍

為按鈕文字定義局部變量

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

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


分享到:


相關文章: