Diseño de pantalla grande: la diferencia entre el diseño de pantalla grande y el diseño de aplicaciones
Diseño visual de pantalla grande
Herramientas de referencia
Herramientas de visualización
Complementos de gráficos
Grandes La visualización de datos en pantalla es El diseño de visualización de datos utiliza pantallas grandes como principal soporte de visualización. Las pantallas grandes son fáciles de dejar una impresión impactante en la percepción de las personas y pueden crear una atmósfera única y una sensación de ceremonia. Una vez que se visualizan los datos originalmente invisibles, pueden movilizar las emociones de las personas, desencadenar los gritos de las personas y transmitir documentos y valores corporativos.
Usar un área grande para mostrar una gran cantidad de información y compartir información clave en una pantalla grande puede facilitar la discusión y la toma de decisiones en equipo, por lo que las pantallas grandes también se usan comúnmente para el análisis y la detección de datos. La visualización de datos en pantalla grande actualmente incluye principalmente tres categorías: visualización de información, análisis de datos y monitoreo y alerta temprana.
Los tipos de pantallas grandes comunes incluyen pantalla 16:9, pantalla ultra ancha, pantalla plegable, pantalla de tres lados, pantalla en forma de T...
Pantalla grande empalmada
Grande Casi todas las pantallas son pantallas empalmadas Al diseñar la interfaz de usuario, no es necesario considerar que los espacios en la pantalla afectan la presentación del contenido. El contenido no se perderá, pero puede afectar el rendimiento visual. . Por lo tanto, se puede establecer una línea de referencia para la ubicación del espacio durante el diseño para evitar situaciones similares. Hoy en día, existen tres tipos de pantallas grandes empalmadas comúnmente utilizadas por las empresas: sin costura, con espacio de 1,7 mm y con espacio de 3,5 mm. Cuanto más pequeño es el espacio, más caro es.
Características de la pantalla
Tamaño de pantalla
Por ejemplo: tamaño (10500 mm+24000 mm+10500 mm)x6000 mm, píxeles 6144x1024, PPI es 45.
Por ejemplo: pantalla grande 3x5
Resolución de pantalla
Para optimizar el efecto de visualización, primero debe comprender la relación de aspecto física de la pantalla grande y determinar el tamaño del borrador del diseño. En segundo lugar, debemos comprender los principios internos del sistema de pantalla grande: fuente de señal, receptor de pantalla grande y dispositivo de control de reproducción.
Generalmente, la resolución de los borradores de diseño es 1920x1080 y se deben comprender cuatro conceptos al mismo tiempo:
Mejor efecto de visualización
Expresión de datos y Principios de proporción de tinta La idea central es ser concisa, los gráficos deben ser concisos y los datos deben ser concisos. La visualización en pantalla grande se basa en escenarios de clientes, comprende la complejidad de los datos y forma historias altamente refinadas a través de medios de visualización.
En términos simples, la visualización de datos es el uso de gráficos para contar historias. Lo que le importa a la gente nunca son los datos, no son el enfoque. el significado detrás de los datos.
Investigación
Palabras clave de diseño: tecnología, dinámico, interactivo
Los indicadores clave son algunas palabras generales, que son el nombre colectivo de un grupo o serie de datos. En términos generales, un indicador ocupa un área exclusiva en la pantalla grande. A través de la definición de indicadores clave, se sabe qué se mostrará en la pantalla grande y en cuántos bloques se dividirá la pantalla grande. Después de determinar los indicadores clave, determine la prioridad (primaria, secundaria, auxiliar) para cada visualización de indicadores según las necesidades comerciales.
Las pantallas grandes deben centrarse en mostrar datos, y cualquier rendimiento interesante debe basarse en una visualización efectiva que no afecte a los datos. Una pantalla grande debe tener un tema claro y se recomienda un práctico desmantelamiento multidimensional del método del indicador North Star.
Visual
Rendimiento
Datos
Diseño
Después de determinar el tamaño del borrador del diseño, necesita para diseñar y dividir la página, Principios para la disposición y división de datos: prioridades claras, organización clara y atención al espacio en blanco. Los indicadores clave se extraen según las necesidades del negocio y se pueden dividir en primarios, secundarios y auxiliares según su importancia.
El propósito del diseño es mostrar los indicadores y datos comerciales de manera razonable. El negocio general generalmente se divide en dos niveles: indicadores primarios e indicadores secundarios. Los indicadores primarios reflejan el negocio principal y los indicadores secundarios. utilizado para profundizar en el análisis. Se recomienda utilizar un diseño de distribución primaria-secundaria para que la información sea clara de un vistazo, o puede utilizar una distribución uniforme o una combinación de ambas.
Por ejemplo: debido a la gran cantidad de monitores, las pantallas de monitoreo grandes a menudo se dividen en pantallas principales y pantallas divididas. La pantalla principal se usa principalmente para mostrar tendencias de estado de eventos, advertencias de riesgo y progreso del procesamiento de riesgos. . Las pantallas divididas se utilizan principalmente para mostrar análisis de datos detallados y procesamiento de eventos de riesgo. La forma de organizar los datos debe combinarse estrechamente con las necesidades comerciales y la experiencia del usuario.
Se deben seguir cuatro principios principales (CRAP) en el diseño de pantalla grande
La combinación de colores de las pantallas de visualización a gran escala es un componente importante de la presentación visual. A menudo están relacionados con el tipo de industria, la forma de negocio y la aplicación. La escena, el concepto de diseño, la creación de la atmósfera, etc.
Principios de combinación de colores
Por ejemplo: si el fondo general es oscuro, principalmente azul oscuro, se recomienda combinar elementos individuales con colores transparentes y establecer la transparencia alrededor del 10%.
Por ejemplo:
Embellecimiento: agregar adecuadamente efectos de adorno como bordes, imágenes, etc. a los títulos y números de los elementos puede ayudar a mejorar la estética general.
¿Cuáles son las consideraciones sobre las fuentes para visualizar datos?
Diseño estándar: especificaciones de fuentes, uso de color, elementos de la interfaz, iconos gráficos, descripción general de la interfaz
Las fuentes no son Si es más pequeño que el No. 12, se puede usar para anotaciones de gráficos. Para información de datos, se recomienda usar el No. 14 o superior. No es necesario utilizar una sola fuente, puedes utilizar una fuente con un fuerte sentido de la tecnología.
El proceso de procesamiento de visualización de datos es: recopilación de datos-limpieza de datos-análisis de datos-datos visualizados
El gráfico de líneas se utiliza para representar los cambios y tendencias de los datos. ejes de coordenadas de la polilínea La magnitud del cambio tiene un gran impacto. Los datos de aproximadamente 2/3 de las posiciones por encima y por debajo de la polilínea son claros y razonables.
El grosor de línea del gráfico de líneas es razonable. Una polilínea demasiado delgada reducirá el rendimiento de los datos, y una polilínea demasiado gruesa perderá los detalles de las fluctuaciones de los datos en la polilínea, lo que la hará visualmente. Es difícil encontrar con precisión el valor correspondiente del punto de descuento. Se recomienda utilizar una línea de dos píxeles, que se verá más apropiada. Una buena pantalla grande puede sumergir a la gente en la boda. ¿Cómo organizar la pantalla grande?
Puedes colocar la pantalla LED en el centro del escenario y luego instalar paneles de inyección de tinta en ambos lados. Luego puedes colocar algunas fotos de la pareja. Antes de que comience la ceremonia, puedes reproducir las fotos. las dos personas en bucle. Por ejemplo, en las fotos de la boda, puedes reproducir algunos clips tomados antes de la boda al comienzo de la ceremonia, intercalar algo de texto e imágenes en el vídeo y, finalmente, reproducir las bendiciones pregrabadas de buenos amigos. para los novios al final de la boda. La diferencia entre el diseño de pantalla grande y el diseño de aplicaciones
1) Soporte funcional
Todos sabemos que los programas pequeños son aplicaciones basadas en WeChat. El desarrollo debe depender de la interfaz proporcionada por WeChat (qué. WeChat proporciona es qué), las funciones que se pueden realizar son muy limitadas. Además, solo han pasado 2 años desde que se lanzó el mini programa y todavía hay algunas funciones imperfectas.
La aplicación se basa en el sistema del teléfono móvil y puede realizar funciones complejas y múltiples. El desarrollo de la aplicación se ha acumulado durante casi 10 años y varios controles son relativamente completos. En otras palabras, cuanto mayor es la capacidad del desarrollador, mayor es la capacidad del desarrollador. mejor el efecto de visualización.
2) Volumen de memoria
El envío de código de programa pequeño no puede exceder el tamaño especificado de 2 M, lo que limita en parte la posibilidad de desarrollo.
La aplicación es diferente. No existe tal restricción. Cuando actualizamos el software, a menudo vemos tamaños de descarga de decenas de megabytes, cientos de megabytes o incluso varios gigabytes.
3) Experiencia y fluidez
La experiencia de los mini programas es ligeramente inferior a la de las aplicaciones. Los mini programas no son tan estables cuando se usan y es probable que se produzcan errores y fallas. Especialmente en algunas aplicaciones con funciones complejas, aunque el mini programa se ha optimizado mucho, a veces todavía habrá una sensación de retraso.
2. ¿Cuáles son las diferencias? Manifestaciones específicas
1) Barra de navegación superior
Aplicación: la barra de navegación se puede conservar o eliminar, y es muy alta. escalable. Alta flexibilidad.
Mini programa: hay una cápsula (barra de título) en el lado derecho de la barra de navegación que no se puede eliminar ni editar, y no se pueden agregar otras funciones a la navegación durante el diseño. Por lo tanto, cuando la aplicación se convierte en un mini programa, la función de la barra de navegación debe cambiarse o colocarse debajo de la barra de navegación.
El efecto de implementación también falta ligeramente. Por ejemplo, WeChat proporciona dos tipos de barras de navegación: nativas y personalizadas:
(1) La barra de navegación nativa admite cambios de color, pero. el color de fuente solo admite blanco y negro;
(2) Aunque la barra de navegación personalizada puede eliminar la barra de navegación nativa y admitir imágenes que pasan a la barra de navegación, es necesario reajustar todas las páginas (la altura del la barra de navegación original no lo hace, los elementos de la interfaz se moverán hacia arriba) y el mini programa no admite la modificación de una sola página.
Esta es la parte más problemática en la actualidad. Las aplicaciones a pequeña escala están bien, pero las aplicaciones a gran escala aumentarán considerablemente la carga de trabajo.
Al mismo tiempo, la navegación personalizada puede causar fácilmente problemas como que los títulos no estén alineados, que las zonas de seguridad sean diferentes para diferentes modelos de página y que toda la página se baje durante la actualización global, etc.
Se recomienda minimizar el uso de la navegación personalizada cuando hay muchas páginas complejas. También puede usar el fondo de la barra de navegación para conectar el fondo de la imagen como un avispero, y el efecto también es bueno.
2) Barra de pestañas
Aplicación: puede admitir el cambio de al menos 2 y hasta 5 pestañas. El tamaño del icono y la altura de la barra de pestañas inferior se pueden personalizar.
Mini programa: también puede admitir el cambio de al menos 2 y hasta 5 pestañas. Cuando se utilizan controles nativos, el tamaño del icono debe ser 81*81px.
Cuando se utiliza una barra de pestañas personalizada, se puede admitir la adición de efectos interactivos, como burbujas para indicar el número, etc., pero la experiencia es un poco peor que la nativa si la página de pestañas es la. Al ingresar a la página por primera vez, cambiar la barra de pestañas provocará saltos, es necesario desarrollarlos para evitarlos.
Se recomienda que si no hay interacción, intente utilizar controles nativos, tal como el programa Zoku mini.
3) Arrastrar y ordenar
Aplicación: experiencia fluida y buena, como arrastrar y ordenar fotos al publicar en Momentos.
Mini programa: No se recomienda utilizar la clasificación por arrastre a menos que sea necesario. La experiencia de arrastrar imágenes y listas en los modelos Android no es suficiente y habrá retrasos.
Se recomienda utilizar los botones de arriba y abajo en lugar de arrastrar hacia arriba y hacia abajo, o utilizar marcadores para ordenar las imágenes.
4) Omisión de texto
Aplicación: puede lograr todos los efectos de texto y párrafo necesarios en la vida diaria.
Mini programa: existe un problema al limitar el número de líneas de texto, agregar elipses y agregar una solución de expansión de texto completo. Omisión impredecible de final de línea.
Se recomienda agregar un botón de expansión de texto completo mediante saltos de línea, o controlar el número de palabras y agregar un botón de expansión de texto completo al final del texto.
5) Componentes nativos
Aplicación: puede personalizar la biblioteca de componentes y tener bajas restricciones de desarrollo y diseño.
Mini programa: Algunos componentes son componentes nativos creados por WeChat, incluidas cámaras del sistema, cuadros de entrada, mapas, entrada de texto... etc. Existen ciertas restricciones en el uso de controles nativos y no se pueden Se utiliza en desplazamiento o desplazamiento. Se utiliza en reproducción, selectores y áreas de arrastre. El nivel más alto no se puede sobrescribir. Los parámetros que se pueden modificar los proporciona WeChat.
Se recomienda modificar en función de los controles nativos al diseñar, en lugar de crear sus propios controles. Al mismo tiempo, preste atención a los escenarios de uso para evitar fallas.
6) Implementación de animación
Aplicación: la animación es fluida y sin demoras, y básicamente se puede lograr todo lo que deseas.
Mini programa: la capacidad de animación es menor que la de H5 y la animación de la aplicación consume mucho rendimiento, especialmente en los modelos de Android, y el retraso es ligeramente obvio. Al cargar el paquete de código, cuando WeChat cree que este subprograma ocupa demasiada memoria, saldrá a la fuerza del subprograma para garantizar el uso normal de WeChat.
Se recomienda simplificar la animación y realizar el diseño sustractivo tanto como sea posible.
3. Resumen
Debido a la particularidad del desarrollo del mini programa en sí, habrá algunas diferencias con respecto al diseño de la aplicación, tales como:
1. Si hay muchas páginas complejas, intente minimizar el uso de navegación personalizada.
2. Si no hay interacción, intenta utilizar controles nativos.
3. Utilice los botones arriba y abajo en lugar de arrastrar hacia arriba y hacia abajo, o utilice marcadores para ordenar las imágenes.
4. Agregue un botón de expansión de texto completo mediante saltos de línea, o controle el número de palabras y agregue un botón de expansión de texto completo al final del texto.
5. Modifique en función de los controles nativos al diseñar, no cree sus propios controles. Al mismo tiempo, preste atención a los escenarios de uso para evitar fallas.
6. Agiliza la animación e intenta hacer un diseño sustractivo.