¿Por qué muchos diseñadores de IU utilizan imágenes de perfil redondas en sus diseños recientemente? Apple, Basecamp y Path eligieron usar imágenes redondas de perfil de usuario y parece ser una tendencia real.

Answer 1

Esta tendencia realmente despegó alrededor de 2010 cuando se introdujo la propiedad border-radius con CSS3.

Antes del borde del radio , crear algo simple como crear un rectángulo redondeado requería dibujar y exportar 4 imágenes, una para cada esquina, y colocarlas (generalmente con un elemento de tabla) en las celdas de las esquinas de una tabla HTML 3 × 3, como esta :

Crear estos recursos de imagen de cuatro esquinas fue una molestia y tomó una eternidad; ajustar un poco el radio significaba crear 4 nuevas imágenes de esquina.

Implementarlos en cada imagen de perfil en un sitio grande sería una venta difícil. Tal vez podría usar una biblioteca de procesamiento de imágenes para generar automáticamente imágenes de perfil redondeadas, pero esto no es muy defendible teniendo en cuenta el costo: beneficio.

Con radio de borde (coro angelical) , estas preocupaciones desaparecen. Ahora puedes redondear cualquier elemento gratis ( es decir, costo técnico insignificante).

Eso debería explicar el aumento repentino de los avatares circulares, pero no responde por qué, de todos los elementos en un sitio web típico, ¿son los avatares a menudo el único foco de nuestros nuevos y brillantes poderes para hacer círculos? Aparte del hecho de que claramente se ha puesto de moda hacerlo, Creo que puedo construir una razón sólida de por qué en realidad puede ser una práctica efectiva:

• Para el cerebro humano, las caras son un banquete de información consciente y subconsciente. Las presiones de supervivencia han desarrollado en nosotros una increíble capacidad de reconocimiento facial; ¡aprendemos a leer e imitar caras desde los 2 días de edad [1]! Incluso una imagen estática no impide que nuestro cerebro genere una miríada de impresiones y juicios. Muchas páginas de ventas se basan en lo que se llama prueba social [2] para convencerlo de que confíe en ellas. La mera presencia de rostros humanos (generalmente sonrientes) puede afectar positivamente las propias impresiones (conscientes y subconscientes) de cualquier producto / servicio / información que uno esté evaluando.
• Entonces nuestros cerebros están ocupados por caras, y las caras pueden afectar positivamente la forma en que las personas se sienten cuando están en su sitio; ¿quizás deberíamos subirlos en la jerarquía de información? La gran mayoría de los diseños web están hechos principalmente de rectángulos, entonces, ¿qué mejor manera de hacer que se destaquen que usando un círculo? Ser el único elemento circular le da a los avatares, y por extensión a los seres humanos, un énfasis único entre los lienzos de cajas.
• Finalmente, como otros han mencionado, las caras son curvas y redondas; es por eso que las figuras de palo que las personas dibujan generalmente tienen círculos para las cabezas.

[1] Percepción facial
[2] Prueba social

Answer 2

Como forma, un círculo y contenido dentro de un círculo es más fácil de reconocer que una forma con bordes duros. Su cerebro procesa la información dentro del objeto más rápido y más fácil en relación con la forma misma. En el ejemplo de un cuadrado o rectángulo, hay puntos visibles donde el ojo puede enfocarse. Como un círculo no contiene bordes o puntos duros, el ojo puede moverse continuamente libremente alrededor del objeto y descansar subrepticiamente dentro del contenido.

En el contexto de las imágenes de perfil de Apple, Basecamp y Path, esto es más o menos una tendencia, pero considere que un círculo dentro de un círculo parece más geométricamente agradable que un círculo dentro de un cuadrado. Dado que las caras son generalmente circulares, tal vez es por eso que simplemente se ven ‘mejor’ como avatares circulares.

Answer 3

