Avatar

Die Avatar-Komponente ermöglicht es Benutzern, sich visuell auszudrücken, indem sie ein Bild oder Symbol wählen, das sie innerhalb Ihrer Anwendung repräsentiert.

Einrichten Ihres Avatars

1: Wählen Sie die visuelle Darstellung des Avatars

Wählen Sie die Darstellung aus, die Ihren Avatar repräsentieren soll:

• Symbol: Wählen Sie ein vordefiniertes Symbol aus der Bibliothek, um den Avatar darzustellen. Dies ist eine gute Option für eine einfache, symbolische Darstellung.

• Bild: Laden Sie Ihr Bild hoch, um den Avatar zu personalisieren. Dies ist ideal für Fotos oder benutzerdefinierte Grafiken.

2: Definieren Sie die Form (Variante)

Wählen Sie die Form Ihres Avatars:

• Kreis: Zeigt den Avatar in einem runden Rahmen an. Dies ist eine gängige Wahl für Benutzerprofile.

• Quadrat: Zeigt den Avatar in einem quadratischen Rahmen an

3: Größe einstellen

• Vordefinierte Größen: Wählen Sie aus voreingestellten Größen wie „Klein“, „Mittel“ oder „Groß“.

• Benutzerdefinierte Größe: Geben Sie die genauen Abmessungen (in Pixel) für Ihren Avatar an, wenn Sie eine präzisere Kontrolle benötigen

Passen Sie die Größe des Avatars an, damit er zu Ihrem Design passt.

Kontext und Details hinzufügen

4. Zusätzliche Informationen bereitstellen (Details)

Verwenden Sie die Einstellungen „Details“, um Text hinzuzufügen, der mehr Kontext zum Avatar bietet:

• Primärer Text: Fügen Sie ein Hauptlabel hinzu, wie zum Beispiel den Namen des Benutzers.

• Sekundärer Text: Fügen Sie ergänzende Informationen hinzu, wie einen Jobtitel oder eine Beschreibung.

• Textposition: Steuern Sie die Platzierung des Textes relativ zum Avatar (oben, unten, links oder rechts).

• Tags: Fügen Sie Tags hinzu, um den Avatar zu kategorisieren oder weiter zu beschreiben.

5. Status oder Anwesenheit anzeigen (optional)

Verwenden Sie „Status“- und „Anwesenheits“-Indikatoren, um visuell den Zustand oder die Verfügbarkeit der durch den Avatar dargestellten Person oder des Objekts zu kommunizieren. Dies sind kleine visuelle Hinweise, die Informationen auf einen Blick liefern.

• Status: Ein farbiger Punkt, der über dem Avatar eingeblendet wird und verschiedene Zustände darstellt.

  • Beispiele:

    • Genehmigungsstatus: Grün für genehmigt, Gelb für ausstehend, Rot für abgelehnt.

    • Konto-Status: Grün für aktiv, Rot für gesperrt, Grau für ausgesetzt.

    • Aufgabenstatus: Grün für abgeschlossen, Gelb für in Bearbeitung, Grau für nicht begonnen.

  • Anpassung: Sie können die Position des Punktes auf dem Avatar steuern und die Farben wählen, die jeden Status repräsentieren.

• Anwesenheit: Ähnlich wie „Status“, zeigt jedoch explizit die Online-/Offline-Verfügbarkeit an.

  • Häufige Verwendung: Oft verwendet in Kommunikations- oder Kollaborationstools.

  • Standardfarben: Verwendet typischerweise Grün für online/verfügbar und Rot oder Grau für offline/nicht verfügbar.

Warum Status und Anwesenheit verwenden?

• Verbesserte Kommunikation: Schnelle Informationsübermittlung ohne zusätzlichen Text.

• Verbesserte Benutzererfahrung: Hilft Benutzern, die Verfügbarkeit zu verstehen und fundierte Entscheidungen zu treffen.

• Erhöhte Effizienz: Reduziert die kognitive Belastung durch leicht interpretierbare visuelle Hinweise.

Beispiel: In einer Kunden-Support-App verwenden Sie Avatare mit Anwesenheitsindikatoren, um zu zeigen, welche Support-Mitarbeiter derzeit online und verfügbar sind, um zu helfen.

6. Ein Entitäts-Symbol hinzufügen (optional)

Verwenden Sie ein „Entitäts-Symbol“, um zu verdeutlichen, was der Avatar darstellt (z. B. einen einzelnen Benutzer, eine Gruppe oder eine Organisation).

• So fügen Sie sie hinzu: Wählen Sie ein Symbol aus der Bibliothek, das den Entitätstyp symbolisiert.

• Beispiel: Verwenden Sie ein Einzelpersonensymbol für eine Person, ein Gruppensymbol für ein Team oder ein Gebäudesymbol für ein Unternehmen.

• Anpassung:

  • Größe: Passen Sie die Größe des Symbols an, damit es sichtbar ist, aber das Hauptbild des Avatars nicht verdeckt.

  • Position: Platzieren Sie das Symbol in einer Ecke des Avatars (z. B. oben links, unten rechts).

7. Interaktive Aktionen hinzufügen (optional)

Machen Sie Ihre Avatare zu interaktiven Elementen, indem Sie Aktionsschaltflächen hinzufügen.

• Aktionsschaltflächen: Fügen Sie Schaltflächen hinzu, die beim Klicken bestimmte Aktionen auslösen.

  • Beispiele: „Bearbeiten“ (um ein Profil zu aktualisieren), „Nachricht“ (um einen Chat zu starten), „Folgen“ (um sich mit einem Benutzer zu verbinden).

• Auslöser: Definieren Sie, wie die Aktionsschaltflächen aktiviert werden:

  • Bei Klick: Die Aktion wird ausgeführt, wenn der Benutzer auf die Schaltfläche klickt.

  • Bei Hover: Die Aktion wird ausgeführt oder vorgeschaut, wenn der Benutzer mit der Maus über die Schaltfläche fährt

---

Beispielanwendungsfälle

• Benutzerprofile: Zeigen Sie Benutzeravatare mit ihren Namen und Rollen an.

• Kontaktlisten: Zeigen Sie Kontaktavatare mit ihrem Status oder ihrer Anwesenheit an.

• Team-Dashboards: Stellen Sie Teammitglieder mit Avataren und ihren aktuellen Projekten dar.

• Interaktive Listen: Verwenden Sie Avatare mit Aktionsschaltflächen, um schnelle Interaktionen zu ermöglichen (z. B. das Senden einer Nachricht an einen Benutzer).

---

Wichtige Hinweise

• Bildoptimierung: Für beste Leistung verwenden Sie optimierte Bilder mit geeigneten Abmessungen.

• Barrierefreiheit: Geben Sie alternative Texte für Avatare an, um die Zugänglichkeit für sehbehinderte Benutzer sicherzustellen.

• Konsistenz: Behalten Sie einen konsistenten Stil und eine konsistente Größe für Avatare in Ihrer Anwendung bei, um ein einheitliches Benutzererlebnis zu gewährleisten