?

引言

作為一個小白，小北要怎么在短時間內快速學會微信小程序原型設計？

“時間緊，任務重”，這意味著學習時必須把握微信小程序原型設計中的重點、難點，而非面面俱到。

要在短時間內理解、掌握一個工具的使用，最有效的方式莫過于臨摹：

看實例視頻教程，并跟著教程在實例素材上操作。

基于以上兩點，小北根據學長和老師們的推薦，選擇了先上入手“墨刀”這個軟件！

軟件介紹

墨刀是一款在線原型設計與協同工具，借助墨刀，產品經理、設計師、開發、銷售、運營及創業者等用戶群體，能夠搭建為產品原型，演示項目效果。

墨刀同時也是協作平臺，項目成員可以協作編輯、審閱 ，不管是產品想法展示，還是向客戶收集產品反饋，向投資人進行Demo展示，或是在團隊內部協作溝通、項目管理。

?官網下載地址：墨刀 - 在線一體化產品設計協作平臺 (modao.cc)https://modao.cc/

?

墨刀支持為頁面或組件添加交互跳轉事件，模擬用戶使用產品交互時的真實體驗，讓你的原型“動”起來。

創建交互事件

要添加一個交互事件，需要設置觸發事件以及行為。

1、新建事件

有兩種操作方法為原型添加交互事件。
1.選中需要添加交互的頁面/元素組件，點擊右側的設置面板-事件-添加事件。

?

2.選中需要添加交互的元素組件，拖動左側的【閃電】圖標，即可快速創建事件。
-拖動至左側頁面列表中的某一頁面，默認快速創建【單擊切換頁面】事件。
-拖動至目標元素組件，會彈出行為菜單，選擇需要的行為即可快速創建事件；如果當前狀態僅支持一種行為，則會直接創建事件。

-拖動至編輯區左上角的【返回來源頁面】菜單，可快速創建返回鏈接，運行時點擊即可回到當前頁面的前一頁。

?

2、選擇觸發動作

選擇觸發動作，可使交互事件生效。

?

3、選擇事件行為

包括跳轉頁面、跳轉超鏈接、切換頁面/組件狀態、滾動到和顯示/隱藏。觸發事件后原型會發生對應的交互行為。

?

設置好以上幾點后，還需進一步選擇產生事件的目標元素，和具體的事件發生方式。這樣在預覽時就能進行高保真的交互體驗了。

?

使用tips： 同一元素的同類型事件支持多個行為。如單擊一個組件，可切換多個動態組件的狀態。

部分同類行為可能會產生沖突導致事件失效，請檢查后重新設置。

交互事件介紹

1、跳轉頁面/超鏈接

跳轉頁面：支持跳轉至該原型文件內的其他頁面。
跳轉超鏈接：支持跳轉至其他網頁網站。

2、切換頁面/組件狀態

若頁面或組件具有多個狀態，支持進行狀態切換。
ps：僅支持當前頁面或當前頁面內的動態組件。

?

3、滾動到

觸發【滾動到】事件后，當前頁面可以滾動至所選目標元素位置。

使用【滾動到】交互效果時，頁面內畫布需拉長至超過當前原型設定屏幕長度。

?

添加事件后，目標元素頂部會生成滾動參考線。可以使用鼠標上下拖動調整具體位置，也可在右側面板設置【偏移目標】數值進行微調。

?

4、顯示/隱藏

【顯示/隱藏】事件可以快速切換目標元素的顯示狀態。
在右側事件面板，可選【顯示/隱藏/切換】三種類型，其中切換是指多次觸發可切換顯示/隱藏狀態。

?

您也可以使用動態組件來實現顯示/隱藏效果。具體方法請查看小北的動態組件微信小程序云開發教程——墨刀原型工具入門（動態組件）-CSDN博客https://blog.csdn.net/Zhiyilang/article/details/136413594?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22136413594%22%2C%22source%22%3A%22Zhiyilang%22%7D

5、定時器

【定時器】可定時觸發事件，注意：定時器僅能觸發全局事件，需先在圖層中選中頁面。

隨后在右側欄中選擇【全局事件】——【定時器】，即可創建定時器事件。

在事件編輯欄中選定事件及目標元素后，可選擇事件的動效以及定時器的時長。

動態組件的交互事件

墨刀支持為動態組件中的元素添加交互事件，如切換頁面狀態、其他組件狀態等。能夠實現豐富的動態效果。

刪除交互事件

有兩種操作方法刪除已添加的交互事件。
1.選中已添加交互的頁面/元素組件，點擊右側的設置面板-事件-刪除按鈕。

2.當顯示事件鏈接線時，選中已添加交互的頁面/元素組件，點擊鏈接線上的【剪刀】按鈕，即可快速刪除事件。

事件相關偏好設置

在左上角【更多】下拉菜單-偏好設置，或【事件】面板-設置，可以打開偏好設置彈窗。

與事件相關的設置包括：
1.常用-鏈接：可以設置添加事件后，頁面中的標識方式，可選擇不顯示/只顯示角標/顯示線+角標。

2.動效：可設置切換頁面/組件狀態時的默認動效為無動效/智能動畫效果。