Los íconos, como los íconos de aplicaciones y los íconos de las páginas, pueden denominarse íconos.

También llamado cuadro de lanzadera, generalmente tiene dos columnas, la izquierda son los elementos que se seleccionarán y la derecha son los elementos seleccionados. Seleccionar de izquierda a derecha significa seleccionado, mover de derecha a izquierda significa deseleccionado; Se usa comúnmente en productos del extremo B cuando se requieren selecciones múltiples y hay muchas opciones, se puede usar el selector de lanzadera. Cuando hay muchas opciones, más de 10, puedes considerar usar un cuadro de selección de lanzadera. De esta forma, los usuarios pueden saber claramente qué contenido han seleccionado.

El logotipo puede entenderse como un pequeño punto rojo, que es un pequeño punto rojo en la esquina superior derecha del ícono, texto o en algún lugar de la página. Suele utilizarse para indicar nuevas noticias o para lograr algún tipo de aviso informativo. El logotipo no sólo tiene la forma de un pequeño punto rojo, sino que también tiene un número dentro de un círculo rojo para indicar la cantidad de mensajes nuevos. También hay texto directo en pequeños círculos rojos para transmitir mejor la información.

La pantalla de esqueleto es un estado de carga, también llamado marcador de posición de carga. Al cargar, la estructura aproximada se muestra en la página a través de bloques grises. La pantalla esquelética puede aliviar eficazmente la ansiedad de espera del usuario y expresarle la sensación de "esta página tiene esos datos". Al mismo tiempo, combinado con la animación del paso brillante o el bloque gris que se contrae hacia adelante y hacia atrás, para expresar que la página se está cargando. La pantalla esquelética puede proporcionar mejores efectos visuales que las animaciones de carga normales, crear una sensación de carga rápida y brindar una mejor experiencia de usuario.

La página predeterminada/página de estado vacía se refiere al efecto de estado vacío que se muestra cuando no hay datos en la página. Evite mostrar una página en blanco cuando no haya datos, lo que confundiría a los usuarios sobre si hay datos o no. La página predeterminada incluye excepciones de red, fallas de carga, falta de permisos, falta de resultados de búsqueda, etc.

La página predeterminada no es solo una página con un estado vacío, sino también un estado vacío en un determinado módulo de la página, y también se debe agregar un estado predeterminado a un determinado módulo. La ausencia de datos afecta en gran medida la experiencia del usuario, por lo que se confía en la página predeterminada para consolar al usuario. Agregue redacción, patrones, orientación y animaciones adecuados para brindar a los usuarios una comunicación positiva. Por ejemplo, si no hay seguidores, recomendamos blogueros que los usuarios puedan seguir. Cuando falla la carga, puede agregar un botón "recargar" para permitir que el usuario actualice nuevamente. El estado vacío de la página predeterminada es un valor crítico para datos vacíos. A menudo se omite accidentalmente.

La página de pestañas se refiere a la página de pestañas, que puede entenderse como un menú y una barra de navegación. Agregue información diferente a través de diferentes pestañas y guárdela en un área de página.

Las páginas con pestañas se dividen en barras superior, inferior y lateral. La pestaña superior es la más común y se usa en muchas aplicaciones y sitios web porque ocupa menos espacio de página y puede acomodar muchas pestañas en forma deslizante. Además del texto, la pestaña superior también tiene pestañas de iconos. Hay pestañas en la barra lateral izquierda y derecha, y la más común es la barra lateral izquierda. Si desea resaltar más el contenido, puede utilizar la barra lateral derecha. La relación jerárquica de las páginas con pestañas es generalmente pestaña inferior>pestaña superior>pestaña de la barra lateral. Cuando hay demasiado contenido en la página, también se pueden incrustar entre sí. Por ejemplo, hay una pestaña secundaria en la barra lateral izquierda en la página de la pestaña superior.

Ventana emergente modal: una ventana emergente que dificulta las operaciones del usuario. Los usuarios deben responder al contenido de la ventana emergente antes de continuar con el siguiente paso. Se requieren ventanas emergentes modales para confirmar la operación y recordar información importante. Ventana emergente no modal: una ventana emergente que no obstaculiza las operaciones del usuario. Por ejemplo, los avisos de brindis y los paneles de notificaciones no son modales (estos conceptos se analizarán a continuación).

subtema

Las burbujas pueden entenderse como una pequeña ventana emergente, al igual que las burbujas son una forma que combina diferentes escenarios. Las más comunes incluyen cajas de confirmación de burbujas, tarjetas de burbujas, guías de burbujas, etc., que se caracterizan por ser livianas, pequeñas, y flexible. La característica de la burbuja es que habrá una pequeña flecha para indicar de dónde viene la burbuja y puede resaltar el mensaje de una ubicación específica. Por lo tanto, al guiar a los usuarios, puede utilizar generosamente la guía de burbujas. Para algunas funciones utilizadas con poca frecuencia o entradas de funciones de acceso directo, puede ocultarlas y mostrarlas en forma de "tarjetas de burbujas" cuando se muestran.

