图层

ProtoPie上图层的编辑方法同其他设计工具十分相似。添加矩形、椭圆等矢量图层后,可以调整其尺寸和位置,因此用户可以很快上手使用此部分功能。

图层属性

位置

屏幕上图层的横纵坐标

大小

图层的宽度和高度

旋转

图层按顺时针方向旋转的角度

锚点

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

圆角

矩形图层各角的圆弧度

透明度

图层的透明度,填充度图层填充色的透明度。

边框

向图层添加边框并调整边框位置以及颜色

阴影

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

触发区域

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

可触碰低层

级图层对于触屏上的触发动作不做反应,触发动作会穿透给被遮挡的图层。

用做遮罩层

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

SVG图层

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

  • 不支持渐变等由两个或更多颜色构成的SVG。

  • 如果SVG文件中带有ProtoPie尚未支持的属性,则"转换为形状"按钮有可能被禁用。(当前支持SVG的属性有path、ellipse、polyline、polygon、rect、circle、line 等)

粘贴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>

视频图层

ProtoPie支持播放20MB及以下的mp4(H.264)视频文件。

自动播放

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

循环

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

Lottie 图层

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

自动播放

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

循环

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

音频图层

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

自动播放

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

循环

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

相机图层

相机图层是能调用智能设备上的摄像头的图层。在不支持相机功能的设备中(如Studio的预览窗、网页等)会显示为黑色图层。

自动开启

场景开始时相机自动启动。

相机【前置镜头】

启动手机正面的摄像头。

相机【后置镜头】

启动手机背面的摄像头。

文字图层

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

字体

ProtoPie支持字体设置。选择"系统默认"时,将显示为演示设备的默认字体。

大小

可调节文本大小

字重

可调节字体粗细

对齐

可调节字体左、右、上、下对齐

间距

可调节字行间的距离

字体缺失

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

输入图层

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

文字选项: 默认文本

在输入前需要在图层中有默认已输入内容时,可以在这里设定。

输入提示

输入图层支持设置输入提示。并且输入提示文字的颜色可以单独设置。

键盘选项:类型

移动端键盘有文本、URL、邮箱、数字、文本密码、数字密码这几种类型。

键盘选项:回车

移动端键盘的回车键可以根据需要设置不同口令:前往、下一个、发送、搜索、完成。开启自动光标消失之后,再点击回车键时,光标会自动对准"输入图层"。

键盘选项:键盘风格

仅对iOS键盘,可以根据设计需要选择浅灰色或石墨色键盘。

iOS 背景虚化

在iOS13及更高版本(含网页)中可以使用13种背景虚化效果。(在iOS12及更低版本中只能使用3种默认的背景虚化效果。)

默认效果
  • Extra Light(超亮)

  • Light(明亮)

  • Dark(灰暗)

材质效果(明亮主题与灰暗主题)
  • Ultra Thin Material(超薄材质)

  • Thin Material(薄材质)

  • Material(一般材质)

  • Thick Material(厚材质)

  • Chrome Material(金属材质)

响应式设置

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

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

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

右上角停靠

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

居中

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

固定边距

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