Screens are the backbone of every prototype. Prototypes include multiple screens and each screen can contain UI elements. A screen in Proto.io corresponds to a screen in your application’s prototype. Depending on the fidelity of your prototype (low to high) they may also include simple or more complex interactions based on gestures and touch events.
The canvas that appears at the center of the Proto.io Editor, represents a screen and you are essentially designing on it. This metaphor is taken a step further with the Proto.io Player with which you preview your screen(s) on your selected device and experience all the interactions you added.
You need to specify your prototype’s start screen when in portrait orientation and when in landscape. This lets the Proto.io Player (web browser and Proto.io App) know from which screen to start to launch preview for your prototype. You can set the start screen when creating the particular screen, or later by editing screen properties.
You can edit both portrait and landscape start screens from the project properties.
Adding a new screen will show you the property settings for that screen. You may come back to these screen settings by selecting the screen properties in the screen menu in the left pane (Editor). Screen properties include the following:
- Title – Pick a title that’s representative of the screen’s objective and to help easier retrieval and navigation
- Orientation – Select the orientation for this particular screen, portrait or landscape
- Background – Set a background color for your screen
- Option to set this as project start screen
Use the screen menu in the left pane to add a new screen, navigate to another screen, sort screens by drag and drop, access screen properties, duplicate screens, delete a screen, or access screen actions.
Duplicating a screen can be very useful when you need to produce similar screens. This functionality not only creates an exact copy of the screen and UI items, but also re-creates and re-maps all actions of the duplicated screen to the new screen, as new actions with corrected item mappings.
Screen interactions can be set related to orientation, screen and key events. Screen events include orientation change, screen before show/hide, screen show/hide.
Most devices support screen orientation changes. Devices may have portrait or landscape orientation. Proto.io allows you to create prototypes that support orientation changes and present your prototype in both orientations.
The proper way for handling screen orientations
When adding a project you need to define the default orientation of your device. The reason for that is to display that orientation when you launch the preview of the app on the Proto.io Player (web) or in the Proto.io App. When you add a screen in Proto.io you need to specify the orientation of the screen. If you want to present the same content of a screen in portrait and landscape then you need to create two different screens, one with portrait orientation and one with landscape orientation. This may sound frustrating as you need to build a screen for each orientation and reorganize the items on your screen, but in most cases orientations have different layouts rather than a mere reposition and resizing of UI elements. The way you link two orientation screens to each other so that when you rotate your device the other screen appears is by using the screen interaction event “On orientation change” and setting an action “Go to page”. This has to be done on both screens.
Switching orientation in Proto.io Player
When you want to switch orientation on the player you can do that by pressing the orientation button at the bottom toolbar. If the “Orientation change” event is set up properly then it gets triggered and executes the interaction. If not, the UI items are re-rendered on the screen and may respond to the new screen dimensions if “auto” width/height has been used. On the actual device you just need to turn your device to change orientation and the same actions will apply as they do on the web player.