Visualisation des données est l'une des meilleures façons de transmettre des informations, il peut présenter une visualisation de données et attirer rapidement l'attention de l'utilisateur. Toutefois, si le concepteur est asymétrique de comprendre la conception du graphique, les utilisateurs peuvent créer des chaussures trompeuses sur l'interface, de sorte que l'auteur tire la conception du tableau pour combiner l'expérience mon propre travail, j'espère que chaque concepteur peut devenir d'excellentes données de porteur . Ici, je vais explorer différents points de connaissance de la conception de la cartographie des fonctions, des interactions et des interfaces d'interface utilisateur.
1. Graphique
désigne l'affichage des informations statistiques (heure, quantification, etc.) Dans l'écran, une excavation visuelle et des informations vivantes intuitives de la structure graphique du rôle principal sont un moyen d'accéder à l'accès aux données d'attribut d'objet d'objet. Quan Hoa.
Si la table mIl peut être plein de données, le graphique peut perfectionner les caractéristiques et les modifications de données, incapables d'effectuer les capacités de discussion de la table.
2. Utilisez la scène
. Différence de données. Sur la base des données de classification, vous pouvez comprendre la différence de différentes catégories, telles que des graphiques, avec des données comparatives. Sur la base de données basées sur les processus, les tendances des données peuvent être comprises en comparant les données, telles que des diagrammes de ligne. Les données d'analyse
Distribution . Pour la relation entre variables complexes, la loi peut être trouvée à travers le graphique. Par exemple, l'utilisation de cartes à bulles vers une analyse régressive. Comprendre les données
de former . Découvrez le taux de chaque variable, telle qu'un graphique à secteurs. 3. À l'origine TBatterie
Lumière.
On sait que la table est le calcul complet des données, mais lorsque les mêmes données sont affichées, le concepteur souhaite toujours mettre toutes les informations sur le graphique et que le graphique est très encombrant, ce qui augmente la défaillance de la durée utilisateurs. Vous devez clarifier les caractéristiques de votre type de graphique, afficher les informations principales sur le graphique ou le graphique d'affichage, tels que le forage de données.
Intuitive.
Les concepteurs doivent être clairement et des expressions intuitives, les utilisateurs peuvent vérifier la vérité et découvrir la valeur commerciale et prendre des décisions plus rapidement.Beauté. L'absence de visualisation de données cosmétiques est simplement affichant des données. La beauté se compose de deux parties, la première partie est la coordination générale, telle que des éléments individuels dans le graphique (titre, grille, coordonnées, axe, vignettes, légendes, informations rapides, lignes d'alerte précoce et lignes auxiliaires, etc.) coordination. La deuxième partie est la beauté des détails locaux,Terme en tant que concepteurs, pente supplémentaire dans le diagramme selon la tendance épidémique.
J'utiliserai un type de graphique complexe - des cartes à deux axes comme une démonstration.
1. TITRE.
Inclure l'alignement sur le lien gauche, alignement et droite. Avant de choisir certains alignements, prenez soin de la position de la légende.
2. Grille.
contient des points, de la linéarité et des zèbres.
Sélectionnez la ligne latérale horizontale en fonction des caractéristiques de données, des directions horizontales de la direction horizontale. Guide de la ligne Videurs avancés verticaux dans les directions verticales.
Les recommandations linéaires utilisent des lignes pointillées car ce n'est pas un utilisateur de déterminer la valeur de pointage.3. Coordonner l'axe.
L'arbre de coordonnées comprend l'arbre de coordonnées X, les coordonnées médicales et les axes secondaires. Le changement de l'échelle de l'axe des x, si plus de taille, la gamme d'expositions d'échelle horizontale est limitée. En l'absence de vignettes, changez de manière appropriéeL'angle de la balance (0 à 90 degrés doit être approprié) économiser de l'espace, mais il est nécessaire de suivre les règles de gauche à droite. La valeur initiale de l'axe des Y est 0 et sinon, la plénitude des données ne peut pas être affichée. Si la volatilité des données relativement significatives (par exemple, dans les données de marché boursier), vous pouvez supprimer l'échelle pour afficher ces différences.
La valeur de taux d'axe des Y est convertie en mille séparateurs, tels que K, M, B.La valeur maximale de l'axe Y convient et garantit que le graphique prend beaucoup plus de 2/3.
4. Thumbnail.
Comprend une diapositive et une surface de bourrage. Tirez la colonne coulissante coulissante, augmentez ou moins de glissement, modifiant ainsi la densité de l'écran. Faites glisser la glissière, conservez la longueur de la surface coulissante et avancez. Ne changez pas la densité d'écran, ne changez que la plage de visualisation.
5. Théorie.
Tous les types de graphiques sont agencés dans l'uniforme, alors considérez l'espace de graphique global approprié pour organiser des arrangements horizontaux ou verticaux.
Tous les formulaires ont dépassé la zone de contenu.
Diagramme biaxial contient deux types différents de graphiques et différents types de graphiques distingués.Les données affichent en permanence les modifications de la taille des données en fonction de la hiérarchie.
6. Informations rapides.
Inclut un point de données et plusieurs points de données.Le contenu rapide change différemment en tant que variable sélectionnée dans la même direction. L'invite de couche flottante de multivariée est toutes les variables dans la même direction.
Le contenu de la pointe est conforme aux spécifications de formulaire et est aligné en fonction du côlon.
Développement: la légende des tables de ligne droite consiste à afficher toutes les variables, mais combinant "transformer + changements + colonnes".
7. Route d'avertissement.
Les données dépassent le seuil d'alerter et d'aider les personnesJ'utilise le suivi des données.
La ligne d'avertissement est recommandée d'utiliser une ligne constante et d'utiliser la couleur d'avertissement pour attirer l'attention de l'utilisateur, il est préférable d'utiliser le message ou le SMS pour informer l'utilisateur. 8. Lignes auxiliaires.
Les utilisateurs définissent la valeur sous forme de référence de données à titre de comparaison, telles que l'installation moyenne divisant la valeur de référence.La ligne secondaire est recommandée d'utiliser une ligne pointillée et uniquement le rôle de référence.
Interaction
1. Mode de charge.
Chargement des suggestions animées d'utilisation et de types liés au graphique.2. Valeur inhabituelle.
Permet aux utilisateurs de supprimer des points inhabituels car les anomalies affectent l'ensemble de l'analyse du graphique.
3. Machine de forage de données.
Cliquez sur les données pour afficher les données pour obtenir des informations détaillées, détaillée de l'analyse.
4. Adaptateur
Augmentation ou diminution du blanc. La taille du graphique est fixe, juste booster ouC réduire l'espace blanc. Je suis avec zoom. La largeur de la longueur du graphique est divisée selon la même échelle.
UI
1. Couleur
(1) Thème de couleur
. Convient pour moins de contenu d'information.
Avantages: vous pouvez définir un bon niveau de visualisation par la disposition, le contenu reflète profondément et attirer fort visuel, donnant aux gens à faire l'expérience des images premium.Inconvénients: faible lisibilité. La page est trop concentrée sur la balance des feuilles supérieures.
Fond de lumière. Convient pour plus d'informations.
Avantages: grande lisibilité, accroître l'espace spatial.Inconvénients: le contenu ne se concentre pas et des informations trop petites.
(2) Palette de couleur.
Tout d'abord, assurez-vous que le nombre de couleurs suffit pour répondre à l'écran de la chaîne de données dans le graphique. Utilisation des modèles de couleurs matures, tels que des couleurs d'interface utilisateur plate et des couleurs de conception de matériaux.
Utilisez le faible tOh commun, comme des gradients.Utiliser des émotions, des panneaux émotionnels sont une expérience d'images, d'inspiration et d'exploration des utilisateurs, puis agissent sur une conception intuitive. Vous pouvez enquêter et former un «sentiment de style» et «éléments de conception» avec la signification des instructions.
[3) Création de règles de création de couleurs. Une variable est uniforme avec une couleur, puis appuyez sur la palette pour suivre la couleur de chaque variable. Faire des couleurs du même tableau et avoir esthétique.
(4) des défauts de vision.
Il y a des personnes dans le monde avec des défauts visuels, ils ne peuvent pas obtenir la taille et la variable des graphiques régionaux à travers les couleurs. En tant que designer, cette partie n'est pas négligée.
PS et AI couramment utilisés couramment utilisés par les concepteurs fournissent une simulation rouge aveugle et verte, choisissez "Installation anti-vue - store rouge / bleu".
Je veux résoudre ce problème fondamentalement, suggérez-en unL'expédition couleur des concepteurs de l'article de Tencent dans les graphiques - des solutions de conception amicales est orientée vers le visage.
2. Disposition
La hiérarchie visuelle convient aux niveaux logiques et la lecture de l'utilisateur est instructurée par la profondeur. Chaque facteur doit être cohérent, garantissant toute la disposition du composite.3. Illustration
Conformément au thème et au globalement facile à comprendre, les données visuelles de certains seuils cognitifs ont certainement besoin de illustrer pour améliorer la compréhension de votre utilisateur.
4. Lee blanc
Des informations excessives entraînent facilement une pression intuitive, l'écart raisonnable peut améliorer la capacité d'absorber des informations de l'utilisateur.
5. PolicesÉvitez les polices de doublure de la personnalité, la police montre clairement. En taille de police, l'effet est trop petit, une lecture trop facile pour apporter le contrôle du graphique. Les polices normales sont d'environ 12px, le titre est 14px.
1. La bibliothèque de cartes de grande usine est enrichie et uniforme, et le temps de développement est largement sauvé, tel que Baidu G2 de Echat et Ali.
2. Inspiré de l'analyse des données professionnelles
L'auteur vient de démarrer des données d'apprentissage visuelles pour prendre des formulaires de données pour continuer à explorer, car les utilisateurs ressentent l'expérience d'interaction de ces graphiques. Vous trouverez ci-dessous une liste de sites de données visuels ici.
1. Top données, parlant de visualisation
, nous devons comprendre les scènes et limiter les applications de tous types de graphique, vous pouvez voir 33 Types de graphiques classiques, faciles à visualiser des données. Comprendre ces choses peut vous aider à mieux montrer les caractéristiques du graphique à travers l'interface utilisateur. Par exemple, la densité de population de chaque région peut être affichée avec le tableau des colonnes, mais nous voyons que la carte terrestre se rapprochera des attentes de l'utilisateur.
2. Pour le malRAW, excessive intuitive
Plusieurs fois, le concepteur est difficile à montrer que leurs compétences de conception sur le graphique, ajouteront trop au tableau. Effets visuels, tels que des effets 3D. 3. Données réelles, visualisation
N'essayez pas d'inclure le problème, mais reflète les données réelles, l'exposition et la résolution des incidents utilisés. Par exemple, surveiller le seuil de données, la ligne d'alerte précoce est une manière très conviviale.
Informations de référence
http://www.199it.com/wp-content/uploads/2014/06/data_visualization_101_how_te_design_Charts_and_graphs.pdf
2.HTTP: / / www .woshipm.com / ucd / 199509.html
3.https: //antv.alipay.com/vis/doc/dsign/ Principe / Color.html
4. http: / /wwww.woshousem.com/ucd/653066.html
5.HTTP: //wwww.jianshu.com/p/2f34821b0e9d
(Remarque: graphique d'image Cet exemple vient de BDP, Je n'essaye pas ~) Auteur: Angela Angela, Numéro public: IdatadesigN.THARMA DATA DONNÉES UX & AMP;PM, participer aux centres de données, aux plates-formes d'analyse des données et aux entreprises et autres conceptions de produits. Attention à de grandes données, intelligence artificielle et finance Internet. Bienvenue à Exchange ~ Cet article est copié partage, si elle est liée aux travaux, au droit d'auteur et d'autres problèmes, veuillez nous contacter pour supprimer la première fois (microprocesseur: LOVEDATA0520)