Análisis de ejemplos de diseño de aplicaciones: ¿por qué el modo oscuro de repente se vuelve popular?
Para adaptarse al sistema, muchas apps han lanzado modos oscuros.
Además de reducir el consumo de energía y prolongar aún más la duración de la batería de los teléfonos móviles, el modo oscuro también puede resolver eficazmente el problema de quemar pantallas de diodos emisores de luz orgánicos y desperdiciar los ojos. Xiao Mo experimentó el modo oscuro de varias aplicaciones de uso común y compartió mi experiencia con todos.
A partir de estos casos, es posible que podamos encontrar las razones de la popularidad de los patrones oscuros.
El modo oscuro es una nueva apariencia que reduce la fatiga visual y ayuda a los usuarios a concentrarse. La mayor diferencia con el modo nocturno tradicional es que el modo oscuro no solo garantiza la experiencia en entornos con poca luz, sino que también es legible bajo una luz intensa.
Aunque el modo oscuro también se llama modo oscuro, no significa que sea necesario cambiar el color de fondo a negro puro.
Si utilizas un fondo 100% negro puro, leer durante mucho tiempo provocará fatiga ocular. En el modo oscuro de WeChat, el color de fondo del chat y de la página principal no es negro puro, sino gris oscuro.
Además, el alto contraste entre el negro puro y el blanco puro también puede provocar fatiga visual. Por lo tanto, en el modo oscuro de WeChat, usar gris claro como color de fuente no solo puede mantener la pantalla clara, sino también reducir el contraste y reducir la carga de lectura del usuario.
Si se configura un fondo de chat, la imagen de fondo del chat se oscurecerá automáticamente para facilitar la lectura.
Aunque el color general se ha intensificado, WeChat aún mantiene una jerarquía distinta en el diseño. Por ejemplo, el gris de la ventana de chat superior será ligeramente más claro que el de otras ventanas, y los títulos y resúmenes de los mensajes de chat también utilizarán diferentes grises claros para distinguir los niveles.
Además, los coloridos íconos de líneas de WeChat se han vuelto más tecnológicos sobre el fondo negro y su apariencia ha mejorado mucho.
El modo oscuro de WeChat no solo puede ayudar a los usuarios a aliviar la fatiga visual durante la noche, sino que casi no tiene obstáculos para su uso durante el día. En general, la experiencia se siente bastante bien.
Si el modo oscuro de WeChat presta más atención a la apariencia, la otra herramienta social de Tencent, QQ, presta más atención a la experiencia de lectura nocturna de los usuarios.
En primer lugar, cuando WeChat cambia al modo oscuro, es necesario reiniciar el software para que surta efecto. Cuando QQ cambia al modo nocturno, utiliza gradientes suaves para permitir a los usuarios adaptarse rápidamente al cambio de escena.
En segundo lugar, para reducir la estimulación de los ojos humanos por la luz nocturna, QQ redujo el contraste entre la información y el fondo, y agregó una máscara en la cabeza del usuario y otras imágenes para hacerlo más cómodo en condiciones de baja iluminación. En ambientes luminosos se ve más suave allí abajo.
Cuando el usuario activa el modo nocturno, también habrá un huevo de Pascua de diseño: algunos íconos cambiarán según el cambio de modo, como el ícono de mensaje cambiará de una cara sonriente a un estado de reposo. Este interesante diseño también acercará al usuario la distancia entre el usuario y el producto.
En el modo normal, el color de fondo de la aplicación Douban es blanco puro, que ocasionalmente se siente un poco deslumbrante durante el día, sin mencionar la molestia para los usuarios que tienen que navegar por Douban antes de irse a la cama. Después de ser regañado por los usuarios durante rondas, la aplicación Douban finalmente lanzó un modo nocturno.
El modo nocturno de Douban, al igual que WeChat, también conserva iconos coloridos. Al mismo tiempo, Douban siempre garantiza un buen contraste y una jerarquía visual clara en su diseño, asegurando la transmisión precisa de la estructura de la información.
En términos de combinación de colores, para evitar que el "negro intenso" haga que toda la interfaz sea demasiado rígida, Douban también mezcló azul y violeta con negro para que el color de fondo pareciera más transparente.
Los botones principales, como el de navegación inferior, utilizan el verde Douban como color principal, que se puede mostrar claramente en el modo nocturno sin deslumbrar demasiado y puede garantizar una navegación normal en el modo de luz intensa.
Otra APP comunitaria, Zhihu y Douban, también tiene el mismo problema.
Cuando Zhihu diseñó el modo nocturno, utilizó una combinación de azul y gris oscuro como colores principales, con azul oscuro y gris como fondo, mostrando un fuerte contraste y eliminando la sensación aburrida de la oscuridad. bandera.
A diferencia de Douban, el texto de Zhihu es de color gris, con bajo contraste y se distingue por el peso de las palabras.
Aunque esto hará que toda la página luzca más armoniosa, el contenido no es lo suficientemente destacado y el título no se puede ver en el menor tiempo, lo que sin duda traerá incomodidad a los usuarios para una comunidad basada en contenido bueno. experiencia.
Zhihu debe tener un objetivo claro al diseñar el modo nocturno, que es considerar el uso de los usuarios solo por la noche, por lo que el tono general es muy oscuro y no se puede navegar normalmente en un entorno con mucha luz.
Cuando Bilibili introdujo por primera vez el modo oscuro, recibió muchas críticas. El contraste entre la fuente y el color de fondo no es fuerte y la portada del video parece estar borrosa, lo que resulta en una mala experiencia de navegación para el usuario.
En la última actualización, Bilibili finalmente optimizó el modo oscuro, mejoró moderadamente el brillo de la portada del video y los íconos, y ajustó los íconos coloridos a íconos de una sola línea, lo que no solo unificó el estilo de la imagen, sino que También mejoró la experiencia de lectura de la interfaz.
Al diseñar el modo oscuro, debes prestar atención a la combinación uniforme de colores y al contraste de cada página.
Cuando haces clic en la sección o servicio recomendado de Bilibili Creative Center en modo oscuro, la pantalla de carga sigue siendo blanca. La luz fuerte y repentina sin duda causará irritación en los ojos, y la experiencia del usuario también es muy buena. Malo. Diferencia.
Los colores muy saturados producirán efectos visuales deslumbrantes sobre fondos oscuros, provocando fatiga visual. En el modo oscuro de Baidu Netdisk, el fondo es casi completamente negro, pero los íconos no se han ajustado mucho, lo que brinda una mala experiencia de lectura a los usuarios.
De manera similar, debido a que el color de fondo es demasiado oscuro, el contraste entre el texto y el fondo de Baidu Cloud Disk es demasiado grande, lo que dificulta la lectura. Las personas con dislexia sienten que el texto está rotado y borroso al leer.
Al diseñar el modo oscuro, además de usar gris oscuro como color de fondo tanto como sea posible, también debes asegurarte de que la mayoría de las áreas permanezcan oscuras y usar una cantidad limitada de colores tanto como sea posible. Sólo dominando el contraste y la saturación podrás diseñar un modo oscuro cómodo.
En resumen, el uso razonable del modo oscuro puede reducir el brillo de la pantalla, lo que no sólo reduce el consumo de energía, sino que también reduce la irritación en los ojos propios o de otras personas.
Además, el modo oscuro optimiza el color de fondo, el texto y el color de los iconos del sistema para mejorar la comodidad de lectura. Para quienes gustan de los colores oscuros o negros, el modo oscuro es una nueva experiencia diferente al modo normal.
Además de las aplicaciones, muchas herramientas de productividad también utilizan interfaces oscuras, como PS y hacker. Tomemos como ejemplo a los plagiadores. Cuando los usuarios diseñan, una interfaz oscura no solo puede reducir la fatiga ocular, sino también resaltar el contenido de su diseño y crear una experiencia de diseño inmersiva.
El modo oscuro se ha convertido gradualmente en una tendencia popular en el diseño de aplicaciones. Como diseñador, también debes dominar las habilidades de diseño del modo oscuro en la aplicación. De los casos de diseño de aplicaciones anteriores, he resumido las siguientes sugerencias para su referencia:
La imagen del título proviene de Pexels y se basa en el protocolo CC0.