¿Qué tiene de bueno el diseño de la interfaz? ¿Cómo se produce el proceso de diseño de la interfaz de una aplicación?

Cuando abrimos una APP, desde una perspectiva visual, los elementos que afectan la experiencia sensorial general del usuario de la APP incluyen principalmente: imágenes, texto, colores, iconos, espacios en blanco, etc.

El uso racional de imágenes, niveles de información claros y una cómoda combinación de colores mejorarán la estética de toda la aplicación, agregando así puntos a toda la experiencia del producto.

Para un producto exitoso, el aspecto visual es solo una parte, pero como diseñador de UI calificado, lo que tenemos que hacer es hacer que esta parte sea perfecta.

Analicemos el diseño de la aplicación a través de las dimensiones de imágenes, texto, colores, íconos y espacios en blanco para descubrir los detalles sutiles. Simplemente mejore los detalles en 1 px más que otros y el diseño de su aplicación será más refinado.

Tabla de contenido

1. Las imágenes son como el gusto de ropa de una persona;

2. Texto, solo quiero saber los puntos clave; >

3. Color, cómo convertirse en un diseñador de "color";

4. Iconos, ¿qué distancia hay entre saber dibujar y dibujar bien?

5. Espacio en blanco, sólo quiero suficiente espacio.

Texto

1. Las imágenes son como el gusto de la ropa de una persona.

Las imágenes son muy comunes en las aplicaciones. La forma de presentación y la calidad de las imágenes son importantes. Afecta la experiencia sensorial de los productos por parte de los usuarios.

La ubicación de las imágenes es como el gusto de vestir de una persona. Los diferentes estilos de vestir harán que los demás te juzguen de manera diferente y te etiqueten con diferentes atributos sociales.

Echemos un vistazo a los puntos clave a los que se debe prestar atención al utilizar imágenes en el diseño de aplicaciones. Los analizaremos desde aspectos como la proporción de la imagen, la coherencia, la calidad de la imagen y la autenticidad.

1.1. ¿Cuál es la importancia de las proporciones de una imagen?

Las imágenes de diferentes proporciones transmiten diferentes cuerpos principales de información. Según los atributos del producto, elegiremos la proporción de la imagen que coincida con el diseño general del marco.

Al experimentar con algunas aplicaciones convencionales, encontraremos algunas proporciones de imagen de uso común, como 1:1, 4:3, 16:9, 16:10, etc.;

También encontraremos algunos diseños que rompen las proporciones convencionales. Necesitamos analizar sus caracteres y combinarlos con las características de nuestros propios productos para poder utilizarlos razonablemente en nuestro propio diseño de APP.

1:1 enfatiza la presencia del sujeto

La relación de imagen 1:1 es una relación de diseño común. Es más fácil utilizar esta relación de aspecto para organizar la composición en una composición simple. one., resaltando el sentido de existencia del sujeto.

Se utiliza a menudo en exhibición de productos, avatar, visualización de primeros planos y otras escenas, especialmente en aplicaciones de comercio electrónico.

Las imágenes 4:3 son compactas y más fáciles de componer

La relación de imagen 4:3 puede hacer que las imágenes sean más compactas y fáciles de componer, lo que facilita su uso para los diseñadores. Debido a la pequeña capacidad de pantalla de los teléfonos móviles, esta relación ocupa mucho espacio en el diseño de la aplicación cuando se utiliza como visualización de pantalla completa.

Efecto similar a una escena de película 16:9

La relación de imagen 16:9 puede presentar un efecto similar a una escena de película. Se utiliza principalmente para composiciones horizontales y es una de las más utilizadas. proporciones de tamaño ampliamente utilizadas, que pueden brindar a los usuarios una experiencia de visión amplia.

Se utiliza ampliamente en el diseño de muchas aplicaciones de entretenimiento de cine y televisión, como Tencent Video, NetEase Cloud Music, etc.

16:10 Abraza la Proporción Áurea

La proporción áurea es como una perla en una pirámide Cuanto más cerca estás de ella, más atractiva es. El encanto se debilitará. La relación de imagen de 16:10 es la más cercana.

No existen estándares absolutos para el diseño. Podemos seguir algunas reglas generales excelentes, pero también debemos atrevernos a romper las reglas y probar más posibilidades.

