Viewing in a web browser - Proto.io Player
The Proto.io Player is accessible from the 'Preview' button on the top right of the Editor. It opens a new tab in which you preview your project to experience how it looks and feels. You can try out your interactions and animations by using your mouse. You also have the option to navigate between the various screens, using the list or thumbnail view of the screen browser on the right.
The vertical toolbar provides tools related to the Player: show/hide sidebar, zoom, refresh preview (reload project), change device orientation, show/hide interaction hotspots, show/hide click effect, change device skin color and enter fullscreen. The show interaction hotspots feature, which can also be activated by pressing the SHIFT key, highlights the interactive areas on the screen and indicates what type of trigger event has been applied to them.
The various icons shown, depending on the trigger event are seen in the table below.
|Tap, click, delayed tap|
|Tap hold, force touch, press, press up|
|Swipe, pan, pan start, pan end|
|Swipe left, pan left|
|Swipe right, pan right|
|Swipe up, pan up|
|Swipe down, pan down|
|Pinch, pinch out, pinch in|
|Container page enter, container page change, container scroll, container scroll end, container scroll to|
|Mouse over, mouse out|
|On drag, on drag start, on drag end, on throw update, on throw complete|
|On rotate, on rotate start, on rotate end, on rotate throw update, on rotate throw complete|
|On state enter, on state leave, on state transition start, on state transition end|
|On input focus, on input blur, on input key up|
|On change, on checkbox change, on picker change|
|On slider drag, on slider drag start, on slider drag end, on range drag, on range drag start, on range drag end|
The Editors’ comments toggle button enables and disables the comments and annotations feature among the users who have edit rights (see Setting up Users). Comments and annotations facilitate the communication and collaboration between team members.
Send to mobile is a quick way to send a link to your phone (via SMS) for previewing your prototype. You will be prompted to open it in the Proto.io app.
You can also watch the relevant video tutorial.
Viewing on a mobile device (Proto.io app)
One of the many advantages of Proto.io is that it allows you to run and test your prototype on the actual mobile device to experience its look and feel.
The Proto.io Player App is available for iOS and Android devices.
You can download it here:
Key features of the Player App include:
- Login with your Proto.io account credentials and access all your projects (also switch between accounts).
- Use the app without the need to login to preview projects shared using Share links.
- Preview your projects in full screen without any obstructions.
- Interact with your projects using all supported touch gestures: Pinch, swipe, tap, tap & hold and more.
- Preview any Proto.io prototype on any device/screen size regardless of the device /screen size it was designed for.
- Confidently preview your Proto.io prototypes, even when your connection is unreliable or non-existent. This requires having previewed these projects while being online, which results in them being downloaded on your device.
- Record a user session (interaction, face, audio) for user testing purposes, powered by Lookback (requires a Lookback account). Currently available in the Proto.io app for iOS.
Also, see The Proto.io app.