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

引言

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

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

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

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

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

软件介绍

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

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

官网下载地址：墨刀 - 在线一体化产品设计协作平台 (modao.cc)https://modao.cc/brandhttps://modao.cc/brand

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

素材面板

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

视频讲解

素材面板

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

组件素材

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

内置组件

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

常用组件包括文字、形状、图片、按钮、占位符等，具体使用教学请查看常用组件
。
表单、导航、图表等组件封装了完整的交互、支持直接编辑内容，具有高复用性。具体使用教学请查看高级组件
。
多媒体组件可以帮助您在原型中快速嵌入图片、视频、音频、二维码、地图等。具体使用教学请查看多媒体组件。

我的组件

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

自制组件

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

收藏组件

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

发现组件

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

图标素材

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

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

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

图片素材

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