ProtoPie AI 已上线——现已进入 Beta 版。了解更多

ProtoPie AI 已上线——现已进入 Beta 版。了解更多

ProtoPie 学校

8

阅读时间

第5课:如何制作相机交互原型

使用 ProtoPie 的“原生传感器”支持功能,创建简单但逼真的相机交互。

杰夫·克拉克, 用户体验设计师与 ProtoPie 培训师

想创建逼真的相机交互吗?在本教程中,我们将向你展示如何只需几次点击就能将其原型化!

查看演示视频,了解使用相机交互可以创建怎样令人惊叹的原型。

视频

受到启发了吗?跟着下面的教程开始制作你自己的相机交互原型吧。

概览

  • 你需要准备什么

  • 你将学到什么

  • 如何制作相机交互原型

  • 步骤 1:创建相机图层

  • 步骤 2:启动相机

  • 步骤 3:预览!

  • 步骤 4:添加交互

  • 就这样!你的相机交互已准备就绪!

  • 了解更多相机交互内容

  • 探索更多原型课程

  • 在 ProtoPie School 了解更多

你需要准备什么

如果你还没有使用 ProtoPie,那就去免费下载 ProtoPie Studio吧。

接下来,下载下面的 Pie 文件,亲自创建这个原型。

[相机交互 Pie 文件]

你还需要准备好手机,因为我们会在真实设备上预览交互。如果你还没有安装,请确保已安装 ProtoPie Player 应用,它可以让你直接在设备上预览和测试原型:

你将学到什么

完成本教程后,你将知道如何:

  • 创建相机图层

  • 启动相机

  • 使用Camera Response创建交互功能,例如拍照以及在前后摄像头之间切换

  • 在手机上预览交互

  • 为体验添加动画以提升反馈和手感

完成时间:≤15 分钟

如何制作相机交互原型

步骤 1:创建相机图层

开始吧!首先,在 ProtoPie Studio 中打开你在上方下载的起始 Pie 文件:


camera app prototype


相机应用界面的基础部分已为你创建好。

让我们创建一个新的相机图层。

  • Media菜单下,选择Camera

  • 你的鼠标光标会变成十字准星图标。在场景中绘制你的相机图层。

  • 如果你还没做,请将相机图层调整为填满整个屏幕。


resize layer


你可以拖动控制点来完成,也可以在属性面板中输入数值。

  • 我们希望 UI 组件——Shutter ButtonSwitch Cam Button——位于相机图层之上。


layer panel


将相机图层拖到图层堆栈底部。

步骤 2:启动相机

我们希望场景开始时相机就启动。ProtoPie 让这件事很简单:

  • 在属性检查器中,勾选Auto Start旁边的复选框。

  • 你可以选择使用哪个摄像头。请选择Rear


auto start

步骤 3:预览!

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


preview


如果你在 Studio 中点击 Preview 按钮,你会看到这个。

这就是ProtoPie Player应用登场的时候!它是一款强大且免费的应用,可让你——或者任何与你共享 Pie 的人——像原生移动体验一样在手机或平板上运行你的原型。

此外,这也是使用手机相机等内置设备传感器的唯一方式。如果你还没做,请使用上方你需要准备什么部分中的链接在设备上安装该应用。

  • 在 Studio 中,点击右上角图标组里的Device。这会显示一个二维码。请保持其可见,我们马上会用到它。


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


protopie player


点击 Scan QR Code。

  • 扫描你刚才显示的二维码。现在你的 Pie 应该已在手机上运行,场景应由后置摄像头画面填满。

💡 注意:要使其生效,你的手机需要与运行 Studio 的电脑连接到同一 WiFi,或者你的设备需要通过 USB 线连接到运行 Studio 的电脑。如果你的 Pie 无法在设备上启动,请再次确认手机是通过这两种方式之一连接的。

步骤 4:添加交互

现在你已经知道如何在设备上预览 Pie,让我们把 Switch Cam 和 Shutter 按钮连接起来。

  • 添加一个Tap触发器。

  • 选择Switch Cam Button图层。


switch cam layer
  • 添加一个Camera响应。

  • 选择Camera 1图层


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


switch layer
  • 再添加一个Tap触发器。

  • 选择Shutter Button图层。


shutter button
  • 添加一个Camera响应。

  • 选择Camera 1图层。


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


stop camera layer


在属性面板中,在 Action 旁选择 Stop。

  • 为了更新手机上 Player 的预览,请点击 Studio 中的Run图标。这会在你的设备上重新加载 Pie,并反映你的更改。

现在你应该能够在前后摄像头之间切换,并且可以拍照了。

就这样!你的相机交互已准备就绪!

现在你已经知道如何使用Camera Layer对象和Camera Response来构建使用设备内置相机的原型,也学会了如何使用 ProtoPie Player 应用在手机或平板上运行你的精彩作品。做得好!

如果你有兴趣改进体验——目前我们的 Pie 只允许拍一张照片,反馈很少,而且前后摄像头切换还能更流畅——你可以观看这个后续视频,它将在我们刚创建的基础上继续完善,并将其变成一个非常逼真的相机应用演示。

视频

了解更多相机交互内容

探索更多原型课程

如果你一直在跟完整个系列,你会记得上一篇文章讲的是 Voice 和 Speech。这两者在移动设备上都表现得非常出色。看看所有课程,提升你的原型设计技能。

在 ProtoPie School 了解更多

想精通原型设计并获得结业证书吗?那就前往 ProtoPie School,它完全免费!

[成为原型设计高手 ✨]