网站认领,铁路工程造价信息网,成都 网站建设公司哪家好,中山网站建设文化案例引言
作为一个小白#xff0c;小北要怎么在短时间内快速学会微信小程序原型设计#xff1f;
“时间紧#xff0c;任务重”#xff0c;这意味着学习时必须把握微信小程序原型设计中的重点、难点#xff0c;而非面面俱到。
要在短时间内理解、掌握一个工具的使用#xf…
引言
作为一个小白小北要怎么在短时间内快速学会微信小程序原型设计
“时间紧任务重”这意味着学习时必须把握微信小程序原型设计中的重点、难点而非面面俱到。
要在短时间内理解、掌握一个工具的使用最有效的方式莫过于临摹
看实例视频教程并跟着教程在实例素材上操作。
基于以上两点小北根据学长和老师们的推荐选择了先上入手“墨刀”这个软件 软件介绍
墨刀是一款在线原型设计与协同工具借助墨刀产品经理、设计师、开发、销售、运营及创业者等用户群体能够搭建为产品原型演示项目效果。
墨刀同时也是协作平台项目成员可以协作编辑、审阅 不管是产品想法展示还是向客户收集产品反馈向投资人进行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 srchttps://cdn.modao.cc/v7/230728-57-10.png width400px/
7、退出组件状态编辑页面
选择组件状态编辑页面中的【退出】按钮即可返回至文件编辑页面。 删除组件状态
在动态组件编辑页面中选中组件某个状态点击其右侧的【垃圾箱】图样按钮即可删除该组件状态。 动态组件转为静态组件
双击进入动态组件将多余的状态删除只剩下一个状态退出编辑即可将原动态组件更改为静态组件。
动态组件连接其它页面
动态组件要连接其它页面需要在动态组件编辑区内为相应状态内的元素添加事件跳转至其他页面。
