¿Cómo diseña un gerente de producto una página de inicio de sesión de una aplicación?

1. Clasificación de atributos de la APLICACIÓN

Primero clasifiquemos la APLICACIÓN ¿Por qué necesitamos iniciar sesión y registrarnos? Porque la App necesita tu información personal. De esta forma, serás un usuario retenido, más que un transeúnte que va y viene. Las aplicaciones se dividen en los siguientes tres tipos según la necesidad de registrarse e iniciar sesión:

El primer tipo: no es necesario iniciar sesión

Utiliza las funciones de la aplicación directamente, principalmente la herramienta aplicaciones, como calendarios y calculadoras, aplicaciones como linternas, pero aplicaciones tan puras casi no existen ahora, porque una aplicación sin retención de usuarios no tiene valor. No se puede vivir sin valor económico. Por lo tanto, no existen Lei Feng en vivo en el mercado y todos han sido reemplazados por aplicaciones del sistema. Para no ser reemplazadas por aplicaciones del sistema, las aplicaciones de herramientas intentan proporcionar algunas funciones personalizadas para atraer a los usuarios a registrarse.

El segundo tipo: inicio de sesión no obligatorio

Principalmente algunas aplicaciones de información y estilo de vida, como: NetEase News, NetEase Cloud Music, etc., puede elegir entre ambas al iniciar; la aplicación por primera vez Regístrate ahora, o elige no registrarte e ir directamente a la interfaz principal de la aplicación. Los usuarios pueden utilizar algunas funciones sin iniciar sesión. Si necesitan desbloquear ciertas funciones, deben iniciar sesión. Por ejemplo, si quieres escuchar música y recomendar canciones según tus hábitos de escucha, esta es una función personalizada.

El tercer tipo: inicio de sesión forzado

Este tipo de aplicación tiene una fuerte conciencia de privacidad personal, como Alipay. Su billetera no puede permitir que otros sepan cuánto dinero tiene, como Momo. Mo, nadie puede saber con quién has salido recientemente. También está Taobao. Recientemente compré algunas cosas indescriptibles que nadie puede ver. Entonces estas músicas relacionadas con el dinero y la privacidad se ven obligadas a iniciar sesión. No puede utilizar esta aplicación sin iniciar sesión.

2. Cuatro formas de registrarse e iniciar sesión

Después de aclarar qué aplicaciones requieren inicio de sesión, echemos un vistazo a las distintas formas de registrarse.

El primer tipo: inicio de sesión y registro con número de teléfono móvil

El proceso de inicio de sesión o registro se completa en una sola interfaz. Regístrese o inicie sesión rápidamente a través del código de verificación del número de teléfono móvil. Esta debería ser la forma más eficiente de iniciar sesión y registrarse. Si un nuevo usuario se registra directamente mediante el código de verificación del teléfono móvil, los usuarios antiguos también pueden iniciar sesión mediante el código de verificación. Inicie sesión y regístrese de una sola vez. Los usuarios ni siquiera necesitan recordar la contraseña, siempre que tengan su teléfono en la mano, pueden iniciar sesión sin preocupaciones.

Segundo tipo: registro e inicio de sesión con nombre de usuario y contraseña

El registro y el inicio de sesión están separados. En pocas palabras, las interfaces de inicio de sesión y registro son dos interfaces. La ventaja es que es más conveniente tener un nombre de usuario y contraseña al iniciar sesión en múltiples plataformas. La desventaja es que el proceso de registro es engorroso. La representación de la interfaz es como se muestra en la Figura B. Nombre de usuario/correo electrónico de inicio de sesión. Si necesita registrarse, haga clic para saltar a una nueva página. A los usuarios extranjeros les gusta bastante utilizar el correo electrónico para registrarse, y siempre siento que los hábitos de uso de los extranjeros suelen ser muy diferentes de los de los chinos. Por supuesto, si no desea registrarse y abrir una nueva página, elegir el método de cambio de etiqueta del CD de imagen también puede hacer que la interfaz sea muy simple.

Tercer tipo: nombre de usuario o inicio de sesión por teléfono móvil

Esta interfaz se muestra en la Figura EF, que es un método de inicio de sesión que cambia de barra de pestañas. Puede cambiar entre el inicio de sesión del número de teléfono móvil y el inicio de sesión de la cuenta en una interfaz. El argumento a favor de este método es que, para comodidad de los usuarios, ofrece múltiples opciones de inicio de sesión. De hecho, es conveniente para las empresas mantener el sistema de cuentas de la aplicación, porque puede haber una gran cantidad de usuarios que han cambiado desde la PC. No se habían registrado antes con sus teléfonos móviles. Por supuesto, no hay ningún número de teléfono móvil para iniciar sesión. Por ejemplo, las aplicaciones con una gran cantidad de usuarios de PC como Meituan Dianping definitivamente elegirán un formulario como EF. Desde la perspectiva de la experiencia del usuario, no es fácil de usar porque cuantas más opciones haya, más difícil será de usar.

