Ilustración de la página de inicio de sesión: cómo diseñar la página de inicio de sesión de la aplicación
Hoy en día, cada vez más sitios web grandes diseñan la página de inicio de sesión y la de inicio juntas, lo que demuestra la importancia de la página de inicio de sesión. Una interfaz de inicio de sesión brillante mejorará la calidad del producto y le dará un temperamento único. La interfaz de inicio de sesión también es un campo de batalla donde los estrategas utilizan el diseño emocional para mejorar la experiencia del usuario y acortar la distancia con los usuarios. Este artículo analizará algunas expresiones de diseño de las páginas de inicio de sesión de usuarios de Kankan, sin hablar de tendencias, interacciones y tecnologías. Espero que estas expresiones de diseño puedan brindarte algo de inspiración e inspiración.
Elegante y generoso
Si el iPad es un producto entre los ordenadores tradicionales y los teléfonos móviles, Tumblr es un servicio entre los blogs y Twitter. En comparación con Twitter, sus funciones son más complejas, su contenido es más revelador y presta más atención a las aplicaciones multimedia. Como creador de blogs ligeros, Tumblr ofrece una nueva experiencia visual. Antoine de Saint-Exupéry dijo una vez: "La perfección significa que más es demasiado y menos es muy poco". La página de inicio de Tumblr es elegante y elegante sin demasiada interferencia visual. Existen todos los elementos para que los usuarios inicien sesión mejor y el proceso de inicio de sesión es muy sencillo.
Rendimiento de textura exquisito
iCloud es un servicio de sincronización en la nube proporcionado por Apple. Los usuarios tienen 5 GB de espacio de almacenamiento gratuito. Cordell Ritzlaff, responsable del diseño de la interfaz de usuario de Macintosh, recuerda: "Jobs comprobaba cada detalle de la pantalla píxel a píxel para asegurarse de que las imágenes relevantes estuvieran alineadas con precisión. Prestó gran atención al detalle, hasta el píxel Si se encontrara un problema, Jobs inmediatamente le gritaría a un ingeniero: "El diseño de la página de inicio de sesión de iCloud hereda la necesidad de detalle, texturas meticulosas, matices sutiles, texturas exquisitas y detalles perfectos de Apple. El brillo metálico puede moverse con el puntero del mouse y los íconos en la parte inferior pueden adaptarse a la resolución y cambiar la disposición para garantizar la experiencia de navegación del usuario.
iCloud nos dio una buena lección. Hay un dicho que todo el mundo ha oído, pero quizás no seamos capaces de hacerlo. Los detalles determinan el éxito o el fracaso. Los detalles ricos pueden realzar el valor de un diseño y también son uno de los criterios más importantes para juzgar la calidad de un diseño. La textura exquisita y cómoda brinda a los usuarios una sensación de inmersión y sorpresa, que es una excelente forma de expresión.
Pequeñas ilustraciones frescas
En diseño web, las ilustraciones son muy expresivas y están muy relacionadas con el arte de la pintura. Por lo tanto, la mayoría de los puestos de diseño son particularmente favorecidos por personas con excelentes habilidades de dibujo a mano. Muchas técnicas de expresión se basan en el arte de la pintura. La combinación de arte de ilustración y diseño web tiene un encanto artístico único y es más expresiva. Cada vez más diseñadores aplican ilustraciones al diseño web. Ilustraciones frescas, vívidas, interesantes y cálidas pueden captar rápidamente la atención de los usuarios y hacer que la interfaz de inicio de sesión sea más amigable.
La página de inicio de sesión de Mailbox 163 utiliza ilustraciones grandes y el cartero despierta rápidamente el recuerdo de la espera de cartas de la generación posterior a los 80. Las ilustraciones con historias establecen conexiones emocionales con los usuarios, despiertan sus corazones y les dan un mayor sentido de pertenencia.
Vimeo es un sitio web que brinda servicios de almacenamiento de videos de alta definición, donde puedes encontrar muchos diseñadores muy creativos de todo el mundo. Creo que los amigos que hayan iniciado sesión en Vimeo tendrán un recuerdo profundo de la página de inicio de sesión de Vimeo.
Comunicación de marca con cuidado humanista
El diseño centrado en el ser humano no solo puede mejorar la calidad de los productos, sino también mejorar el nivel artístico del diseño. un reflejo del cuidado y la comunicación humanista. Excelente posición para los conceptos de marca.
Cada vez que actualiza la página de inicio de sesión del buzón de QQ, puede ver contenido diferente o usar los poemas de Haizi o las letras de Michael Jackson para despertar el * * * * del usuario. El método de diseño es conciso, la información principal es destacada, la dirección es clara y no hay elementos redundantes.
El botón "iniciar sesión", la operación más importante de la interfaz, utiliza el color verde popular en el tráfico en lugar del azul comúnmente utilizado. Los detalles son muy elegantes y cada detalle está impregnado de cuidado humanista.
Sina Weibo diseñó el cuadro de inicio de sesión en una bufanda. Cada vez que un usuario inicia sesión es un proceso de comunicación de marca, que está en línea con el concepto de bufandas de marca de Sina. El concepto de tejer bufandas está profundamente arraigado. los corazones del pueblo.
El cuadro de inicio de sesión cada vez más grande
El diseño del cuadro de entrada cada vez más grande hace que los usuarios se sientan cómodos al escribir y el proceso de inicio de sesión es muy agradable. Hoy en día, con cada vez más monitores, el gran cuadro de entrada de Mailchimp es muy dominante. Es la primera vez que veo un diseño de este tipo en un cuadro de inicio de sesión WEB y estoy muy pensativo. Es este diseño ecléctico el que transformó a Mailchimp de un proyecto interno a uno de los productos comerciales de mayor éxito de la empresa.
Simple pero no simple
El estilo del diseño web es cada vez más conciso y una gran cantidad de espacio en blanco en la página de inicio de sesión puede hacer que el cuadro de inicio de sesión sea más prominente. Minimiza las distracciones del usuario. Desde un punto de vista visual, el diseño simple es muy tranquilo y se han eliminado elementos, colores, formas y texturas redundantes. No puede utilizar elementos de diseño llamativos y solo puede confiar en los espacios en blanco para crear un atractivo visual. Si el equilibrio y la simplicidad del diseño no están en su lugar, fácilmente puede volverse monótono. La página de inicio de sesión en segundo plano de WordPress utiliza una proyección adecuada, un uso inteligente del gris y mensajes temblorosos para detectar errores, lo que hace que toda la página de inicio de sesión sea concisa pero no simple. Es un modelo.
Referencia:
Cómo diseñar la página de inicio de sesión de una APP El diseño y desarrollo de la página de inicio de sesión requiere primero enumerar las operaciones de un proceso y luego desarrollar la página de inicio de sesión de acuerdo. al proceso de diseño.
Clasificación de aplicaciones móviles:
Las aplicaciones de funciones que se utilizan directamente pertenecen a la categoría de herramientas.
Inicio de sesión no obligatorio
Es principalmente para cierta información y aplicaciones relacionadas con la vida. Cuando lo inicia por primera vez, puede optar por registrarse inmediatamente o no registrarse. e ingrese a la interfaz principal directamente sin iniciar sesión. Puede usar algunas funciones.
Este tipo de aplicación está muy familiarizada con la privacidad personal. Por el bien de la seguridad del usuario y la protección de la privacidad, se requiere un inicio de sesión forzado.
Proceso de diseño de la página de inicio de sesión:
Primero seleccione el modo de inicio de sesión.
El fondo de toda la interfaz se llena de color.
Modos de fusión multiefectos.
Selecciona el relleno de la imagen.
Antes del diseño visual, es necesario aclarar la lógica de la interfaz y de dónde provienen los clics para cada elemento de la interfaz. Debido a que la aplicación tiene diferentes sistemas de cuentas de productos, los métodos de inicio de sesión y registro también son diferentes. Hay cuatro formas de iniciar sesión y registrarse. Cada método puede adoptar una forma diferente de diseño de imagen de fondo. Punto uno: comprenda la mentalidad de sus clientes objetivo.
1. Para clientes objetivo con microtareas (como leer noticias, escuchar música, ver películas y charlar sobre chismes en cualquier momento y en cualquier lugar):
Esta solución consiste en diseñar un app. Lo mejor. Pequeña pero refinada, no grande y completa. Cuanto más completa sea la aplicación funcional, solo puede significar que la aplicación es mediocre en todos los aspectos.
2. A los clientes de Target les gusta utilizarlo como herramienta: por ejemplo, para buscar mapas, ver el tiempo y comprobar datos.
Esta solución consiste en que intentamos satisfacer las necesidades situacionales de los usuarios. Tanto extremo como simple.
3. Grupo de clientes aburrido, acostumbrado a matar el tiempo: sin necesidad, sin objetivo.
Esta solución consiste en mostrar el contenido que interesa a los usuarios tanto como sea posible para ayudar a los clientes a matar el tiempo.
Segundo punto: Discusión sobre la producción y diseño de prototipos de aplicaciones.
Este enlace es crucial. Se debe dibujar cuidadosamente un prototipo de acuerdo con los requisitos de diseño.
Herramientas comunes para la creación de prototipos de aplicaciones: herramientas de diseño de prototipos de aplicaciones móviles pop, axure, foreui, etc.
El tercer punto: diseño visual de la aplicación y puntos de diseño.
(1) En cuanto a la parte de diseño, hay diseño de la página de inicio de la aplicación, especificaciones de tamaño del diseño de la interfaz de la aplicación, diseño de iconos de la aplicación, etc.
En términos generales, las pantallas de los teléfonos móviles están dispuestas de arriba a abajo, con la información importante colocada en la parte superior. Pero en términos de operación, la mayoría de las personas sostienen sus teléfonos con una mano y las operaciones comunes se encuentran en la parte inferior de la interfaz.
También existe el principio de que la unidad táctil más pequeña suele tener 44 píxeles. Si es más pequeño, será difícil que su pulgar lo alcance o será fácil que provoque un mal funcionamiento. Al mismo tiempo, no llenes demasiado la interfaz.
Por lo tanto, los diseñadores deben utilizar el diseño de resta y dedicar tiempo a pensar y simplificar elementos.
Debes recordar: (1) diseño oculto o diseño sustractivo (2) particionamiento o clasificación (3) ayudar a los usuarios a tomar decisiones (4) mejorar el diseño innovador interactivo (5) refrescante y novedoso (6) Sumergir emociones en diseño y comprensión de la psicología del usuario. (Hable sobre cómo diseñar productos y diseño emocional de productos)
Un maestro dijo una vez: "El verdadero diseño minimalista es: el trabajo debe simplificarse y cambiarse continuamente una y otra vez hasta que finalmente se forme el diseño. .”
En 2014, el estilo de diseño de las aplicaciones tendía a ser plano y parecido a una tarjeta. ¡La cardización y la planitud serán la tendencia en el diseño de aplicaciones móviles! ¡Creo que el diseño de tarjetas tiene las ventajas tanto de la "imitación" como del "minimalismo"!
El cuarto punto: proceso de diseño de la interfaz de la aplicación.
(1). Al diseñar la interfaz de la aplicación, debes aprender a encontrar inspiración en excelentes trabajos de diseño de interfaz de la aplicación. Los maestros del arte anteriores utilizaron una pequeña cantidad de recursos para crear una gran cantidad de diseños.
Puede resultar útil tomar un descanso después de salir del trabajo. Todo lo relacionado con el diseño plano y minimalista tiene que ver con diferencias en los detalles. Entonces, en lugar de meditar durante largos períodos de tiempo, tómate un descanso y luego vuelve a trabajar con una nueva perspectiva.
(3) También ayuda comparar cada diseño uno al lado del otro. Incluso si lleva 20 minutos mover una fila hacia abajo 5 píxeles y guardarla por separado, puede notar rápidamente la diferencia entre los dos diseños.
(4) Debido a que la proporción relativa de la pantalla física es importante, es necesario probarla en diferentes dispositivos de destino lo antes posible.
(5) Sigue preguntándote "¿Realmente lo necesitas?" Al respaldar un proyecto, busque algunas formas inteligentes, como agregar algunos elementos y estilos interesantes, que serán fáciles y atractivos, pero siempre debe prestar atención a eliminar elementos innecesarios y simplificarlos constantemente. Siempre es difícil dejar algo en lo que has trabajado duro, pero el proceso de revisión debe ser crítico.
Punto 5: Pruebas del diseño de la interfaz de la aplicación y corrección de la vista previa.
Una vez completado el diseño, podemos importarlo al teléfono móvil para probarlo o corregirlo. Herramienta de prueba en línea publicada anteriormente: un método para obtener una vista previa rápida de las representaciones del diseño de la interfaz de la aplicación en el terminal móvil. Finalmente, un buen trabajo de diseño de interfaz de aplicación debe actualizarse e iterarse constantemente.
Varios estilos de diseño de sitios web comunes son minimalistas:
Cuanto menos, más clásico "Este es el estilo de diseño seguido por muchos maestros del diseño".
El principio de “En un buen diseño, menos es más” también se aplica al diseño web.
A menos que se proporcione la información necesaria, cada elemento adicional agregado a la página abrumará a los usuarios e incluso impedirá que completen sus objetivos y tareas.
La ventaja del diseño minimalista es que puede ahorrar mucho tiempo y dinero a los usuarios.
Estilo sin bordes:
El borde aquí hace referencia a cualquier tipo de contenedor decorativo.
Mejora el diseño del contenido básico eliminando contenedores decorativos.
Mejore la calidad y el diseño de la imagen, cambiando así la expresión visual sin adornos de todo el contenedor.
Estilo de ilustración:
Además de utilizar una gran cantidad de imágenes como fondo o elementos temáticos,
usar ilustraciones también es un buen método.
Banner puede utilizar ilustraciones para expresar el tema del sitio web y, al mismo tiempo, con la ayuda de íconos ilustrativos, el sitio web se ve fresco e interesante, fortaleciendo la singularidad del sitio web en sí.
Pingfeng:
Se puede decir que el diseño plano es el estilo de diseño web más utilizado en la actualidad, debilitando materiales, degradados y sombras, y eliminando elementos gráficos y tipografía de información redundante. Este diseño de estilo puede hacer que las imágenes parezcan más fluidas, mejorar el nivel visual de la información del contenido del sitio web y facilitar que los usuarios encuentren rápidamente lo que necesitan. Al mismo tiempo, la interfaz plana puede realizar mejor la conversión de diferentes tamaños. Este es también un estilo que las empresas de Internet han adoptado durante mucho tiempo.
Estilo 3D:
El estilo 3D mencionado aquí no es un entorno inmersivo 3D puro, sino un estilo que utiliza una pequeña cantidad de efectos 3D para hacer que toda la página parezca más animada. Sobre la base de la planitud, se agregan algunos elementos vívidos no planos para aportar la profundidad de la que originalmente carecía el sitio web y mejorar el atractivo visual del cuerpo principal.
Segmentación vertical:
Los estilos 3D mencionados aquí no son entornos inmersivos en 3D puro, sino aquellos que utilizan una pequeña cantidad de efectos 3D para hacer que toda la página parezca más ágil. Sobre la base de la planitud, se agregan algunos elementos vívidos no planos para aportar la profundidad de la que originalmente carecía el sitio web y mejorar el atractivo visual del cuerpo principal.