El mejor argumento que he escuchado a favor de los avatares circulares es que si se usan de manera consistente, distinguen claramente de un vistazo a las personas del contenido u otras entidades como aplicaciones, álbumes, fotos, etc. Con la profusión de feeds, sitios y aplicaciones en la vida de muchos usuarios, hacer que las personas escaneables sean distintas podría ser beneficioso.

Fig. 1: Supongo que si los avatares fueran cuadrados, esto podría ser infinitesimalmente menos claro; Sin embargo, no recuerdo haber estado confundido antes del cambio.

Otros argumentos que he leído:

• Se percibe que las curvas y las formas redondeadas son “más suaves”, más “orgánicas” o “más amigables”
• Es probable que muchos diseñadores de software quieran caras en avatares (por muchas razones), y los avatares redondeados sugieren caras y hacen que los avatares sin cara sean más difíciles de cargar (por ejemplo: los avatares con texto no funcionan tan bien).
• Como señala Jesse Richards, hay algunos ahorros de espacio, y eliminar la gran cantidad de fondos de avatar rectangulares podría considerarse un beneficio

Existen precedentes para cada cultivo históricamente. Las licencias y los pasaportes parecen vencerse con las fotos rectangulares, al igual que los marcos y las fotos en los periódicos. Por otro lado, los medallones y muchos retratos pintados, etc., se han redondeado.

Sospecho que la causa original de que los avatares sean cuadrados fue el estado incidental del software y el hardware; favorecimos menos manipulaciones / transformaciones de mapas de bits, especialmente en la web (donde el recorte solía ser un dolor), por lo que dejamos de usar avatares rectangulares. Bien puede ser que esto generalmente tenga más sentido, incite a las personas a usar avatares para sus caras y ayude a distinguir a los avatares de las miniaturas y similares.

Pero sospecho que la adopción de este estilo es, como han dicho otros, impulsada principalmente por la tendencia más que por la investigación o el análisis profundo. Cuando Apple cambió a avatares circulares en iOS 7 (como lo habían hecho anteriormente en Mac OS X), se convirtió en un imperativo estético para muchos desarrolladores.

Answer 4

Las esquinas redondeadas hacen que la información sea más fácil de procesar
Las esquinas redondeadas son más efectivas para mapas y diagramas porque permiten que nuestros ojos sigan fácilmente las líneas “ya que se adapta mejor al movimiento natural de la cabeza y los ojos, respectivamente”. Las esquinas afiladas apartan los ojos del camino de la línea para que termines experimentando pausas abruptas cuando la línea cambia de dirección. Pero con las esquinas redondeadas, la línea lleva sus ojos alrededor de cada esquina para continuar a lo largo del camino sin problemas.

¿Qué diagrama es más fácil de seguir para tus ojos?

Las esquinas redondeadas también hacen contenedores de contenido efectivos. Esto se debe a que las esquinas redondeadas apuntan hacia el centro del rectángulo. Esto pone el foco en el contenido dentro del rectángulo. También facilita ver qué lado pertenece a qué rectángulo cuando dos rectángulos están uno al lado del otro. Las esquinas afiladas apuntan hacia afuera poniendo menos énfasis en el contenido dentro del rectángulo. También dificultan saber cuál de los dos lados pertenece a qué rectángulo cuando dos rectángulos están uno al lado del otro. Esto se debe a que cada lado del rectángulo es exactamente una línea recta. Sin embargo, los lados de un rectángulo redondeado son únicos porque las líneas se curvan hacia el rectángulo al que pertenece.

Puedes leer el artículo completo @Por qué las esquinas redondeadas son más fáciles de ver

Answer 5

Los marcos cuadrados se escanean de arriba a abajo, de izquierda a derecha. Los marcos redondos tienen forma de diana y generalmente miramos directamente hacia el centro. Hacer que el marco coincida con la imagen es una buena manera de alinear la forma y el contenido.

Esta técnica se ha utilizado durante cientos de años. Hay toda una galería de retratos en miniatura en el museo Victoria and Albert que demuestran esto maravillosamente:

OG foto de perfil redonda de 1500 visto en: Una historia de la miniatura del retrato

Answer 6

A2A

