当前位置: 首页 > news >正文

微信小程序云开发教程——墨刀原型工具入门(素材面板)

  

引言

作为一个小白,小北要怎么在短时间内快速学会微信小程序原型设计

时间紧,任务重”,这意味着学习时必须把握微信小程序原型设计中的重点、难点,而非面面俱到。

要在短时间内理解、掌握一个工具的使用,最有效的方式莫过于临摹

看实例视频教程,并跟着教程在实例素材上操作。

基于以上两点,小北根据学长和老师们的推荐,选择了先上入手“墨刀”这个软件!

软件介绍

墨刀是一款在线原型设计与协同工具,借助墨刀,产品经理、设计师、开发、销售、运营及创业者等用户群体,能够搭建为产品原型,演示项目效果。

墨刀同时也是协作平台,项目成员可以协作编辑、审阅 ,不管是产品想法展示,还是向客户收集产品反馈,向投资人进行Demo展示,或是在团队内部协作沟通、项目管理。

 官网下载地址:墨刀 - 在线一体化产品设计协作平台 (modao.cc)https://modao.cc/brandicon-default.png?t=N7T8https://modao.cc/brand

墨刀支持为页面或组件添加交互跳转事件,模拟用户使用产品交互时的真实体验,让你的原型“动”起来。

素材面板

在原型工具的编辑页面中,左侧工具栏设置了「素材面板」功能,能够让您在绘制原型时便捷地使用官方内置素材,一键复用,减少重复工作;以及设定自制/企业设计系统的素材库内容,提高原型绘制的效率和质量。
素材面板共分为组件、图标、图片、页面、母版五部分,布局直观、搜索高效、收藏简单。

视频讲解

素材面板

00:14 全局搜索:在任一素材面板中可以搜索各类素材内容
00:53 素材库:打开素材库管理您的素材
01:06 最近使用:查看和复用已经使用过的组件
01:24 组件面板介绍:管理和使用内置、自制及收藏的组件素材
03:02 图标面板介绍:筛选使用墨刀内置图标素材
03:30 图片面板介绍:上传图片至个人/企业空间并管理
03:49 页面面板介绍:筛选和收藏丰富的页面素材模版

组件素材

在左侧工具栏可以打开组件素材面板,也可以使用快捷键 1 快速打开。
再次点击「组件」按钮,或再次使用快捷键 1 即可关闭面板。

内置组件

在内置组件部分中,顶部有组件素材分类导航,共有常用、表单、导航、图表、多媒体五类组件。点击即可快速定位到对应位置,便捷使用组件。

常用组件包括文字、形状、图片、按钮、占位符等,具体使用教学请查看常用组件

表单、导航、图表等组件封装了完整的交互、支持直接编辑内容,具有高复用性。具体使用教学请查看高级组件

多媒体组件可以帮助您在原型中快速嵌入图片、视频、音频、二维码、地图等。具体使用教学请查看多媒体组件

我的组件

「我的组件」分为自制收藏两类。
如果是企业空间的文件,还会有「企业组件」。企业素材库支持共享组件,可将现有素材一键添加,多人共同维护。
企业素材库是一个企业成员共享的资源库,可以帮助企业成员进行素材的快速复用,提升工作效率以及达成企业产品设计的风格统一。

自制组件

在墨刀,你可以将任何组件(组合)创建为“我的组件”,收录到“自制组件”中,具体创建方式可以查看我的组件
点击右上角的「新建文件夹」按钮,可以创建文件夹,更加清晰地管理组件素材。点击并拖动文件夹栏目,还能够为文件夹排序。

收藏组件

「收藏」栏目中包含了您在墨刀官方素材广场收藏过的组件素材,不限制收藏数量,可以直接预览和使用。
点击右上角的「加号」按钮,会进入发现栏目查看更多官方推荐的组件素材内容,选中并收藏后就会在收藏栏目呈现。
:之前已经收藏(引用)的组件数据,也会合并至新的素材面板中。

发现组件

「发现」部分呈现了丰富的组件素材,并在顶部进行了推荐和分类,能够一键复用素材,减少重复工作,帮助您将更多精力投入到产品创意中。
选择合适的一、二级分类并点击「全部」即可查看符合要求的组件并收藏使用。

图标素材

在左侧工具栏可以打开图标素材面板,也可以使用快捷键 2 快速打开。
图标素材面板有发现图标库两部分。

发现栏目为您推荐了绘制原型时常用的图标内容,方便使用。
图标库栏目包含「收藏」和「素材广场」两部分。素材广场中有风格各异的图标包,点击可以查看详情并收藏。

图标的具体使用方法和技巧可以查看图标组件

图片素材

在左侧工具栏可以打开图片素材面板,也可以使用快捷键 3 快速打开。
图片素材分为我的(企业) 和发现两部分。
您可以从本地上传图片,这些图片将以文件夹的形式呈现,同样文件夹也支持拖拽排序
企业版用户还可以选择将图片素材上传至个人素材库或者企业素材库,分别管理您的图片素材。

