Guide de design de papatto

• Sans publicité

  Ni bannières ni publicités vidéo. Rien à l’écran ne gêne la tâche.

• Sans envoi de fichiers

  Les images, les fichiers et le texte sont traités uniquement sur l’appareil de la personne qui les utilise. Les polices et les bibliothèques sont incluses : rien n’est chargé depuis des serveurs externes pendant l’utilisation.

• Sans inscription

  Ni compte ni installation. On ouvre et ça marche.

• Réglé en un instant

  Chaque outil fait une seule chose. Ce dont presque tout le monde a besoin y figure ; le reste, rarement utilisé, n’y est pas.

Les règles propres à Hoshimado se trouvent dans le guide de design de Hoshimado.

• Des phrases courtes et chaleureuses. Une idée par phrase.
• Évitez le jargon et les termes peu connus ; dites-le avec des mots de tous les jours.
• Les boutons nomment leur action par un verbe (« Choisir un fichier », « Télécharger le PDF »). Les options des onglets et des sélecteurs restent des noms (« PNG », « Portrait »).
• Les explications reprennent les mots exacts de l’écran. Les noms des boutons et les explications concordent mot pour mot.
• Les messages d’erreur disent ce qui s’est passé et quoi faire ensuite (« Cette date n’existe pas. Vérifiez l’année, le mois et le jour. »).
• Pas de point d’exclamation ni d’emoji dans les textes de l’interface.
• Dire honnêtement ce qu’un outil ne sait pas faire. Écrire des faits comme « rien n’est envoyé nulle part » plutôt que des superlatifs sans fondement (« le plus rapide », « le meilleur ») ou des slogans rassurants.
• Chaque texte existe en 10 langues, le japonais faisant foi. Les traductions sonnent naturel, pas mot à mot.

• Utilisez les couleurs telles quelles : la version au texte presque noir sur fond clair, la version au texte presque blanc sur fond sombre.
• Sur le site, le logo est dessiné par le composant Logo. Ses couleurs viennent des jetons : il passe tout seul du clair au sombre.

• --bgFond de pageClair#fffcf6Sombre#17140f
• --surfaceCartes, champs, encadrés d’étapesClair#ffffffSombre#201c16
• --surface-hoverSurvol, surfaces discrètesClair#fff6e6Sombre#2a241b
• --fgTexte et titresClair#26211bSombre#f3eee6
• --mutedTexte secondaire, notesClair#6b6157Sombre#aaa093
• --lineFilets et bordures des cartesClair#ece4d6Sombre#342e25
• --controlContours des champs, sélecteurs, boutons à contour et cercles de couleurClair#998c7eSombre#776d5f
• --sliderCurseur : poignée et pisteClair#c97a00Sombre#f7b13c
• --accentBoutons principaux, états sélectionnés et terminésClair#f5a524Sombre#f7b13c
• --accent-strongContours de focus, liens, texte de l’état activéClair#9c5e00Sombre#f7b13c
• --accent-fgTexte sur orangeClair#2b1a00Sombre#2b1a00
• --gainSolde positifClair#2e7d32Sombre#74d27a
• --lossSolde négatif, texte d’erreur (text-danger)Clair#c0392bSombre#f4806f

• L’orange en aplat (accent) sert aux boutons principaux, aux interrupteurs activés, aux numéros d’étape et aux marques des éléments sélectionnés. Jamais à la décoration.
• L’orange soutenu (accent-strong) sert aux contours de focus, aux liens comme « Tout voir » dans le pied de page et au texte des marques activées. Jamais aux erreurs.
• Le texte d’erreur est rouge (text-danger, la même couleur qu’un solde négatif).
• Les contours des champs, sélecteurs, boutons à contour et cercles de couleur utilisent control ; les cartes et séparateurs utilisent line.
• Seuls les curseurs utilisent la couleur slider (avec accent-strong, la partie encore vide de la piste passerait sous 3:1 par rapport au fond).
• Un seul bouton principal orange par étape.
• Les couleurs s’écrivent en jetons CSS, et fonctionnent ainsi en clair comme en sombre.

• M PLUS Rounded 1cTitres (japonais et langues en alphabet latin et cyrillique)
• Noto Sans JPTexte courant (japonais et langues en alphabet latin et cyrillique)
• Noto Sans KR・SC・ArabicTitres et texte en coréen, chinois et arabe

• Les chiffres s’alignent dans les tableaux et les compteurs (chiffres tabulaires).
• Les champs utilisent un texte de 16 px sur téléphone, pour que l’iPhone ne zoome pas à chaque saisie.