Es una combinación de apalancamiento de las leyes de percepción y un avance tecnológico.

“Las esquinas en la imagen de una cara (que la mayoría de las personas elegirán como avatar) no son solo ruido visual innecesario, sino que pueden dificultar el procesamiento de la imagen. Las cosas con bordes redondeados se consideran más fáciles de ver que las que tienen bordes afilados. Los círculos son más fáciles de procesar para el sistema visual, por lo que generan menos carga cognitiva.

Sin embargo, muchos de nosotros que crecimos con avatares rectangulares todavía los diseñamos para aprovechar al máximo un espacio rectangular … ”

Y

“¿Por qué hoy en día? Quizás porque CSS3, que se adoptó en 1999 pero solo se implementó comúnmente hace unos años, permite la propiedad de radio de borde para que los bordes redondeados se puedan implementar fácilmente dinámicamente en un navegador. Anteriormente, uno tendría que iniciar Photoshop o crear un código de manipulación de imágenes usando la Biblioteca de gráficos GD o ImageMagick en el lado del servidor para lograr el mismo efecto “.

¿Por qué las imágenes de perfil se redondean hoy en día?

Answer 7

[Editar: cuando escribí esta respuesta fue en respuesta a la pregunta “¿Cuándo comenzó la tendencia a disparos en la cabeza circulares y avatares personales, quién la inició y puede detenerse?” Ahora que esa pregunta se ha redirigido a esta, la primera parte de mi respuesta parece irrelevante y la segunda parte reitera información que ya ha sido dada con más detalle por otros carteles]

Fue popularizado por primera vez por Alejandro Magno alrededor del año 330 aC …

Nicholas Hilliard ayudó a ponerla de moda nuevamente en el siglo XVI:

Hay un punto en esto además de ser gracioso: hay una historia larga y culturalmente arraigada de pequeñas imágenes de personas redondas.

Si desea culpar a alguien por la avalancha de avatares redondos en línea, probablemente debería comenzar con los 396 miembros del Consorcio World Wide Web (W3C). Fueron sus estándares CSS3, específicamente la propiedad de radio de borde, lo que facilitó el recorte de imágenes en círculos sobre la marcha; Una vez que lo hicieron posible , siglos de precedente artístico para la idea de que estas imágenes deberían ser circulares se hicieron cargo y lo hicieron casi omnipresente.

Answer 8

Los diseñadores se aburren con el mismo estilo visual con el tiempo, por lo que surge una tendencia. A veces, una tendencia es resolver un problema mejor que antes, la mayoría de las veces no lo es. La mayoría de las tendencias de diseño son cíclicas y se cruzan desde diferentes medios y diferentes épocas. Los diseñadores se aburrieron haciendo formas de perfil rectangular. ¿A quién no le gusta un círculo? ¿Círculo de la vida? ¿La rueda? … ok, me detendré ahora …

Answer 9

Al usar imágenes de perfil de usuario rectangulares, corre el riesgo de:

• Perder información : su atención también se extiende en las esquinas, mientras que en la imagen redonda está más centrado en la cara de la persona, ya que no hay esquinas.
• creando tensión : el contraste de la forma entre el marco cuadrado y la cara redonda de la persona puede no ser adecuado en todas las circunstancias. Quizás no desee llamar la atención sobre la imagen del usuario, sino sobre los elementos de marca del sitio web (solo un ejemplo).
• Consistencia general del diseño : tal vez el diseño web de esa página no permita la forma del rectángulo.

Cuando usa imágenes de perfil de rectángulo redondo, logra:

• Ahorre espacio : recuerde que no hay esquinas, por lo que puede ahorrar espacio en el encabezado del sitio web, que es cuestión de ajustar la simplicidad de la página.
• Mejora el significado simbólico : las formas redondas comunican ideas y sentimientos de perfección y compromiso.
• emule la cara de la persona : al usuario le encantan sus intentos de reflejar sus características. Dado que tiene una cara redonda, elige un marco redondo.
• destacar al usuario : los círculos tienen la capacidad única de canalizar la atención.

