Navigation de l'app
L'éditeur de navigation — menus, groupes et contextes, le logo, le menu de l'utilisateur, les pills de valeur, et un design propre pour le web, la tablette et le téléphone.
Les écrans sont les pages ; la navigation est ce qui y conduit les gens. Dans Keplin, elle ne vit à l'intérieur d'aucun écran : c'est un document propre à l'app, dessiné dans un éditeur visuel et servi autour de n'importe quel écran ouvert.
Et elle se dessine par appareil : la barre supérieure de l'ordinateur, le tiroir du téléphone et la barre d'actions de la tablette sont trois designs indépendants, chacun avec ses menus.
Ouvrir l'éditeur
Dans la sidebar de l'app, onglet UI, le premier élément s'appelle Navigation. Cliquez et il s'ouvre dans un onglet de l'espace de travail.
Ce que l'on voit au centre n'est pas un formulaire : c'est la page de l'app, dessinée telle qu'elle sera. La barre en haut, le contenu de l'écran en bas (Contenu de l'écran), la marque à gauche. Vous éditez en agissant dessus.
Atenção
Contrairement au designer d'écrans, la navigation ne s'enregistre pas toute seule. Le bouton Enregistrer, dans le coin supérieur droit, devient actif quand il y a des modifications — et la plateforme confirme avec Navigation enregistrée. L'onglet est marqué « non enregistré » tant que vous n'avez pas cliqué.
Sous le titre se trouvent les contrôles qui commandent ce que vous voyez :
| Contrôle | Ce qu'il fait |
|---|---|
| Web (1280px) / Tablette (768px) / Mobile (390px) | Choisit l'appareil que vous êtes en train de dessiner. |
| Mode (tablette et téléphone seulement) | La forme de la navigation sur cet appareil. |
| Menu initial | Lequel des menus s'ouvre quand quelqu'un entre dans l'app. |
Les gestes
| Geste | Ce qui se passe |
|---|---|
| Clic sur un menu | Le sélectionne (et, dans un contexte, affiche sa barre latérale). |
| Double clic sur un menu | Ouvre la fenêtre Élément sélectionné, où tout se modifie. |
| Glisser un menu | Le déplace de zone ou le réordonne. Il ne se lâche que là où c'est valide. |
| + | Ajoute un menu à cet endroit. |
| × dans le coin d'un menu | Le retire. |
| Clic sur la marque | Ouvre la fenêtre Logo de l'app. |
Les types de menu
Le bouton + de chaque zone montre les types que cet endroit accepte :
| Type | Ce que c'est |
|---|---|
| Menu | Mène à un écran de l'app. C'est l'élément normal. |
| Sous-menu | Regroupe d'autres menus — dans le tiroir et dans les barres latérales. |
| Contexte (sidebar) | Un menu qui, une fois choisi, active une barre latérale propre avec ses enfants. C'est comme si l'app était divisée en domaines. |
| Séparateur | Une ligne de séparation. |
| Menu de l'utilisateur | L'avatar de la personne connectée, avec ses entrées et la Déconnexion. |
| Notifications | La cloche, avec le décompte automatique des non lues. |
Tous les types ne conviennent pas à tous les endroits, et l'éditeur ne propose que les valides : un contexte ne peut pas contenir un autre contexte, un sous-menu n'accepte que des éléments, le menu de l'utilisateur n'accepte que des éléments et des séparateurs, et le tiroir du téléphone n'a pas de contextes (il utilise des sous-menus).
Nota
Un menu pointe toujours vers un écran de l'app — il n'existe pas d'élément « lien externe ». Pour emmener quelqu'un à l'extérieur, faites un écran avec le widget Page externe, ou un Lien à l'intérieur d'un écran.
Les zones de la barre
Dans la barre supérieure, les menus se rangent en trois zones, et l'aide dans l'éditeur dit l'essentiel : Faites glisser les menus entre les zones de la barre (gauche / centre / droite) pour créer des groupes.
| Zone | Usage habituel |
|---|---|
| Groupe à gauche | La navigation principale, juste après la marque. |
| Groupe au centre | Un groupe mis en avant. Si elle reste vide, elle ne prend pas de place. |
| Groupe à droite | Le menu de l'utilisateur, la cloche, des raccourcis. |
À l'intérieur de la barre latérale d'un contexte — et dans le tiroir — les zones sont deux : Groupe du haut et Bas (celle-ci se colle en bas, pour que « Paramètres » et « Aide » soient là où on les attend).
Créer un menu
- Choisissez l'appareil dans la barre de contexte.
- Cliquez sur le + de la zone où vous le voulez.
- Choisissez le type.
- Le menu naît avec un nom générique et reste sélectionné — faites-lui un double clic pour ouvrir la fenêtre Élément sélectionné.
- Remplissez :
| Champ | Ce que c'est |
|---|---|
| Icône | Une icône de la bibliothèque ou un SVG des assets de l'app. |
| Nom du menu | Le texte qui apparaît. C'est une phrase de l'app — elle entre dans les traductions. |
| Écran… | L'écran de destination (seulement dans Menu). |
| (paramètres) | Si l'écran de destination a des paramètres de route, un champ apparaît par paramètre pour lui donner une valeur fixe. |
| Icône seule (le nom apparaît en tooltip) | Ne laisse que l'icône dans la barre. |
- Fermez avec Terminé et enregistrez avec Enregistrer.
Le bouton Supprimer l'élément, dans la même fenêtre, supprime le menu.
Contextes et barres latérales
Un Contexte (sidebar) est la façon de donner à un domaine de l'app son propre menu : vous choisissez « Ventes » dans la barre supérieure et la barre latérale avec les écrans de vente apparaît à gauche. Les enfants du contexte sont les éléments de cette barre.
Dans la fenêtre du contexte, la section Sidebar de ce contexte l'affine :
| Champ | Options |
|---|---|
| Comportement | Fixe (toujours ouverte) · Rétractable (un bouton la réduit aux icônes) · Mini (icônes ; se développe au survol de la souris) · Mini avec panneau (le survol ouvre l'arborescence du menu) |
| Largeur | Entre 180 et 400 pixels. |
| Lors du développement (mode mini seulement) | Se superpose au contenu ou Pousse le contenu. |
| Réduite au départ (mode rétractable seulement) | Comment elle s'ouvre la première fois. |
Le menu de l'utilisateur
Le Menu de l'utilisateur est un élément comme les autres — il peut être dans la barre supérieure, à l'intérieur d'un contexte, dans le tiroir ou dans la barre compacte. Le sélectionner ouvre son popup, et c'est là qu'on ajoute des entrées avec le + (Menu ou Séparateur).
Dans la fenêtre restent les options qui ne sont pas visuelles :
| Option | Ce qu'elle fait |
|---|---|
| Afficher le nom | Le nom de la personne connectée apparaît dans l'en-tête du menu. |
| Afficher l'utilisateur (login) | Le nom d'utilisateur aussi. |
| Option « Déconnexion » | Inclut la sortie à la fin du menu. |
| Texte de « Déconnexion » | Un texte à vous ; vide, il utilise Celui du système (traduit). |
Sans icône, l'avatar affiche les initiales du nom — et c'est ce que le sélecteur d'icône appelle Aucune icône (initiales).
Notifications
L'élément Notifications est la cloche : icône seule, avec la pill des non lues qui se met à jour toute seule. Le clic ouvre les dernières notifications et le Voir plus ouvre le panneau avec toutes. Dans la fenêtre, Notifications dans la dropdown décide combien apparaissent à la fois (entre 1 et 20).
Pills de valeur
N'importe quel menu (sauf les séparateurs et la cloche) peut afficher une pill avec un nombre vivant — les commandes à traiter à côté de « Commandes », les demandes en attente à côté de « Approbations ».
- Dans la fenêtre de l'élément, activez Afficher la pill avec la valeur.
- Choisissez l'API qui apporte les données (Choisir une API…).
- Dans Valeur, choisissez Comptage (nb d'enregistrements) ou Champ du 1er enregistrement — dans ce cas, indiquez aussi le Champ.
- Masquer si la valeur est vide ou à zéro évite la pill qui dit « 0 ».
La pill se met à jour en temps réel : quand les données changent, le nombre change — sans que personne recharge la page.
Le logo de l'app
Cliquez sur la marque, à gauche de la barre, pour ouvrir la fenêtre Logo de l'app :
| Champ | Ce qu'il fait |
|---|---|
| Icône ou image | Choisit une icône de la bibliothèque ou un fichier des assets de l'app. |
| Afficher le nom de l'app | Le nom à côté de la marque. |
| Cadrage dans la barre | SVG uniquement : Échelle, Largeur du cadre, et le positionnement en faisant glisser l'image. |
| Ajuster au cadre | Rétablit l'échelle et la position. |
| Sans cadrage | Désactive le cadrage. |
Le cadrage est la réponse au logo qui « ne rentre pas » : vous faites glisser et vous mettez à l'échelle jusqu'à ce qu'il tombe bien dans la barre, et la fenêtre elle-même garantit que le fichier SVG reste intact — le recadrage est seulement visuel et réversible. Pour les autres formats, la note explique que le cadrage n'est disponible que pour les SVG.
Dica
Le sélecteur choisit, il ne téléverse pas. Chargez d'abord le fichier dans la section Assets de l'arborescence de l'app ; ensuite il apparaît ici, dans l'onglet Assets de l'app (SVG).
Menu initial
Menu initial, dans le coin supérieur droit, décide par où l'app s'ouvre. On choisit l'un des menus (pas un écran isolé), et le choix se fait par appareil — le téléphone peut s'ouvrir sur un panneau différent de celui de l'ordinateur.
Si un appareil n'a pas de choix propre, il hérite de celui du suivant (téléphone → tablette → web) ; et s'il n'y en a aucun, l'app s'ouvre sur le premier menu qui mène à un écran.
Un design par appareil
Le Web est toujours une barre supérieure. La tablette et le téléphone ont un sélecteur Mode :
| Mode | Ce que cela donne |
|---|---|
| Barre supérieure (tablette seulement) | Comme sur l'ordinateur : marque, menus et contextes dans une barre. |
| Menu hamburger | Une barre compacte avec le bouton ☰, qui ouvre le tiroir avec l'arborescence des menus. |
| Barre d'actions | Une barre en bas, style application mobile, avec jusqu'à 5 entrées — et sans tiroir. |
Dans les modes compacts, il y a encore deux rangées propres :
- Le Header — jusqu'à 4 actions à côté de la marque (le menu de l'utilisateur et la cloche y vivent bien).
- La Barre d'actions — jusqu'à 5 entrées en bas, chacune un Bouton ou un Menu d'actions.
Quand la limite est atteinte, la plateforme dit pourquoi : La barre d'actions a déjà 5 éléments (maximum). / Le header accepte au maximum 4 actions.
Nota
Dans l'app publiée, l'appareil est décidé par la largeur de la fenêtre : en dessous de 640 px c'est un téléphone, en dessous de 1024 px une tablette, au-dessus c'est le web. Un téléphone sans menus dessinés se retrouve sans navigation — dessinez les trois, ou au moins ceux sur lesquels l'app sera utilisée.
Qui voit quoi
L'éditeur dessine ; celui qui décide qui voit chaque menu, c'est Paramètres de l'app ▸ Permissions, dans l'onglet Menus — par rôle et par appareil.
La règle vaut la peine d'être connue : contrairement aux écrans, un menu est visible par défaut. La porte, c'est l'écran, et celle-là est déjà fermée ; masquer le menu sert à retirer un groupe entier de la vue, ou à retirer la cloche à qui ne reçoit rien. Masquer un groupe emporte ses enfants, et un élément qui pointe vers un écran inaccessible disparaît tout seul.
Pourquoi ne… ?
- Pourquoi mes modifications ont-elles disparu ? Elles n'ont pas été enregistrées. La navigation a un bouton Enregistrer — et elle avertit avant que vous fermiez un onglet avec des modifications non enregistrées.
- Pourquoi n'arrivé-je pas à lâcher le menu où je veux ? Cet endroit n'accepte pas ce type. Les cibles invalides ne s'allument même pas : un contexte dans un contexte, un sous-menu dans un menu d'utilisateur, un séparateur dans la barre supérieure.
- Pourquoi je ne vois pas les menus sur le téléphone ? Le téléphone a sa propre arborescence et elle peut être vide. Choisissez Mobile (390px) et dessinez-la.
- Pourquoi un menu a-t-il disparu dans l'app publiée ? Soit il a été masqué dans Paramètres ▸ Permissions ▸ Menus pour ce rôle, soit il pointe vers un écran auquel cette personne n'a pas accès.
- Pourquoi le logo apparaît-il coupé ? Il a un cadrage. Ouvrez la fenêtre et utilisez Ajuster au cadre, ou Sans cadrage.
- Pourquoi n'arrivé-je pas à changer le type d'un menu ? Cela ne se change pas. Supprimez et recréez avec le bon type — c'est la seule opération que la plateforme ne vous laisse pas faire en cours de route.
- Pourquoi la pill affiche-t-elle toujours 0 ? Activez Masquer si la valeur est vide ou à zéro, ou vérifiez que l'API choisie renvoie bien des enregistrements.