X:≤Y diseño de flujo en cascada

X:≤Y representa un diseño de flujo en cascada con un ancho fijo y una altura personalizada entre los valores máximos. En algunos casos, los usuarios no lo hacen. muy claro al respecto. El propósito es utilizar este método de diseño solo para obtener la mayor cantidad de información posible.

Para proporciones de imagen de

La lista anterior es solo el análisis y la explicación de algunas proporciones de uso común. Hay muchas más proporciones que no se demostrarán aquí. El propósito de compartir es permitir que todos desarrollen el hábito de analizar y elegir de acuerdo. a las características de sus propios productos proporciones de imagen adecuadas.

Método de selección de proporción de imagen:

a. Según el efecto de visualización del producto, seleccione la proporción de visualización de imagen que pueda expresar completamente las características del producto;

b Según el efecto de visualización del producto Según el temperamento, elija la proporción de visualización de la imagen que coincida con el temperamento del contenido del producto;

c. Elija la proporción común adecuada según las características del producto;

d. Personalice de manera flexible imágenes especiales según el valor proporcional;

e. Analizar→romper→innovar y crear un valor proporcional que se ajuste a una determinada ley o concepto estético.

1.2. Consistencia de las proporciones de la imagen

Después de determinar la proporción de visualización de la imagen adecuada según las características del producto, debemos estandarizar qué diseños se pueden adoptar según el diseño general y la imagen. distribución. La misma relación de visualización de imágenes.

Si bien se garantizan efectos visuales y formas interactivas, es mejor presentar el mismo tema en las mismas proporciones en diferentes páginas. Este beneficio no solo puede mantener la coherencia de la expresión visual, sino que también brinda comodidad. posterior operación y mantenimiento.

1.3. Mejorar la calidad de las imágenes

Cada vez más productos comienzan a prestar atención a la calidad de las imágenes. Por ejemplo, NetEase Yanxuan tiene estándares estrictos para la toma y el procesamiento de imágenes. Imágenes del producto. El propósito es mejorar el temperamento y la impresión del producto en la mente de los usuarios.

A la hora de diseñar, debemos utilizar las mejores imágenes para resaltar nuestros borradores de diseño. La calidad de las imágenes afecta el estilo de toda la interfaz.

Muchos amigos pensarán que las imágenes se cargan mediante operaciones de posproducción y, por muy hermoso que sea mi borrador de diseño, al final será inútil. Mis puntos de vista sobre este tema son los siguientes:

a. El mejor resultado del diseño es un reflejo del profesionalismo del diseñador;

b. Presentar los mejores resultados a los tomadores de decisiones, aumentar su impresión de sus capacidades de diseño;

c. Al formular especificaciones visuales operativas para controlar la calidad de las imágenes, puede controlar estrictamente su búsqueda visual de imágenes;

d. Buena suerte.

1.4. Restauración real de imágenes

Aunque la importancia de la calidad de la imagen se mencionó anteriormente, no podemos elegir algunas imágenes que no tienen nada que ver con el tema por el bien de los efectos visuales. Esto también afectará el proceso de toma de decisiones. Esto es engañoso.

Podemos mejorar la calidad de las imágenes, pero debemos asegurar la verdadera restauración de las imágenes, para que sus trabajos de diseño puedan ser más realistas y razonables.

En algunos diseños de productos locales, el uso de materiales fotográficos extranjeros debe tratarse con precaución. Por ejemplo, la imagen del modelo en el caso, la comunicación de información de redacción está más sesgada hacia escenas domésticas.

Si se utiliza un material de modelo extranjero, puede ser más poderoso, pero no puede restaurar verdaderamente la escena del producto, lo que dará a los tomadores de decisiones comunicar una percepción falsa.

2. Texto, solo quiero saber dónde está el punto clave.

El sentido en capas del diseño del texto determina la transmisión eficiente de información a través del procesamiento en capas de la información del texto. Puede ayudar eficazmente a los usuarios a obtener información para mejorar la eficiencia operativa de los productos.

2.1. Diferenciar la información de texto en diferentes niveles

Cuando obtenemos prototipos interactivos u otros documentos de requisitos, necesitamos diferenciar efectivamente entre los niveles de información de texto para que los usuarios puedan obtener y comprender rápidamente la información. contenido de la información transmitida.

