V.Design
Modifier le design général
Le design général est accessible depuis le menu de gauche en cliquant sur « design ».
Le design permet de définir les caractéristiques de l’application. Il existe 5 éléments : Général, Top bar, Tab bar, Body et Fonts. L’administrateur navigue d’un élément à l’autre en cliquant dessus.
Général
Vous pouvez changer le pictogramme qui apparaîtra sur les vues géolocalisations des utilisateurs. Pour changer l’épingle (pin), cliquez sur « Create Pin » et choisissez une couleur ou téléchargez votre propre image.
Vous pouvez aussi changer le Splash screen, c’est à dire l’image qui apparait lorsque vous lancez l’application.
Top Bar
La Top Bar correspond à l’élément supérieur de votre application.
Si vous faîtes des modifications, pensez toujours à cliquer sur « Save » en bas à droite. Les modifications design nécessitent le relancement de l’application.
Tab bar
Il s’agit de la barre du bas. Vous pouvez modifier la couleur de fond (background color) et la couleur des pictos actifs (foreground color). Notez que les pictos non actifs sont automatiquement en gris.
Body
Le body correspond au corps de l’application. Vous avez d’autres types de réglage. N’hésitez pas à les tester au même titre que top bar et tab bar.
Fonts
La partie « Fonts » correspond au paramétrage des polices d’écriture. Typiquement, la partie Title fait la correspondance avec tous les éléments titres et tous les autres éléments foncitonnels pour lesquels vous remplissez la partie supérieure. La partie « Details » correspond aux éléments texte et à la partie inférieure des briques fonctionnelles.
Créer des boutons
Créer des boutons peut être fait de différentes façons :
- Créer des boutons simples est à la portée de tous en suivant ce tutoriel.
- Créer des boutons complexes demande des compétences en design (utilisation de Photoshop ou autres logiciels).
Les boutons permettent d’améliorer l’interface pour l’utilisateur final.
Créer un bouton simple
Ce que nous entendons par un bouton simple est l’utilisation des vignettes sur les items.
Passer votre souris sur “No picture set…” puis cliquez sur “Éditer”
Sur cet écran, vous pouvez choisir le picto qui vous plait, restez en mode « Vignette » et « Standard » puis cliquez sur enregistrer.
Créer un bouton complexe
Réalisez par vous même ou faîtes réaliser des boutons par un professionnel.
Il faut penser en amont à quel endroit se situera le bouton sur l’appli et il faudra penser à respecter les caractéristiques de l’appareil :
- iPad Air : 2048 x 1536 pixels
- iPhone 7 : 1334 x 750 pixels
Récupérez le fichier image et téléchargez le sur le manager. Une fois le fichier téléchargé, vous pourrez suivre les étapes suivantes :
Au niveau de l’image « No picture set », cliquez sur « Éditer »
Récupérez votre image, bouton et cliquez pour la sélectionner. Dans les options, précisez « Cellule entière » et « Élargie » puis cliquez sur « Enregistrer ».
Vos utilisateurs accèderont dorénavant au document en cliquant directement sur le bouton que vous avez designé.
Vérifiez que les proportions sont correctes sur une tablette ou smartphone. Si ce n’est pas le cas, retravaillez votre bouton en modifiant sa taille.