No sé, estos son solo algunos pensamientos. Buena pregunta, sin embargo.

Answer 10

TL; DR: las fotos de perfil de círculo son probablemente una tendencia reaccionaria, aunque al menos algunas de ellas surgieron honestamente como una integración más profunda con todo un sistema de interfaz de usuario, y es probable que todo este asunto sobre qué círculos representan intrínsecamente, como “integridad” un montón de tonterías y no es probable que haya sido la razón de la tendencia actual.

---

Preguntar por qué Dribbble es inútil …

De todas formas…

Supongo que los “ pocos ” originales que comenzaron esta ola actual de la tendencia del perfil / avatar fueron con los círculos como algo poco común e interesante, especialmente cuando se comparan con las imágenes cuadradas más fáciles sin ningún efecto, lo que puede notar a su alrededor. ahora en Quora.

Todos tienen cuadrados porque los cuadrados son “automáticos”? Bueno, haremos círculos porque esos 1) no se están haciendo en todas partes (una oportunidad para la marca), y 2) muestran cierto nivel de sofisticación en lugar de la sensación ‘predeterminada’ y ‘automática’ de los cuadrados.

Me imagino que esto se convirtió en una tendencia , especialmente con los gustos de Dribbble, porque se vio como una tendencia emergente : ¡Apple lo está haciendo! ¡Yo lo hare tambien!

Aparte de la teoría de la “tendencia autoperpetuante y reaccionaria” …

Los círculos pueden surgir en proyectos individuales, así como reforzarse colectivamente como una ‘tendencia’, simplemente siendo complementarios a otros elementos de la interfaz de usuario. Por ejemplo, Google Plus utiliza la noción de “círculos” como en los círculos sociales. Es natural que tengan círculos para las imágenes de perfil y otros elementos de la interfaz de usuario. Además, la interfaz de usuario OS X de Apple tiende cada vez más hacia los círculos, especialmente los iconos circulares estandarizados (a diferencia de los rectángulos redondeados de iOS). Es natural que otro ícono pierda el rectángulo redondeado estilo iOS en favor del círculo emergente estilo OS X.

Todos los comentarios sobre círculos que representan integridad, ser ‘bien redondeados’, ser más agradables a la vista, naturales, orgánicos, etc., etc., aunque todas esas cosas pueden ser ciertas en ciertos contextos, no son inherentes a los círculos, y Dudo que esos factores influyan en muchos proyectos en Dribbble. Realmente dudo que muchas personas que diseñan la interfaz de usuario estén pensando “Las imágenes de perfil cuadradas no encajan con la ‘integridad’ que impulsa este diseño de interfaz de usuario … Necesito una forma que represente la ‘integridad’ … hmmm … qué podría ser … mejor Considere completamente las implicaciones de esta decisión … “No, me imagino que es algo más como esto:” Ahora necesito una foto de perfil, porque eso es lo que se espera en el diseño de la interfaz de usuario. Lo haré redondo porque los cuadrados no son muy impresionantes. Ahora, veamos … puedo decir que lo hice porque los círculos representan ‘integridad’ … eso suena bien “.

Answer 11

2 palabras: interés visual.

Un poco más: un círculo que ocupa una huella cuadrada tiene un espacio negativo incorporado a su alrededor. Este espacio no se desperdicia. La forma y la sala de respiración enfatizan al avatar al diferenciarlo de su entorno. El círculo como foco de interés visual también tiene raíces en los Principios de diseño de la Gestalt. Específicamente, la Ley del Punto Focal como se describe aquí:
Principios de la Gestalt: ¿cómo se perciben sus diseños?

Como cultura, creemos que las personas son importantes y vale la pena enfatizarlas. Hay otras formas de hacerlo (tamaño, acentos de color, etc.) pero ninguna tan simple y eficiente como un círculo.

Answer 12

Creo que es solo una tendencia. Me gusta, aunque.

