想创建逼真的相机交互吗?在本教程中,我们将向你展示如何只需几次点击就能将其原型化!
查看演示视频,了解使用相机交互可以创建怎样令人惊叹的原型。
受到启发了吗?跟着下面的教程开始制作你自己的相机交互原型吧。
概览
你需要准备什么
你将学到什么
如何制作相机交互原型
步骤 1:创建相机图层
步骤 2:启动相机
步骤 3:预览!
步骤 4:添加交互
就这样!你的相机交互已准备就绪!
了解更多相机交互内容
探索更多原型课程
在 ProtoPie School 了解更多
你需要准备什么
如果你还没有使用 ProtoPie,那就去免费下载 ProtoPie Studio吧。
接下来,下载下面的 Pie 文件,亲自创建这个原型。
你还需要准备好手机,因为我们会在真实设备上预览交互。如果你还没有安装,请确保已安装 ProtoPie Player 应用,它可以让你直接在设备上预览和测试原型:
你将学到什么
完成本教程后,你将知道如何:
创建相机图层
启动相机
使用Camera Response创建交互功能,例如拍照以及在前后摄像头之间切换
在手机上预览交互
为体验添加动画以提升反馈和手感
完成时间:≤15 分钟
如何制作相机交互原型
步骤 1:创建相机图层
开始吧!首先,在 ProtoPie Studio 中打开你在上方下载的起始 Pie 文件:

相机应用界面的基础部分已为你创建好。
让我们创建一个新的相机图层。
在Media菜单下,选择Camera。
你的鼠标光标会变成十字准星图标。在场景中绘制你的相机图层。
如果你还没做,请将相机图层调整为填满整个屏幕。

你可以拖动控制点来完成,也可以在属性面板中输入数值。
我们希望 UI 组件——
Shutter Button和Switch Cam Button——位于相机图层之上。

将相机图层拖到图层堆栈底部。
步骤 2:启动相机
我们希望场景开始时相机就启动。ProtoPie 让这件事很简单:
在属性检查器中,勾选Auto Start旁边的复选框。
你可以选择使用哪个摄像头。请选择Rear。

步骤 3:预览!
这看起来不太像你的相机所看到的画面,对吧?要看到相机画面,我们需要直接在设备上预览 Pie。

如果你在 Studio 中点击 Preview 按钮,你会看到这个。
这就是ProtoPie Player应用登场的时候!它是一款强大且免费的应用,可让你——或者任何与你共享 Pie 的人——像原生移动体验一样在手机或平板上运行你的原型。
此外,这也是使用手机相机等内置设备传感器的唯一方式。如果你还没做,请使用上方你需要准备什么部分中的链接在设备上安装该应用。
在 Studio 中,点击右上角图标组里的Device。这会显示一个二维码。请保持其可见,我们马上会用到它。

在你的设备上启动ProtoPie Player应用。你会看到这个界面:

点击 Scan QR Code。
扫描你刚才显示的二维码。现在你的 Pie 应该已在手机上运行,场景应由后置摄像头画面填满。
💡 注意:要使其生效,你的手机需要与运行 Studio 的电脑连接到同一 WiFi,或者你的设备需要通过 USB 线连接到运行 Studio 的电脑。如果你的 Pie 无法在设备上启动,请再次确认手机是通过这两种方式之一连接的。
步骤 4:添加交互
现在你已经知道如何在设备上预览 Pie,让我们把 Switch Cam 和 Shutter 按钮连接起来。
添加一个Tap触发器。
选择
Switch Cam Button图层。

添加一个Camera响应。
选择
Camera 1图层

在属性面板中,从 Camera 选择下拉菜单中选择Switch。

再添加一个Tap触发器。
选择
Shutter Button图层。

添加一个Camera响应。
选择
Camera 1图层。

我们希望在点击 Shutter 按钮时拍照。在 ProtoPie 中,这是通过停止相机来实现的。

在属性面板中,在 Action 旁选择 Stop。
为了更新手机上 Player 的预览,请点击 Studio 中的Run图标。这会在你的设备上重新加载 Pie,并反映你的更改。
现在你应该能够在前后摄像头之间切换,并且可以拍照了。
就这样!你的相机交互已准备就绪!
现在你已经知道如何使用Camera Layer对象和Camera Response来构建使用设备内置相机的原型,也学会了如何使用 ProtoPie Player 应用在手机或平板上运行你的精彩作品。做得好!
如果你有兴趣改进体验——目前我们的 Pie 只允许拍一张照片,反馈很少,而且前后摄像头切换还能更流畅——你可以观看这个后续视频,它将在我们刚创建的基础上继续完善,并将其变成一个非常逼真的相机应用演示。
了解更多相机交互内容
探索更多原型课程
如果你一直在跟完整个系列,你会记得上一篇文章讲的是 Voice 和 Speech。这两者在移动设备上都表现得非常出色。看看所有课程,提升你的原型设计技能。
课程 5:如何制作相机交互原型
在 ProtoPie School 了解更多
想精通原型设计并获得结业证书吗?那就前往 ProtoPie School,它完全免费!





