Esta guía te ayudará a comenzar con el diseño para Android mediante la traducción de diseños existentes para dispositivos móviles iOS a Android con patrones fundamentales de UX de Android, junto con Material Design.
Se describen para la paridad de diseño y se ordenan para la eficiencia. Si sigues un sistema de diseño base compartido, puedes traducir los diseños con tu propio sistema en lugar de Material 3. Tanto Android como iOS se adhieren a la idea de que el contenido es lo primero.
Después de eso, el desarrollo de la marca puede realizarse a través del color, el tipo y la forma. Esto no solo permite la legibilidad del contenido, sino que también facilita la creación de cohesión.
Comienza con tus diseños para iOS
Antes de comenzar, haz una copia de tu app para iOS. Las apps para iOS se dividen en tres áreas: barras, vistas y controles. Puedes usar esta estructura para trabajar en la traducción, y el estilo al final.
Consulta las partes de una app para Android.
1. Borra la IU del sistema iOS
Borra la barra de estado y el indicador de inicio. Es más sencillo hacerlo ahora.
2. Cambia el tamaño de los fotogramas
Puedes usar el tamaño compacto de Android, 412 dp. Sin embargo, considera un rango de dispositivos incluso dentro de un tamaño de clase de ventana. Por ejemplo, prueba con 360 dp para admitir pantallas más pequeñas y adáptate a todos los tamaños de clase de ventana.
3. Reemplaza con las barras del sistema Android
La IU del sistema Android puede variar según el dispositivo y la configuración del usuario, pero mostrar una IU del sistema estándar puede ayudar a dar más contexto a tus diseños. Coloca la barra de notificaciones en la parte superior y una barra de navegación por gestos o de tres botones en la parte inferior.
Para obtener más información, consulta Barras del sistema Android.
4. Según tu navegación
Cambia la barra de pestañas (navegación inferior) por la barra de navegación.
Vuelve a consultar tu mapa de flujo. ¿Tu app para iOS usa un menú Más? (Las prácticas recomendadas de HIG sugieren no usar este patrón). Limítate a cinco o menos elementos, mantén la barra de navegación inferior en la navegación principal, evalúa si se puede mover algo secundario, como el perfil o la configuración, a la barra superior de la app, o tal vez tengas una acción principal que se pueda traducir a un FAB.
Tu navegación principal siempre debe estar presente en las vistas superiores (el nivel superior de una sección en tu mapa de flujo). Las vistas secundarias (cualquier elemento debajo de la vista superior) pueden incluir la navegación principal si están más arriba en la jerarquía de navegación y no son modales.
Actualiza la barra de navegación inferior con los íconos y las etiquetas adecuados. Ambas plataformas evitan el movimiento lateral entre los destinos de navegación.
5. Barras de navegación a barras superiores de la app
Desglosa estas secciones por sección: primero las vistas superiores y, luego, las vistas secundarias. La barra de la app se compone del lado izquierdo: navegación y título, y del lado derecho: elementos de acción.
Si tu app usa un menú de panel lateral de navegación en lugar de una barra de navegación inferior, se mostrará un ícono de panel lateral en todas las vistas superiores.
Si tu app no tiene un riel o un panel lateral, las vistas superiores no muestran un ícono de navegación principal.
El título está alineado a la izquierda de forma predeterminada en la barra de la app para Android.
Las vistas secundarias tienen una flecha hacia arriba en el lugar del ícono de navegación. No se debe confundir con el botón Atrás. La flecha hacia arriba mueve al usuario un nivel hacia arriba a través de la jerarquía de navegación de una app en un flujo de usuarios, mientras que el botón Atrás o el deslizamiento desde el borde se encuentran en la navegación del sistema, lo que mueve al usuario hacia atrás e incluso lo saca de la app.
¿Qué sucede con las vistas modales? Para los modales de pantalla completa (como los reproductores de video y las imágenes), esto será similar a la barra de la app de la vista para niños, excepto que el ícono de navegación debe cambiar a cerrar, lo que descarta el modal.
6. Un poco más de modalidad
Comienza con vistas modales grandes, que se usan mejor para enfocar la atención del usuario en una tarea. En iOS, a menudo se ven como hojas, en las que el usuario puede deslizar el dedo hacia abajo.
Termina de cambiar las barras de la app. Para los modales de hojas de iOS, cambia la parte superior de la hoja y el vistazo de fondo por una barra de la app de diálogo de pantalla completa.
Bonificación: Observa si alguna de tus hojas modales de iOS se puede traducir a hojas inferiores.
Hojas de acción y actividad a hojas inferiores (las hojas de uso compartido también se pueden traducir ahora).
Para las alertas, usa diálogos del sistema. Si los usas para obtener información importante que necesitas que el usuario reconozca de alguna manera, cámbialos por diálogos del sistema. Recuerda cambiar también las entradas y los selectores en este punto.
7. Contenido del mismo nivel
Pestañas, paginadores de vistas o pestañas deslizantes. Si usas controles segmentados en iOS, estos se traducen a pestañas en Android. Ambos actúan como una forma de filtrar entre vistas de información similar, pero no igual. Las pestañas de Android suelen estar adjuntas a la barra de la app y tienen el beneficio adicional de poder deslizar el dedo entre el contenido.
8. Contenido y controles
Según cómo hayas configurado las restricciones o el comportamiento de cambio de tamaño, es posible que la mayor parte de tu contenido ya haya cambiado de tamaño. Pero tómate este tiempo para revisar y establecer tus márgenes. 16 dp es un buen estándar en pantallas pequeñas.
La cuadrícula de línea de base se basa en una cuadrícula de 8 dp para los componentes y de 4 dp para el tipo y los íconos. Una cuadrícula de 8 pt funciona bien en iOS, por lo que es posible que la consideres como punto de partida para ambas plataformas.
Controles. Cambia esos botones de activación a botones de Android. Usa casillas de verificación y botones de selección de Android. Android incluye todos estos elementos.
Si tienes formularios, cambia los campos de texto de iOS por los de Android. Material incluye opciones como contorno o relleno, así que elige la que mejor se adapte a tu marca.
Las listas de Material tienen algunas diferencias en comparación con las celdas de tabla de iOS:
- Las líneas divisorias se usan con moderación.
- Los indicadores no se usan en las listas para ayudar a mantener al mínimo el ruido visual.
- Las dimensiones se adhieren a la cuadrícula de 8 dp.
9. Estilo
Color: El color de la IU consta de colores de acento, semánticos y de superficie ensamblados en un esquema de color. Estos colores se aplican a la IU según sus roles.
Tipo: Si usas una fuente del sistema, reemplaza San Francisco. Roboto es la fuente predeterminada del sistema para Android. Dicho esto, te recomendamos que expreses el estilo único de tu marca con temas y fuentes de Google descargables.
Íconos: Lo mismo. Si usas símbolos SF, verifica que todos se hayan convertido a íconos o símbolos de Material. Elige la variación adecuada para tu marca. ¿Sabías que puedes usar íconos de material en cualquier plataforma?
Movimiento: Android y iOS tienen un diseño de movimiento distinto, que se debe respetar para cada plataforma. El movimiento de Material es informativo, enfocado y expresado. El efecto Ripple es un resaltado distintivo que se usa en los componentes para proporcionar comentarios táctiles. El sistema de movimiento es un conjunto de patrones de transición para aprovechar la transformación de contenedores, el eje compartido, el fundido y las animaciones de atenuación. Considera si los elementos de tu diseño tienen contenedores persistentes, la relación entre los elementos y cómo deben entrar o salir.
10. Ordenar
Si traduces un prototipo, este es un buen punto para volver a conectar las cosas. Vuelve a consultar tu navegación principal. Luego, tus barras de la app, recordando la diferencia entre arriba y atrás, y asegurándote de seleccionar transiciones de página que sean adecuadas para Android (mencionadas en el paso 9).
Deberías tener listo un prototipo en pleno funcionamiento y, como lo cambiaste de tamaño, está listo para la entrega.
Guía de estilo y componentes
Si tienes un sistema de diseño o una guía de estilo existentes, es posible que tengas tus propios estilos fundamentales (color, tipo, íconos, forma) que se puedan usar junto con Material Design, tal como los usarías junto con la guía de iOS. Con los Temas de Material, puedes personalizar los componentes de Material con el estilo único de tu marca con color, tipo y forma.
Tener lineamientos específicos de la plataforma no es poco común entre los productos multiplataforma y puede hacer que tu propio sistema de diseño esté más centrado en el usuario.
Por último, si trabajas sin uno, ten en cuenta que no todas las apps o productos necesitan un sistema de diseño personalizado completo. Considera crear una guía de estilo de una página. Una guía de estilo es un documento que describe las especificaciones fundamentales de los diseños. Los lineamientos de la marca suelen contener una guía de estilo.
Se puede copiar para Android y usar como fuente para actualizar estilos (o símbolos, componentes o una biblioteca).