Design d'appli de notes : refonte de l'écran d'accueil, avant et après
Un écran d'accueil d'appli de notes avec douze post-it colorés, huit tags colorés et une alerte de stockage, puis le même écran corrigé : des puces de dossiers, deux tuiles épinglées et une liste simple. Chaque changement côte à côte, avec le fichier Figma gratuit.
Un écran d'accueil d'appli de notes a une seule mission : vous mener à la note que vous cherchez. Le premier jet ci-dessous contient tout ce qu'il faut pour trouver une note, mais il peint douze post-it en six couleurs avec du texte en 8 px, ajoute huit tags dans huit autres couleurs, vous prévient du stockage avant que vous ayez lu un mot, et pose un plus flottant par-dessus une note.
La correction garde chaque fonction et retire la déco autour des notes. Les tags colorés deviennent des puces de dossiers à filet fin, les notes épinglées deviennent deux tuiles blanches, chaque autre note devient une simple ligne, et la recherche est un champ gris sous un titre sobre.
L'écran entier, avant et après
Brouillon junior
Corrigé
À gauche, tout crie au même volume. Six couleurs de post-it, huit couleurs de tags, une bannière jaune et un plus jaune se disputent l'attention, et les notes elles-mêmes sont la chose la plus petite de l'écran.
À droite, l'écran se lit dans l'ordre où l'on pense : qu'est-ce que c'est, puis-je chercher, quel dossier, qu'ai-je épinglé, que reste-t-il. Les seules couleurs sont celles à l'intérieur des notes.
Ce qui a changé, en chiffres
| Brouillon junior | Corrigé | |
|---|---|---|
| Titre | Un logotype plus « Toutes les notes (128) » | Notes en 34 px gras |
| Notes | Douze post-it de 117 x 142 px en six couleurs | Deux tuiles épinglées de 169 px, puis des lignes simples |
| Texte des notes | Texte courant en 8 px | Titres en 16 px au-dessus d'aperçus en 14 px |
| Tags | Huit puces de 9 px en huit couleurs | Puces de dossiers à filet fin de 32 px |
| Recherche | Une icône dans le coin | Un champ de 36 px en gris #F2F2F7 |
| Alertes | Une bannière de stockage au-dessus des notes | Déplacée vers l'onglet Profil |
| Marges | 14 px à gauche, 12 px à droite | 20 px des deux côtés |
| Onglets | Cinq, icônes pleines et contours mélangées | Quatre, icônes seules, dans une capsule flottante |
Correction 1 : un titre sobre et un seul champ de recherche
Avant
Après
Un minuscule logotype à empattements au-dessus de Toutes les notes (128), un menu déroulant de tri par date de modification, deux boutons d'affichage et une icône de recherche, avec une bannière de stockage jaune et un bouton PASSER À LA VERSION SUPÉRIEURE dessous. Face à un grand titre Notes, un menu à trois points et un champ de recherche gris contenant le mot Rechercher.
L'en-tête du brouillon contient sept contrôles avant que vous voyiez la moindre note : un menu, un logotype, un compteur, un tri, deux boutons d'affichage et une icône de recherche. Ensuite, une bannière vous annonce que vous avez utilisé 85 % de votre espace, avec un bouton pour payer.
La correction donne à l'écran un nom et une porte d'entrée. Notes fait 34 px en gras. La recherche est un champ pleine largeur avec un rayon de 10 px dans un gris clair (#F2F2F7), il a donc l'air d'un champ et personne n'a à deviner qu'une icône sert à chercher.
Tri et affichage existent toujours, derrière les trois points. L'alerte de stockage et la mise à niveau sont passées dans Profil, là où l'on va gérer son compte.
Règle à retenir : le haut d'un écran doit le nommer et offrir la voie d'entrée principale. Tout le reste va derrière un menu.
Correction 2 : des puces de dossiers au lieu de tags colorés
Avant
Après
Huit minuscules tags remplis, Travail en rouge, Idées en ambre, Journal en vert, Perso en bleu, Voyage en turquoise, Recettes en orange, Maison en violet et Livres en rose, tous écrasés sur une seule ligne. Face à des puces en pilule à filet fin Tous, Travail, Idées, Journal et Voyage, avec Tous rempli de noir et les autres qui dépassent du bord droit.
Huit tags en huit couleurs ne se distinguent plus par la couleur très longtemps, et à 9 px ils sont difficiles à toucher. Ils remplissent aussi la ligne exactement, si bien que la rangée paraît terminée et n'indique pas qu'il y en a davantage.
La correction utilise des pilules de 32 px avec un contour fin. La sélectionnée, Tous, est remplie de noir. Les autres sont simples, et les dossiers après Voyage arrivent par le bord droit. Une puce coupée par le bord de l'écran dit au pouce qu'on peut faire défiler, et personne n'a besoin d'une flèche.
Règle à retenir : montrez l'élément sélectionné par un remplissage, pas par une couleur différente pour chaque élément.
Correction 3 : épingler les notes utiles en deux tuiles blanches
Avant
Après
Trois post-it colorés en rangée, jaune, rose et bleu, chacun avec une minuscule épingle et une icône plus dans les coins du haut et du texte en 8 px. Face à un titre Épinglées avec une épingle ambre et deux tuiles blanches : un croquis au crayon d'un chalet intitulé Rénovation du chalet avec il y a 2 h, et un aperçu de texte de la checklist de lancement avec son titre et 9:12.
Dans le brouillon, une note épinglée ressemble exactement à toutes les autres, à une icône d'épingle de 11 px près. Les deux premiers post-it sont les mêmes notes que celles épinglées dans la version corrigée. L'épingle ne change pas leur traitement, donc elle ne change rien à la facilité de les retrouver.
La correction donne aux notes épinglées leur propre section et leur propre forme. Deux tuiles blanches de 169 px avec un rayon de 12 px et un filet fin se placent sous un titre Épinglées. La note du chalet montre son croquis, la checklist de lancement montre un aperçu de texte, et chacune a un titre en 14 pt semi-gras et une date en 12 pt dessous. Épingler change maintenant ce que l'on voit, et c'est la raison d'épingler.
Règle à retenir : si un état compte, donnez-lui une place à l'écran. Une petite icône sur une carte identique n'est pas une place.
Correction 4 : chaque autre note est une simple ligne
Avant
Après
Deux rangées de post-it colorés, vert, orange, violet, jaune, rose et bleu, chacun rempli de minuscule texte et d'une date de modification en bas. Face à quatre lignes simples sur fond blanc : Lisbonne en mai, Notes de pain au levain, Idées de livres et Pages du matin, chacune avec un titre en 16 pt, une date et une ligne de son texte dessous, séparées par des filets fins.
Un post-it montre une note en entier, donc vous obtenez quelques lignes de texte en 8 px. Impossible de les lire, impossible de les parcourir, et douze d'entre eux remplissent tout un écran. Les six couleurs ne veulent rien dire, on n'en apprend donc rien.
La correction est une liste. Chaque note est un titre en 16 pt, une date, et une ligne de son texte en 14 pt qui finit par des points de suspension. Les lignes font 57 px de haut avec des filets entre elles, donc environ huit tiennent sous les tuiles épinglées. Vous lisez tous les titres d'un coup d'œil et ouvrez la bonne note grâce à sa première ligne.
Règle à retenir : une liste sert à retrouver des choses, une carte sert à regarder une seule chose. Choisissez celle qui correspond au travail.
Correction 5 : la barre d'onglets et le bouton de création
Avant
Après
Le bas du brouillon : un bouton plus jaune rond posé sur la dernière note, au-dessus d'une barre d'onglets plate avec cinq onglets nommés, Notes, Quotidien, Tâches, Tags et Profil, aux icônes pleines et contours mélangées. Face à une capsule flottante à quatre icônes dont une sélectionnée, avec les notes qui défilent dessous, et un bouton de création rond ambre séparé avec un crayon à côté.
Le brouillon pose un plus flottant sur la dernière note, qui cache donc du texte. Sa barre d'onglets compte cinq onglets avec libellés, et l'icône Notes est pleine alors que les autres sont en contour.
La correction crée deux contrôles pour deux tâches. Une capsule de 52 px à icônes seules contient quatre onglets, dans un seul style d'icône, et un bouton de création ambre de 52 px avec un crayon se trouve à côté. Les notes continuent sous les deux, si bien que l'écran ressemble à une seule longue liste plutôt qu'à une liste coupée par une barre. L'onglet Tags a disparu, car les puces de dossiers font son travail.
Règle à retenir : placez le bouton « créer quelque chose » là où se trouve le pouce, et donnez-lui sa propre forme et sa propre couleur pour qu'on ne le confonde pas avec la navigation.
Les petites corrections
- Chaque fonction reste. La recherche est le champ sous le titre. Le tri par date de modification et les boutons grille et liste se trouvent derrière les points. Toutes les notes (128) est devenu le dossier Tous. Le bouton plus est dans chaque note. L'alerte de stockage est passée dans Profil.
- Une seule marge. Le brouillon a 14 px à gauche et 12 px à droite. L'écran corrigé utilise 20 des deux côtés, avec 10 px entre les blocs.
- Un seul accent. L'ambre (#F5B301) n'est utilisé que sur l'épingle et le bouton de création. Tout le reste est noir, gris et blanc.
- Une échelle typographique lisible. Le brouillon va de 8 à 14 px. L'écran corrigé commence à 12 px pour les dates et monte à 34 px pour le titre.
- Du vrai contenu. La tuile du croquis montre un vrai dessin au lieu d'une boîte colorée, donc la section épinglée montre de quoi parle la note avant de l'ouvrir.
- Pas de logotype. Le brouillon a un logotype à empattements, Margin, dans l'en-tête. L'écran corrigé n'en a pas, car le titre de l'écran fait office d'en-tête dans Apple Notes.
Auditez votre propre écran de notes
| Question | Pourquoi c'est important |
|---|---|
| Pouvez-vous lire chaque titre de note sans ouvrir la note ? | Une liste sert à retrouver, donc les titres doivent être lisibles |
| L'écran utilise-t-il plus d'une couleur d'accent ? | Chaque couleur en plus doit avoir un sens, sinon c'est du bruit |
| Les notes épinglées sont-elles différentes des autres ? | Une épingle qui ne change rien ne vaut pas un toucher |
| Y a-t-il une alerte ou une vente additionnelle au-dessus de la première note ? | Vendez après que le travail est fait, pas avant |
| Le bouton de création recouvre-t-il du texte ? | Un contrôle qui cache du contenu est mal placé |
| La rangée de dossiers dit-elle qu'elle défile ? | Un élément coupé par le bord dit « balayez » sans libellé |
Récupérez le fichier Figma
Le fichier gratuit contient le brouillon junior, l'écran corrigé et chaque élément sous forme de composant.
Fichier Figma gratuit
Refonte d'appli de notes, avant et après
Les deux écrans et chaque élément en composant Figma. Gratuit, en lecture seule, dupliquez-le dans vos brouillons.
FAQ
Comment concevoir l'écran d'accueil d'une appli de notes ?
Commencez par un titre sobre et un champ de recherche, puis des puces de dossiers, une courte section Épinglées et une liste de notes avec un titre et une ligne chacune. Gardez alertes et ventes additionnelles à l'écart pour que les notes soient ce qu'il y a de plus visible à l'écran.
Une appli de notes doit-elle utiliser une grille ou une liste ?
Une liste pour retrouver des notes, car les titres et une ligne de texte se lisent d'un coup d'œil. Une grille de cartes complètes ne marche que si chaque carte est assez grande pour être lue, et à 117 px de large le texte tombe à 8 px.
Combien de couleurs une appli de notes doit-elle utiliser ?
Un seul accent. Apple Notes utilise un unique ambre pour son épingle et son bouton de création, et garde tout le reste neutre, pour que les notes portent la couleur.
Où mettre l'alerte de stockage dans une appli de notes ?
Sur l'écran Profil ou réglages, ou en petit avis seulement quand l'utilisateur approche de la limite. Une bannière au-dessus de la première note fait commencer chaque visite par un message commercial.
À quoi doivent ressembler les notes épinglées dans une appli de notes ?
À leur propre section sous un titre Épinglées, présentées en deux tuiles avec un aperçu, un titre et une date. Une icône d'épingle sur une carte identique ne rend pas une note plus facile à trouver.
Sources
- Les deux écrans sont les nôtres, conçus et mesurés dans Figma. L'appli, Margin, et toutes ses données sont inventées. Les notes concordent sur les deux écrans : les deux tuiles épinglées sont les deux premiers post-it du brouillon, et les lignes sont les post-it suivants avec les mêmes titres, dates et premières lignes.
- Modèle étudié : Apple Notes sur iPhone.
- Photo : un croquis au crayon par Sofya Borboris sur Pexels, redressé, recadré sur le dessin et posé sur du blanc. Pas d'IA.
- Les icônes viennent de Phosphor (MIT). La barre d'état est dessinée d'après une capture d'écran d'iPhone mesurée. Le logotype du brouillon est en Libre Caslon Display Regular.
- D'abord publié en carrousel sur App Brainy.
Want this for your own app? Our team redesigns app screens like this one, from the first audit to the finished components.
Get Started
