aswin-haridas/apple-guidelines-for-ui

Recommandations de conception UI (neutres sur le plan de la plateforme)

119 pages de référence dans references/ (à côté de ce fichier), réécrites à partir des HIG d’Apple pour s’appliquer à n’importe quelle plateforme. Chaque page conserve une ligne Source: pointant vers l’original.

Comment utiliser

1. Identifiez les sujets que la tâche aborde (composant, motif, fondation, entrée). Choisissez dans le catalogue ci-dessous.
2. Lisez uniquement les pages pertinentes avec l’outil de lecture, par ex. references/buttons.md. Utilisez une recherche par mot-clé dans references/ lorsque vous n’êtes pas sûr de la page qui couvre le sujet.
3. Appliquez les recommandations à la plateforme réellement utilisée (web, Android, iOS, poste de travail…). Lorsqu’une page nomme des équivalents multiplateformes (lecteurs d’écran, Cmd/Ctrl, conventions Material vs système), choisissez celui de la plateforme cible ; suivez les conventions natives de cette plateforme en cas de conflit.
4. Lors de la révision d’une interface, citez la page et la règle spécifique (par ex. « alerts.md : utilisez un bouton d’annulation pour les actions destructrices ») et dites concrètement ce qu’il faut changer.

Pesez toujours design-principles.md (but, agence, responsabilité, familiarité, flexibilité, simplicité, savoir-faire, plaisir) et accessibility.md pour tout travail d’interface.

Pages d’index : index.md, foundations.md, patterns.md, components.md, inputs.md.

Catalogue

