微信小程序云开发教程——墨刀原型工具入门(文件设置+编辑组件)

引言

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

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

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

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

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

软件介绍

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

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

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

一、文件设置

修改原型尺寸和机型

在编辑区内点击画板外的空白区域,右侧文件设置界面选择文件尺寸即可在下拉框中修改尺寸或机型。
注:自定义尺寸文件才支持自定义修改原型的长宽。

隐藏网格线

不选中页面画板及组件时,您可以在编辑区右侧的外观设置面板中隐藏网格线。

设置文件图标/启动页/封面图

选中文件,点击「更多」-「更换图标」,即可上传替换文件启动图标以及文件启动页封面。

注:启动图目前只能替换,无法删除。

收藏文件

选中文件,点击「更多」-「收藏」,即可收藏此文件。

锁定文件

在工作台中选中文件,点击「更多」,选择「锁定」文件,即可锁定文件。

锁定的文件,可以在文件组顶栏切换到 「已锁定」中查看。

二、编辑组件

添加组件

在编辑区右侧的状态栏,素材板块内有「组件」、「图标」、「图片」和「页面」,您可以点击打开对应的素材面板,添加您需要的组件。

重命名组件

选中组件后,可以在右侧的外观设置面板中双击组件名称修改组件命名。

显示/隐藏组件

选中组件,可以在编辑区右侧的外观设置面板中点击「小眼睛」图标设置显示或隐藏组件。

注: 隐藏组件后需要在左侧元素栏选中元素后才可以显示组件。

您也可以使用快捷方式操作:

显示与隐藏组件快捷键 - Ctrl+Shift+H

锁定/解锁组件

选中组件后,可以在页面编辑区顶部工具栏或者右侧的外观设置面板中点击「小锁」图标来锁定或解锁组件。

组合/打散组件

多选组件后,可以在编辑区的顶部工具栏中对它们进行打散和组合。

可以使用快捷方式操作:

组合 Mac:Cmd+G (group) Windows:Ctrl+G(group)
取消组合 Mac:Command+Shift+G(Group) Windows:Ctrl+Shift+G(Group)

使用智能间距整理组件

使用智能间距整理组件,可以快速整理两个及以上的元素之间的排列。还能一键调整间距。

智能排列中的元素不需要相同的大小,如果元素之间的间距不相同,可以先使用整理功能重新排列元素的统一间距。

整理功能

目前整理功能的逻辑是根据最左侧元素与下一个元素的间距为准,调整其他元素之间的间距。

选中元素后,将鼠标hover到选区上将会出现一个整理图标。
1.整理水平间距

2.整理垂直间距

3.整理水平&垂直间距

调整元素之间的间距

将元素整理好后,可以拖拽每个元素之间垂直或水平间距来进行调整。方法很简单,

  • 1.将鼠标悬停在元素之间的线条上,
  • 2.光标所在位置会出现一个方向箭头(上下方向调整垂直间距,左右方向调整水平间距),单击并拖动鼠标即可调整间距。

向上减少元素间的垂直间距,向下则增加元素间的垂直间距 向左减少元素间的水平间距,向右则增加元素间的水平间距

等比例缩放组件

选中组件或组合后,按住shift拖动四角端点即可等比例缩放。

注:目前文字组件不支持等比例缩放,需要单独修改。

智能填充

墨刀支持对组件进行文字和图片内容智能填充 ,不必费心搜集、上传资源内容,点击即可生成随机内容,有效提高工作效率,丰富您的原型文件。
打开智能填充面板的方式有两个:

入口1:【更多->编辑->智能填充】

入口2:【选中包含文本/图片元素->右键->智能填充】 选中某个组件,点击鼠标右键,即可看到【智能填充】选项。

智能填充面板打开后会常驻在工作区,可以在面板右上角选择关闭。

已有组件的内容填充

在画布中选中能够承载文字/图片 的组件,并在智能填充面板上点击需要的内容分类,即可随机生成内容。

如果首次填充的内容无法满足您的需求,可以多次点击 某个分类进行切换。

在文字填充板块,点击分类右侧的【更多】按钮,能够筛选填充的具体形式,如「姓名」可筛选「中文、英文、昵称」等。根据您的使用记录,会自动记录保存设置项,方便后续直接使用。

针对墨刀内置的部分特殊组件 ,如下拉菜单、单选/多选等 ,使用智能填充后会自动随机填充所有选项内容,表格/单独选择表格里的内容 也能够使用智能填充;轮播图组件则会随机填充N张图片(根据目前的图片数量确定)。

内容直接置入

不选中任何组件时双击智能填充中的资源分类,即可直接将文字/图片内容作为一个新的组件置入页面,继续点击也能够切换填充的具体内容。

使用属性复制编辑组件

