Pantallas y Diseños

Encabezados y menús flotan en contenedores de vidrio difuminado Destacar Encabezados y menús flotan en contenedores de vidrio redondeado que… encabezado-de-vidrio

Los encabezados y menús flotan en contenedores de vidrio redondeado que se desvanecen al desplazarse. Utiliza el efecto de vidrio difuminado (desenfoque de fondo + superficie semitransparente). Desaparece al desplazarte hacia abajo en la página.

  • encabezado-de-vidrio
  • navegación
  • contenedores
  • diseño
Modal de resultados después de la importación Después de importar contactos, un modal animado muestra tu… importar

Reemplaza tres superficies simultáneas post-importación (toast, tour auto-iniciado, avatares popping) con un modal calmado. Un retraso de 3 segundos permite que los avatares se estabilicen antes de que aparezca el modal. El recorrido solo comienza si el usuario opta explícitamente por participar.

  • importar
  • incorporación
  • modal
  • estadísticas
  • recorrido
  • idioma
Fila de título heroico en un gradiente con un interruptor de ocultar obra El título de héroe está en la fila con el gradiente Saropa y un… héroe

El estado de alternancia se almacena por dispositivo en lugar de reiniciarse al lanzar, por lo que cualquiera que prefiera una vista de lista compacta mantiene ese diseño en cada pantalla sin tener que volver a ocultar la imagen cada vez.

  • héroe
  • gradiente
  • colapsar
  • alternar
  • preference
Las cuadrículas adaptan el número de columnas para tamaños grandes de texto Los diseños de cuadrícula reducen el número de columnas cuando el texto… accesibilidad

El número de columnas se recalcula a partir del factor de escala del texto activo en lugar de un punto de ruptura fijo del dispositivo, por lo que un teléfono y una tableta con la misma configuración de accesibilidad ambos mantienen suficiente ancho por celda para etiquetas completas.

  • accesibilidad
  • escala de texto
  • columnas
  • responso
  • cuadrícula
Arte de pantalla en una tarjeta insertada que se colapsa al desplazarse El arte de pantalla está en una tarjeta redondeada insertada que se colapsa… héroe

La altura de la tarjeta está controlada por el desplazamiento de scroll en lugar de una duración de animación fija, por lo que el colapso sigue exactamente el movimiento del dedo, y la retroalimentación haptica se activa una vez en el punto exacto en que se fija en la barra de encabezado.

  • héroe
  • desplazar
  • colapsar
  • animation
  • tarjeta
  • háptico
Arte de pantalla instantáneo sin pop-in Arte de hero y imágenes de pantalla se cargan desde caché en repeat… performance

Las imágenes decodificadas permanecen en una caché en memoria claveada por la ruta del activo, por lo que volver a una pantalla salta completamente el paso de decodificación en lugar de volver a obtener y volver a renderizar la obra de arte desde el disco.

  • performance
  • caché de imágenes
  • héroe
  • cargando
Soporte de diseño de derecha a izquierda en pantallas de hero Encabezados de masthead de hero usan posicionamiento direccional para que las pantallas quedan… rtl

Los elementos de la cabecera leen la dirección del texto ambiental en lugar de codificar el alineado a la izquierda, por lo que los títulos, controles de retroceso y arte se reflejan correctamente en lugar de simplemente voltear el texto mientras que los iconos permanecen fijados a la izquierda.

  • rtl
  • diseño
  • accesibilidad
  • héroe
  • internationalization
Encabezados de secciones expandibles en seis pantallas Pulse los encabezados de letra para ocultar/mostrar grupos en Organizations,… flujo de trabajo

Al tocar una cabecera de letra ahora se alternan la visibilidad de cada contacto bajo esa letra, brindando una forma de colapsar listas alfabéticas largas en seis pantallas con muchos datos sin tener que desplazarse repetidamente por las entradas.

  • flujo de trabajo
  • interaction
Niveles de longitud de narrativa con distinción visual Tres iconos coloreados (breve/estándar/completo) con estilo… narrativa

Reemplazar las casillas de verificación con iconos coloreados y niveles nombrados da a cada longitud narrativa una identidad visual distinta, haciendo que la opción seleccionada sea reconocible a simple vista en lugar de requerir un signo de verificación para confirmar.

  • narrativa
  • ux
Narrativa Memorial con Título y Puntos de Separación Las narrativas memoriales incluyen título ("In Memory of…") y… narrativa

El texto generado para el memorial comienza con un encabezado formal y se divide en párrafos separados cada vez que cambia el tema (carrera, familia, legado), en lugar de mantenerse como un bloque denso.

  • narrativa
  • memorial
Acceso fácil para agregar detalles de la historia del contacto Perfiles de contacto muestran un enlace útil para agregar más historia… interfaz de usuario

Las contactos con una narrativa delgada o vacía ahora muestran un enlace de llamada a la acción tappable en línea, apuntando directamente al editor para agregar contenido de la historia en lugar de requerir que los usuarios lo encuentren en ajustes.

  • interfaz de usuario
  • narrativa
  • cta
El distintivo de recordatorio ahora es permanente en los contactos fallecidos El distintivo de muerte muestra todo el año en los contactos de memoria, no solo… contactos

El indicador de recordatorio ahora permanece visible en el avatar de un contacto fallecido de forma continua, en lugar de aparecer solo alrededor de la fecha de su fallecimiento cada año.

  • contactos
  • avatar
  • memorial
  • fallecidos
Mapa carga más rápido Los tiles del mapa cargan con fondo degradado suave, haciendo que maps… mapas

El placeholder degradado coincide con las dimensiones de la cuadrícula de baldosas y se desvanece a medida que la imagen real fluye, ocultando la red de viaje de red que los proveedores de mapas requieren antes de que los píxeles lleguen.

  • mapas
  • cargando
  • ux