Una capa emergente se refiere a una ventana emergente que aparece en una capa translúcida y se puede operar en la capa emergente. Por lo general, se muestra después de hacer clic en un área determinada de la página.

La barra de acciones se refiere a la ventana emergente de la lista inferior que aparece en la parte inferior de la página, suspendida en la máscara translúcida. No es necesario saltar a la página y se pueden realizar más operaciones en la página actual.

La vista activa se refiere a la ventana emergente que aparece desde la parte inferior. El estilo común es el título del ícono, que permite a los usuarios acceder rápidamente a otras funciones.

Aviso de brindis, aviso ligero, es un aviso muy ligero. Después de aparecer, desaparecerá automáticamente al cabo de unos segundos. Aparece en la parte superior, media e inferior de la pantalla. Debido a su corto tiempo de aparición y área pequeña, desaparecerá automáticamente después de unos segundos, por lo que no podrás agregar demasiado texto ni poner información importante. El brindis no es modal.

El formulario suele ser una pequeña barra horizontal que se muestra en la parte superior de la página. Se puede utilizar para mensajes de estado y notificaciones de mensajes. No es modal y puede avisar al usuario pero no afecta la operación del usuario.

La barra de notificación es más pesada que un mensaje de brindis porque es más obvia; es más liviana que un mensaje emergente o un mensaje de burbuja porque no afecta la operación del usuario. El tablón de anuncios suele estar situado en la parte superior de la página, pero también puede aparecer en la parte inferior de la página. Puede desaparecer voluntariamente o permanecer permanentemente. También puede agregar varios paneles de notificaciones a una página.

La notificación de mensaje suspendida en la parte inferior de la página puede desaparecer automáticamente o se puede hacer clic permanentemente en ella para que desaparezca manualmente.

La fuerza de aviso de Snackbar es más fuerte que Toast, no afecta las operaciones del usuario y no es modal. Además, se pueden agregar botones de operación cuando aparece la barra de refrigerios para guiar a los usuarios a realizar otras operaciones.

Aviso HUD-Light, similar al Toast anterior.

HUD - Head-up Display El nombre completo es Head-up Display.

La capa de indicador transparente se refiere a la capa de indicador que muestra operaciones interactivas en la página. También es un componente de retroalimentación. Los ejemplos comunes incluyen indicaciones de avance rápido para ver videos o indicaciones para ajustar el volumen.

A menudo significa que cuando el mouse pasa sobre un ícono, botón, texto u otro elemento, se muestra una descripción o descripción de función para ayudar al usuario a comprender una determinada función.

Material Design divide los chips en 4 categorías: chips auxiliares, chips de filtro, chips de entrada y chips de sugerencias. Chips auxiliares: operaciones inteligentes o automatizadas que pueden abarcar múltiples aplicaciones, como agregar tiempo de película a su calendario después de comprar una entrada de cine. Chips de filtrado: utilizados para filtrar, se pueden utilizar para selección única y selección múltiple. Chips de entrada: agregación de información ingresada por el usuario. Por ejemplo, después de ingresar el destinatario en un correo electrónico, aparece una "×". Chips de sugerencias: sugerencias generadas dinámicamente para ayudar a limitar la intención del usuario.

Un paso a paso es un componente que controla valores numéricos mediante botones de aumento y disminución. A menudo se utiliza para la entrada numérica de números enteros de rango pequeño, y la cantidad de cada incremento y decremento es constante.

El selector deslizante se refiere a seleccionar el valor o intervalo correspondiente deslizándose sobre el eje horizontal. La característica es que los valores mínimo y máximo se muestran en el eje horizontal y los usuarios pueden seleccionar los valores correspondientes deslizándose. El selector deslizante de intervalo significa que se pueden seleccionar el valor mínimo y el valor máximo, lo que permite al usuario elegir el rango de intervalo. A menudo se utiliza para la selección de precios.

Los botones de acción flotantes son botones flotantes. Comúnmente utilizado para la entrada de funciones principales, como una nueva creación.

La barra de estado es la columna en la parte superior de la pantalla del teléfono que muestra la hora, la batería y la señal del teléfono. La barra de navegación se refiere a la columna debajo de la barra de estado. La barra de navegación puede ser muy simple con solo un título, o también puede contener un cuadro de búsqueda, otros botones de operación o entradas de funciones.

Cuando se pueden deslizar imágenes o tarjetas hacia la izquierda o hacia la derecha, a menudo se utilizan indicadores para expresar la ubicación. Dependiendo del estilo del indicador, existen indicadores de puntos, indicadores deslizantes, indicadores de líneas e indicadores digitales.

Las tarjetas son una forma de mostrar información. Cada tarjeta tiene contenidos diferentes. No solo puede manejar de manera efectiva la recopilación de información, sino que también permite a los usuarios concentrarse en el contenido de la tarjeta. La partición eficiente y el resaltado de información de las tarjetas se han utilizado en muchos productos.

