Note: Currently available on iOS (Pugpig App Containers iOS v1.1+ applications). Android support now available.
In Pugpig Products you can add help images which will display in an image gallery slideshow on first launch of the application. These are best used to inform new users that have installed your app about how it works and the features available. Using images has the added benefit that you can design these to suit your brand and style.
Available Image sets
We now offer a pre-designed image set which you can use in your apps. There is a full set available for English and Spanish languages and for the following Edition, Continuous and Dual based app containers that you can download below.
IMPORTANT: Android tablet help screens are no longer supported. Please only provide 720x1080px size images for Android.
ENGLISH
Edition Image Set (iOS & Android)
Continuous Image Set (iOS & Android)
Dual Image Set (iOS & Android)
SPANISH
Edition Image Set (iOS & Android)
Continuous Image Set (iOS & Android)
Dual Image Set (iOS & Android)
Within the set are a number of .psd files, when opened with Photoshop there are layer groups for each help slide you may want. You only need the ones relevant to your apps content and features (e.g if your content is free remove the images about purchasing). You can easily tweak the fonts and primary blue colour we use to style these to match your app then export as Save for Web optimised .png files.
How it displays
It will display only once on first launch of the application after a new install. It can be retrieved at a later date from the app's Settings > General panel.
On tablet the help view is a partial overlay and the image(s) is the full height and width of the screen in both orientations. On mobile the help view is full-screen and the image(s) is full width and centered vertically in Portrait and full height and centered horizontally in Landscape.
Image Specs
If you wish to create your own help image set from scratch, below is the info you need:
The help panel can contain a slideshow of 1 to many images. Each help slide requires a retina and non-retina .png image to the dimensions:
iOS
Tablet
- Non-retina (1x) - 540 x 643 px .png
- Retina (2x) - 1080 x 1240 px .png
Phone
- Non retina (1x) 640 x 960px
- Retina (2x) 750 x 1337px
- Retina HD (3x) 1080 x 1920px
*If using Xcode 6+ you should add 3x assets to your project for optimal resolution on iPhone 6 Plus devices.
Android
Phone
- 720 x 1280 px
Tablet
- 1280 x 720 px
When creating your artwork please consider the two safe areas which are; navigation pips (along the bottom) and X close icon (top right) shown in the image above. Avoid copy or artwork extending into this area. We recommend applying a safe margin around your artwork. Also note in older product versions we only supported a white background and black icon colour for the pips and close icon. We've now added themeing so if you want to use a background colour other than white this can be accommodated however the images maybe letterboxed in the panel on some devices sizes across iOS and Android so these slides will look best when you use solid backgrounds. Avoid using background blurs, images or gradients.
Enable in app
If you have a Pugpig Starter Pack Kaldor will do this for you. Simply specify if you would like to use our defaults or provide your own image sets and we will drop these in. If you are building the app yourself please find info below:
iOS
To enable this feature, right-click in your app assets directory (where you can see a list of all the files), or click the small '+' at the bottom of the list, next to the search field, and add a New Image Set with the following name:
help-page-01
If Xcode has changed this to help-page-1, right click the name, click 'Show in Finder' and change the name there.
Drag and drop the non-retina (1x), retina(2x) and retina HD (3x) images into the set.
If you want more than one image to display in the gallery, continue to add image sets with -02, -03 naming convention. As long as they are in your assets directory they will display on first launch of your application.
Android
Instructions coming soon.
Comments
0 comments
Please sign in to leave a comment.