Códigos QR incrustan Saropa Mark Los códigos QR muestran Saropa brand mark en azul marino en el centro con… marca

El marca navy Saropa se encuentra en el centro del código QR mientras que la redundancia de corrección de errores en el patrón circundante mantiene el código escaneable incluso cuando el logotipo se superpone parte de él.

  • marca
  • códigos QR
  • compartir
Las secciones de ayuda se pliegan y recuerdan el estado Las secciones de ayuda son plegables, codificadas en color y recuerdan… navegación

Cada sección de ayuda mantiene un color distinto y recuerda si estaba abierta o cerrada entre visitas, por lo que una pantalla de ayuda parcialmente leída continúa desde donde se dejó.

  • navegación
  • ayuda
  • personalización
  • collapsible
Pantallas de bienvenida guían a los nuevos usuarios y a los que actualizan Pantallas de bienvenida animadas con transiciones suaves guían… navegación

Flujos de bienvenida separados para instalaciones completamente nuevas versus actualizaciones de versión significan que los usuarios que regresan ven lo que cambió específicamente para ellos, en lugar de una tutorial genérico de primer uso destinado a nuevos usuarios.

  • navegación
  • incorporación
  • animations
  • puesta en marcha
  • actualizar
Bienvenida animada con título de marca en la primera ejecución Letras caen una por una con destello arcoíris al lanzar. animation

Cada letra de la marca anima individualmente con un barrido de color a través de ella, convirtiendo el momento de inicio frío en un toque de marca en lugar de una pantalla de logo estática.

  • animation
  • incorporación
  • visual
Modal de bienvenida para actualización única Los actualizadores de Isar ven una introducción de tranquilidad en primer… incorporación

El modal aparece solo una vez, vinculado a la detección de una migración completada desde el antiguo motor de almacenamiento Isar, por lo que tranquiliza a los actualizadores de que sus datos existentes sobrevivieron sin repetirse en cada lanzamiento posterior.

  • incorporación
  • actualizar
  • ux
Opción de paisaje en teléfonos Los teléfonos pueden girar a vista paisaje (predeterminado desactivado) mientras… diseño

Los teléfonos están predeterminados para modo vertical solo porque la función fue menos exhaustivamente probada en los formatos de los dispositivos móviles, mientras que las tabletas giran libremente por defecto ya que sus pantallas más grandes ya manejan bien ambas orientaciones.

  • diseño
  • rotation
  • accesibilidad
Pantalla de Acerca: Saropa misión y historia del nombre. Dos nuevas secciones en la pantalla de Acerca — Nuestra Misión (pilares de… marca

La sección Our Mission establece los cuatro pilares que impulsan el desarrollo de la aplicación, mientras que la historia de nomenclatura vincula la identidad de la aplicación a la tradición sikh del término Saropa.

  • marca
  • confianza
  • transparencia
Gestión más sencilla de llamadas y correo electrónico en tabletas En tabletas en modo horizontal, las filas de llamadas y correo se organizan en 2… tablet

El diseño de dos columnas está impulsado por la detección de orientación horizontal en lugar del tamaño de la pantalla solo, por lo que una tableta sostenida de forma vertical aún utiliza la lista de una columna.

  • tablet
  • organización
La pestaña Inicio se adapta con secciones plegables Organiza plegando secciones; las tabletas muestran un ancho mayor. pestaña de inicio

El estado de colapso se recuerda por sección, por lo que una sección cerrada en un teléfono permanece cerrada después de cambiar a una tableta o girar el dispositivo.

  • pestaña de inicio
  • navegación
  • collapsible
  • sections
  • tablet
  • responso
Los encabezados de tabletas colocan la identidad y las acciones juntas Identidad a la izquierda con botones de acción a la derecha. tablet

Mover las acciones al borde final las mantiene dentro del alcance del pulgar en una tableta de paisaje amplia, donde un diseño solo de inicio dejaría los botones abandonados en un lado.

  • tablet
  • héroe
  • encabezado
  • diseño
Cada sección de Inicio puede colapsarse Toca cualquier encabezado de sección para ocultarlo o mostrarlo. Emergencia,… organización

El estado de colapso persiste por sección en lugar de reiniciarse al reiniciar la aplicación, por lo que una pestaña de inicio organizada una vez permanece organizada como se dejó.

  • organización
  • usability
El encabezado de contacto se reorganiza en modo paisaje de tabletas En tablets en modo paisaje, la foto y nombre de tu contacto aparecen… tablet

La disposición de paisaje desplaza la identidad y las acciones rápidas en un solo band horizontal en lugar de apilarlas, recuperando el espacio vertical que el diseño de retrato dejaría sin usar.

  • tablet
  • responso
Diseño más limpio de detalles de contacto Las secciones de contacto son más fáciles de navegar con simplificación… transiciones-de-pantalla

Reducir los grupos anidados en la pantalla de detalles significa que se necesitan menos toques para llegar a un campo dado, reduciendo cuánto desplazamiento separa secciones relacionadas.

  • transiciones-de-pantalla
  • detalles-display
  • simplification
Secciones de contacto colapsables con estado Las secciones de contacto se colapsan y recuerdan el estado a través de… detalles-de-contacto

El estado de colapso se guarda por contacto y por sesión, por lo que al reabrir un contacto más tarde se muestran las secciones exactamente como estaban dejadas en lugar de reiniciar a completamente expandidas.

  • detalles-de-contacto
  • organización
  • persistence

Tu libreta de direcciones es una línea de vida. Únete a ella como si fuera uno.

Obtén todas las características de Pantallas y Diseños anteriores a — gratuitas para uso personal, privadas por diseño y listas en el momento en que las instales.