Esta página explica cómo crear un flujo para el Asistente de configuración (SUW), crear una narrativa e incluir pasos obligatorios y opcionales.
Puede personalizar las siguientes pantallas:
| Personalización limitada: modal de contenido | Personalización requerida: plantillas proporcionadas por Google |
|---|---|
| Condiciones del servicio de Google Inicio de sesión de Google Google Géminis Google Play | Pantalla de bienvenida Selección de idioma Conectividad y configuración de Wi-Fi Creación de perfil (nombre del perfil) Pantalla de resumen Configuración del dispositivo Bluetooth Protección de perfil (configuración de bloqueo de perfil) Pantallas de carga |
Personalizar el modelo de contenido
El componente modal de contenido, o componente de interfaz de usuario AppStyledView , alberga pantallas exclusivas de Google, como el módulo de inicio de sesión y el consentimiento de los servicios de Google. Para que el usuario comprenda que está interactuando con Google y no con el fabricante de automóviles, el componente modal solo admite una personalización limitada.
Para lograr una integración cohesiva, puedes personalizar lo siguiente:
Barra de navegación: Puedes colocar la barra de navegación en la parte superior del modal o a un lado. Además, puedes personalizar el icono de navegación (imagen, tamaño, color, ubicación), el fondo (imagen, opacidad, color), el ancho o la altura (según la ubicación).
Configuración del modal: El ancho del área de contenido debe ser superior a 1224 dp para que las pantallas de Google se muestren en horizontal. Además, puedes personalizar el ancho, la altura, la ubicación en la pantalla, las esquinas redondeadas y el estilo del borde del modal. Se recomienda una superposición a pantalla completa cuando no se pueden garantizar márgenes suficientes alrededor del modal.
Fondo modal: Imagen o color, transparencia.
Ejemplos de personalizaciones modales de contenido
Puedes usar una plantilla de Google como parte del proceso de configuración. Si decides usar esta opción, debes personalizar estas pantallas para evitar una mezcla de estilos de interfaz de usuario.
A continuación se muestran ejemplos de personalizaciones modales de contenido en la Figura 3 y la Figura 4.
Personaliza las pantallas proporcionadas por Google
Puedes usar una plantilla de Google como parte del proceso de configuración. Si decides usar esta opción, debes personalizar estas pantallas para evitar una mezcla de estilos de interfaz de usuario.
Vistas inmersivas versus no inmersivas
Tiene dos opciones para mostrar SuW:
Vista inmersiva: Esta vista oculta funciones no esenciales, como la barra de estado y la interfaz del sistema. Use una vista inmersiva para minimizar las distracciones.
Vista no inmersiva: Esta vista permite a los usuarios ver funciones del sistema, como la barra de estado. Use esta vista solo cuando sea fundamental mostrar la interfaz del sistema. Si elige usar esta vista, evite acciones que puedan interrumpir la configuración.
Personalizar el diseño horizontal
Los elementos personalizables en modo horizontal son los siguientes:
Diseño y fondo
- Barra de navegación: La barra de navegación contiene el botón Atrás. Puedes personalizar el diseño y el fondo de la barra, así como el icono de navegación (imagen, tamaño, color y ubicación), el fondo (imagen, opacidad, color) y el ancho.
- Barra de acción: La barra de acción es el contenedor anclado en la parte inferior de la página que contiene los botones de llamada a la acción, que son transparentes por defecto. Puedes personalizar la altura y el relleno de la barra, así como la imagen, la opacidad y el color del fondo.
- Diseño de página: Relación de columnas y márgenes de página.
- Fondo de la página: Color o imagen de fondo.
Componentes
- Imagen de héroe: imagen, tamaño y ubicación.
- Menú desplegable: Fuente (familia, tamaño, color), íconos (imagen, tamaño, color) y línea divisoria.
- Botones: fuente (familia, tamaño, color), fondo (imagen, opacidad, color), tamaño del botón (ancho, alto), ubicación, rellenos, esquinas redondeadas (estilo para acciones primarias y secundarias, así como estados de botones diferenciados).
- Encabezado de página: fuente (familia, tamaño y color), ubicación del título y subtítulo, cadenas e ícono de la página (si incluir el ícono y la imagen del ícono, el tamaño y el color).
- Lista: Fuente (familia, tamaño y color), iconos (imagen, tamaño y color; los iconos de Google no son personalizables), ubicación, rellenos, altura de los elementos de la lista y línea divisoria. Para cambiar las cadenas, debes consultar con Google.
Pantallas de carga
- Animación: (Indeterminada) o una imagen, tamaño, ubicación.
- Cadenas: fuente (familia, tamaño y color), ubicación y cadenas.
Ejemplo de diseño de paisaje personalizado
Una forma posible de personalizar una pantalla de bienvenida o resumen es utilizar una plantilla proporcionada por Google.
Personalizar el modo retrato
A continuación se muestran los elementos personalizables en modo retrato.
Diseño y fondo
- Barra de navegación: La barra de navegación contiene el botón Atrás. Puedes personalizar el diseño y el fondo de la barra, así como el icono de navegación (imagen, tamaño, color y ubicación), el fondo (imagen, opacidad, color) y el ancho.
- Barra de acción: La barra de acción es el contenedor anclado en la parte inferior de la página que contiene los botones de llamada a la acción, que son transparentes por defecto. Puedes personalizar la altura y el relleno de la barra, así como la imagen, la opacidad y el color del fondo.
- Diseño de página: Márgenes de página.
- Página BG: Color o imagen de fondo.
Componentes
- Imagen de héroe: imagen, tamaño, ubicación.
- Menú desplegable: Fuente (familia, tamaño, color), íconos (imagen, tamaño, color), línea divisoria.
- Botones: Fuente (familia, tamaño, color), fondo (imagen, opacidad, color), tamaño del botón (ancho, alto), ubicación, rellenos, esquinas redondeadas. Debe diferenciar el estilo para las acciones principales y secundarias, y los diferentes estados de los botones.
- Encabezado de página: fuente (familia, tamaño, color), ubicación del título y subtítulo, cadenas, ícono de la página (si incluir el ícono y la imagen del ícono, tamaño y color).
- Lista: Fuente (familia, tamaño y color), iconos (imagen, tamaño y color; los iconos de Google no son personalizables), ubicación, rellenos, altura de los elementos de la lista y línea divisoria. Para cambiar las cadenas, debes consultar con Google.
Pantallas de carga
- Animación: Animación (indeterminada) o una imagen, tamaño, ubicación.
- Cadenas: Fuente (familia, tamaño, color), ubicación, cadenas.
Ejemplo de diseño de retrato personalizado