2. 预览和分享 Previewing and Sharing - Origami Studio 教程


Preview your prototype on both simulated and physical devices. 在模拟器和物理设备上预览原型。

Prototypes made in Origami can be simulated on screen as well as natively on mobile devices, allowing you to view changes as you make them. Prototypes can be exported to Apple and Android devices for use on-the-go with the Origami Live apps.

在 Origami 上制作的原型可以在电脑模拟器上和移动设备上操作,编辑时的变更实时同步到模拟器和移动设备。原型可以导出到 iOS 和 Android 设备的 Origami Live,随时随地预览。

Choosing a frame 选择模拟设备

Origami comes with a collection of common iOS, Android, and other simulated devices that can be used to frame your prototype.

Origami 自带常用的iOS、Android和其他模拟设备的集合,用于构建原型。

2. 预览和分享 Previewing and Sharing - Origami Studio 教程_第1张图片
不同的模拟设备

点击左上角的手机型号,切换设备型号和颜色。

2. 预览和分享 Previewing and Sharing - Origami Studio 教程_第2张图片
The available devices list is updated and expanded regularly. 设备列表将定期更新和扩展。

Your prototype screen size and density reflects that of your chosen device. Tap the Viewer Settings button on the Viewer toolbar and select Toggle Frame to hide and show the device frame Alt D.

原型屏幕的尺寸和分辨率源自你使用的设备。点击查看器右上角的设置按钮,Toggle Frame 切换是否显示设备,或使用快捷键 Alt D

2. 预览和分享 Previewing and Sharing - Origami Studio 教程_第3张图片

Hands 手

All simulated devices in the device list are able to display a hand, of varying gender and skin tone. Toggle hand preferences with Toggle Hand Alt H within the Viewer Settings button.

所有模拟设备都能切换显示不同性别和肤色的手。点击查看器右上角的设置按钮,Toggle Hand 切换手的样式,或使用快捷键 Alt H

2. 预览和分享 Previewing and Sharing - Origami Studio 教程_第4张图片
Cycle through hands by repeatedly clicking the Toggle Hand button. 重复点击 Toggle Hand 循环切换手。

Adjusting the Viewer 调整查看器

The Viewer can be minimized and moved around the Patch Editor for a distraction-free environment. Select the minimize button on the left of the Viewer toolbar Alt Cmd F, and drag anywhere on your Patch Editor.

查看器可以最小化,并可以固定在模块编辑器四个角上。
点击查看器工具栏左侧最小化 Alt Cmd F 按钮,然后拖动到模块编辑器的任意一个叫上。

2. 预览和分享 Previewing and Sharing - Origami Studio 教程_第5张图片

Origami will snap the minimized Viewer to the nearest corner. This also works for an expanded Viewer.

You can drag the Viewer outside of the Patch Editor into its own window — especially useful for a dual-monitor setup.

最小化查看器时会自动被吸附到最近的角落,恢复时也是。查看器可以拖到 Origami 的窗口外成为一个独立的窗口,在双屏显示器中很有用。

2. 预览和分享 Previewing and Sharing - Origami Studio 教程_第6张图片

Fullscreen Viewer 全屏查看器

Click the maximize button Shift Cmd F on the Viewer toolbar to enter Fullscreen Viewer. The Viewer toolbar remains available in Fullscreen Viewer for easy toggling between frames and hands.

点击查看器工具栏最大化 Shift Cmd F 按钮全屏显示查看器。查看器工具栏在全屏时仍然可用,方便切换设备和手。

2. 预览和分享 Previewing and Sharing - Origami Studio 教程_第7张图片

Restarting a prototype 重启原型

Click the Restart Prototype button Shift Cmd R to reset your prototype to its beginning state. This becomes useful if you are working on a prototype that deals with automatic and/or timed interactions.

点击重启按钮 Shift Cmd R 原型将恢复到初始状态。尤其在自动或定时交互原型上非常有用。

2. 预览和分享 Previewing and Sharing - Origami Studio 教程_第8张图片

