diseñar / mostrar el estado de evaluación del usuario

Estoy buscando discutir ideas sobre cómo representar la "evaluación de un usuario".

  • usted el evaluador
  • Usuarios a evaluar
  • Basado en la puntuación, el borde alrededor del perfil del usuario es de un color diferente

¿Cómo se podría representar esto en 1 sola imagen? Adjunto un concepto que no es lo suficientemente claro. Necesito algo que sea más pegadizo.ingrese la descripción de la imagen aquí

¿De qué tipo de evaluación estamos hablando?
@poepje, algo así como aquí en la red de pila, los usuarios responden una pregunta y si es bueno reciben un puntaje si es malo reciben un puntaje negativo (como los colores amarillo y azul verde)
Hmm, eso es un poco vago... Yo usaría rojo para negativo y verde para bueno, lo cual es bastante estándar (bueno, en la mayoría de las culturas occidentales de todos modos, hay una pregunta sobre esto, ¿dónde se dice que en China es exactamente lo contrario? :pag). Si necesita más etapas intermedias (por ejemplo, una calificación de 1 a 10), simplemente puede usar los colores intermedios. Piensa en algo comored > red-orange > dark orange > light orange > orange-yellow > yellow > yellow-green > lime> green
Tu pequeño frijol humano garabateado es adorable. POR CIERTO. :)

Respuestas (2)

¿Qué pasa con un icono png transparente con un color de fondo aplicado a través de CSS?

Todas las imágenes tendrían el mismo tamaño, pero podría modificar los colores en función de las áreas transparentes del PNG.

Este es un jpg que representa la idea....

Emoticones © 2012

Pero el png real tendría el icono real transparente:

Sonrisa transparente © 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; }

Un gráfico de diapositivas con un esquema de color que va de rojo a verde es un buen indicador visual de progreso/éxito. Los números no son tan poderosos emocionalmente, pero pueden cruzar las fronteras culturales más fácilmente. Las formas como los cheques y los más también son indicadores visuales de comentarios positivos (piense en el botón Me gusta de Facebook o el corazón de Instagram).