102.3K+Télécharger
Aller au guide d’utilisation
Data Visualizationpar Owl-Listener

Data Visualization Skill.

Choisissez le graphique qui rend la comparaison compréhensible, et non celui qui paraît le plus sophistiqué.

  • Data Visualization
  • Conseils de conception
Télécharger OpenDesignVoir le guide d'utilisation
Revue de la source · Data VisualizationSKILL.md
Tâche UX Produit • Un choix de graphique lié à la question • Une spécification des marques, axes, étiquettes et du contexte • Des alternatives accessibles et adaptées aux petits écrans Avant de commencer Fournissez les données réelles, la définition des champs, la question du lecteur et les contraintes d'affichage. Cette skill guide la conception du graphique ; la validation des données et l'implémentation du graphique restent des tâches distinctes.
Synthèse éditoriale · source examinée le 2026-10-07 · ce n'est pas un exemple généré

01 Fonctionnement

Data Visualization : choisir des encodages visuels honnêtes

Choix du graphique, encodage visuel, étiquetage contextuel, accessibilité et présentation adaptative.

Flux de travail fondé sur la sourceCe n'est pas un benchmark d'exécution

La méthode de travail

Data Visualization est une skill de conception de graphiques. Elle associe les questions de comparaison, de tendance, de composition, de distribution et de relation à des formes de graphiques possibles, puis traite les étiquettes, les axes, le contexte et l'encodage visuel.

Son périmètre est la présentation, et non la collecte de données ni la preuve statistique. Elle met l'accent sur les données réelles, l'annotation directe, les repères autres que la couleur et les alternatives adaptatives, comme un tableau. La conception de la palette de couleurs du produit reste un sujet distinct.

Livrables attendus

  • Un choix de graphique lié à la question
  • Une spécification des marques, axes, étiquettes et du contexte
  • Des alternatives accessibles et adaptées aux petits écrans
Voir l'exemple de brief

Du brief à la revue

  1. 01
    Formuler la question

    Identifiez la comparaison ou le motif que les lecteurs doivent comprendre.

  2. 02
    Choisir l'encodage

    Sélectionnez un graphique simple et définissez les axes, les étiquettes, les unités et un traitement cohérent des séries.

  3. 03
    Vérifier les conditions réelles

    Utilisez les données réelles, ajoutez un contexte utile et vérifiez les repères autres que la couleur ainsi que le comportement sur petit écran.

02 Cas d’usage

Quand l'utiliser

Fournissez les données réelles, la définition des champs, la question du lecteur et les contraintes d'affichage. Cette skill guide la conception du graphique ; la validation des données et l'implémentation du graphique restent des tâches distinctes.

Un bon cas d'usage

  • Graphiques de tableau de bordClarifier le type de graphique et le contexte pour un indicateur précis.
  • Visuels trompeursExaminer les encodages et les axes qui déforment ou masquent une comparaison.

Limites à vérifier

  • Ne définit pas les indicateursLa skill ne peut pas établir l'exactitude des chiffres fournis ni leur signification métier.
  • Ne conçoit pas l'architecture de la paletteElle gère l'encodage des graphiques, et non toute la couche du système de couleurs du produit.

Éléments à fournir

  • Données réellesFournissez les valeurs, les unités, les cas de données manquantes et les définitions.
  • Question du lecteurIndiquez la décision ou la comparaison que le graphique doit appuyer.
  • Contexte d'affichagePrécisez la taille, l'interaction, l'usage mobile et les alternatives textuelles.

03 Décisions importantes

Les décisions qui comptent

  1. Choix guidé par la question

    Une forme de graphique se justifie par la relation qu'elle doit révéler.

  2. Redondance accessible

    Les étiquettes, les formes ou les motifs transmettent ce que la teinte seule ne peut pas transmettre.

04 Exemple de brief

Essayer un brief ciblé

L'exemple de brief ci-dessous n'a pas été testé. Vérifiez la configuration de la skill avant de l'utiliser.

Examiner la configuration

Chargez le SKILL.md de cette tâche depuis le dépôt designer-skills dans l'emplacement de skills pris en charge par votre agent. Le fichier d'entrée n'établit aucune commande d'installation universelle.

Fichier source amont
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/data-visualization/SKILL.md

Fournissez les données réelles, la définition des champs, la question du lecteur et les contraintes d'affichage. Cette skill guide la conception du graphique ; la validation des données et l'implémentation du graphique restent des tâches distinctes.

Commencer par un seul livrable

Adaptez le périmètre, les documents sources et les contraintes de ce brief avant d'exécuter la skill.

Exemple de brief
Utilisez data-visualization pour reconcevoir ce graphique objectif/réel à partir des valeurs mensuelles fournies. Recommandez un graphique avec des unités et un contexte clairs, expliquez le choix des axes et incluez une alternative mobile lisible ainsi qu'un résumé textuel. N'en déduisez pas les causes de la tendance.

Inspecter le résultat

Comparez le résultat réel à ces critères observables.

  • Le graphique répond à la question posée.
  • Les axes, étiquettes et encodages reflètent les données réelles.
  • Le sens reste disponible sans couleur ni survol.

OpenDesign fournit un espace de travail de conception local pour les agents de code. Cette mention ne signifie pas que la skill est incluse, ni que ses outils externes, identifiants et dépendances logicielles le sont.

Télécharger OpenDesignLire le guide de démarrage rapide

05 Source et licence

Source et licence

Cette page décrit la révision source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source
Owl-Listener
Dépôt
Owl-Listener/designer-skills
Fichier de la skill
ui-design/skills/data-visualization/SKILL.md
Licence
MIT
Version examinée
2026-10-07 · 9a6930cf84a8
Synthèse éditoriale de la source
Choix du graphique, encodage visuel, étiquetage contextuel, accessibilité et présentation adaptative.

Synthèse originale de OpenDesign, fondée sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, et non une mesure d'utilisation de la skill ni de sa qualité.

06 Questions avant de commencer

Questions avant de commencer

Calcule-t-elle les indicateurs sous-jacents ?

La source porte sur le choix du graphique et l'encodage ; la validation des indicateurs est distincte.

La vue mobile doit-elle conserver le même graphique ?

Non. Elle autorise explicitement des vues plus simples, y compris des tableaux.

La couleur peut-elle être le seul repère des séries ?

La source recommande des étiquettes, motifs ou formes redondants.

OpenDesign

Faites de la place pour la prochaine itération de conception.

Gardez votre brief, vos documents sources et votre travail de conception réunis dans un espace de travail local. Vérifiez la configuration propre à la skill avant de l'ajouter à votre flux de travail.

Télécharger OpenDesignParcourir les skills de conception
Fichier source amont
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/data-visualization/SKILL.md