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

引言

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

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

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

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

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

软件介绍

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

墨刀同时也是协作平台,项目成员可以协作编辑、审阅 ,不管是产品想法展示,还是向客户收集产品反馈,向投资人进行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+鼠标点选

选中被盖住的组件

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

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

相关推荐
井眼3 小时前
微信小程序-prettier 格式化
微信小程序·小程序
冰帝海岸4 小时前
01-spring security认证笔记
java·笔记·spring
小二·5 小时前
java基础面试题笔记(基础篇)
java·笔记·python
qq_17448285756 小时前
springboot基于微信小程序的旧衣回收系统的设计与实现
spring boot·后端·微信小程序
wqq_9922502776 小时前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序
wusong9998 小时前
mongoDB回顾笔记(一)
数据库·笔记·mongodb
猫爪笔记8 小时前
前端:HTML (学习笔记)【1】
前端·笔记·学习·html
Resurgence038 小时前
【计组笔记】习题
笔记
pq113_68 小时前
ftdi_sio应用学习笔记 3 - GPIO
笔记·学习·ftdi_sio
爱米的前端小笔记9 小时前
前端八股自学笔记分享—页面布局(二)
前端·笔记·学习·面试·求职招聘