El carril de natación se refiere a una forma de ver contenido deslizándose horizontalmente o hacia la izquierda. Deslizar el contenido de varios elementos horizontalmente dentro de un área determinada expande el espacio horizontal de la página. Generalmente, se desliza manualmente para ver y no hay deslizamiento automático.

Banner se refiere a una imagen de banner obvia que aparece en la página, generalmente utilizada como espacio de recomendación, espacio publicitario, como recomendaciones de productos, espacio publicitario, etc. Dependiendo del estilo, también se puede dividir en pancarta cápsula, pancarta de área de porcelana y pancarta de fondo blanco.

Se disponen diferentes bloques rectangulares en una cuadrícula para formar un área de mosaicos. La característica es que el diseño es muy flexible, ocupa menos espacio que un cartel y puede acomodar más entradas de tráfico en la misma área.

El área de King Kong se refiere al área de la página de inicio donde el texto del ícono está organizado en una cuadrícula de palacio. Organizar múltiples entradas funcionales juntas juega un buen papel a la hora de desviar el tráfico y las funciones siguen siendo muy flexibles.

Banner, Área de King Kong y Área de Porcelana se denominan las tres secciones operativas principales, que desempeñan un papel en la atracción de tráfico a diferentes módulos y actividades comerciales.

Cajón se refiere a una descripción de la forma en que se muestran los componentes. Se abre y se cierra como un cajón, oculta el exceso de contenido y aparece cuando aparece, como una capa emergente. Para funciones utilizadas con poca frecuencia, oculte la entrada de la función. Cuando el usuario lo necesite, haga clic en la entrada y luego muestre la lista de funciones. Cuando desempeña una función de navegación, se denomina navegación de cajón, también llamada menú adicional, menú expandido o navegación de hamburguesa, que oculta la barra lateral.

Palace grid se refiere a un método de diseño que organiza directamente el texto del ícono de manera uniforme, lo que permite a los usuarios ver directamente la entrada de cada módulo independiente y hacer clic en él ellos mismos. Cuando el diseño del palacio se utiliza para la navegación, se puede llamar navegación del palacio. Por ejemplo, el área de King Kong es una navegación del palacio.

La barra de navegación de índice se refiere a un control que organiza el contenido en categorías y navega a través de iniciales o números.

La navegación con timón es una variación de las pestañas inferiores y se usa comúnmente en las barras de pestañas de las aplicaciones. Coloque las funciones principales de la aplicación y las funciones que desea que los usuarios operen en el medio, cambie la forma y guíe a los usuarios para que hagan clic.

Por lo general, en las comunidades UGC, para guiar a los usuarios a publicar contenido, la entrada se coloca en la posición más obvia y guía a los usuarios a publicar por el camino más corto.

Las fuentes serif se refieren a fuentes que tienen giros y vueltas en las esquinas de los trazos de los caracteres, como la fuente Song, que es una fuente serif. Las fuentes sans-serif son completamente opuestas a las fuentes serif. Son fuentes con trazos y líneas unificadas y sin esquinas sinuosas. Por ejemplo, Microsoft Yahei es una fuente sans-serif.

La transformación de contenedores es una definición de animación, que proviene de Material Design. En términos sencillos, se refiere a ampliar y expandir a una nueva página basada en una tarjeta pequeña. Por ejemplo, haga clic en la tarjeta de flujo en cascada en la página de inicio de Xiaohongshu para ingresar al efecto dinámico de la página de detalles, que es la transformación de capacidad. La transformación de contenedores adopta un método de transición para guiar la línea de visión del usuario, reducir la frustración durante el uso y mejorar la fluidez.

Utilice colores directamente para expresar significados contextuales específicos. Como rojo: advertencia Amarillo: aviso verde: éxito Gris: no compatible Azul: color del enlace

El contenido fuera de límites se refiere a un método de diseño que permite que el contenido desborde el marco, lo que puede resaltar la atmósfera y hacer que la imagen sea más impactante.

Este concepto proviene de Material Design, que se basa en el diseño bidimensional y elevado a tridimensional para mostrar la profundidad en la página, se introduce el concepto de eje Z. Para entenderlo simplemente, es una relación jerárquica. Refleja la altura de la página mediante el uso de sombras, superposiciones, etc.

Los puntos calientes se refieren a áreas de la página en las que se puede hacer clic. Al hacer clic en un punto caliente se activará un evento interactivo. Por ejemplo, si hace clic en el avatar para ingresar a la página de inicio personal, el área del avatar es un punto de acceso.

El rango de tamaño del área activa también afectará la experiencia del usuario. Por ejemplo, para los botones de opción, para permitir a los usuarios seleccionar rápidamente, puede optar por expandir el rango del área activa y usar íconos y texto como áreas activas.

Un mapa de calor, también llamado mapa de calor, se refiere a mostrar las áreas en las que los usuarios hacen clic con frecuencia en la página en una forma resaltada especial. Cuanto más brillante es el área, más hacen clic los usuarios. El mapa de calor muestra de manera muy intuitiva las operaciones del usuario en la página, lo cual es una buena guía para que analicemos la racionalidad de la página y mejoremos la tasa de conversión de la página.