¿Cuáles son los estándares para el diseño de UI?
En el rápido desarrollo actual de los productos electrónicos, el trabajo de diseño de interfaces ha recibido poca atención. Los "artistas" que diseñan interfaces también se denominan "diseñadores de UI" o "ingenieros de UI". Al igual que el diseño de estilo industrial en los productos industriales, es un punto de venta importante del producto. Un producto con una interfaz hermosa brindará a las personas un disfrute visual cómodo y acortará la distancia entre las personas y los productos. En cuanto al diseño, ¿cuáles son los estándares para el diseño de UI?
1. Eje
Axis es el concepto más básico y comúnmente utilizado en el diseño de UI, y también es un núcleo importante utilizado para organizar la estructura de la interfaz.
En pocas palabras, un eje es una línea imaginaria que organiza una serie de elementos en un diseño. En el dibujo de diseño siguiente, el eje está marcado como una línea discontinua.
1. Alineación
Los ejes se usan más comúnmente para elementos simétricos. Cuando los elementos se organizan axialmente simétricamente, el eje dará a las personas una sensación de orden. Como la mayoría de las cosas en la vida, nos gustan las cosas que están organizadas; se sienten fluidas, cómodas y accesibles.
El ejemplo más simple es el diseño de la lista de álbumes en el programa iTunes. Todas las listas de álbumes están organizadas en el lado izquierdo de la interfaz, de forma simétrica alrededor de un eje de puntos.
2. Fortalecer
Aunque el eje es una línea de puntos, si los bordes de los elementos circundantes se controlan con suficiente precisión, el puente se volverá más "obvio" visualmente.
El mejor ejemplo son las farolas de la ciudad, que forman un eje entre los edificios a ambos lados de la vía. Si hay edificios a un lado y no al otro, este eje no estará. tan fuerte.
Desde una perspectiva de diseño de producto, el diseño de la línea de tiempo de Twitter es un buen ejemplo. El avatar de la izquierda y los tweets de la derecha forman la sensación de un eje en el espacio.
3. Movimiento
Cuando nos encontramos con una determinada primera línea, nuestros ojos se moverán naturalmente en esas direcciones, al igual que cuando estamos en la calle y nos movemos conscientemente a lo largo de la misma. en ambos extremos de la calle. Los dos puntos finales definen la línea, definiendo sus puntos inicial y final, mientras que la presencia de una línea o eje guía y sugiere la dirección del movimiento.
En SoundCloud, la pista de audio se mueve a lo largo de un eje horizontal establecido y, a medida que se reproduce la música, la pista de audio se mueve naturalmente de izquierda a derecha a una velocidad constante (consulte el blog de Haixiang Ma para obtener más detalles) Cómo utilizar diseño de movimiento para captar la atención de sus visitantes").
4. Continuidad
Si el punto final es incierto, normalmente navegarás/te moverás a lo largo del eje hasta que encuentres algo de interés o te aburras y cierres la aplicación.
Los puntos finales indefinidos son muy raros en arquitectura, ya que los edificios generalmente no duran para siempre, pero no en el diseño de interfaces de usuario, donde el desplazamiento infinito es una tecnología de diseño muy popular.
Así es como funciona en la aplicación Pinterest, donde un flujo de imágenes se desplaza a lo largo de un eje central siempre que estés interesado en verlas.
Dos: Simetría
Cuando los elementos se colocan uniformemente a ambos lados del eje, forman una relación simétrica. Cuando los elementos se colocan precisamente a ambos lados de un eje, forman una relación simétrica perfecta.
1. Equilibrio
La simetría añade una sensación de equilibrio al diseño. Cuando los elementos y controles se ubican en la misma posición a ambos lados del eje, el diseño creará una sensación. de armonía.
Cuando planificamos y construimos casas a ambos lados de la calle, si hay 5 casas del mismo tamaño en los lados izquierdo y derecho, este diseño equilibrado te hará sentir muy cómodo cuando camines por la calle. calle, así es como se siente el equilibrio.
El diseño de la aplicación Rdio también sigue esta regla de diseño. Los controles en ambos lados de la pantalla son del mismo tamaño. Este diseño es muy adecuado para la lectura y los usuarios lo verán conscientemente de arriba a abajo y de izquierda a derecha. bien.
2. Asimetría
Si los ejes en ambos lados del diseño de control ya no corresponden uno a uno y son similares en tamaño, se trata de un diseño asimétrico que dará a las personas. Una sensación evidente de desequilibrio, que puede resultar incómoda, también puede crear una sensación de falta de plenitud, dependiendo de cómo lo hagas, por supuesto.
Aunque el diseño de la aplicación Pintexuan Expert Forum es generalmente simétrico a lo largo del eje central (mismo ancho), los controles de la interfaz en ambos lados no son simétricos, sus alturas son diferentes y sus posiciones están escalonadas. Será captado por los ojos. Tal espacio impide que los usuarios lean con precisión el orden izquierdo y derecho. El diseño asimétrico rompe el equilibrio entre diseño y comodidad, pero también puede aliviar la fatiga visual causada por los diseños convencionales.
Tres: Jerarquía
La jerarquía se produce cuando un elemento aparece en una posición más importante que otros elementos.
1. Tamaño
Si el tamaño de un elemento de diseño es mayor que otros controles, se producirá una distinción jerárquica. No hace falta decir que cuando miramos un diseño concreto, normalmente nos atraen los elementos más grandes. Si un edificio tiene cinco ventanas de salida y una de las ventanas tiene el doble de tamaño que las otras cuatro, entonces, naturalmente, nuestra atención se centrará en esa ventana.
Un ejemplo típico de distinguir la jerarquía de listas de artículos por tamaño es la aplicación de lectura posterior Pocket, donde el artículo giratorio en la parte superior tiene una imagen más grande, y su posición y tamaño hará que lo notemos en la parte inferior. primera vez (consulte el blog de Ma Haixiang "Principios de diseño para analizar el tamaño de página de dispositivos móviles" para obtener más detalles).
2. Forma
Si un control es diferente de otros controles en forma y tamaño, entonces también puede ser autónomo y el diseño irregular también llamará la atención. La fachada tiene cinco ventanas idénticas y tan pronto como pases la puerta notarás inmediatamente la singularidad de la puerta.
En la página de perfil de Instagram, la foto de perfil redonda destaca entre las imágenes cuadradas y es muy llamativa. Hace que la gente se dé cuenta de que esta singularidad es algo más importante.
3. Posición
La existencia de la posición también resalta la diferencia en la jerarquía; en un círculo, el contenido en el centro parece más importante que el contenido en el borde, mientras que el contenido en el eje. El control en la parte superior parecerá tener mayor prioridad que los otros controles.
Por ejemplo, en el diseño de la aplicación de diseño Path, el avatar del usuario en la cima de la línea de tiempo es claramente más importante que el resto de la línea de tiempo, que también muestra el avatar del usuario.
Cuatro: Ritmo
El diseño de la interfaz de usuario y el diseño arquitectónico tienen la misma belleza rítmica, y los patrones repetidos producirán una belleza rítmica única.
1. Patrón
La forma más directa de entender el ritmo es escuchar música. La música tiene un sentido del ritmo. La mayoría de la música sigue el mismo ritmo y el ritmo es parte del mismo. patrón musical.
La aplicación más típica a este respecto es Airbnb. Cada casa en la lista de aplicaciones ocupa un módulo. Las imágenes, los precios, las ubicaciones y la información del propietario en el módulo tienen el mismo tamaño que las posiciones relativas de las imágenes. , y el diseño es cómodo y, proporcionalmente, el espacio entre los dos módulos también es el mismo, por lo que mientras navegas, un ritmo familiar te permite saber dónde buscar información clave.
2. Interrupción
Cuando se interrumpe el ritmo se formarán diferentes niveles. Cuando escuchas una canción y su ritmo uniforme se ve interrumpido por otros elementos musicales, te das cuenta de que se trata de una parte especial.
En la aplicación de Twitter, los tweets y los tweets tienen el mismo estilo e incluso el mismo ritmo, pero el elemento "Usuarios recomendados" tiene un estilo diferente y se inserta en la lista de tweets, rompiendo todo el flujo. resalta las diferentes capas y capta tu atención rápidamente.