Tutorial de diseño de interfaz de usuario, cómo los principiantes pueden crear rápidamente un conjunto de iconos de interfaz

1. Iconos con forma de cara

Los iconos con forma de cara tienen una gran proporción visual y una expresión visual relativamente fuerte. Suelen utilizarse como entrada principal en las aplicaciones. El último Apple iOS 11 usa íconos de caras en la barra de pestañas inferior. Entonces, ¿cómo unificar el estilo de los íconos con forma de cara?

1. Forma positiva

Cuando se utilizan íconos con forma de cara en una forma regular, el estilo debe estar unificado. son:

a. El área de la superficie

b El área de la forma negativa

c. /p>

d. La unidad de la forma se puede obtener a partir de la forma. La forma y las esquinas redondeadas se unifican

2. Resaltado

Cuando se utiliza el blanqueamiento inverso de la cara. íconos con forma, además de los tres puntos de atención para los íconos cuadrados, también debe prestar atención a No existen regulaciones estrictas sobre la relación de tamaño del ícono y el panel posterior, pero se recomienda utilizar la proporción áurea de 0.618.

Los puntos de atención son los siguientes:

a. Área de superficie

b. Área de forma negativa

c. . Unidad de líneas

p>

d. La composición de la forma está unificada. Por ejemplo: Esquinas redondeadas uniformes

e. La relación entre el panel posterior y el ícono

2 Iconos lineales

Los íconos lineales son más claros y reducen la interferencia visual. y permitir a los usuarios centrarse en las funciones principales del producto. Antes de iOS11, la barra de navegación, la barra de pestañas y la barra de herramientas de las aplicaciones nativas de iOS utilizaban un diseño de icono de estructura alámbrica de 2 píxeles.

Hay dos formas de utilizar iconos lineales: positivo e inverso. No se recomienda utilizar el blanco inverso para los íconos lineales, porque desde el punto de vista de la lógica del diseño, el panel posterior combinado con los íconos lineales son contradictorios entre sí.

Formal

Los iconos de línea deben tener un estilo unificado y tener los siguientes puntos:

a. Forma de línea

b. tamaño del área

c. El grosor de la línea

d El punto de interrupción de la línea

3. p>Ícono de línea plana Los íconos de línea son en realidad una combinación de formas de superficie y formas lineales. Al principio, esta forma de diseño se usaba principalmente para ilustraciones relativamente complejas. Luego, gradualmente comenzó a usarse en barras de pestañas y entradas de funciones de la página de inicio. En comparación con los íconos de superficie pura y lineales puros, este tipo de ícono tiene un estilo obvio y es más personalizado. Hay una aplicación llamada "Want to Go" y sus íconos de categoría usan íconos de contorno plano. Los estudiantes interesados ​​pueden echar un vistazo. Los íconos de líneas planas tienen un estilo unificado. Además de prestar atención al diseño del ícono lineal, también debes prestar atención al tamaño del área llena de color.

Lo anterior es el intercambio de contenido relevante por parte del editor sobre los íconos de la interfaz. El intercambio de hoy comenzará aquí. Si desea obtener más información sobre el diseño de la interfaz de usuario desde cero, preste atención a lo que tenemos. ¡A todos!