El cuarto tipo: inicio de sesión en cuentas sociales de terceros

Generalmente, iniciará sesión a través de cuentas sociales de terceros de uso común, como WeChat, Weibo, Douban, etc., que no solo le permite iniciar sesión de forma rápida y cómoda para experimentar el producto, sino que al mismo tiempo facilitará el posterior intercambio y promoción de la APLICACIÓN a través de cuentas sociales. Generalmente, las aplicaciones pequeñas elegirán este método porque el umbral de inicio de sesión es relativamente bajo. Sin embargo, algunas aplicaciones con una privacidad de usuario relativamente alta aún optan por crear sus propios sistemas de cuentas.

Por ejemplo, las aplicaciones de gestión financiera y de pagos tienden a crear sus propios sistemas de usuario, porque para dichas aplicaciones, los datos de la cuenta del usuario son información crucial.

Lo que he dicho antes es para que todos los estudiantes sepan que la interfaz de usuario debe basarse en el diseño del producto y, al mismo tiempo, se debe comprender la lógica de interacción de la página. Por lo tanto, los diseñadores visuales necesitan aclarar el flujo ascendente y descendente de su interfaz, o la lógica de cada elemento en la interfaz, de dónde viene y hacia dónde va al crear una página.

3. El proceso de pensamiento del diseño visual

Ahora empiezo a hacer diseño visual. Para facilitar la demostración, me propuse un tema para diseñar una página de inicio de sesión con el verde como tema virtual.

En primer lugar, el borrador del diseño está diseñado en base al iPhone7 y la resolución es 1334×750. En mi libro está muy claro por qué se eligió esta resolución. No entraré en detalles aquí. Primero hagamos el registro de inicio de sesión obligatorio. Después de abrir la aplicación aquí, generalmente a las aplicaciones extranjeras les gusta tener una interfaz de inicio de sesión y registro. Aquí me di un tema para diseñar con temática verde.

No elijas un color puro

1. Completa el color de la marca

Todo el fondo de la interfaz se rellena con el color principal de la aplicación. Es un tema verde, el color principal es tentativamente verde. Al elegir el tono, no elija colores que sean demasiado puros y no elija colores en la primera fila a continuación, como el verde esmeralda. Y tienden a elegir la segunda fila, como el verde oscuro, el esmeralda y otros colores. Al igual que la pintura que usamos para pintar, si usamos el color de la pintura directamente, el color de la imagen parecerá rígido. Los colores producidos mediante el ajuste multicolor aparecerán ricos en capas. Si el color principal está más saturado, baje la saturación del color principal. Porque los colores demasiado brillantes reducirán la calidad de la aplicación.

Modo de fusión multiefectos

2. Añade textura vectorial.

Un fondo de color sólido es adecuado para un logotipo en blanco inverso. Luego, debes diseñar. un icono distintivo lineal o de silueta. Muchas veces la aplicación no tiene un nombre de texto separado. En este momento, suelo utilizar fuentes en negrita sin serifa para el texto del título del logotipo. Solo hay dos botones en la interfaz para resaltar el registro o iniciar sesión. Esto todavía depende de las necesidades del personal del producto. Porque diferentes aplicaciones tienen diferentes interpretaciones de la prioridad de inicio de sesión y registro. Si su JEFE siente que este fondo de estilo minimalista es demasiado superficial. Entonces podemos considerar agregar algunas texturas vectoriales. Por supuesto, necesitamos encontrar la textura del elemento hoja verde. Esto encaja con el tema. Para que el color sea más consistente con el color principal, decoloraré la imagen vectorial, usaré el modo de capa y seleccionaré el modo de brillo.

3. Añade una imagen de fondo

Muchas veces es posible que no encontremos una textura vectorial adecuada o que estemos cansados ​​de varias texturas regulares. Podemos intentar encontrar algunas imágenes que se vean bien. como fondo. Generalmente, elige una imagen con un tono oscuro en su conjunto, para que pueda soportar los botones, logo y demás elementos en primer plano. Para los botones que deben enfatizarse, se puede usar blanco puro como fondo, y para los botones que deben debilitarse, se puede reducir la transparencia del fondo blanco. Si el color desordenado en la parte superior de la imagen no favorece la barra de batería en línea, puede agregar un degradado verde translúcido. Parece que el botón se siente un poco vacío, así que podemos agregar una frase poética:

“ Parece que las hojas verdes se ven más hermosas después de la lluvia “(Las hojas verdes se ven más hermosas después de la lluvia)

Cuatro técnicas para seleccionar imágenes

4. Cómo seleccionar imágenes

A través de los pasos anteriores, descubrí que la selección de imágenes también es un trabajo muy técnico. La imagen es buena o no es sencillo determinar si el estilo visual general es alto o no. Entonces, ¿cómo elegir una imagen? Porque usar una VPN a veces resulta demasiado lento. Por eso busco a menudo imágenes de pétalos. Ya hay muchas imágenes en los pétalos. De hecho, se han recogido muchas fotografías atractivas de sitios web extranjeros. Busque verde, plantas, hojas y otras palabras clave que se le ocurran. Luego busque en la mesa de trabajo. Algunas mesas de trabajo de calidad ya han organizado suficientes imágenes. Entonces sólo queda elegir.

(1) Imágenes de primeros planos parciales

Las imágenes de primeros planos parciales son adecuadas para imágenes de fondo, porque los gráficos locales no parecerán triviales y, con los colores de superposición adecuados, Interfiere visualmente con el texto y los botones en primer plano.

(2) Imágenes de textura vectorial

Las imágenes de textura vectorial son adecuadas para imágenes de fondo, y algunos elementos se pueden usar como referencia de inspiración y se pueden extraer por separado como elementos decorativos en la interfaz.

(3) Imágenes con fondo transparente

Las imágenes con fondo transparente ahorran tiempo al recortar imágenes. Generalmente, la interfaz es bidimensional. Cuando algunas imágenes como esta se colocan en primer plano de la imagen, la regularidad de la interfaz se rompe efectivamente. Haga que toda la interfaz sea más tridimensional.

(4) Imágenes de personas

Solo las imágenes de personas tienen aura, por lo que puedes elegir algunas personas en el entorno natural. El punto clave al elegir imágenes de personas es sentir cómo. toda la imagen te transmite tus emociones. Emociones solitarias, tranquilas o cálidas.

4. Demostración de caso de diseño

(1) El inicio de sesión y el registro son interfaces separadas. Al cambiar, la imagen de fondo superior debe ser diferente y la diferencia debe estar unificada, por lo que **. * la misma elección Para fotografías de primeros planos parciales con diferentes texturas, el color verde de la imagen puede ser diferente, por lo que se superpone el mismo color verde y se reduce la transparencia. Haga que las imágenes de la interfaz estén más unificadas.

(2) El texto blanco y los botones translúcidos hacen que la imagen sea muy elegante, por lo que la imagen debe ser clara y oscura. Dicha imagen de fondo no será demasiado brillante y el primer plano no se podrá mostrar claramente. No está demasiado oscuro, lo que hace que la escena sea deprimente.

(3) Si la interfaz es solo un mapa plano, se verá muy rígido. En este momento necesitamos romper los límites de la interfaz. En el diseño de la interfaz, puedes elegir una imagen con un fondo transparente y agregar sombras a elementos como hojas y flores en la interfaz. Esto puede aumentar el efecto tridimensional de la interfaz.

(4) En la interfaz de cambio de inicio de sesión y registro, puede seleccionar un par de imágenes similares pero diferentes. En este momento elegí dos fotografías con gente en el bosque como fondo. Es fácil para las personas sentirse misteriosas y solitarias por naturaleza. ¡Así que es mejor añadir dos líneas de texto poético! Por supuesto, el texto no está escrito al azar, debe coincidir con la concepción artística de la interfaz actual.

5. Resumen del diseño de la interfaz de inicio de sesión

Antes del diseño visual, primero aclare la lógica de la interfaz y de dónde provienen los clics de cada elemento de la interfaz. Las aplicaciones tienen diferentes sistemas de cuentas de productos, por lo que tienen varios métodos de inicio de sesión y registro. Hay cuatro formas de iniciar sesión y registrarse. Cada método puede utilizar una forma diferente de diseño de imagen de fondo.

Busca imágenes de forma consciente clasificándolas en diferentes tipos. Sea bueno usando algunas imágenes transparentes para ajustar las dimensiones de la interfaz. Enriquezca el diseño de la interfaz en detalle. Los diseñadores también deben aprender a utilizar el poder del texto. Un texto llamativo puede agregar una sensación de calidad al diseño de la interfaz.