¿Cuál es el mejor diseño de interfaz? ¿Cómo se realiza el proceso de diseño de la interfaz de una App?

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

El nivel visual es sólo una parte de un producto exitoso, pero como diseñador de UI calificado, lo que tenemos que hacer es hacer que esta parte sea la mejor.

Permítanos analizar el diseño de la aplicación a través de dimensiones como imágenes, texto, colores, íconos y espacios en blanco para encontrar esos detalles sutiles. Siempre que mejore 1 px más detalles que otros, el diseño de su aplicación será más refinado.

Tabla de contenido

1. Imágenes, me gusta el gusto de la ropa de una persona;

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

3. Color, cómo convertirse en un planificador de "color";

4. Icono, qué tan lejos de una pintura a otra;

5. necesita suficiente espacio.

Asunto

1. Imagen, como el gusto de vestir de una persona.

Las imágenes son muy comunes en las aplicaciones. La forma de presentación y la calidad de las imágenes afectan la experiencia sensorial del producto por parte del usuario.

La posición de una imagen es como el gusto de vestir de una persona. 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 diseñar imágenes en la aplicación y analicémoslos desde aspectos como la proporción de la imagen, la coherencia, la calidad de la imagen y la autenticidad.

1.1. ¿Cuál es el foco del ratio de pantalla?

Las imágenes de diferentes proporciones transmiten diferentes temas 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 personalidades y combinarlas con las características de nuestros propios productos para poder utilizarlas razonablemente en el diseño de nuestra propia aplicación.

1:1 enfatiza la existencia del sujeto.

La relación de aspecto 1:1 es una relación de diseño común. El uso de esta relación de aspecto facilita la simplificación de la composición y resalta la presencia 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.

4.3 La imagen es compacta y fácil de componer.

La relación de aspecto 4:3 puede hacer que la imagen sea más compacta, más fácil de componer y más conveniente para los diseñadores. Debido a la pequeña capacidad de pantalla de los teléfonos móviles, cuando se muestran en pantalla completa, la proporción ocupa mucho espacio en el diseño y disposición de la aplicación.

Efecto de escena de película 16:9

La relación de aspecto 16:9 puede presentar un efecto similar a una escena de película y se utiliza principalmente para composición horizontal. Es una de las tablas de tallas más utilizadas y puede brindar a los usuarios una amplia gama de experiencias.

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

Abraza la proporción áurea

La proporción áurea es como la perla de la pirámide. Cuanto más cerca estás de él, más atractivo se vuelve; de ​​lo contrario, el encanto disminuye. La relación de aspecto de 16:10 es la más cercana.

No existe un estándar absoluto para el diseño. Podemos seguir algunas reglas generales excelentes, pero también debemos atrevernos a romperlas y probar más posibilidades.

X:≤Y diseño de flujo en cascada

X:≤Y representa el diseño en cascada, el ancho es fijo y la altura entre los valores máximos se puede personalizar. Este método de diseño se utiliza cuando algunos usuarios no tienen un propósito claro y simplemente desean obtener la mayor cantidad de información posible.

Preste atención al control de altura de la relación de pantalla de X:≤Y y no exceda el área visualizable de la pantalla. Por ejemplo, en un diseño de 750x1334px, la altura máxima de la red de pétalos es 848 px.

La lista anterior es solo un análisis y explicación de algunas proporciones de uso común. Hay más proporciones y no las demostraré una por una aquí. El objetivo de compartir es que todos desarrollen el hábito del análisis y elijan la proporción de imagen adecuada según las características de sus propios productos.

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

A. Seleccione una proporción de imagen que pueda demostrar completamente las características del producto, según el efecto de visualización del producto;

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

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

d. Defina de manera flexible valores de proporción específicos según el diseño;

eAnalysis → Breakthrough → Innovation, cree valor proporcional que se ajuste a ciertas leyes o conceptos estéticos.

1.2, proporción de imagen consistente

Cuando determinamos la proporción de visualización de imagen adecuada según las características del producto, necesitamos estandarizar qué diseños pueden usar la misma proporción de visualización de imagen según el diseño general. y distribución de imágenes.

Al tiempo que se garantizan efectos visuales y formas interactivas, es mejor presentar el mismo tema en diferentes páginas en la misma proporción, para mantener la coherencia de la expresión visual y facilitar la operación y el mantenimiento posteriores.

1.3, mejora la calidad de la imagen.

Cada vez más productos empiezan a prestar atención a la calidad de las imágenes. Por ejemplo, NetEase YEATION tiene regulaciones estrictas sobre la toma y procesamiento de fotografías de productos. El propósito es mejorar el temperamento del producto e impresionar a los usuarios.

A la hora de diseñar debemos utilizar las mejores imágenes para realzar nuestro borrador de diseño. La calidad de las imágenes afecta el estilo de toda la interfaz.

Muchos socios pensarán que las imágenes se cargan después de la operación y que es inútil por muy bonito que sea mi borrador de diseño. Mis puntos de vista sobre este tema son los siguientes:

A. El mejor resultado del diseño es un reflejo de la experiencia del diseñador;

