Conception d'interface utilisateur Web Readiz
Les utilisateurs n'aiment pas les configurations où les boutons et les explications occupent l'écran. Ils préfèrent des contrôles compacts et une hiérarchie claire qui leur permettent de lire et d'explorer le contenu réel en un coup d'œil. Appliquez ces normes à toute nouvelle interface utilisateur web ou modification d'interface existante. En cas d'exigences spécifiques de marque, de plateforme ou d'accessibilité spécifiées par l'utilisateur, suivez-les d'abord.
Densité de base
Voici les valeurs de départ pour les outils web sans directive de conception particulière. Plutôt que de réduire la taille du texte, réduisez les marges inutiles et les contrôles superflus.
| Élément | Valeur par défaut |
|---|---|
| Boutons standards·filtres·select | Hauteur 28px, police 12px, padding horizontal 6-8px |
| Boutons icônes | 26×26px, icône 14-16px |
| Contrôles secondaires / tableau | 24-26px |
| Espacement entre boutons | 4-6px |
| Padding interne de la carte | 12-16px |
| Cellules de tableau | Hauteur verticale 5-7px, largeur 6-10px |
| Texte principal | 13-14px, hauteur de ligne 1.5-1.7 |
- Les boutons courts s'adaptent à la largeur de leur contenu. Ne créez pas de boutons larges ou grands uniquement parce qu'ils représentent une action principale.
- Maintenez une taille visuelle compacte également sur mobile. N'augmentez pas tous les boutons à 38-48px via une media query commune. Si des erreurs tactiles réelles sont confirmées, ajustez l'espacement et la zone de contact de ce contrôle, et assurez-vous qu'il n'empiète pas sur les contrôles adjacents. Suivez séparément les spécifications explicites de la plateforme.
- Les longues lignes de listes à choix multiples ou de listes s'allongent naturellement en fonction de la longueur du texte. Ne tronquez pas le contenu à lire par une hauteur fixe ou des points de suspension. Si vous pouvez afficher séparément le titre actuel (comme pour la navigation par numéro), séparez les petits contrôles de navigation du titre du contenu.
- Préférez une palette de bleus comme couleur d'accentuation principale. Utilisez un fond clair et calme, des bordures fines, des coins légèrement arrondis. Conservez les distinctions de couleur par signification de la marque et graphiques existants.
Composition de l'écran
- Placez les graphiques, tableaux et contenus réels dans la zone visible initialement. Ne repoussez pas la zone de travail avec de grands titres d'introduction, des sous-titres longs ou des badges redondants.
- Utilisez des tableaux pour les données répétées et les comparaisons, des listes triées et de courts onglets pour la navigation par élément, et de petites barres d'outils pour la manipulation des graphiques. Ne listez pas les boutons individuels comme de grandes cartes.
- Utilisez le système SVG / icône existant du projet pour les actions courantes. Fournissez un nom accessible, une infobulle et/ou une courte étiquette nécessaire pour chaque icône. Ne distinguez pas la sélection, le succès ou l'erreur uniquement par la couleur.
- Laissez les résumés essentiels et les actions fréquemment utilisées visibles. Placez les descriptions détaillées, les sources, les instructions d'utilisation et les critères de sauvegarde derrière ⓘ ou dans des détails repliés par défaut. Affichez les erreurs, les échecs de sauvegarde, les résultats d'exécution et les conditions de décision importantes au moment opportun.
- Ne répétez pas le même état dans le titre, la carte, le badge et la description. Ne forcez pas l'utilisateur à lire un long texte pour trouver une fonctionnalité.
- Alignez l'espacement et l'alignement des boutons d'action, des tableaux et des graphiques. Une table des matières étroite sur desktop et une configuration pliable affichant la position actuelle sur mobile conviennent mieux.
Vérification sur écran réel
- Vérifiez la hauteur calculée réelle, le padding, la hauteur de ligne et la position du premier contenu du bouton avant modification. Ne jugez pas qu'il a rétréci en voyant seulement les déclarations CSS modifiées.
- Modifiez d'abord les variantes et les jetons de composant existants. Vérifiez si le CSS commun, la spécificité élevée, les surcharges mobiles et les styles dynamiques augmentent à nouveau la taille. Plutôt que d'accumuler des règles de surcharge, nettoyez la cause de cette taille.
- Testez visuellement sur un PC, une tablette et un mobile représentatif (360-390px). Vérifiez que les contrôles généraux respectent les valeurs par défaut ci-dessus, que les textes longs ne sont pas tronqués, qu'il n'y a pas de débordement horizontal et pas de chevauchement des outils / graphiques.
- Vérifiez le déploiement, la sélection, le focus clavier, le toucher et la sauvegarde / restauration nécessaires. Ne modifiez pas les données existantes, les clés de stockage ou les coordonnées des graphiques en raison d'un changement de conception.
- Implémentez et validez les résultats de la portée demandée, et pour les tâches incluant un déploiement, vérifiez également l'écran réel déployé. Cette compétence elle-même n'ajoute pas de permission de publication ou d'envoi de message.