• accessibility.md — Accessibilité : Les interfaces utilisateur accessibles permettent à chacun de vivre une excellente expérience avec votre application ou jeu.
• action-sheets.md — Feuilles d’actions : Une feuille d’actions (parfois appelée boîte de dialogue de confirmation ou menu de bas de page) est une vue modale qui présente des choix liés à une action que les utilisateurs ont déclenchée.
• activity-views.md — Vues d’activité : Une vue d’activité — souvent appelée feuille de partage — présente une gamme de tâches que les utilisateurs peuvent effectuer dans le contexte actuel. Sur le web…
• alerts.md — Alertes : Une alerte donne aux utilisateurs des informations critiques dont ils ont besoin immédiatement.
• app-icons.md — Icônes d’application : Une icône unique et mémorable exprime le but et la personnalité de votre application ou jeu et aide les utilisateurs à la reconnaître en un coup d’œil.
• augmented-reality.md — Réalité augmentée : La réalité augmentée (ou RA) permet de proposer des expériences immersives et engageantes qui mélangent harmonieusement des objets virtuels avec le monde réel.
• boxes.md — Boîtes : Une boîte crée un groupe visuellement distinct d’informations et de composants logiquement liés.
• branding.md — Marque : Les applications et jeux expriment leur identité de marque unique de manière à les rendre instantanément reconnaissables tout en se sentant chez eux sur la plateforme…
• buttons.md — Boutons : Un bouton déclenche une action instantanée.
• charting-data.md — Représentation graphique des données : Présenter des données dans un graphique peut aider à communiquer des informations avec clarté et attrait.
• charts.md — Graphiques : Organisez les données dans un graphique pour communiquer des informations avec clarté et attrait visuel.
• collaboration-and-sharing.md — Collaboration et partage : De bonnes expériences de collaboration et de partage sont simples et réactives, permettant aux utilisateurs d’interagir avec le contenu tout en communiquant efficacement.
• collections.md — Collections : Une collection gère un ensemble ordonné de contenu et le présente dans une mise en page personnalisable et très visuelle.
• color-wells.md — Puits de couleur : Un puits de couleur permet aux utilisateurs d’ajuster la couleur du texte, des formes, des guides et d’autres éléments à l’écran.
• color.md — Couleur : Une utilisation judicieuse de la couleur peut améliorer la communication, évoquer votre marque, assurer une continuité visuelle, communiquer l’état et les commentaires, et aider les utilisateurs…
• column-views.md — Vues en colonnes : Une vue en colonnes — également appelée navigateur ou colonnes de Miller — permet aux utilisateurs de visualiser et de naviguer dans une hiérarchie de données à l’aide d’une série de colonnes verticales.
• combo-boxes.md — Boîtes combinées : Une boîte combinée combine un champ de texte avec un bouton déroulant en un seul contrôle.
• components.md — Composants : Apprenez à utiliser et à personnaliser les composants fournis par le système pour offrir une expérience familière et cohérente.
• content.md — Contenu : - Graphiques
• context-menus.md — Menus contextuels : Un menu contextuel donne accès à des fonctionnalités directement liées à un élément, sans encombrer l’interface.
• controls.md — Contrôles : Un contrôle offre un accès rapide à une fonctionnalité de votre application depuis les surfaces système telles qu’un panneau de paramètres rapides, l’écran de verrouillage ou un bouton matériel.
• dark-mode.md — Mode sombre : Le mode sombre est un réglage d’apparence système qui utilise une palette de couleurs sombres pour offrir une expérience visuelle confortable adaptée aux environnements faiblement éclairés.
• design-principles.md — Principes de conception : Explorez les principes fondamentaux qui guident la conception sur toutes les plateformes — web, mobile, poste de travail et au-delà.
• designing-for-games.md — Conception pour les jeux : Lorsque les utilisateurs jouent à votre jeu sur n’importe quel appareil, ils plongent dans le monde que vous avez conçu tout en comptant sur les fonctionnalités de la plateforme qu’ils aiment.
• disclosure-controls.md — Contrôles de divulgation : Les contrôles de divulgation révèlent et masquent les informations et fonctionnalités liées à des contrôles ou vues spécifiques.
• drag-and-drop.md — Glisser-déposer : Grâce au glisser-déposer, les utilisateurs peuvent déplacer ou dupliquer des photos, du texte et d’autres contenus sélectionnés en faisant glisser la sélection d’un endroit à un autre.
• edit-menus.md — Menus d’édition : Un menu d’édition permet aux utilisateurs d’apporter des modifications au contenu sélectionné dans la vue actuelle, en plus de proposer des commandes associées telles que Copier, Sélectionner…
• entering-data.md — Saisie de données : Lorsque vous avez besoin d’informations de la part des utilisateurs, concevez des moyens qui leur facilitent la tâche sans faire d’erreurs.
• feedback.md — Commentaires : Les commentaires aident les utilisateurs à savoir ce qui se passe, à découvrir ce qu’ils peuvent faire ensuite, à comprendre les résultats des actions et à éviter les erreurs.
• file-management.md — Gestion de fichiers : Certaines applications peuvent prendre en charge des documents et fichiers que les utilisateurs s’attendent à gérer dans tout le système.
• focus-and-selection.md — Focus et sélection : Le focus aide les utilisateurs à confirmer visuellement l’objet que leur interaction cible.
• foundations.md — Fondations : Comprenez comment les éléments de conception fondamentaux vous aident à créer des expériences riches.
• game-controls.md — Contrôles de jeu : Des contrôles de jeu précis et intuitifs améliorent le gameplay et peuvent augmenter l’immersion du joueur dans le jeu.
• gauges.md — Jauges : Une jauge affiche une valeur numérique spécifique dans une plage de valeurs.
• generative-ai.md — IA générative : L’IA générative vous permet d’améliorer votre application ou jeu avec du contenu dynamique et d’offrir des fonctionnalités intelligentes qui débloquent de nouveaux niveaux de créativité.
• gestures.md — Gestes : Un geste est un mouvement physique qu’une personne utilise pour affecter directement un objet dans une application ou un jeu sur son appareil.
• getting-started.md — Pour commencer : Créez une application ou un jeu qui se sent chez lui sur toutes les plateformes que vous prenez en charge — web, mobile, poste de travail et au-delà.
• going-full-screen.md — Passage en plein écran : Les téléphones, tablettes, postes de travail et navigateurs web proposent des modes plein écran qui permettent aux utilisateurs d’agrandir une fenêtre pour remplir l’écran, masquant les contrôles système.
• gyro-and-accelerometer.md — Gyroscope et accéléromètre : Les gyroscopes et accéléromètres intégrés aux appareils peuvent fournir des données sur le mouvement de l’appareil dans le monde physique.
• icons.md — Icônes : Une icône efficace est un actif graphique qui exprime un concept unique d’une manière que les utilisateurs comprennent instantanément.
• image-views.md — Vues d’image : Une vue d’image affiche une seule image — ou dans certains cas, une séquence animée d’images — sur un fond transparent ou opaque.
• image-wells.md — Puits d’image : Un puits d’image est une version modifiable d’une vue d’image.
• images.md — Images : Pour vous assurer que vos illustrations sont superbes sur tous les appareils que vous prenez en charge, apprenez comment le système affiche le contenu et comment fournir des images à la résolution appropriée.
• inclusion.md — Inclusion : Les applications et jeux inclusifs mettent les utilisateurs en priorité en privilégiant une communication respectueuse et en présentant le contenu et les fonctionnalités de manière à ce que tout le monde…
• index.md — Recommandations de conception d’interface : Ces recommandations contiennent des conseils et des bonnes pratiques qui peuvent vous aider à concevoir une excellente expérience sur n’importe quelle plateforme — web, mobile, poste de travail…
• inputs.md — Entrées : Découvrez les différentes méthodes que les utilisateurs utilisent pour contrôler votre application ou jeu et saisir des données.
• keyboards.md — Claviers : Un clavier physique peut être un dispositif de saisie essentiel pour entrer du texte, jouer à des jeux, contrôler des applications, etc.
• labels.md — Étiquettes : Une étiquette est un morceau de texte statique que les utilisateurs peuvent lire et souvent copier, mais pas modifier.
• launching.md — Lancement : Une expérience de lancement rationalisée aide les utilisateurs à commencer à utiliser votre application ou jeu immédiatement.
• layout-and-organization.md — Mise en page et organisation : - Boîtes
• layout.md — Mise en page : Une mise en page cohérente qui s’adapte aux différentes tailles d’écran, orientations et configurations multitâches aide les utilisateurs à comprendre et à apprécier votre application.
• lists-and-tables.md — Listes et tableaux : Les listes et les tableaux présentent des données dans une ou plusieurs colonnes de lignes.
• live-viewing-apps.md — Applications de visionnage en direct : Lorsque vous concevez une application de visionnage en direct, privilégiez le contenu et créez des interactions amusantes et fluides qui encouragent l’immersion dans l’expérience de visionnage en direct.
• loading.md — Chargement : La meilleure expérience de chargement de contenu se termine avant que les utilisateurs n’en aient conscience.
• machine-learning.md — Apprentissage automatique : L’apprentissage automatique permet aux applications et aux jeux d’apprendre à partir des données et des modèles d’utilisation, vous permettant d’améliorer les expériences existantes et de créer des fonctionnalités attrayantes.
• managing-accounts.md — Gestion des comptes : Lorsque cela ne crée pas d’obstacle inutile à votre expérience, un compte peut être un moyen pratique pour les utilisateurs d’accéder à leur contenu…
• managing-notifications.md — Gestion des notifications : Les notifications peuvent donner aux utilisateurs des informations opportunes et importantes, que l’appareil soit verrouillé ou en cours d’utilisation.
• maps.md — Cartes : Une carte affiche des données géographiques extérieures ou intérieures dans votre application ou sur votre site web.
• materials.md — Matériaux : Un matériau est un effet visuel qui crée une impression de profondeur, de superposition et de hiérarchie entre les éléments de premier plan et d’arrière-plan.
• menus-and-actions.md — Menus et actions : - Vues d’activité
• menus.md — Menus : Un menu révèle ses options lorsque les utilisateurs interagissent avec lui, ce qui en fait un moyen économique en espace pour présenter des commandes dans votre application ou jeu.
• modality.md — Modalité : La modalité est une technique de conception qui présente le contenu dans un mode dédié séparé qui empêche l’interaction avec la vue parente et nécessite…
• motion.md — Mouvement : Des mouvements magnifiques et fluides donnent vie à l’interface, transmettant l’état, fournissant des commentaires et des instructions, et enrichissant l’expérience visuelle.
• multitasking.md — Multitâche : Le multitâche permet aux utilisateurs de passer rapidement d’une application à une autre, en effectuant des tâches dans chacune.
• navigation-and-search.md — Navigation et recherche : - Champs de recherche
• nearby-interactions.md — Interactions de proximité : Les interactions de proximité prennent en charge des expériences sur l’appareil qui intègrent la présence de personnes et d’objets dans l’environnement proche, en utilisant la proximité…
• nfc.md — NFC : La communication en champ proche (NFC) permet aux appareils situés à quelques centimètres les uns des autres d’échanger des informations sans fil.
• notifications.md — Notifications : Une notification donne aux utilisateurs des informations opportunes et de grande valeur qu’ils peuvent comprendre en un coup d’œil.
• offering-help.md — Offrir de l’aide : Bien que les expériences les plus efficaces soient accessibles et intuitives, vous pouvez fournir une aide contextuelle si nécessaire.
• onboarding.md — Intégration : L’intégration peut aider les utilisateurs à commencer rapidement à utiliser votre application ou jeu.
• outline-views.md — Vues en plan : Une vue en plan présente des données hiérarchiques dans une liste défilante de cellules organisées en colonnes et lignes.
• page-controls.md — Contrôles de page : Un contrôle de page (également appelé indicateur de page ou indicateur à points) affiche une rangée d’images indicatrices, chacune représentant une page dans un…
• panels.md — Panneaux : Dans une application de bureau, un panneau flotte généralement au-dessus des autres fenêtres ouvertes, fournissant des contrôles, options ou informations supplémentaires liés à…
• patterns.md — Motifs : Obtenez des conseils de conception pour prendre en charge les actions, tâches et expériences utilisateur courantes.
• pickers.md — Sélecteurs : Un sélecteur affiche une ou plusieurs listes défilables de valeurs distinctes parmi lesquelles les utilisateurs peuvent choisir.
• playing-audio.md — Lecture audio : Les utilisateurs s’attendent à des expériences audio riches qui s’adaptent automatiquement lorsque le contexte change sur l’appareil.
• playing-haptics.md — Lecture haptique : La lecture haptique peut engager le sens du toucher des utilisateurs et apporter leur familiarité avec le monde physique dans votre application ou jeu.
• playing-video.md — Lecture vidéo : Les utilisateurs s’attendent à profiter d’expériences vidéo riches sur leurs appareils, quelle que soit l’application ou le jeu qu’ils utilisent.
• pointing-devices.md — Dispositifs de pointage : Les utilisateurs peuvent utiliser un dispositif de pointage comme un pavé tactile ou une souris pour naviguer dans l’interface et initier des actions.
• pop-up-buttons.md — Boutons contextuels : Un bouton contextuel (également appelé liste déroulante ou sélecteur sur certaines plateformes) affiche un menu d’options mutuellement exclusives.
• popovers.md — Popovers : Un popover est une vue transitoire qui apparaît au-dessus d’autres contenus lorsque les utilisateurs cliquent ou tapent sur un contrôle ou une zone interactive.
• presentation.md — Présentation : - Feuilles d’actions
• printing.md — Impression : Une application peut intégrer les fonctionnalités d’impression fournies par le système lorsque cela a du sens, en présentant des options personnalisées spécifiques à l’imprimante et au document si nécessaire.
• privacy.md — Confidentialité : La confidentialité est primordiale : il est essentiel d’être transparent sur les données et ressources liées à la vie privée que vous requérez et crucial de protéger…
• progress-indicators.md — Indicateurs de progression : Les indicateurs de progression informent les utilisateurs que votre application n’est pas bloquée pendant le chargement du contenu ou l’exécution d’opérations longues.
• pull-down-buttons.md — Boutons déroulants : Un bouton déroulant affiche un menu d’éléments ou d’actions qui se rapportent directement au but du bouton.
• rating-indicators.md — Indicateurs de notation : Un indicateur de notation utilise une série de symboles graphiques disposés horizontalement — par défaut, des étoiles — pour communiquer un niveau de classement.
• ratings-and-reviews.md — Évaluations et avis : Les utilisateurs consultent souvent les évaluations et les avis d’une application ou d’un jeu avant de le télécharger.
• right-to-left.md — De droite à gauche : Prenez en charge les langues de droite à gauche comme l’arabe et…