La información del texto se puede dividir simplemente en información importante, información secundaria, información auxiliar, etc. Al componer texto, es necesario ordenar claramente la relación jerárquica entre la información para mejorar la experiencia general del usuario con el producto.

Al procesar el tamaño de fuente, color, espacio en blanco, división jerárquica, etc., la información con los mismos atributos se clasifica y diseña, de modo que toda la información esté organizada en un orden claro y la jerarquía sea clara. .

Cuando los diseñadores expresan texto visualmente, también necesitan reducir el uso de estilos de texto para lograr el equilibrio visual de la interfaz general. No deben usar demasiados estilos de presentación para resaltar la información del texto.

2.2. Estimar el valor máximo de la información presentada

Cuando diseñamos la interfaz, los diseñadores junior a menudo ignoran el valor máximo de la información del texto y simplemente siguen sus propios hábitos.

Solo cuando finalmente ingresamos al proceso de prueba descubrimos por qué había tanta más información de la esperada. En ese momento, se produciría reelaboración, lo que traería riesgos para el progreso general del desarrollo del producto.

Como diseñador de UI calificado, debemos estimar el valor máximo de la presentación de la información, en lugar de tomar el valor mínimo o diseñar a voluntad, lo que encontrará más inseguridades durante el proceso de control de ejecución.

2.3. Ser bueno en el uso de indicaciones para el diseño

En algunos diseños de interfaz donde aparecerán grandes cantidades de información de texto, para mejorar la eficiencia de la adquisición de información por parte de los usuarios, utilizará el efecto visual general. Elija el mensaje adecuado para su diseño.

Muchos diseñadores jóvenes seguirán demasiado el prototipo de interacción, a menudo manejarán textos grandes con demasiada informalidad, solo embellecerán el prototipo de interacción y carecerán de iniciativa para la experiencia del usuario.

Al diseñar la interacción del producto, a veces el producto o la interacción no pueden ordenar y presentar la información desde una perspectiva visual. Necesitamos utilizar nuestra experiencia para optimizar las áreas que cree que pueden ser mejores y también establecerlas. Profesionalismo para usted durante todo el proceso del producto.

Las expresiones de diseño de las indicaciones incluyen principalmente números, letras, gráficos, bloques de colores, etc., siempre que el nivel de información se pueda distinguir de manera efectiva.

3. Color, cómo convertirse en un diseñador de "color"

El color brinda a las personas la sensación más intuitiva y la combinación de colores de diferentes personalidades transmite diferentes emociones. Se pueden encontrar algunos métodos con respecto a la combinación de colores, pero también existe una cierta cantidad de juicio perceptivo.

Como diseñadores visuales, necesitamos aprender métodos y técnicas racionales, y debemos seguir apreciando trabajos excelentes y mejorando nuestras propias habilidades estéticas.

3.1.Conocimientos básicos del color

Los colores se dividen en sistemas acromáticos y cromáticos. Los sistemas acromáticos se refieren al blanco, al negro y a varios tonos de grises. Se refiere a colores como; como rojo, naranja, amarillo, verde, cian, azul y morado.

Aquí no se discutirán más conocimientos teóricos sobre el color. Todos pueden complementar los conocimientos teóricos sobre el tono, la pureza, el brillo, el contraste, el carácter, etc.

3.2. Establecer una biblioteca de colores

Como diseñadores junior, nuestro control sobre la combinación de colores no es muy estable. Para mejorar la eficiencia del trabajo, necesitamos establecer una gran cantidad de colores. bibliotecas de alguna manera racional, para hacer frente a diferentes necesidades.

Los siguientes son algunos de los métodos más utilizados para su referencia. Hay muchos métodos de recolección de colores. Solo necesitamos dominar algunos que sean más adecuados para nosotros. Y mantenlo durante mucho tiempo, incluso si solo usamos una forma que también es muy gratificante.

a. Recopile colores a través de varias aplicaciones

Experimente aplicaciones en diferentes campos, establezca la elección de combinaciones de colores de aplicaciones en diferentes campos y siente las bases para el diseño posterior del proyecto. Clasificar según el color principal,