Live preview on a device 在设备上实时预览

Origami supports previewing and running prototypes on iOS and Android devices. To open prototypes on a device, you'll need the Origami Live app.

Origami 支持在 iOS 和 Android 的移动设备上预览和运行原型。需要安装 Origami Live 应用程序。

iOS
  1. From your iOS device, download the Origami Live app from the App Store.
  2. Connect your iPhone or iPad to your Mac via USB cable.
  3. Open Origami Studio on your Mac and make sure you have at least one prototype open.
  1. 下载并 Origami Live 到设备上;
  2. 将移动设备通过 USB 线连接到电脑上;
  3. 打开电脑上的 Origami Studio 程序,并且确保至少打开了一个原型。
  4. 打开手机上的 Origami Live。
Android
  1. Install the current version of the Origami Live app from the Google Play Store.
  2. Enable USB debugging with these directions from Google.
  3. Connect your Android Phone or tablet over USB to your Mac
  4. Open Studio on your Mac and make sure you have at least one prototype open
  1. 下载并安装 Origami Live 到移动设备;
  2. 启动 USB 的数据传输;
  3. 通过 USB 连接移动设备;
  4. 打开电脑上的 Origami Studio 程序,并且确保至少打开了一个原型;
  5. 打开手机上的 Origami Live。

When connecting your iOS or Android device to Origami Studio, the project currently in focus will be previewed on device. Any changes you make in Origami Studio will be reflected on your device. Exit or action upon prototypes by shaking the device.

将 iOS 或 Android 设备连接到 Origami studio 时,会将当前焦点的项目传输到设备上。
任何更改都会实时传输到设备上。已经导出到设备的原型通过摇动设备或用三根手指触摸屏幕打开操作弹窗(仍然连接到电脑实时传输时没有用)。

On-the-go previewing 随时随地预览

Prototypes can be saved to devices for untethered use, such as remote testing. No internet/network connection or cables are required. Simply connect a prototype to Origami Live following the above instructions, or from a shared prototype (explained below).

原型可以输出到设备上不受限制的使用,如远程测试。不需要网络或USB连接到电脑。只需按照上述说明将原型连接到 Origami Live,。

2. 预览和分享 Previewing and Sharing - Origami Studio 教程_第9张图片

Sharing a prototype 分享原型

Recipients must have Origami Studio or Origami Live installed to be able to edit or view a project.

接收分享的人必须安装 Origami Studio 或 Origami Live 才能编辑或查看项目。

Sharing from macOS 从Mac分享

You can email or share Origami files as you would with most other files. The recipient can open Origami files directly if they have Origami Live installed. This also works with services such as Dropbox.

可以像大多数文件一样通过邮件或第三方应用分享。如果对方安装了 Origami Live 可以直接打开 Origami 文件。

Sharing directly from Origami Studio 直接从 Origami Studio 分享

Tap the Share button on the toolbar to see a list of common sharing options.

点击窗口右上叫的分享按钮打开分享选项。

2. 预览和分享 Previewing and Sharing - Origami Studio 教程_第10张图片
These options can be customized through the 'More...' option. 更多分享方式可以通过 “ More... ” 自定义。

Sharing from iOS 从 iOS 分享

Origami Live on iOS uses the Share Sheet to allow sharing of prototypes through applications and services you enable on your device, including AirDrop.

导出到设备的原型可以通过 AirDrop 或其他应用分享。

Sharing from Android 从 Android 分享

Origami Live on Android uses the Share Sheet to allow sharing of prototypes through applications and services you enable on your device, including Android Beam.

导出到设备的原型可以通过 NFC 或其他应用分享。


Related Learn Content 相关教程

1. Getting Started 入门
介绍怎么使用 Origami Studio。

Related Examples 案例

16. Fahrenheit to Celsius
通过温度转换了解 Origami 中的逻辑和模块。


NEXT UP
3. Coming From Code 来自代码
看 Origami 跟编程有什么不一样。


你可能感兴趣的:(2. 预览和分享 Previewing and Sharing - Origami Studio 教程)