B. Presentar los mejores resultados a los tomadores de decisiones y aumentar su experiencia. Impresión de su capacidad de diseño;

C. Al formular especificaciones visuales operables para controlar la calidad de la imagen, puede controlar estrictamente su búsqueda visual de la imagen;

D. Te traerá buena suerte.

1.4, restaurar imágenes de verdad

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, que también inducirá a error en la toma de decisiones.

Podemos mejorar la calidad de las imágenes, pero debemos garantizar la verdadera restauración de las imágenes para que su diseño funcione más realista y razonable.

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 estuche y la difusión de información de copia están más sesgadas hacia las escenas nacionales.

Si se utilizan materiales de modelo extranjeros, el precio puede ser más alto, pero no puede restaurar verdaderamente el escena del producto y transmitir el mensaje a los tomadores de decisiones. Una percepción equivocada.

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

Las capas del diseño del texto determinan la transmisión eficiente de la información. El procesamiento jerárquico de información de texto puede ayudar eficazmente a los usuarios a obtener información y mejorar la eficiencia operativa de los productos por parte de los usuarios.

2.1. Diferenciación jerárquica de la información del texto

Cuando obtenemos un prototipo interactivo u otro documento de requisitos, necesitamos diferenciar efectivamente el nivel de información del texto para que los usuarios puedan obtenerlo y obtenerlo rápidamente. comprender la información transmitida.

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

Procesando el tamaño de fuente, color, espacios en blanco, división de capas, etc. , clasificar y diseñar información con los mismos atributos, de modo que toda la información tenga una clara prioridad y disposición jerárquica.

Para lograr el equilibrio visual de la interfaz general, los diseñadores deben reducir el uso de estilos de texto al expresar texto visualmente y no deben usar demasiados estilos de expresió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 jóvenes a menudo ignoran el mayor valor de la información del texto y simplemente crean un diseño perfecto de acuerdo con sus propios hábitos.

Finalmente, cuando entré en la fase de prueba, descubrí por qué había tanta más información de la que esperaba. En este momento, se producirá reelaboración, lo que traerá riesgos a todo el programa de 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. De esta manera, encontraremos más riesgos incontrolables durante el proceso de implementación. .

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

En algunos diseños de interfaz con información de texto grande, para mejorar la eficiencia de los usuarios en la obtención de información, seleccionaremos indicaciones apropiadas en función del efecto visual general.

Muchos diseñadores jóvenes seguirán demasiado el prototipo de interacción, a menudo tratarán textos a gran escala de manera demasiado casual, solo embellecerán el prototipo de interacción y carecerán de la iniciativa de la experiencia del usuario.

Al diseñar interacciones de productos, 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 lo que usted cree que se puede hacer mejor y también podemos establecer profesionalismo para usted durante todo el proceso del producto.

Incluyen principalmente números, letras, gráficos, bloques de colores, etc. Siempre que los niveles de información se puedan distinguir eficazmente.

3. Color, ¿cómo convertirse en un planificador “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. Existen algunos métodos para combinar colores, pero también existen algunos juicios de percepción.

Como diseñadores visuales, necesitamos aprender métodos y técnicas racionales, y también debemos apreciar constantemente trabajos excelentes para mejorar nuestras habilidades estéticas.

3.1, conocimientos básicos del color

El color se divide en series acromáticas y series cromáticas se refiere al blanco, negro y varias tonalidades de gris se refieren al rojo, naranja; , amarillo, verde, cian, azul, morado y otros colores.

No entraré aquí en más conocimientos teóricos sobre el color. Por favor, cree sus propios conocimientos teóricos sobre el tono, la pureza, el brillo, el contraste, la personalidad, etc.

3.2. Establecimiento de una biblioteca de colores

Como diseñador 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 bibliotecas de colores de manera razonable para satisfacer las diferentes necesidades.

Los siguientes son algunos métodos comúnmente utilizados para su referencia. Hay muchas maneras de recolectar color. Sólo necesitamos dominar algunos que nos convengan. Mientras desarrolles un hábito y lo mantengas durante mucho tiempo, incluso si solo usas un método, ganarás mucho.

A. Recoge colores a través de varias aplicaciones.

Experimente aplicaciones en diferentes campos, establezca opciones de color para aplicaciones en diferentes campos y siente las bases para el diseño de proyectos posteriores. Clasificación según el color principal,

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

B. Recopila colores a través de Dribbble

En Dribbble, hay un archivo de combinación de colores en el lado derecho de cada obra. Si encuentra trabajos excelentes, desarrolle el hábito de recopilar archivos de combinación de colores.

C. Recolectar colores a través de trabajos fotográficos

Recolectar colores a través de excelentes trabajos fotográficos también es uno de los métodos comúnmente utilizados.

Método de recopilación:

Abra la imagen en Photoshop → Guardar como formato web → Seleccione formato GIF → Seleccione color 8 → Haga doble clic en el bloque de color en la tabla de colores → Selector de color.

d. Recopila colores a través de mosaicos

Con la ayuda de los filtros de Photoshop, puedes obtener combinaciones de colores de excelentes obras o fotografías, especialmente indicado para recopilar combinaciones de colores del mismo sistema de color. .