Por ejemplo, la serie roja: NetEase Cloud Music, JD.com, NetEase Select, NetEase Koala, etc. también se puede clasificar según el temperamento del producto; , como literatura, moda, tecnología, ternura, etc.

b. Recoge colores a través de Dribbble

En Dribbble, hay un archivo de combinación de colores para cada trabajo en el lado derecho del trabajo. Si encuentras trabajos excelentes, necesitas desarrollarlos. este tipo de hábitos de colección de archivos de combinación de colores.

c. Recolectar color a través de la fotografía

Recopilar color a través de una fotografía excelente también es uno de los métodos más utilizados.

Método de recopilación:

Abra la imagen en Photoshop → Guardar como formato para Web → Seleccione formato GIF → Selección de color 8 → Haga doble clic en el bloque de color en la tabla de colores → Color Selector

d. Recopila colores a través de mosaicos

Utiliza filtros de Photoshop para crear mosaicos de imágenes y podrás obtener combinaciones de colores de excelentes obras o imágenes fotográficas, lo cual es especialmente adecuado para recopilar colores de la mismo sistema de color.

Método de recopilación:

Abra la imagen en Photoshop → Filtro → Pixelar → Mosaico → Establecer tamaño de celda

e. p>Creo que a todo el mundo le gusta ver éxitos de taquilla. La razón por la que esta película es tan popular debe tener muchos elementos de los que vale la pena aprender.

Como grupo de diseñadores neurosensibles no podemos perdernos esas excelentes escenas de películas que estimulan nuestras neuronas.

3.3. Mejorar la estética y mejorar el juicio perceptivo.

Aunque la capacidad de combinación de colores se puede mejorar mediante algunos métodos racionales, también existe un cierto grado de juicio perceptivo. Las diferencias sutiles en la combinación de colores suelen ser juicios emocionales.

Necesitamos apreciar constantemente la fotografía, la pintura, los trabajos de diseño, etc., y mejorar integralmente nuestra propia estética para mejorar continuamente nuestro juicio perceptivo.

Como diseñador de UI, no puedes concentrarte solo en el diseño de interfaces. Puedes mirar obras gráficas, fotografía y pintura, animaciones de cine y televisión, experimentar la producción artesanal, los deportes y el entretenimiento, y experimentar cuidadosamente cada uno de ellos. cambio en la vida.

3.4. Desarrollar el hábito del análisis

Para tener una buena capacidad de igualación de colores, el proceso de acumulación es muy importante. Cuando vemos trabajos excelentes, necesitamos analizar el contraste entre la combinación de colores, la posición de los colores en la rueda cromática, la relación entre los valores HSB, etc.

Solo a través del análisis y el resumen continuo podemos formar gradualmente nuestra propia forma de pensar y mejorar nuestra capacidad para controlar diferentes combinaciones de colores.

El hábito del análisis no solo se aplica al color, sino que también requiere un análisis y resumen constante del diseño, procesamiento de información del texto, estilo de diseño de íconos, espaciado, etc. Solo dominando las reglas de trabajos excelentes Forme su propios hábitos estándar.

4. Iconos, ¿qué distancia hay entre poder dibujar y ser bueno?

Los iconos son el toque final en el diseño de aplicaciones. No sólo pueden ayudar a transmitir información textual. sino que también sirven como soportes de información que se identifican eficientemente. Los iconos también juegan un papel determinado en la decoración de la interfaz, mejorando la estética general de la interfaz.

Muchos diseñadores jóvenes ignorarán la importancia de los íconos y desarrollarán el hábito de ir a sitios web de materiales para descargarlos y reutilizarlos. Cuando se desarrolle este hábito, gradualmente perderán la fuerza impulsora para hacerlo ellos mismos, y todo. Se perderán elementos. Espero encontrar materiales para descargar, pero después de trabajar durante varios años, rápidamente encontré mi propio período de cuello de botella.

La actitud del diseñador y su capacidad para controlar el diseño de iconos será uno de los factores que ampliará la brecha entre usted y otros diseñadores.

El diseño de iconos se puede descargar y reutilizar → diseño práctico → diseño estandarizado → integrarse en los genes de la marca. ¿En qué etapa te encuentras ahora?

4.1.Descargar y reutilizar

