设置面板

墨刀内的设置面板分为两类,一种是设置组件外观样式的组件设置面板,另一种是控制页面跳转的链接设置面板。两种面板位于工作区中部,当选中某组件时才会触发面板的开启或关闭。

组件设置面板

组件设置面板分为外观、文字、尺寸、素材库以及图片上传五个功能面板,控制组件外观样式的改变。

组件设置面板默认为开启状态,用户主动关闭某面板后,下次选中组件时,该面板为关闭状态。若想再次开启面板,点击工具栏下方对应按钮或面板快捷键即可。(如下图)

1. 外观面板(快捷键“O”)

在外观设置面板内可以设置组件的颜色、边框样式、阴影以及透明度。直接粘贴16进制颜色代码或打开取色器选取颜色,完成颜色设置。

自定义主题:除了直接使用墨刀内置主题颜色,您还可以自定义主题。

  • 添加主题:将配置好的颜色及样式添加到「自定义主题」处,就可以跨项目使用了。

  • 应用主题:选中组件后直接点击某自定义主题(或使用快捷键Shift+1~0)即可快捷应用主题。

  • 更新主题:选中某主题,修改外观面板部分参数后,点击「更新主题」按钮,完成更新。

2. 文字面板(快捷键“T”)

在文字面板内可以设置文本外观如文本颜色、字号、行高、对齐方式,可使用双击或直接在面板编辑框内输入文字的方式编辑文本信息。

3. 尺寸面板(快捷键“R”)

尺寸面板中可设置组件位置(X、Y坐标)、组件尺寸、旋转角度、圆角半径以及组件初始动效。其中有两个常被用到的功能需要大家知晓:「固定位置」以及「组件的显示隐藏」。

运行时固定位置:勾选此选项时,预览模式下所选组件将不跟随页面滚动,且组件默认置顶,其他组件将无法覆盖它。该功能适用于制作 FAB 效果。

当前状态可见(快捷键“V”):此选项控制可组件的显示或隐藏。默认为勾选状态,取消勾选后组件将被隐藏。适用于制作不同页面状态下组件交互效果。

4. 素材库面板

墨刀内有两个素材库,一是图标素材库(图标组件、按钮组件可开启),二是图片素材库(快捷键“A”开启)。

图标素材库(快捷键“I”):图标组件专属素材库,选中图标后点击工具栏上的星星按钮可以开启素材库面板,使用图标搜索功能可以快速定位图标素材。

图片素材库(快捷键“A”):个人上传至墨刀的图片素材都将在此面板展示,具体的使用方法及功能介绍请看下一课。

5. 图片上传面板

  • 图片上传:拖动图片到面板下方区域即可完成图片上传;点击上传区域将打开图片素材库面板。

  • 图片裁切:支持对图片进行简单的形状裁切(不支持Firefox浏览器)。

裁切方法如下:

1.选择裁切形状:选中图片,打开图片上传面板(快捷键U),选择形状

2.选择裁切区域:调整图片上蓝色锚点位置(只有矩形及圆形支持整体移动裁切形状)

  • 移动外侧锚点位置可以调整截图区域

  • 拖拽裁切中心锚点可以整体移动裁切形状

3.确定裁切:鼠标点击外部空白区域即可确认裁切

4.重置裁切:点击图片上传面板上的「移除图片裁切」按钮,将恢复图片原始效果

*注:图片裁切功能只有Chrome浏览器及官方客户端可使用。

6. 图片滤镜面板

图片滤镜面板在图片上传面板旁,可对当前选中图片样式进行调节,如调整亮度、对比度等基本图片属性,亦可添加模糊效果。

链接设置面板

1. 页面链接

使用墨刀可以非常方便地创建页面间链接,墨刀独创的拖拽链接方式,让页面间的链接关系清晰呈现眼前,要创建页面间链接,只需要选中组件,然后拖动组件右侧的小圆圈到目标页面或状态就可以了,如下图:

创建好链接之后,我们会看到链接设置面板:

链接面板包含5个部分:手势、切换动画、动效时长、定时器以及相关跳转设置,下面我们来依次介绍这5个部分。

手势:

对应的手势操作可以触发页面跳转,可供选择的手势有7种:点击、上下左右滑动、长按、双击。

全局手势有8种手势可以选择:点按、上下左右滑动、长按、双击以及摇一摇。

最后一个钟表图标的手势为定时器,选择定时器后可设置页面自动跳转时间。

切换动画:

页面切换动画选择,共有15种特效可供选择,如果您不确定需要哪种效果,可以直接将鼠标移到动画上面预览切换效果。

动效时长:

设置不同的时长可直接影响动画的切换速度;如无特殊需要可不做设置。

定时器:

可以设定当前链接的自动跳转时间,到达时间后,即使用户没有任何操作,应用也会自动跳转到目标页面,适合制作轮播动画等等。

保留两侧浮动页面:

设置左菜单后,若想保持左菜单浮动状态,在对菜单页进行链接时选择「保留两侧浮动页面」即可。

重置目标页为初始状态:

此功能默认处于选中状态,若取消选择则代表不重置目标跳转页的初始状态。

举个例子:页面A为长页面,A中页面下部某组件链接至B页面;B中按钮设置链接返回A,并取消勾选重置目标页状态;页面返回后,A展示会跳转之前的内容或状态。

2. 状态链接

状态链接与页面链接不同点在于新增了「延迟」设置选项,延迟时间是从手势触发时算起,到达设定时间后页面才会发生跳转。

results matching ""

    No results matching ""