La única razón práctica en la que puedo pensar, y dudo que la mayoría de la gente lo considere, y simplemente lo está usando porque se ve genial, es que al recortar las esquinas de una foto rectangular, está eliminando el espacio no utilizado. Las cabezas humanas son redondas, por lo que encajan en formas circulares con más elegancia que en rectángulos. No hay información fotográfica útil contenida en las esquinas de un tiro en la cabeza.

NOTA: La pregunta original para esto preguntaba si esto era solo una tendencia o si había un gran beneficio detrás de ella.

Answer 13

Es un uso más eficiente del espacio, especialmente en dispositivos móviles. Dado que el espacio alrededor de la cabeza y los hombros generalmente carece de información significativa, cortarlo permite mostrar más fondo que permite cosas como avatares flotantes (Facebook Messenger en Android, por ejemplo).

Answer 14

En pocas palabras: es una tendencia. iOS 7 y superior muestra avatares en círculos, y los diseñadores han reaccionado a esa tendencia.

Igual que (por ejemplo) botones Aqua, rayas ‘carbon’, texturas de patrón de ruido, biseles de 1 píxel, etc., etc.

Answer 15

Los elementos redondos se ven más fáciles de tocar cuando se ven en dispositivos con pantalla táctil , probablemente porque tienen la misma forma que un dedo cuando se presiona en una pantalla. Dado el crecimiento exponencial del uso de dispositivos móviles y tabletas en los últimos años, los elementos del círculo, incluidas las imágenes de perfil, probablemente se volverán más populares y ampliamente utilizados.

Answer 16

Porque este tipo de diseños de arte actúan como la moda. Algunos cambios solo ocurren porque los usuarios sienten que es nuevo, no porque sea mejor.

¿Es brillante mejor que el diseño plano, o al contrario? Ambos son buenos, pero el brillo lució como nuevo en 2005 y el diseño plano se ve como el nuevo hoy.

Por otro lado, tener sombra alrededor de las ventanas ES mejor que no tener una porque hace que los usuarios puedan entender qué ventanas tienen el foco de un vistazo. Fue probado por compañías como Xerox. E imo, Windows 8 cometió un error al eliminarlo casi. Me confundió más de una vez.

Mis dos centavos 🙂

Answer 17

Estamos en un mundo ultra competitivo, y vale la pena considerar cualquier cosa que lo destaque, por lo que con la introducción de CSS3 y con la capacidad relativamente fácil de hacer imágenes redondas o redondeadas, eso fue suficiente licencia para hacerlo, hasta que acostumbrarse tanto al estilo que, por ser contrario, volvemos a la plaza. De repente, recuerdo cuando los faros cuadrados o rectangulares de automóviles se convirtieron en el emocionante “nuevo” estilo, solo para ser finalmente abandonados cuando volvemos a los redondos. Voluminosos consumidores somos …

Answer 18

No creo que tenga una o una razón específica. Principalmente porque parece más nuevo o “más fresco” porque estamos aburridos de los mismos viejos escuderos. Pero se sabe que las esquinas redondeadas son más fáciles de procesar, combinado con el hecho de que las caras también son redondas hace que sea más natural usar avatares redondos.

Vea también este artículo sobre el movimiento UX: por qué las esquinas redondeadas son más fáciles de ver

Answer 19

Es una tendencia Pero como con cualquier tendencia, al principio había razones.
Creo que los posibles son:
1. Los objetos redondos son más agradables para el ojo humano. No solo círculos, sino también rectángulos con esquinas redondeadas, etc.
2. Es necesario distinguir el lenguaje visual de los nuevos productos de la competencia.

Answer 20

Aún no lo entiendo. Obtengo esquinas redondeadas, pero para las fotos de perfil no entiendo el círculo. Parece un desperdicio de pantalla de bienes raíces.

Sin embargo, para los controles de interfaz de usuario, especialmente los controles de interfaz móvil, tiene mucho sentido. Las puntas de los pulgares y los dedos son redondas, por lo tanto, los controles son redondos. Permite que la mente se conecte con la interfaz.