Descargar y reutilizar es uno de los métodos de trabajo utilizados por muchos diseñadores nuevos en la industria debido a su conocimiento de las técnicas de software, habilidades de diseño, habilidades creativas, etc. Debido a las deficiencias, es imposible completar un diseño de ícono calificado desde la creatividad hasta el dibujo estándar.

Desventajas: el estilo de diseño del ícono y el procesamiento de detalles son completamente inconsistentes. Una vez que se desarrolla ese hábito, uno perderá gradualmente la capacidad práctica.

4.2. Diseño práctico

La mayoría de los diseñadores que se dedican al diseño se darán cuenta de la importancia del diseño de iconos y también dibujarán iconos de estilo unificados en función de las características del producto.

Nota: Los estilos de diseño de íconos incluyen: íconos lineales, íconos rellenos, íconos de caras, íconos planos, íconos de estilo dibujado a mano e íconos esqueuomorfos, etc.

No importa qué forma de expresión elijamos, debemos mantener la unidad de estilo al diseñar. Debido a los diferentes tamaños de los íconos, el equilibrio visual de íconos de diferentes tamaños bajo el mismo tamaño no es el mismo. , por ejemplo Un cuadrado del mismo tamaño parecerá más grande que un círculo.

Por lo tanto, debemos ajustar el tamaño del icono según su tamaño.

4.3. Diseño estandarizado

Cuando un diseñador desarrolla el hábito de hacer las cosas por sí mismo, felicidades por su progreso. A medida que las técnicas de software maduran, necesitamos controlar estrictamente nuestra espontaneidad y utilizar especificaciones estándar para el diseño de iconos.

Sobre la base del diseño estándar, podemos usar nuestra propia creatividad, y no tiene que limitarse al estándar, sino que la esencia general debe cumplir con las especificaciones del diseño.

4.4. Integrar genes de marca

La diferenciación del diseño de iconos se ha ido desdibujando gradualmente. Con la similitud de muchas funciones, el diseño de los iconos es casi el mismo y muchos de ellos son más. Particularmente en el diseño, los productos también han comenzado a personalizar íconos según los genes de su propia marca.

El diseño de íconos integrado con los genes de la marca tiene un fuerte reconocimiento de la marca, lo que no solo puede formar una diferenciación visual única, sino también mejorar el recuerdo del producto por parte de los usuarios.

5. Espacio en blanco, solo quiero suficiente espacio

Un espacio en blanco apropiado puede hacer que su interfaz sea más espiritual y reservar más espacio entre la información. También puede expresar mejor el sentido de jerarquía entre la información. información, brindando a las personas una experiencia más cómoda que un diseño de información abarrotado.

Cuando la intención del diseñador de dejar espacios en blanco es rechazada por el producto u operación por “querer poner más contenido”, como diseñadores podemos intentar expresar nuestras opiniones desde diferentes direcciones:

a. Diseñe un borrador comparativo y compare la solución que necesita el producto con la solución que considere perfecta.

b. Descarte los casos excelentes manejados de esta manera y utilice casos exitosos para convencer al producto de que lo acepte. su solución;

c. Realice pruebas de usuario, seleccione algunos usuarios objetivo para obtener experiencia y diseñe la mejor solución basándose en las opiniones de los usuarios;

d. explorar. El objetivo final es hacer mejores productos.

Resumen del diseño

1. Las diferentes proporciones de la imagen reflejan diferentes características y deben elegirse razonablemente de acuerdo con las características del producto.

2. en el diseño, no solo hace que la expresión visual sea consistente, sino que también facilita la operación y el mantenimiento posteriores;

3. Mejorar la estética del trabajo de diseño mejorando la calidad de las imágenes, pero también asegurar la verdadera restauración. de las imágenes;

3. p>

4. Al escribir texto, debe prestar atención al nivel de información, la capacidad máxima de información y el uso inteligente de las indicaciones, etc.

5. Desarrollar el hábito de establecer y enriquecer constantemente la biblioteca de colores;

p>

6. Mejorar la estética, mejorar el juicio perceptivo y desarrollar el hábito de análisis;

7. Varios pasos en la experiencia de diseño de íconos: descargar y reutilizar → diseño práctico → diseño estandarizado → integración en la marca Gene;

8. experiencia más cómoda.