• Les paliers de 4, 8, 16, 24, 32 et 48 px servent à l’espace entre les éléments et au rembourrage intérieur des encadrés. Dans le doute : proche = 16, groupe = 32.
• Les petits rembourrages à l’intérieur des composants (au-dessus et au-dessous d’une étiquette, sur les côtés d’un bouton) font exception et utilisent aussi des valeurs hors palier, comme 2, 6, 10 et 12 px.
• Les pages font au plus 1152 px de large ; le texte de lecture passe à la ligne à 672 px. Les marges latérales font 16 px sur téléphone.
• Rien ne déborde sur le côté à 360 px (idéalement 320 px).

• En changeant de page, le contenu glisse légèrement depuis le côté (0,2–0,3 s). En revenant, il arrive de l’autre côté.
• Le changement de thème fond l’ancien et le nouvel écran en 0,3 s.
• L’avis « enregistré » monte depuis le bas puis redescend.
• Les vidéos du mode d’emploi ne jouent que lorsqu’elles sont visibles et se mettent en pause hors de l’écran.
• Avec « Réduire les animations », le mouvement s’arrête et les résultats s’affichent aussitôt.

• PrimaryButtonL’action clé d’une étape. Un seul bouton orange par étape
  Choisir un fichier
• SecondaryButtonBouton à contour sous le bouton principal
  Tout copier
• SmallButtonPetites actions à proximité (copier, annuler)
  AnnulerAnnuler
• IconButtonBouton rond avec icône seule. Toujours un nom lu par les lecteurs d’écran
• SegmentedControlChoisir une option parmi 2 à 4

  Format

  PNGJPGWebP
• SwitchUn réglage oui/non appliqué tout de suite
  Garder la taille d’origine
• ToggleButtonOptions activer/désactiver alignées dans une barre étroite. Activé : contour orange et coche
  Trier les clés par nom
• TextFieldChamp d’une ligne avec son libellé au-dessus
  Nom
• ColorSwatchesDes cercles pour les couleurs courantes et un cercle arc-en-ciel pour toute autre couleur

  Couleur

  Autre couleur#e53935
• CardButton・CardLinkPetite carte cliquable en entier
  Utiliser comme appOuvrez-la directement depuis l’écran d’accueil
• BadgePetite étiquette non cliquable pour un état bref
  ValideExpiré

• Les icônes des outils sont des dessins au trait dans un carré arrondi, dans la couleur du texte. Pas d’orange, pour que les rangées d’icônes restent calmes.
• Les convertisseurs indiquent en petit le format de sortie (comme PNG) dans l’icône.
• Le mode d’emploi montre une courte vidéo de l’écran réel à chaque étape : l’ordinateur dans un cadre de navigateur, le téléphone dans un cadre de téléphone.
• La zone touchée est entourée d’un cadre orange.
• Le texte de chaque étape reprend les mots de l’écran et dit où appuyer et ce qui se passe.

• Le texte garde un contraste d’au moins 4,5:1 avec le fond dans les deux thèmes, et les contours des commandes d’au moins 3:1.
• Tout fonctionne au clavier ; sur chaque composant, le focus apparaît comme un contour orange soutenu de 2 px, tracé à 2 px de l’élément.
• Les actions principales font au moins 44 px. Les petites actions voisines font 36 px (au-dessus des 24 px de WCAG 2.2, 2.5.8), avec au moins 8 px avec leurs voisines. Le × dans les champs et les cercles de couleur font 32 px.
• Les langues qui s’écrivent de droite à gauche, comme l’arabe, inversent la mise en page et les flèches.
• Les boutons à icône seule ont un nom lu, et aucun état n’est indiqué par la couleur seule.
• Le mode sombre et « Réduire les animations » ne cassent jamais la mise en page.

• Pas de publicité, pas d’envoi de fichiers, pas de requêtes vers des serveurs externes
• Vérifié sur ordinateur et téléphone, en clair et en sombre, en japonais, anglais et arabe, sans défilement horizontal à 360 px
• Un seul bouton principal orange par étape
• L’espace entre les éléments et à l’intérieur des encadrés suit les paliers définis, et les composants sont ceux partagés
• Les boutons nomment leur action, sans point d’exclamation ni emoji ; le texte d’erreur est rouge et dit quoi faire
• Les 10 langues sont complètes et les noms des boutons concordent avec les explications
• Les étapes du mode d’emploi sont claires pour une première utilisation