Benutzerauswertungszustände entwerfen/ anzeigen

Ich bin auf der Suche nach Ideen, wie man die "Bewertung eines Benutzers" darstellen kann.

  • Sie der Gutachter
  • Zu bewertende Benutzer
  • Basierend auf der Punktzahl hat der Rahmen um das Benutzerprofil eine andere Farbe

Wie könnte dies in einem einzigen Bild dargestellt werden? Anbei ein Konzept, das nicht klar genug ist, ich brauche etwas, das eingängiger ist.Geben Sie hier die Bildbeschreibung ein

Von welcher Auswertung sprechen wir?
@poepje, so etwas wie hier im Stack-Netzwerk, Benutzer beantworten eine Frage und wenn sie gut ist, erhalten sie eine Punktzahl, wenn sie schlecht ist, erhalten sie eine negative Punktzahl (wie die gelben und blau-grünen Farben).
Hmm, das ist ein bisschen vage.. Ich würde rot für negativ und grün für gut verwenden, was ziemlich Standard ist (na ja, in den meisten westlichen Kulturen gibt es sowieso eine Frage dazu, wo gesagt wird, dass es in China genau umgekehrt ist :P). Benötigen Sie dazwischen mehr Stufen (z. B. eine Bewertung von 1-10), könnten Sie einfach die Farben dazwischen verwenden. Denken Sie an etwas wiered > red-orange > dark orange > light orange > orange-yellow > yellow > yellow-green > lime> green
Deine kleine gekritzelte menschliche Bohne ist entzückend. Übrigens. :)

Antworten (2)

Wie wäre es mit einem transparenten PNG-Symbol mit einer per CSS angewendeten Hintergrundfarbe?

Bilder hätten alle die gleiche Größe, aber Sie könnten die Farben basierend auf transparenten Bereichen des PNG ändern.

Dies ist ein jpg, das die Idee darstellt ....

Smileys © 2012

Aber das eigentliche PNG hätte das eigentliche Symbol transparent:

Transparentes Lächeln © 2012

<img src="smile.png" width="100" height="100" border="0" class="evaluser0" />
<img src="smile.png" width="100" height="100" border="0" class="evaluser1" />
<img src="smile.png" width="100" height="100" border="0" class="evaluser2" />
<img src="smile.png" width="100" height="100" border="0" class="evaluser3" />

img.evaluser0 { background: #fef200; }
img.evaluser1 { background: #f26422; }
img.evaluser2 { background: #ec145b; }
img.evaluser3 { background: #00a650; }

Ein Dia-Diagramm mit einem Farbschema, das von Rot nach Grün fortschreitet, ist ein guter visueller Fortschritts-/Erfolgsindikator. Zahlen sind nicht ganz so emotional stark, können aber kulturelle Grenzen leichter überschreiten. Formen wie Karos und Pluspunkte sind auch visuelle Indikatoren für positives Feedback (denken Sie an den Like-Button von Facebook oder das Herz von Instagram).

Benutzerauswertungszustände entwerfen/ anzeigen
AntwortenHierDatenschutz-Bestimmungen1y, 0v