¿Cuáles son las tendencias en el diseño de interfaces de dispositivos móviles en 2014?
¿Por qué utilizar varios colores para definir una interfaz? Con un solo color principal, ¿puede expresar bien la jerarquía de la interfaz y la información importante y mostrar buenos efectos visuales? De hecho, eso es exactamente lo que pasó. Con el lanzamiento de iOS7, vemos cada vez más diseños con estilos de color principal únicos, que utilizan niveles de color simples y escalas de grises coincidentes para expresar niveles de información, pero nunca usan más colores.
Qatar Airways
Qatar Airways es un caso de diseño. Toda la interfaz utiliza el rosa como color principal, desde la barra de título hasta la página de pestañas, desde los botones de operación hasta la información de solicitud, excepto el negro, el blanco y el gris. Este estilo simple de combinación de colores juega un muy buen papel en la transmisión de información y tiene una buena expresión visual. La habilidad del diseñador en el diseño de contenidos es una verdadera ventaja.
El rojo es el diseño de color principal para facilitar la lectura. Incluso el color de fondo de la información solicitada, los botones lineales y los íconos son todos rojos. La interfaz y el logotipo están completamente en el mismo sistema de color. Vivino está diseñado con un color principal azul, con información separada por azul oscuro y azul claro. Eidetic adopta un diseño de color principal naranja, en el que los botones de operación clave incluso están resaltados en naranja y los íconos de información también se expresan en naranja oscuro y naranja claro.
Se puede decir que el único método de diseño del color principal es lograr un diseño verdaderamente minimalista de la aplicación móvil, reducir la interferencia de información redundante y permitir que los usuarios se concentren en obtener la información principal.
2. Multicolor|Super Color
En contraste con el único color principal está el estilo multicolor liderado por Metro. ¿Por qué necesito definir un color principal para mi producto, de modo que varios colores no puedan ser el color principal? Por lo tanto, diferentes páginas y diferentes bloques de información están diseñados de manera multicolor, e incluso algunas partes de la misma interfaz también pueden usar contraste multicolor, lo que también ha producido muchos diseños excelentes.
RECIPE producido por Uniqlo es un estuche de diseño llamativo. Toda la aplicación incorpora una variedad de estilos de diseño de colores. Ya sea cambiando de pestaña o desplazándose dentro de bloques de contenido, cambiarán los diferentes colores del tema. Habrá un efecto de aparición y desaparición gradual al cambiar de color, lo que hará que el cambio sea natural y nada rígido. El módulo de temporizador Pomodoro de RECIPE reproducirá una hermosa música de fondo de comida mientras mide el tiempo y cambiará diferentes colores del tema al mismo tiempo. A medida que cambia el color del cuerpo principal, toda la redacción publicitaria y las imágenes en primer plano se cambiarán a este sistema de color. Junto con las imágenes de alimentos de alta definición, es realmente un doble disfrute de la vista y el oído. RECIPE es realmente un diseño excepcional y excelente en 2013.
Peek Calendar, EveryWeather y Harmony son ejemplos de diseño de listas multicolores. No sé si ahora es popular volver a levantarse de Clear. El uso de colores brillantes para distinguir la información puede desempeñar un papel destacado y es extremadamente llamativo visualmente.
Pero para algunas aplicaciones basadas en contenido, esto puede no ser aplicable. Por ejemplo, las tarjetas de colores de Google Keep pueden tener un efecto contraproducente en la lectura del contenido. El diseño de la primera versión de Baidu Cloud Notepad también era multicolor, pero luego, considerando que había más palabras para memorizar, para brindar una buena experiencia de lectura de texto, el diseño multicolor se cambió a gris. diseño de microtextura blanca.
En tercer lugar, visualización de datos | visualización de datos
En cuanto a la presentación de información, cada vez más aplicaciones intentan visualizar datos e información de gráficos, de modo que la interfaz no sea solo una lista. pero también hay formas de expresión ricas, como gráficos circulares, gráficos de abanico, gráficos de líneas y gráficos de barras, que son más intuitivos. Superficialmente no parece muy difícil, pero si realmente va a suceder, no se puede subestimar la complejidad que hay detrás.
Nice Weather usa gráficos para representar los cambios de temperatura, Jawbone UP usa histogramas para representar el estado de finalización diario y PICOOC usa gráficos de líneas para representar los cambios diarios en peso y grasa corporal. Al utilizar la visualización de datos, las aplicaciones móviles pueden mostrar contenido de forma más tridimensional en un espacio de pantalla más pequeño.
4. Tarjeta | Tarjeta
La tarjeta también es un lenguaje de diseño muy utilizado.
No hay forma de investigar si el diseño de esta tarjeta proviene del mosaico emergente en Metro o del mosaico emergente en Pinterest. En resumen, podemos encontrar que el diseño de los productos móviles de Google se ha resuelto de manera integral.
Bueno, incluso el lado web ha seguido este lenguaje de diseño unificado, que se dice que es una actualización unificada del lenguaje de diseño dirigida por el líder de experiencia de la Búsqueda de Google.
El flujo de tarjetas de Luvocracy resalta la información en sí, atrae a los usuarios con imágenes y títulos grandes, mejora la experiencia de navegación infinita y atrae a los usuarios a continuar desplazándose. Las tarjetas de Google Now son más personalizadas y personalizadas. Algunas tarjetas se utilizan para la educación del usuario, algunas tarjetas se utilizan para notificaciones meteorológicas, algunas tarjetas se utilizan para presentar listas de contactos y algunas tarjetas se utilizan para mostrar tareas pendientes. Diferentes tarjetas siguen una tarjeta con ancho y estilo uniformes para desarrollo y diseño. Esto no sólo asegura la independencia entre tarjetas, sino que también asegura el diseño unificado de servicios y negocios. Shazam presenta álbumes y canciones en un divertido estilo de tarjeta.
El contenido verbal (abreviatura de verbo) es el rey | el contenido primero
El flujo en cascada de imágenes de Arty no utiliza líneas ni superficies para distinguir bloques de información, sino que utiliza el contenido mismo para diseñar. Para que los usuarios puedan centrarse más en el contenido de la imagen. El diseño de fuente prismática se utiliza para colocar el contenido al frente tanto como sea posible, debilitando los íconos y las operaciones, lo que permite a los usuarios prestar más atención a la lectura del contenido. Porter, por otro lado, utiliza directamente las imágenes, los nombres y los precios de los productos para el diseño, lo que permite a los usuarios centrarse en los productos mismos.
6. Círculo | Aplicación del diseño circular
El prototipo es la forma más cómoda, especialmente en pantallas de teléfonos móviles llenas de varias cajas, agregar algunas formas redondeadas aumentará instantáneamente la atmósfera animada y buena voluntad. Un fenómeno interesante es que el teclado numérico de marcación del iPhone se diseñó originalmente para ser rectangular, pero se volvió circular después de la iteración a iOS7. Se puede decir que es un tributo a los teléfonos tradicionales y también se puede decir que mejora la suavidad del. interfaz. Por supuesto, en consecuencia, también se debe procesar el área táctil real del círculo. No reduzca la precisión del clic porque el área de clic esté diseñada en un círculo, ya que esto afectará la estética y la facilidad de uso.
Beats Music diseña pestañas favoritas en un círculo, lo cual es mucho mejor que las listas normales y las pestañas rectangulares, y es más interesante y exploratorio. Los pasos diarios y las calorías de Movse se llevan en círculos, que es el mejor caso para la visualización de datos y la visualización de información clave. Tumblr elige el tipo de contenido a crear y diseña botones de opción redondos enmascarados para que la selección sea enfocada y menos rígida.
Siete. Fondo de campo de visión grande | Fondo de imagen de campo de visión más grande
El uso de imágenes de banner como fondo también se ha convertido en una tendencia popular este año, ya sea como fondo de toda la aplicación o como fondo de bloques de contenido, que no sólo mejora la expresión visual, sino que también enriquece los elementos emocionales de la APP. Alguna información u operaciones flotan en la pantalla. Este método de diseño tiene requisitos más altos en cuanto a diseño de fuentes y tipografía y es más difícil, pero es muy fácil de representar la atmósfera.
También hay dos estilos de imágenes de fondo de campo grande. Uno es como un secreto y toda la despensa. La ventaja de utilizar una imagen de fondo de gran campo de visión en el bloque de contenido es que se puede segmentar. Sin embargo, la dificultad es que el efecto de empalme de la imagen puede no ser atractivo. Puede que sea necesario utilizar trazos y espacios en blanco. y otros métodos de diseño para optimizar el empalme.
El otro es como Vsco, Flink, Mindy, Sonic. La imagen de fondo de pantalla completa incluso abre la barra de estado y la recepción se encarga del diseño, la navegación y las operaciones del contenido. Lo bueno es que el diseño es animado. Todos los amigos llaman a este estilo diseño de planificación, que significa una técnica de diseño que regresa a la naturaleza. Pero el riesgo también es obvio, es decir, el diseño de la información en primer plano es realmente muy desafiante. El fondo de colores brillantes distraerá demasiado y hará que el contenido del texto en primer plano sea menos legible. Por lo tanto, se deben usar botones claros para distinguir operaciones importantes y el texto de lectura debe estar claramente invertido con la imagen de fondo. De lo contrario, el texto flotará en la máscara semitransparente, resolviendo el problema de legibilidad.
Finalmente, para resumir, los siete lenguajes de diseño que me impresionaron en 2014 son: color principal único, multicolor, visualización de datos, estilo de tarjeta, orientado al contenido, aplicación de reciclaje y campo amplio. imagen de fondo.
De hecho, es difícil tener un nuevo estilo de diseño y también es un proceso de reencarnación continua. Para resaltar el contenido, la aplicación está diseñada para ser delgada y liviana, pero no hay garantía de que algún día vuelva al diseño de imitación de textura pesada original.