?

引言

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

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

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

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

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

軟件介紹

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

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

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

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

動態組件

動態組件的作用

動態組件就是為一個組件設置多個狀態，通過交互事件使組件動起來，實現頁面內的交互動畫。

動態組件和頁面狀態比較

動態組件和頁面狀態的動畫效果實際上都是用狀態實現的。兩者的區別在于：

1、頁面狀態做的動畫效果會影響整個頁面內的組件，動態組件做的動畫效果只會影響動態組件內部的組件。

2、頁面狀態基于文件頁面完成，不太方便保存復用，動態組件與文件頁面是分離的，可以保存到組件庫中作為組件素材復用。

由于以上兩點差異，建議刀友們在做交互動效的時候優先選擇用動態組件來實現。

添加組件狀態

組件“動”起來的前提是需要有多個不同的狀態，所以制作動態組件的第一步便是添加組件狀態： 在頁面中創建一個組件，選中組件后點擊右側欄中的【外觀】——【+ 添加組件狀態】即可進入組件狀態編輯頁面。

進入組件狀態編輯頁面后，組件將自動變為“動態組件”，同時新增一個組件狀態。

1、編輯組件的不同狀態：

在組件狀態窗口可通過點擊不同的組件狀態對其進行編輯。

2、增添組件狀態：

在組件狀態編輯頁面中，點擊【+ 新建】即可添加空白組件狀態。

3、復制組件狀態：

在組件狀態編輯頁面中，選中組件某個狀態，點擊【復制】即可添加空白組件狀態。

將鼠標置于某個組件狀態上，點擊下圖按鈕，也可以實現復制該狀態。

4、組件狀態添加交互事件：

在組件狀態編輯頁的右欄，可以為組件的不同狀態添加事件，動態組件的具體操作方法可以點擊參考頁面交互教程進行具體操作。

動態組件還可以實現更多動態效果，例如彈窗、底部導航、下拉菜單等都可以用動態組件功能實現。具體視頻演示操作請看交互效果案例演示。微信小程序云開發教程——墨刀原型工具入門（頁面交互+交互案例教程）-CSDN博客https://blog.csdn.net/Zhiyilang/article/details/136413725?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22136413725%22%2C%22source%22%3A%22Zhiyilang%22%7D

tips：如果在切換頁面狀態或組件狀態時，不想每次重復設置無效果或智能動畫，可在左上角點擊偏好設置-默認動效。

5、設置組件的默認狀態

編輯過動態組件后，若想更改動態組件的默認狀態，只需選中動態組件，在文件編輯區右欄中的【外觀】——【狀態】處可更改動態組件的默認狀態。

6、動態組件預覽

在組件編輯頁面中，點擊下圖中按鈕，即可快速預覽該動態組件效果。

在文件編輯頁面中，選中動態組件，并點擊其右上方的【播放】按鈕，也可以預覽該動態組件的效果。

img src="https://cdn.modao.cc/v7/230728-57-10.png"?width="400px"/>

7、退出組件狀態編輯頁面：

選擇組件狀態編輯頁面中的【退出】按鈕，即可返回至文件編輯頁面。

刪除組件狀態

在動態組件編輯頁面中，選中組件某個狀態，點擊其右側的【垃圾箱】圖樣按鈕，即可刪除該組件狀態。

動態組件轉為靜態組件

雙擊進入動態組件，將多余的狀態刪除，只剩下一個狀態，退出編輯即可將原動態組件更改為靜態組件。

動態組件連接其它頁面

動態組件要連接其它頁面，需要在動態組件編輯區內，為相應狀態內的元素添加事件跳轉至其他頁面。