点击发现,我们为您提供了人物、动物、美食、风景等7类图片素材,双击或拖拽都能轻松使用,帮助您更佳便捷地完成原型绘制。

页面素材

在左侧工具栏可以打开页面素材面板,也可以使用快捷键 4 快速打开。

页面素材面板中分为发现收藏两部分。
发现栏目中为您整理推荐了部分页面主题,每天我们都会为您更新海量素材以供使用。
点击即可查看相关的页面素材,选择收藏后就能够存放在收藏栏目中,更加便捷地复用整个页面了。

全局搜索

在素材面板四大栏目的顶部,都分别设置了搜索栏
点击可以搜索素材关键字,还能够查看您的搜索历史以及搜索量较高的关键词推荐

搜索结果包含了组件、图标、图片、页面四个类目。点击切换即可快速查看其他类目的素材内容。
您可以通过搜索查找您创建的文件夹、创建的组件、上传的图片,以及墨刀提供的丰富素材内容。

如果未能搜索到您需要的相关内容,可以点击「提交反馈」联系我们优化素材内容及搜索结果。

素材库

在组件、图标、图片、页面四大栏目的右上角,点击「素材库」按钮或是使用快捷键 A 都能打开个人素材库。
素材库的具体使用请查看素材库

最近使用

在组件、图标、图片、页面四大栏目的右上角,点击「最近使用」按钮,即可看到您最近使用过的四类素材内容,更加便捷地进行复用。
同时顶部也能够通过关键词搜索您使用过的符合条件的素材,更加快速地找到您需要的素材内容。

相关文章:

  • 记录一个编译的LLVM 含clang 和 PTX 来支持 HIPIFY 的构建配置
  • Java的控制流语句详解
  • 网络通信另个角度的认识(进程间通信),端口号(为什么要有,和pid的关系,如何封装,和进程的定位原理+对应关系)客户端如何拿到服务端的port
  • 数据结构奇妙旅程之二叉平衡树进阶---AVL树
  • scrapy的基本使用介绍
  • CUDA入门之统一内存
  • 学习大数据,所需要Java基础(9)
  • taosdb快速入门
  • Docker的基本概念和优势
  • 【鸿蒙 HarmonyOS 4.0】常用组件:List/Grid/Tabs
  • 常见doc命令使用
  • 2024蓝桥杯每日一题(二分)
  • torchrun常见参数
  • 【论文阅读】ACM MM 2023 PatchBackdoor:不修改模型的深度神经网络后门攻击
  • 颜色检测python项目
  • 【Leetcode】104. 二叉树的最大深度
  • 4月23日世界读书日 网络营销论坛推荐《正在爆发的营销革命》
  • Akka系列(七):Actor持久化之Akka persistence
  • Git的一些常用操作
  • JavaScript的使用你知道几种?(上)
  • java架构面试锦集:开源框架+并发+数据结构+大企必备面试题
  • nodejs实现webservice问题总结
  • Python实现BT种子转化为磁力链接【实战】
  • select2 取值 遍历 设置默认值
  • sublime配置文件
  • vue 配置sass、scss全局变量
  • vue从创建到完整的饿了么(18)购物车详细信息的展示与删除
  • 阿里云应用高可用服务公测发布
  • 个人博客开发系列:评论功能之GitHub账号OAuth授权
  • 聚类分析——Kmeans
  • 如何在GitHub上创建个人博客
  • 手写双向链表LinkedList的几个常用功能
  • 写代码的正确姿势
  • mysql 慢查询分析工具:pt-query-digest 在mac 上的安装使用 ...
  • 阿里云服务器购买完整流程
  • # 计算机视觉入门
  • ###C语言程序设计-----C语言学习(3)#
  • #define用法
  • #鸿蒙生态创新中心#揭幕仪式在深圳湾科技生态园举行
  • ( 用例图)定义了系统的功能需求,它是从系统的外部看系统功能,并不描述系统内部对功能的具体实现
  • (12)目标检测_SSD基于pytorch搭建代码
  • (13)Hive调优——动态分区导致的小文件问题
  • (env: Windows,mp,1.06.2308310; lib: 3.2.4) uniapp微信小程序
  • (编译到47%失败)to be deleted
  • (剑指Offer)面试题41:和为s的连续正数序列
  • (淘宝无限适配)手机端rem布局详解(转载非原创)
  • (一)基于IDEA的JAVA基础12
  • (一)使用IDEA创建Maven项目和Maven使用入门(配图详解)
  • (转) Face-Resources
  • (轉貼) 蒼井そら挑戰筋肉擂台 (Misc)
  • .bat批处理(十一):替换字符串中包含百分号%的子串
  • .net 8 发布了,试下微软最近强推的MAUI
  • .Net Core 中间件验签
  • .NET Windows:删除文件夹后立即判断,有可能依然存在
  • .Net 路由处理厉害了