¡Producido oficialmente! Revelando las ideas de diseño detrás de la actualización visual de la marca de la aplicación Alibaba 8.0
La importancia de la página de inicio
La página de inicio no es sólo el escenario central para la desviación de negocios, sino también una "fachada" importante para que los vendedores de plataformas juzguen la jugabilidad de la plataforma y para que los compradores percibir el valor de la plataforma. Desde una perspectiva profesional de UED, la página de inicio es el escenario central que define el paradigma de experiencia y el estilo visual en la aplicación.
¿Cómo cambiarlo?
1. Fenómeno del inventario, problema de definición
Satisfacer las nuevas necesidades del negocio: Las estrategias de escenario de la plataforma son diferentes. 1688 ha pasado de ser una antigua plataforma de información a una plataforma comercial y ahora a una plataforma de marketing digital. Es difícil que el antiguo marco de contenidos impulse nuevos desarrollos comerciales.
Mejorar la calidad del desvío del tráfico: a juzgar por los efectos de los datos pasados, antes de abordar la demanda de adquisiciones especializadas y adquisiciones de servicios a gran escala, es necesario volver a juzgar cómo equilibrar y optimizar para mejorar el tráfico. Eficiencia de conversión de la página de inicio.
Actualización de la experiencia: la aplicación móvil crece naturalmente en el sistema de telefonía móvil y los cambios de estilo del sistema también afectan los cambios y actualizaciones de la aplicación. Antes de la actualización 8.0, había más de tres escenarios en 1688APP diseñados por diferentes diseñadores en diferentes momentos para 5.0, 6.0 y 7.0. Para 8.0, la aplicación debe actualizarse de manera uniforme desde la capa de marco, la capa de presentación, la marca y otros aspectos.
Revisar la estrategia
1. Centrarse en el valor para el usuario y actualizar el marco de contenido en función del juego empresarial.
Centrándonos en el negocio antes de la actualización de la aplicación, recibimos tres demandas:
En la formulación del marco de contenido, el valor para el usuario es el núcleo y la personalización de la sección de contenido es abandonado en 7.0, centrándose en la personalización de productos, conservando solo escenarios de contenido y marketing específicos del usuario, aumentando la exposición del área de recomendación del algoritmo y transformando directamente la página de inicio con productos en esta área.
2. Debilitar el contenedor, resaltar el contenido y dar forma al alma.
Actualización del contenedor visual
Cree un marco visual plano y seleccione "Separación de espacio grande" para dejar un espacio visual limpio y conciso para el contenido.
Simplifica la cuadrícula de contenidos para evitar la carga de formularios cuando los usuarios leen.
Aumente la tasa de espacios en blanco, mejore la transpirabilidad general de la página y deje un espacio de lectura más refrescante y fácil para el contenido.
Amplíe el degradado del tamaño de fuente y aumente el degradado del color de fuente para mejorar la claridad y legibilidad del texto.
Enfatiza las características de la sección, moldea la cognición mental de los compradores y logra los objetivos comerciales.
Búsqueda mejorada: 7.0 lanzó un plan de prueba para hacer que las búsquedas sean "subjetivamente llamativas", pero en comparación con la búsqueda inmersiva anterior, los datos casi no han cambiado.
En la etapa 8.0, saltando de la capa de presentación visual, la "búsqueda mejorada" no significa hacer la búsqueda más llamativa, sino lograr el propósito de "permitir que más usuarios utilicen la búsqueda con más frecuencia". Por ejemplo, puede mejorar la precisión y el atractivo de las palabras de sombreado de búsqueda, las palabras de búsqueda más populares, aumentar los puntos de búsqueda, etc. , puede ayudar a alcanzar los objetivos comerciales.
Basándonos en la experiencia del usuario al hacer clic con el pulgar en diferentes áreas de la pantalla cuando opera con una mano, elegimos mover el componente de búsqueda a una posición de la pantalla donde sea más fácil hacer clic y donde esté la línea de visión. más enfocado. Después de conectarse, los datos mejoraron significativamente.
Actualización del banner: Banner 7.0 tiene gráficos ricos y muchos campos de descripción, lo que dificulta que los usuarios comprendan toda la información del banner en 3 segundos. Además, en comparación con el Usuario C, el Usuario B es más racional, por lo que elegimos utilizar un "tono visual" más tranquilo y comedido para hablar con la Empresa B en lugar de exagerar la atmósfera para guiar los clics. (Después de conectarse, se diseñarán y utilizarán dos conjuntos de pancartas de acuerdo con las especificaciones antiguas y nuevas para el mismo contenido de actividad. La nueva versión es aproximadamente un 48% más alta que la versión anterior).
Para los recién llegados: beneficios diferenciados y personalización Las ventas flash y las estrategias para los recién llegados sirven como carrera para los usuarios.
Expresión diferencial del alma en escenarios de marketing: El marketing se compone de productos de moda y ventas diarias. Nuestra principal motivación para juzgar productos populares es "vender barato y barato", y la principal motivación para las ventas es "obtener precios baratos por un tiempo limitado", por lo que optamos por fortalecer la expresión de las características más críticas de los dos bloques.
Transmisión dinámica, interactiva y en tiempo real de escenas de contenido (transmisión en vivo): abstraiga el diseño cuadrado de la sala de transmisión en vivo y diséñelo en forma de superposición de contenido. El foso transmite la dinámica de la transmisión en vivo a los usuarios a través de gráficos animados y transmite la interactividad y la naturaleza en tiempo real de la transmisión en vivo a través de sobres rojos y burbujas de carrusel multidimensionales en tiempo real de productos personalizados.
3. Actualice la marca y ejecútela en la escena de la APLICACIÓN.
¿Por qué necesitamos hacer diseño de marca en APP?
El diseño de marca es parte del vínculo flexible entre la capa de contenido (valor de la plataforma) y la capa de recepción (usuarios). Por ejemplo, en el escenario de la aplicación, debido a que existen "productos secos" como productos, comerciantes y oportunidades comerciales, los usuarios pueden mantener una relación rígida y estable con la plataforma incluso si no se especializan en diseño de marca. Por otro lado, a la marca le está yendo bien, pero no hay "información seca" en la plataforma y los usuarios no acudirán a la plataforma simplemente por el diseño de la marca.
Creemos que el valor central del diseño de marca en las aplicaciones de aplicaciones es ayudar a los usuarios a comprender las características de la plataforma y percibir el valor de la plataforma. Desde una perspectiva profesional del diseño, el diseño de marca en las aplicaciones de aplicaciones contribuye a definir y unificar el paradigma de experiencia y el estilo visual en la aplicación para garantizar la experiencia del usuario.
¿Cómo es eso?
El entorno empresarial de cada diseñador es diferente, y sus estrategias y métodos para resolver problemas también son muy diferentes. En el diseño de marca de aplicaciones de aplicaciones, la elección personal es aclarar los atractivos multinivel y los puntos de valor de la capa de contenido (plataforma) para los usuarios, reconocer y percibir las características y tendencias de contenido de la capa receptora (usuario), en función de Los materiales subyacentes y la recepción de la capa de contenido. Las características del usuario de la capa determinan el paradigma subyacente del diseño y dan forma a la percepción del usuario.
1. Ejemplo gráfico
En el sistema operativo comercial de Alibaba, 1688 se centra en negocios de tipo B y atiende directamente a los comerciantes de tipo B. El negocio se subdivide en puestos, fábricas de Taobao, adquisiciones corporativas, fuentes de Taobao, agentes de microempresas, supertiendas industriales, suministros exclusivos transfronterizos, etc. Son escenas con ciertas características de tipo B y sensación de volumen. Por lo tanto, en términos de la expresión de la entrada comercial de la aplicación y los íconos convencionales, basados en las dimensiones de planitud y realismo, ligereza y grosor, vivacidad y estabilidad, se eligió el paradigma de diseño gráfico de imitación de luz y contraste débil para brindar a los compradores. Crea la calma y la pesadez de las escenas de nivel B.
Además, las escenas anormales o en blanco también son oportunidades para que la plataforma interactúe con los usuarios y dé forma a la marca percibida por el usuario. Al dibujar ilustraciones emocionales etéreas, nos esforzamos por crear una escena importante, legible y significativa para expresar el estado etéreo correspondiente, y utilizamos ligeros efectos dinámicos para mejorar la sensación interactiva del estado etéreo. (En escenarios de tipo herramienta como Favoritos y Mis proveedores, basándose en la consideración del valor de la información vacía, el estado vacío se combina con la guía para principiantes de la herramienta sin ilustraciones convencionales).
2. /p>
Colores de referencia
Con el desarrollo del negocio, hemos enriquecido el color de la marca 1688 de acuerdo con la nueva situación empresarial, utilizando el rojo anaranjado como expresión de los atributos de marketing y beneficios, y El azul empresarial como expresión de atributos de marketing y beneficios. Como expresión de atributos digitales y de servicio, el oro se utiliza como expresión de atributos de equidad.
Colores secundarios
En el diseño de productos real, los colores de la marca no son suficientes para expresar el contenido de múltiples capas en diversos escenarios comerciales. Por lo tanto, según el color de la marca VI, se separan los colores auxiliares de la marca con diferentes pesos y niveles más ricos.
Reglas de color de escena
Defina reglas de color basadas en los roles del comprador y las características de la escena.
Gama de colores de 1688 y diagrama de selección de colores
La gama de colores estable de 1688 se define mediante el modo HSB y se puede utilizar de manera flexible en pancartas diarias y escenarios comerciales.
3. Paradigma del efecto dinámico y su aplicación
El efecto dinámico es un medio importante de diseño. Una buena expresión dinámica puede mejorar la intensidad de la expresión de la información, aclarar la relación jerárquica de la información y mejorar la comodidad de la experiencia del usuario. Antes de realizar efectos dinámicos, aplane la estructura de información de la aplicación en tres capas para garantizar que el contenido se presente de manera concisa y clara en la página.
En la implementación real, la realización de efectos dinámicos depende en gran medida de los recursos técnicos, por lo que antes del diseño de efectos dinámicos, se debe considerar una premisa: el diseño de efectos dinámicos obtiene la expresión del contenido, su valor se puede mostrar y su El efecto se puede medir; al mismo tiempo, teniendo en cuenta las características comerciales de los usuarios de la capa receptora, esperamos que la expresión dinámica brinde a los usuarios una sensación de estabilidad y tenga en cuenta la eficiencia en la expresión del diseño.
En la parte de presentación del efecto dinámico, se ajusta principalmente a través de la curva combinada de entrada, salida y cámara lenta. En términos generales, cuando el contenido ingresa al lugar, el ritmo es ligeramente más lento y la velocidad es más lenta, lo que indica la relación jerárquica de la información en el eje Z. El contenido sale a un ritmo y velocidad rápidos, y no es necesario que la jerarquía del contenido desaparezca en capas.
Casos de efectos dinámicos y demostraciones de escenas típicas en APP;
4. Transferencia de valor de marca corporativa
Además, además de los gráficos mencionados anteriormente, colores, efectos dinámicos, etc. En la dimensión básica, también necesitamos entregar en voz alta la marca comercial a compradores y vendedores para realizar la transferencia de valor de la marca comercial. Durante la etapa de transformación de 1688 a una plataforma de marketing digital, los comerciantes propusieron el lema de "productos de origen disponibles en todo el mundo". A través del diseño, utilizamos la página de inicio de la aplicación y el espacio de actualización desplegable para fortalecer la expresión del concepto de "bienes en todas partes".
Etiqueta
Lo anterior es un registro gradual de la revisión de la página de inicio. En el sistema visual 8.0, para resaltar mejor el contenido, se elige que el contenedor visual sea lo más delgado y plano posible, y el diálogo con los empresarios de Clase B se lleva a cabo en un "tono visual" tranquilo y sobrio. Por supuesto, esta es una elección preparada para diseñadores y estudiantes de negocios. La promoción posterior de la marca y la optimización del producto aún deben pulirse continuamente con datos.