Método de recopilación:

Abra la imagen en Photoshop → Filtro → Pixelar → Mosaico → Establezca el tamaño de la celda.

E. Colecciona colores de películas

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

Como grupo de diseñadores neuróticos, no debemos perdernos esas excelentes escenas cinematográficas que estimulan nuestras neuronas.

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

Aunque la capacidad de igualar colores se puede mejorar mediante algunos métodos racionales, también existen algunos juicios perceptivos. Las diferencias sutiles en la combinación de colores suelen ser juicios emocionales.

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

Como diseñador de UI, no puedes centrarte únicamente en el diseño de la interfaz. Puede ver obras gráficas, fotografías y pinturas, animaciones cinematográficas y televisivas, experimentar cada cambio en la producción artesanal, los deportes y el entretenimiento, y experimentar la vida con atención.

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 combinaciones 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 de un análisis y un resumen constantes 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 utiliza en color, sino que también requiere un análisis y resumen continuo en términos de diseño, procesamiento de información de texto, estilo de diseño de iconos, espaciado, etc. Sólo dominando las reglas de las obras excelentes podrás formar tus propios hábitos estándar.

4. ¿Qué tan lejos está de saber dibujar iconos?

Los iconos son el toque final en el diseño de aplicaciones. No solo pueden ayudar a transmitir información de texto, sino que también pueden reconocerse eficientemente como portadores de información. Los iconos también desempeñan un papel determinado en la decoración de la interfaz y mejoran 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 descargar materiales de sitios web y reutilizarlos. Cuando se forma este hábito, gradualmente perderán la motivación para hacer las cosas por sí mismos y tendrán la esperanza de encontrar información para descargar. Después de trabajar durante algunos años, pronto se encontrarán con su propio 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 tiene varias etapas, descarga y reutilización → diseño práctico → diseño estándar → incorporar genes de marca. ¿En qué etapa te encuentras ahora?

4.1, descargar y reutilizar

Descargar y reutilizar es uno de los métodos de trabajo con el que están familiarizados muchos diseñadores nuevos en la industria. Debido a sus propias deficiencias en tecnología de software, habilidades de diseño y habilidades creativas, 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 este hábito, gradualmente perderá la capacidad de hacerlo.

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 con un estilo unificado basado en las características del producto. .

Nota: Los estilos de diseño de íconos incluyen: íconos lineales, íconos rellenos, íconos planos, íconos planos, íconos dibujados a mano e íconos cuasi físicos.

No importa qué forma de expresión elijamos, debemos mantener un estilo unificado durante el diseño. Debido a que los tamaños de los íconos son diferentes, el equilibrio visual de íconos de diferentes tamaños también es diferente. Por ejemplo, un cuadrado del mismo tamaño será más grande que un círculo.

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

4.3. Diseño estándar

Cuando un diseñador desarrolla el hábito de hacer las cosas por sí mismo, felicidades por su progreso. Mantén este hábito. A medida que la tecnología del software madura, necesitamos controlar estrictamente nuestra aleatoriedad y utilizar especificaciones estándar para diseñar íconos.

Sobre la base del diseño estándar, dé rienda suelta a su creatividad. No se limita necesariamente a los estándares, sino que la esencia general debe cumplir con las especificaciones de diseño.

4.4. Integrar genes de marca

La diferenciación del diseño de iconos se ha ido desdibujando poco a poco. En muchos casos en los que las funciones son similares, los diseños de los iconos también lo son. Muchos productos que prestan más atención al diseño también han comenzado a personalizar sus iconos según los genes de su propia marca.

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

5. Déjalo en blanco, solo quiero suficiente espacio.

Un espacio en blanco apropiado puede hacer que su interfaz sea más espiritual, reservar más espacio para la información, expresar mejor las capas entre la información y hacer que las personas se sientan más cómodas que una experiencia con un diseño lleno de información.

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

A. Diseñe un borrador comparativo para comparar la solución que necesita el producto con la solución que cree que es perfecta.

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

C. Realizar pruebas de usuario, seleccionar algunos usuarios objetivo para la experiencia y diseñar la mejor solución desde el corazón del usuario.

D. y el objetivo final es producir mejores productos.

Resumen del diseño

1. Las diferentes proporciones de la imagen reflejan diferentes características y toman decisiones razonables según las características del producto.

2 Mantenga las proporciones de la imagen consistentes; El diseño no solo hace que la expresión visual sea consistente, sino que también brinda comodidad para la operación y el mantenimiento posteriores;

3. Mejora la belleza del trabajo de diseño mejorando la calidad de la imagen y al mismo tiempo garantiza la verdadera restauración. de la imagen;

4. La disposición del texto requiere atención al nivel de información, capacidad máxima de información, consejos para un uso inteligente, etc.

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

6. Mejorar la estética, mejorar el juicio perceptivo y formar el hábito del análisis; >7. Varios enlaces en la experiencia de diseño de iconos: Descargar y reutilizar → Diseño práctico → Diseño estándar → Integrar en los genes de la marca;

8.