属性复制功能可以理解为格式刷,可以快速复制某一元素的属性粘贴到另一元素中。比如我们想要把画布内矩形的属性直接复制到圆形内,可以通过快捷键Ctrl+C(Mac: conmand+C)复制后,再Ctrl+alt+V(Mac:conmand+option+V)粘贴属性即可。

或者可以选中元素后右键选择复制属性,在另一元素中右键选择粘贴属性。

修改组件颜色

在原型中可以使用颜色选择器 对各类组件进行颜色设置,接下来将对其中的功能进行逐一讲解。

您也可以点击查看视频演示:渐变色教程视频

颜色填充共有纯色填充、线性渐变、径向渐变 三种形式,其中线性渐变和径向渐变仅支持对图形、图标、卡片批注填充时 使用。

填充模式可以在颜色选择器顶部进行切换。

纯色填充

纯色填充即只支持一种颜色值

可以通过色板直接选取颜色,还可以在色板右上角切换至【色彩空间】自由取色,或是使用颜色代码获取想要的颜色,并能够修改颜色的透明度。

单击左侧的「吸管 」按钮可以进行吸色,支持吸取工作区的任意颜色。

也可以直接使用预设的颜色,点击色板下拉按钮,有多种配色可供使用,也能在这里查看【我的收藏】。

小帖士:不用调起颜色面板,选中元素后,可以直接使用快捷键I(i)启动吸色功能,为选中元素填色, 不要太方便!

线性渐变

线性渐变,就是多个颜色以直线的路径进行渐变,可以修改这条直线上任意点的颜色让其进行自然过渡。

1.选择进入线性渐变后,顶部会出现一个滑动色条 ,色条上的按钮为渐变中的颜色。

2.显示为蓝色 的按钮即为当前选中的按钮,可以左右拖拽以更改这一颜色在渐变中的范围,也能够修改颜色。

3.在色条任意位置点击,即能添加按钮。

4.点击色条右侧的按钮,可以进行反向渐变

5.选中组件,并打开颜色选择器后,能看到组件中出现渐变路径直线,可以拖拽两端,调整路径长度、位置、角度,也可以拖拽路径上的渐变色点,调整其位置。

在预设颜色中,也提供了线性渐变的色库,可以直接使用。

径向渐变

径向渐变,即多个颜色以圆形 从圆心到边缘扩散的渐变效果,可以修改圆(或椭圆)的半径、偏心率与圆心的位置控制渐变效果,可以实现类似光源的视觉效果。

选中组件,并打开颜色选择器后,能看到组件中出现渐变路径,共有三点可以调整渐变的路径效果,它们分别确定圆(或椭圆)的圆心位置、半径及偏心率。

在预设颜色中,也提供了径向渐变的色库,可以直接使用。

我的收藏

当需要多次复用某一颜色时,可以打开颜色选择器,切换至【我的收藏】,点击右侧的「加号」按钮,即可将当前的颜色(包括渐变色)保存,跨文件也能复用哦~

调整图片组件

当需要对图片组件的模糊、亮度、饱和度等内容进行调整时,选中图片,右上角工具栏会出现图片相关设置栏。

点击设置栏,在【滤镜】内就能对图片组件进行相关设置。

快捷键

快速复制组件的快捷操作:Alt/Option+鼠标拖拽

全选当前页面所有组件的快捷键:
Windows: Ctrl+A all)
Mac:
Command+A (all)
多选组件的快捷操作有两种:
1、S +鼠标拖动 框选
2、Shift+鼠标点选

选中被盖住的组件

如果组件被盖住了,可以在要选择的组件位置点击鼠标右键,然后在弹出的面板中点击「选择图层」,选择相应的组件。

同时,您可以在编辑区左侧的元素列表中直接选中组件。

相关推荐
刘婉晴1 小时前
【信息安全工程师备考笔记】第三章 密码学基本理论
笔记·安全·密码学
thinkQuadratic2 小时前
微信小程序动态设置高度,添加动画等常用操作
微信小程序·小程序
中科三方2 小时前
APP和小程序需要注册域名吗?(国科云)
小程序·apache
晓数3 小时前
【硬核干货】JetBrains AI Assistant 干货笔记
人工智能·笔记·jetbrains·ai assistant
我的golang之路果然有问题3 小时前
速成GO访问sql,个人笔记
经验分享·笔记·后端·sql·golang·go·database
lwewan3 小时前
26考研——存储系统(3)
c语言·笔记·考研
搞机小能手4 小时前
六个能够白嫖学习资料的网站
笔记·学习·分类
nongcunqq4 小时前
爬虫练习 js 逆向
笔记·爬虫
幽络源小助理5 小时前
微信小程序文章管理系统开发实现
java·微信小程序·springboot
汐汐咯5 小时前
终端运行java出现???
笔记