MenuToggle Menu

图层

ProtoPie上图层的编辑方法同其他设计工具十分相似。添加矩形、圆形、星形和多边形等矢量图层后，可以调整其尺寸和位置。要创建形状时，请单击画布中的任意位置并拖拽，并触按形状边界的任意位置，根据需要自由放大或缩小形状。

图层属性

位置

图层的横纵坐标

大小

图层的宽度和高度

旋转

图层旋转的角度

锚点

图层的位置、大小、角度等发生变化时的基准点

角数

设置五角形或多边形时的角数

内边角率

调整五角形内部点与其中心之间的距离，并以百分比表示。

圆角

ProtoPie支持对矩形图层的每个圆角设置不同的曲率。设置各角的半径时，可单击相应的圆角图标并填写半径值。

透明度

如果图层的透明度为0%时，则指定给该图层的触发将变为无效。

填充 - 单一颜色

使用十六进制颜色代码设置颜色填充。当颜色的明度为0%时，指定给该层的触发器仍然有效。

填充 - 图片

选择图片作为填充，填充类型有三种：充满、适合和拉伸。

边框

图层的边框，边框位置有三种：内边、中间、外边。

阴影

向图层添加阴影并调整阴影的颜色以及其它相关值

热区范围

可以将被点触的范围设置为超过图层本身的大小

可触碰低层

使图片下面的其他图片可被触发

用做遮罩层

矢量图层独有的属性，其他图层只显示和遮罩图层重叠的部分。

layer properties

SVG图层

导入基于矢量图形格式的SVG文件可使图像实现无损放大/缩小。
将SVG转换为形状图层（Shape layer）后，颜色、边框、阴影等属性即可改变。

  • 不支持渐变等由两个或更多颜色构成的SVG。
  • 如果SVG文件中带有ProtoPie尚未支持的属性，则"转换为形状"按钮有可能被禁用。（当前支持SVG的属性有path、ellipse、polyline、polygon、rect、circle、line 等）
[object Object]

粘贴SVG代码

从Sketch、Figma、Adobe XD、Zeplin等工具中复制SVG代码后粘贴到ProtoPie中也是一种可行的方式。以下是一段SVG代码的例子。

SVG代码范例

<svg width="175px" height="166px" viewBox="0 0 175 166" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
    <polygon id="Star" fill="#2212D4" points="87.5 137.25 33.7176494 165.525055 43.9891644 105.637527 0.478328759 63.224945 60.6088247 54.4874725 87.5 0 114.391175 54.4874725 174.521671 63.224945 131.010836 105.637527 141.282351 165.525055"></polygon>
  </g>
</svg>
[object Object]
[object Object]

视频图层

ProtoPie支持播放100MB及以下的mp4（H.264）视频文件。

音量

调整视频层音量的属性

自动播放

在原型运行时自动播放一个视频文件

循环

使播放的视频文件得以循环播放

video lottie audio layer property

Lottie 图层

使用Lottie将Adobe After Effects文件渲染成JSON属性文件后可被导入原型。
关于Lottie的详细介绍请参考Lottie官网。

自动播放

在原型运行时自动播放一个Lottie文件

循环

使演示的Lottie文件得以循环播放

video lottie audio layer property

音频图层

ProtoPie支持播放wav、 mp3以及m4a音频文件

音量

调整视频层音量的属性

自动播放

在原型运行时自动开始播放一个音频文件

循环

使播放的音频文件得以循环播放

video lottie audio layer property

相机图层

相机图层是能调用智能设备摄像头的图层，不仅可以自动打开摄像头还能扫描二维码。（了解更多）在不支持相机功能的设备中（如Studio的预览窗、网页等）会显示为黑色图层。

文本图层

用户可以在ProtoPie上直接输入文字。

字体

可以从中选择一个字体系列。如果选择的是系统默认，字体则显示为电脑系统上的默认字体。

加粗

可以从中选择一个字体系列。如果选择的是系统默认，字体则显示为电脑系统上的默认字体。

字体大小

可以按像素值来调节字体大小。

对齐方式

可以按水平对齐和/或垂直对齐来调整文字的对齐方式。

调整文本大小

文本图层可以根据内容长度自动调整行宽或行高，也可以固定行宽行高

字符间距

可以设置字符间的间距。

行高

可以设置多行文字显示时每行的行高数值。

Text Property

字体缺失

电脑中没有安装PIE中使用的字体时，界面右下端将提示字体缺失。
在字体缺失栏中，可以设置代替字体。

[object Object]

输入图层

可以使用键盘直接输入内容的图层。

1. 文本选项

在此可以输入需要预置显示的文字。

2. 占位符

可在输入图层中放置占位符。占位符的颜色可以设为与输入文字不同的颜色。

3. 键盘类型

为智能设备而预设的键盘类型，可以选择"文本"、“URL”、“E-mail”、“数字”、“字符密码”以及“数字密码”型的输入键盘。

4. 回车键

在手机键盘上，换行键上的文字可以修改为：

  • 前往
  • 下一步
  • 发送
  • 搜索
  • 完成
  • 换行(输入方式为多行输入时，才可见的选项)
5. 键盘主题

在iOS/iPadOS中键盘主题可以被设为浅灰色主题或石墨色主题。

6. 光标消失选项

“点击回车键”或“点击输入图层以外的区域”均可让输入图层的光标消失从而使键盘得以收起/隐藏，这两个选项默认均是开启的。

Input Layer Property

背景模糊图层

支持以下模糊效果： 安卓和iOS系统的3种默认效果（深色、浅色和超浅色）；以及网页和iOS13和iOS13以上版本的另外10种模糊效果。

响应式设置

响应式设置可以应用到图层上。当图层所属的母层大小被改变时，图层的大小和位置也会根据其响应式设置而自动改变。由反应动作触发的母层大小改变也可以通过响应式设置影响到下面的子层。

左侧为响应式定位设置。即图层的上、下、左、右边距可以分别被设为固定的边距值，这意味着图层可以相对于其母层的四周来决定要维持的位置。

右侧为响应式尺寸设置。即图层的宽度和高度可以分别被设为固定的值，这意味着无论其母层的宽度和高度如何改变，图层本身的大小都不变。

constraints

右上角停靠

通过设置固定的宽度值和高度值以及固定的上边距和右边距，蓝色图层与母层右上角的相对位置将保持不变。且此时即使母层的大小被改变，蓝色图层的大小也不会跟着改变。

[object Object]
pin to top right corner property

居中

通过设置固定的宽度和高度值而不设置四周的边距值，蓝色图层将在母层中保持居中的位置，即使母层大小被改变，蓝色图层也始终居中。

[object Object]
center position property

固定边距

通过设置固定的左右边距值，蓝色图层的大小将在母层大小被改变的同时也相应改变，以维持其左右两边与母层左右两边之间的边距固定不变。

[object Object]
fixed spacing property
Back To Top