Si tu app requiere acceso, debes proporcionar un flujo de acceso con uno o más de los métodos de acceso sugeridos.
Puedes crear este flujo si adaptas el código de muestra proporcionado. El proceso implica los siguientes pasos:
- Elegir un método principal de acceso (y cualquier método alternativo)
- Ajustar el contenido de las pantallas de acceso
- Cómo personalizar el estilo visual
El código de muestra se proporciona en la app automotriz del reproductor de música universal de Android (UAMP). Este código está diseñado para adaptarse a una variedad de tamaños de pantalla, por lo que no necesitas responder preguntas relacionadas con el modo vertical ni el horizontal.
A medida que adaptes el código de muestra para tu app, los lineamientos que se proporcionan aquí te ayudarán a garantizar que tu experiencia de acceso permanezca optimizada para vehículos. Para averiguar cómo los usuarios accederán a tu experiencia de acceso, visita Acceso, configuración y búsqueda.
Elegir métodos de acceso
El primer paso para adaptar el código de muestra es decidir cuál de los tres métodos de acceso disponibles quieres ofrecer.
| Método de acceso | Cómo funciona |
|---|---|
|
A) Acceso con Google
(muy recomendado) |
Ingresa la Cuenta de Google y la contraseña |
|
B) Acceso por teléfono
(recomendado como opción de respaldo o como opción principal si la app no admite el acceso con Google) |
Ingresa el código PIN de la pantalla del vehículo en el teléfono, o viceversa |
|
C) Acceso estándar (la mejor opción como copia de seguridad) |
Ingresa el nombre de usuario (o correo electrónico) y la contraseña de la app |
El acceso con Google debe presentarse como la opción principal si tu aplicación lo admite, ya que es más fácil para los usuarios. Si tu app no admite el acceso con Google, el acceso con teléfono es la siguiente mejor opción como opción principal.
El flujo de acceso en el código de muestra incluye pantallas para los tres métodos. Una vez que decidas las opciones que admites (tanto la principal como las alternativas que quieras admitir), puedes inhabilitar las opciones restantes en el código de muestra y enfocarte en personalizar las pantallas restantes.
A) Acceso con Google
Si tu aplicación admite el acceso con Google y el acceso con Google está disponible en el sistema, es mejor hacer que este método sea la opción principal en tu flujo de acceso. Es fácil para los usuarios porque solo necesitan confirmar su Cuenta de Google existente.
Si ofreces acceso telefónico o estándar, deben presentarse como opciones de copia de seguridad disponibles en los vínculos de texto que aparecen en la parte inferior de la pantalla de destino.
Flujo de Acceso con Google
Con el Acceso con Google, la página de destino es la única pantalla que debes diseñar, a menos que también ofrezcas opciones de copia de seguridad. El Acceso con teléfono y el Acceso estándar resumen las pantallas y los flujos de esas opciones.
B) Acceso por teléfono
Si tu app no admite el acceso con Google, te recomendamos que ofrezcas el acceso con el teléfono como opción principal en el flujo de acceso. (El acceso con teléfono también se puede ofrecer como opción alternativa para el acceso con Google). Con el acceso con teléfono, los usuarios no necesitan recordar un nombre de usuario ni una contraseña. En su lugar, ingresan un PIN que se les proporciona.
El acceso por teléfono se puede realizar de dos maneras:
- Los usuarios ven un PIN en la pantalla del vehículo y lo ingresan en sus teléfonos
- Los usuarios buscan un PIN en sus teléfonos y lo ingresan en la pantalla del vehículo
Si también se ofrece el método estándar de nombre de usuario y contraseña, debe presentarse como una opción de copia de seguridad disponible a través de un vínculo de texto en la parte inferior de la pantalla de destino.
Flujo de acceso desde el teléfono
Con el acceso del teléfono, puedes elegir entre dos versiones de la página de destino: una que muestra un PIN para ingresar en el teléfono y otra que permite a los usuarios ingresar un PIN proporcionado en el teléfono.
La pantalla de la página de destino es la única que necesita diseñar, a menos que también ofrezca el Acceso estándar como una opción de seguridad.
C) Acceso estándar
El acceso estándar para una aplicación requiere que el usuario ingrese un nombre de usuario (o correo electrónico) en la página de destino y luego ingrese una contraseña en la página siguiente.
El acceso estándar se puede ofrecer como una opción de acceso a Google o de acceso con teléfono. O bien, si no se admite ninguna de las otras dos opciones, puede ser la opción de acceso principal. Sin embargo, no se recomienda el acceso estándar como opción principal, ya que implica varios pasos y se recuerdan los nombres de usuario y las contraseñas.
Como es posible que los usuarios no siempre recuerden sus nombres de usuario y contraseñas, es importante ofrecer opciones para recuperarlos o restablecerlos. Estas opciones deben ofrecerse mediante vínculos de texto en la parte inferior de las pantallas de entrada, de modo que no compitan por la atención con las acciones principales del nombre de usuario y la entrada de contraseña.
Flujo de acceso estándar
El flujo de acceso estándar es una secuencia de 2 pantallas (entrada de nombre de usuario y entrada de contraseña), con viajes adicionales opcionales a otras 2 pantallas. Necesitará versiones de las 4 pantallas.
Cómo ajustar el contenido de las pantallas
Una vez que hayas determinado los métodos de acceso que admitirá tu app, sabrás qué pantallas estarán en tu flujo de acceso. Según lo que elijas admitir, puedes tener entre 1 y 6 pantallas para las que necesitas determinar el contenido (y el estilo, como se explica en Cómo personalizar el estilo).
Si eliges acceder con Google o con el teléfono sin opciones de seguridad, tendrás 1 pantalla para acceder. Por otro lado, si eliges el Acceso con Google con ambas opciones de seguridad, tendrás 6 pantallas (1 para el Acceso con Google, 1 para el Acceso con teléfono y 4 para el Acceso estándar).
Los ejemplos de estas pantallas se muestran en las secciones Acceso con Google, Acceso con teléfono y Acceso estándar. Si trabajas a partir del código de muestra, puedes modificar las versiones de estas pantallas creadas en el código. Si no usas el código de muestra, igualmente debes usar estos ejemplos como modelo.
Deberá realizar algunos ajustes en el contenido de estas pantallas, como los siguientes:
- Reemplaza el logotipo de la app Aural ficticia por el de tu app
- Modifica el texto y los vínculos para hacer referencia a tu aplicación y a tu contenido relacionado.
- Ajustar la lógica de visualización del PIN
El reemplazo del logotipo y la lógica de visualización del PIN se analizan con más detalle a continuación.
Reemplazar el logotipo de la app
Después de quitar las pantallas que no necesitas del código de muestra, asegúrate de que las pantallas restantes muestren el logotipo de tu app en lugar del de la app Aural ficticia. Este reemplazo puede afectar otros aspectos del diseño de la página, como se explica a continuación.
Reemplazar el logotipo puede generar otros ajustes, como personalizar los colores de otros elementos de la página o ajustar el espacio alrededor del logotipo.
Cómo personalizar colores para que combinen con el logotipo
Para asegurarte de que el logotipo de tu app se adapte bien a los elementos de las páginas circundantes, puedes personalizar el código de acceso para usar el color de los elementos destacados de tu app. La personalización del estilo se analiza en el siguiente paso, Personalizar estilo.
Ajustar el espacio libre del logotipo
Después de reemplazar el logotipo de Aural por el de tu app, que se ajustará al mismo tamaño que el logotipo de Aural, revisa los espacios alrededor del logotipo. Si la cantidad de espacio libre no cumple con los lineamientos de la marca, puedes agregar espacio alrededor de los bordes del logotipo en el archivo correspondiente.
Otro enfoque sería ajustar el espaciado en la pantalla. Sin embargo, con este enfoque,deberás ajustar el espaciado alrededor del logotipo de forma individual para cada diseño. Por esta razón, agregar espacio dentro del archivo del logotipo es la manera más fácil de aumentar el espacio libre alrededor del logotipo.
Ajustar la lógica de visualización del PIN
El flujo de acceso de muestra genera códigos PIN de forma aleatoria con una función RAND simple. Para implementar un método de generación de PIN basado en una lógica empresarial más sólida, debes modificar el código correspondiente en PinCodeSignInFragment.kt, que forma parte de la app universal de Android Automotive Player (UAMP).
Personalizar estilo
Después de ajustar el contenido de tus pantallas de acceso, puedes aplicarle un estilo global y adecuado para la marca en los aspectos de la IU que afectan a varias pantallas.
Es posible que desee personalizar algunos o todos los siguientes elementos para reflejar el estilo de su marca:
- Estilo del campo de entrada: relleno, contorno o subrayado
- Estilo del botón: redondeado o rectangular
- Colores: acento, relleno de texto y texto, relleno y trazo del formulario, error de formulario
- Tipografía: Fuente, tamaño del texto
A continuación, se muestran algunos ejemplos de algunas de estas opciones de personalización. Ten en cuenta que el estilo personalizado debe mantener el contraste, los tamaños mínimos de los objetivos táctiles y de texto y otros requisitos que se describen en los Lineamientos para pantallas personalizadas.
Campos de entrada y botones
El flujo de acceso de muestra utiliza los campos de entrada delineados y los botones redondeados como sus estilos predeterminados. Cambia estos estilos predeterminados si los diferentes (por ejemplo, los botones rectangulares en lugar de los redondeados) expresarían mejor tu marca.
Colores
Personalizar los colores de los acentos y estados de error que se usan en los formularios y los botones es una forma útil de expresar tu marca en todo el flujo de acceso. Personalizar estos colores también es importante para garantizar que los campos de entrada, los botones y los vínculos se vean bien en la misma página con el logotipo de tu app, en lugar de chocar.
Asegúrate de que los colores que especifiques mantengan una relación de contraste de al menos 4.5:1 entre los elementos de página adyacentes. Para obtener orientación adicional sobre el color y detalles sobre la paleta de colores que se usa en el SO Android Automotive, consulta Fundamentos visuales: Color.
Tipografía
Si bien la tipografía en el flujo de acceso de muestra se puede personalizar, ten cuidado con los cambios que podrían afectar la legibilidad. Consulta los fundamentos visuales: tipografía para obtener información sobre fuentes, tamaños mínimos de tipos y otras consideraciones con respecto a la legibilidad del texto en las pantallas de los automóviles.
Lineamientos de acceso
Los lineamientos que se indican en esta sección se relacionan con el funcionamiento del acceso para una usabilidad óptima en el SO Android Automotive. El flujo de acceso de muestra proporcionado en la app del Universal Android Music Player (UAMP) cumple con estos lineamientos. No proporciona una forma de crear una cuenta, ya que eso requeriría lógica específica de la app.
Si seguiste el proceso de personalización que se describe en esta sección y no cambiaste de otra manera el funcionamiento del código, tu flujo de acceso debería estar en buenas condiciones con respecto a los lineamientos que se detallan a continuación. Sin embargo, asegúrese de que el estilo personalizado cumpla con los requisitos generales que se especifican en los Lineamientos para pantallas personalizadas.
Si hiciste modificaciones más sustanciales en las pantallas o el código de acceso, más allá de lo que se describe en esta sección, verifica tu flujo de acceso con respecto a los Lineamientos generales para pantallas personalizadas y a los lineamientos específicos para el acceso que aparecen a continuación.
| Nivel de requisito | Lineamientos |
|---|---|
| DEBES |
Los desarrolladores de apps deben hacer lo siguiente:
|
| MAYO |
Los desarrolladores de apps pueden hacer lo siguiente:
|
Motivo:
Experiencia de medios coherente. Las pantallas de acceso diseñadas para una app multimedia deben proporcionar una experiencia que sea ampliamente coherente con las pantallas de acceso de otras apps multimedia.
Apariencia y estilo coherentes. Las pantallas de acceso deben admitir los principios de diseño básicos y las bases visuales para el SO Android Automotive.