📧 🧙🏼 ↖️ 32 diferencias en el diseño de una aplicación móvil para iOS y Android 💅🏼 😘 ⚰️

El diseñador de hierro en Redmadrobot Design Lab Arthur Abrarov comparte observaciones.

Adaptar el diseño a una plataforma diferente es una parte integral del trabajo de un diseñador de aplicaciones móviles. El objetivo de este trabajo es adaptar orgánicamente el diseño a los patrones de interacción del usuario. Además, una adaptación bien desarrollada simplifica el desarrollo mediante el uso de componentes de plataforma nativos.

Para adaptar el diseño correctamente, debe seguir las pautas de la plataforma: Pautas de interfaz humana (HIG) para iOS y Diseño de materiales para Android. Y comuníquese con los desarrolladores, idealmente conéctelos al diseño lo antes posible para que puedan establecer limitaciones técnicas de inmediato.

Pero, ¿qué es exactamente el diseño para iOS diferente del diseño para Android? En este artículo analizaré 32 diferencias de diseño específicas para iOS y Android. Se dividen en cuatro grupos:

Diferencias básicas
Diferencias en navegación y patrones (UX).
Diferencias en componentes (UI).
Otras diferencias

Las funciones de IOS estarán a la izquierda y las de Android a la derecha o arriba / abajo.

Diferencias básicas

Pautas de interfaz humana versus diseño de material

Casi todas las diferencias en este artículo se toman del análisis de estas pautas. Su esencia a nivel ideológico es la siguiente. HIG se trata de un diseño plano, liviano y amigable, proviene de un rechazo gradual del esceptomorfismo .

El material tiene varios principios fundamentales: el material como metáfora; audaz, gráfico, consciente; animación significativa; Base flexible y multiplataforma. Si no está familiarizado con las pautas, es mejor leerlas antes de leer el artículo.

imagen

2. Unidades: pt vs dp

El diseño de la aplicación iOS se crea en pt y la aplicación de Android en dp . Por lo general, creamos un diseño en 1x (o mdpi) y lo subimos a Zeplin. Zeplin muestra el diseño de pt para iOS y genera íconos e ilustraciones en 2x y 3x. En Android, muestra el diseño en dp y genera gráficos en hdpi, xhpdi, xxhdpi y xxxhdpi.

imagen

3. Tamaño de pantalla: 320 pt x 568 pt vs 360 dp x 640 dp

Prefiero diseñar la aplicación iOS para el tamaño más pequeño: iPhone 5 con un tamaño de pantalla de 320pt x 568pt. Hago esto para evitar la visualización incorrecta del contenido en pantallas pequeñas. Algunas personas prefieren diseñar para iPhone 8.

En Android, hay un tamaño de pantalla generalmente aceptado de 360dp x 640dp.

Cuando diseño para iOS, a veces creo un diseño para iPhone X (375pt x 812 pt). Esto es necesario para que el desarrollador entienda cómo sangrar correctamente la pantalla de este tamaño. Incluso cuando diseñe para iPhone X, debe recordar que Safe es un área fuera de la cual no debe colocar contenido.

imagen

4. Fuente del sistema: San Francisco vs Roboto

Si no sabe qué fuente usar en la aplicación, tome la del sistema. En el caso de iOS, es San Francisco . Y Android es Roboto .

5. Barra de navegación de Android

A diferencia de iOS, Android tiene una herramienta integrada de navegación hacia atrás. Esta es la barra de navegación de Android .

imagen

Está físicamente integrado en el teléfono inteligente o es parte de la interfaz. Usando la flecha, el usuario retrocede un paso en secuencia cronológica ( navegación cronológica inversa ). La navegación se lleva a cabo tanto dentro de la aplicación como entre ellos.

Al comienzo de mi carrera como diseñador de aplicaciones móviles, durante mucho tiempo he atormentado a los desarrolladores de Android con la pregunta: ¿por qué necesitamos dos botones atrás? Uno está en la parte inferior de la barra de navegación, el segundo aparece en la barra de aplicaciones superior cuando va a la página secundaria.

La respuesta es esta. Hay dos tipos de navegación hacia atrás: navegación cronológica inversa (lo hacemos usando la flecha hacia atrás en la barra de navegación, llámelo Atrás).

imagen

Y navegación hacia arriba (lo hacemos con la flecha superior, llamarlo hacia arriba).

imagen

Imagine que tenemos una ruta ABC, donde A es la página principal y B y C son páginas secundarias. Imagine que el usuario pasó directamente de A a C. Si presiona el botón Atrás, volverá a A. Pero si presiona Arriba, primero irá a B, y para la segunda presión irá a A.

Esto es difícil de implementar y confuso para el usuario. , ahora estos dos botones de retroceso realizan la misma acción de retroceso, como en iOS. Es decir, si viniste de A a C, entonces de C volveremos a A.

6. Importancia de la elevación del material.

En iOS, básicamente no hay sombras. Como excepción, se pueden encontrar sombras en la pantalla principal de App Store y en Health. Pero en general, HIG no prescribe el uso de sombras.

En Material, las sombras juegan un papel importante. Añaden a la interfaz un tercer espacio (eje Z), debido a que cada componente tiene su propio lugar estricto en este eje (de 0 dp a 24 dp). Además, este eje Z no existe simplemente a nivel ideológico: los desarrolladores tienen un parámetro de elevación en el que establecen la posición del componente a lo largo de este eje.

imagen

La navegación y el cambio de estados se acompaña de un cambio en la elevación de los componentes. Por lo tanto, al diseñar para Android, debemos abordar conscientemente la creación de sombras.

7. Diferencias en nomenclatura

Hay muchas diferencias en los nombres. Propongo considerar estos cinco.

a. Barra de pestañas vs Barra de navegación inferior

Esta es una barra para la navegación de nivel superior de la aplicación. Ubicado estáticamente en la parte inferior de la pantalla en ambas plataformas. Además de nombrar, difieren en el comportamiento. Lo desmontaremos un poco más tarde.

si. Barra de navegación vs barra de aplicaciones superior

Esta barra en ambas plataformas realiza aproximadamente las mismas tareas: informa al usuario de su ubicación actual en la aplicación, permite volver a la pantalla anterior y ofrece una o más acciones contextuales. Lea más sobre las diferencias a continuación en el artículo.

imagen

C. Controles segmentados vs pestañas

Además de los nombres, Tabs Android tiene varias características: puede moverse entre pestañas con solo deslizar el dedo, y Material le permite usarlas para la navegación de nivel superior.

re. Alertas vs Diálogos

Curiosamente, solo se describe una herramienta de alerta de usuario en iOS: Alertas . Hay tres en Android : Snackbars, Banners y Diálogos.

Snackbar está diseñado para mensajes de baja prioridad y no requiere ninguna acción. Los cuadros de diálogo bloquean la interacción con la interfaz y requieren una acción. Los banners están entre ellos: no bloquea la interacción, pero requiere una acción.

mi. Touch ID vs Android Fingerprint

Este es solo un ejemplo de las diferentes tecnologías de nombres que se utilizan en estas plataformas. Deben ser conocidos, porque además de los nombres, difieren en muchas características técnicas de su implementación. Comprender las diferencias en los nombres es el primer paso para comprender las diferencias en la tecnología.

Diferencias en navegación y patrones (UX)

8. Métodos de navegación de nivel superior.

Comencemos desde arriba. iOS solo recomienda una forma de navegación de nivel superior: a través de la barra de pestañas . Android tiene tres opciones a cambio: Navegación del cajón , inferior barra de navegación, y Tabs .

imagen

Si el número de páginas de nivel superior es superior a cinco, use el Cajón de navegación. Si es menos: barra de navegación inferior. Las pestañas rara vez se usan para esta navegación, pero el método está disponible para nosotros. Sin embargo, Material recomienda no combinar pestañas y la barra de navegación inferior, ya que interactuar con estos componentes afecta el contenido de la página y el usuario puede confundirse.

9. Diferencias en el comportamiento de la barra de pestañas y la barra de navegación inferior

Esta diferencia ofrece material.

Si cambia de la página principal a la de iOS en iOS, luego, a través de la barra de pestañas, cambie a otra página principal, luego, cuando regrese a la primera página principal, todavía estará en la página secundaria.

imagen

En Android, todo es más simple: al cambiar a través de la barra de navegación inferior, siempre cambia entre las páginas principales. Si antes estaba en una subsidiaria, se restablecerá.

imagen

Nuestros desarrolladores de Android confían en que este comportamiento del sistema es incorrecto. En el caso de cambiar a la navegación inferior, vale la pena mantener abiertas las páginas secundarias, como en iOS.

10. Comportamiento especial de las pestañas de Android

Las pestañas en Android, a diferencia de los Controles segmentados de iOS, tienen esta propiedad: puede navegar a través de las pestañas deslizando el dedo hacia la izquierda y hacia la derecha.

Esto se debe a que las páginas de pestañas están a la misma altura (elevación).

imagen

Esto es importante saber porque cuando el uso de pestañas en Android, debemos no añadir elementos con gestos similares a las del diseño. Por ejemplo, un carrusel de imágenes o interacción con tarjetas mediante deslizamientos.

En general, estos dos componentes no se reemplazan por completo. El control segmentado es un control que controla el contenido de una página. Y Tabs es una herramienta de navegación.

Por lo tanto, vale la pena consultar con los desarrolladores antes de considerarlos como componentes equivalentes durante la adaptación. A veces es más correcto reemplazar las pestañas de Android con el control de página. Todo depende del contexto.

11. Diferencias en la apariencia de la pantalla secundaria

En iOS, la apariencia de la pantalla secundaria (sin contar modalos) ocurre de una sola manera: la página secundaria aparece a la derecha en la parte superior de la placa base con la diapositiva en efecto. El retorno a la pantalla madre ocurre con el efecto de deslizarse hacia afuera.

imagen

El material recomienda mostrar al usuario una relación jerárquica entre las páginas padre e hijo utilizando animaciones significativas.

imagen

El componente, al interactuar con el que el usuario va a la página secundaria, expande y cubre la página madre. Entonces, el usuario comprende de dónde vino y dónde, por qué sucedió y dónde volverá al hacer clic en el botón "Atrás".

La transición se produce utilizando la aceleración estándar .

12. Cajón de navegación de patrón de llamada especial

Al diseñar una aplicación con Navigation Drawer, es importante recordar que este componente elimina el gesto de deslizar el borde de izquierda a derecha. Por lo tanto, no debe agregar otra lógica a este gesto.

imagen

En iOS, este gesto tiene un patrón establecido de transición de un niño a la página madre. Este patrón ha migrado gradualmente a muchas aplicaciones de Android.

13. Comportamiento del contenido al desplazarse

En HIG, el contenido en iOS se comporta así cuando se desplaza : la barra de navegación disminuye en ancho, la barra de herramientas desaparece. Pero, en general, los desarrolladores de iOS pueden personalizar cualquier comportamiento de contenido y barras al desplazarse.

imagen

El material ofrece más comportamientos de desplazamiento. Por ejemplo, la barra de navegación inferior, la búsqueda y la barra de aplicaciones inferior pueden desaparecer al desplazarse.

La barra de aplicaciones superior puede desaparecer o elevarse por encima del contenido principal.

imagen

Comportamiento de búsqueda misceláneo

Curiosamente, HIG refiere la búsqueda a barras y la llama Barra de búsqueda. En Material, encontramos una búsqueda en la sección de Navegación, no en Componentes. Es decir, para Material, la búsqueda es otra forma de navegar.

Tanto en iOS como en Android, la búsqueda puede estar estáticamente presente en la pantalla y, como regla, clavarse en la barra de navegación o en la barra de aplicaciones superior.

En ambas plataformas, la búsqueda puede ser en forma de icono, solo en iOS el icono se expande en un componente separado de la barra de búsqueda, y en Android, la búsqueda se abre dentro de la barra de aplicaciones superior.

imagen

Una característica de la búsqueda en iOS es que puede "ocultarlo" debajo de la barra de navegación y llamarlo con un gesto de deslizar hacia abajo. El mismo gesto es típico para actualizar (tirar para actualizar), por lo que no debe llamar a buscar y actualizar en esta acción.

Diferencias de componentes (IU)

15. Qué componentes no están en iOS

En iOS, no hay muchos componentes nativos de Android. Vamos a repasarlos.

a. Cajón de navegación

iOS básicamente no reconoce el menú de hamburguesas. Como se dijo anteriormente, en iOS, la navegación de nivel superior solo se encuentra en la barra de pestañas.

imagen

si. Fondo

Backdrop es el componente más sorprendente para mí en Material. Al momento de escribir, Android solo planea implementarlo como nativo. En general, cuando se estudian los componentes del material, vale la pena verificar si ya están disponibles para su uso.

imagen

El material mismo ama este componente. Eche un vistazo, por ejemplo, a los ganadores del Material Design Award 2019.

C. Bandera

El banner no se encuentra entre los componentes nativos de iOS. Con la ayuda de Banner, informamos al usuario de información importante y ofrecemos acciones relacionadas.

imagen

re. Snackbar

Al igual que Banner, Snackbar no es nativo de iOS. Snackbar se utiliza para transmitir al usuario un breve mensaje sobre el resultado de su acción.

imagen

mi. Papas fritas

También faltan chips entre los componentes nativos de iOS. Se utilizan para ingresar información, descripciones y acciones.

imagen

F. Barra de aplicaciones inferior

Aquí puede apostar que iOS tiene un componente similar: la barra de herramientas . Pero son diferentes, por eso: la barra de herramientas es una barra para acciones contextuales. Por ejemplo, al editar una lista de mensajes en Mensajes, aparece una Barra de herramientas con las acciones Leer todo y Eliminar.

La barra de aplicaciones inferior mueve la barra de aplicaciones superior hacia abajo con las mismas acciones de nivel superior: abrir el cajón de navegación, abrir una búsqueda, etc. De vuelta en la barra de aplicaciones inferior, alojamos FAB.

sol. Fabuloso

Sí, FAB tampoco está en iOS. FAB es un botón para realizar la acción principal en la pantalla. Por ejemplo, en una aplicación de correo, FAB creará una nueva carta.

imagen

Si usa Android FAB para la acción principal en la pantalla, entonces en iOS esta acción principal debe colocarse en la parte superior de la Barra de navegación a la derecha (ver ejemplo: iMessages).
imagen

h. Cajón de navegación inferior

Una variación de Navigation Drawer típica de Android solamente. Se llama presionando el botón de menú de hamburguesas en la barra de aplicaciones inferior.

imagen

yo. Hoja lateral

Aunque Material le permite usar este componente en una aplicación móvil, recomendaría reemplazarlo con la Hoja inferior más familiar .

imagen

j. Hoja inferior desplegable

Este hermoso componente de Android no se encuentra entre los nativos para iOS. La hoja inferior desplegable es una superficie que se clava en la parte inferior de la página. Cuando se presiona, la superficie se expande a una página completa.

imagen

k. Hoja inferior estándar

Standard Bottom Sheet es una variación de Bottom Sheet, y no se encuentra entre los componentes de iOS.

imagen

16. Qué componentes no están en Android

Ahora considere qué componentes no se encuentran en la biblioteca de Android.

a. Controles de página

Control de página muestra en qué página está el usuario. No se encuentra entre los componentes nativos de Android.

imagen

si. Barra de herramientas

La barra de herramientas solo es familiar para iOS.

imagen

C. Steppers

Steppers : control estándar de iOS, no descrito en Material. Úselo para ingresar valores pequeños. Ejemplo: el número de copias para imprimir.

imagen

re. Popover

Popover es un panel emergente que se usa principalmente en el iPad.

imagen

IOS tiene una aplicación Popover estándar: configurar el texto en lectores o navegadores.

imagen

17. Barra de estado miscelánea

En ambas plataformas, la barra de estado realiza la misma tarea: informes a tiempo, nivel de carga, calidad de las comunicaciones móviles y Wi-Fi. Difieren en la ubicación de estos indicadores dentro de la barra de estado y, en general, en su solución visual.

Además, la barra de estado de Android tiene esa característica, cuando una notificación proviene de una aplicación, el icono de esta aplicación aparece en la barra de estado. En iOS, esto no es.

imagen

18. Actualizar controles de contenido vs deslizar para actualizar

Las llamadas de actualización se realizan con el mismo gesto de deslizar hacia abajo en ambas plataformas. Pero en iOS, Refresh Content Control empuja el resto del contenido hacia abajo, mientras que Android Swipe para actualizar aparece encima del contenido. Además, la actualización de iOS cuando el contenido se desplaza desaparece, mientras que Android permanece visible.

imagen

19. Control misceláneo

Los controles de la plataforma difieren solo visualmente. Cabe señalar que en iOS los controles son más simples: las casillas de verificación se utilizan tanto para radiobutton como para Checkbox. En Android, difieren en la forma de control.

El material también sugiere usar la casilla de verificación principal cuando necesite darle al usuario la capacidad de seleccionar rápidamente todas las opciones.

imagen

20. Diferentes vistas de la flecha hacia atrás y la posición del encabezado

En iOS, la flecha no tiene una línea en el medio porque en iOS la flecha hacia atrás está firmada con la pantalla anterior. Si el título era estándar en la pantalla anterior, entonces el título se mueve del título a la izquierda a la flecha. Si el título era amplio, entonces el título aumenta. Si el título de la página anterior es demasiado largo, se reemplaza por la palabra back.

21. Vista diferente del icono de tres puntos

Parece que no hay una justificación rigurosa para esta diferencia. Rendimos homenaje a la plataforma y utilizamos la posición recomendada de los tres puntos. En iOS, los puntos se encuentran horizontalmente, en Android, verticalmente.

22. Diferentes tipos de selector

En iOS , la fecha se selecciona usando el carrete. El tambor iOS se puede usar para ingresar cualquier otro dato. En Android Picker, las fechas imitan el aspecto de un calendario físico.

imagen

El material también recomienda dar a los usuarios la posibilidad de ingresar una fecha usando el Campo de entrada.

imagen

23. Campos de texto misceláneo

HIG es mucho menos exigente en los campos de texto que en el material.

Las diferencias

En iOS, la etiqueta está dentro de un campo de entrada y desaparece durante la entrada de texto. El material recomienda elevar la etiqueta al ingresar texto.

Similar

Ambas plataformas recomiendan agregar un botón Clear si es necesario.

¿Qué más está pidiendo material?

El material también recomienda resaltar la Etiqueta y la tira debajo del Campo de texto con el color de primer plano; esto ayuda a comprender que el campo está resaltado. El material describe el comportamiento del campo ante un error de entrada. Hay dos formas para elegir en Material: Relleno y Contorneado.

imagen

24. Menús contextuales vs Menús

Los menús contextuales aparecieron en iOS 13. Este control ofrece al usuario varias acciones contextuales asociadas con el elemento seleccionado. Android tiene un elemento parcialmente similar: Menús .

imagen

Menús Android se utiliza en un mayor número de casos: ofrece acciones contextuales tanto para el elemento seleccionado como para toda la página en su conjunto; se utiliza como entrada con varias opciones para elegir (menú desplegable); usado para editar texto. Context Menus es un componente solo para iOS. Y Menus Android se puede usar tanto en una aplicación móvil como en una computadora de escritorio.

25. Vista de Acción / Vista de Actividad vs Hoja Inferior Modal

Si usa la Vista de acción o la Vista de actividad en la aplicación iOS iOS , en Android se pueden reemplazar parcialmente por el componente de la hoja inferior modal de Android . También aparece en la parte inferior de la pantalla, oscurece el contenido y se cierra de manera similar (botón, hacer clic fuera de la ventana modal, a veces deslizar hacia abajo). La tarea de los componentes es proponer una elección o acción contextual.

26. Editar menús vs barra de herramientas de selección de texto

Además de la diferencia visual, los menús de edición y la barra de herramientas de selección de texto difieren en lo siguiente: con una pulsación larga en Android, el usuario puede continuar seleccionando texto. En iOS, después de una pulsación larga, aparece una lupa para seleccionar el lugar exacto de la palabra.

imagen

Además, Android difiere de iOS en que cuando se llaman acciones adicionales, la Barra de herramientas de selección de texto toma la forma de Menús.

imagen

27. Divisor de diferentes tamaños

En iOS es 0.5 pt, en Android - 1 dp.

Otras diferencias

28. Diferentes requisitos para el tamaño de la zona de presión.

De acuerdo con las pautas, el área de clic mínima en iOS es de 44 x 44 pt, y en Android: 48 x 48 dp.

29. App Store vs Google Play

Su aplicación para iOS se descargará de la App Store. Aplicación de Android: de Google Play. Para colocar la aplicación en la tienda correctamente, debe seguir sus requisitos. Vale la pena leer los requisitos de la App Store aquí , y Google Play está aquí . Hay muchas características, por lo que le recomiendo que estudie antes de su publicación.

30. Un patrón especial en iOS: deshacer y rehacer

Este es un patrón especial de iOS: si sacude su teléfono inteligente, la aplicación solicitará al usuario que cancele o repita la última acción cometida. Por lo general, este gesto se usa para eliminar el texto ingresado.

31. Relación con el lanzamiento de marca

El material permite que Launch Screen coloque el logotipo de la aplicación. HIG no recomienda usar la pantalla de inicio para fines de marketing, y sugiere que solo se muestre el marcador de posición cuando se inicie la aplicación.

32. Temas adicionales de diseño de materiales

El sitio web de Material también cubre temas tales como: Formatos de datos (varios formatos de datos), Visualización de datos (infografía correcta), Estados vacíos (diseño de estados vacíos), Estados sin conexión (interfaz en ausencia de Internet), Accesibilidad (diseño accesible) y Bidireccionalidad (diseño para lectores de derecha a izquierda).

Conclusión

El conocimiento de las pautas aumenta nuestro nivel de conciencia. Entendemos los patrones de usuario existentes y creamos una aplicación que se adapta orgánicamente a los hábitos de los usuarios.

Las pautas nos animan a respetar las soluciones de plataforma nativas. Al adaptar un diseño a una plataforma diferente, siempre es tentador duplicar un diseño sin cambios. Esto perjudica la experiencia del usuario y complica el desarrollo. Pero cuando vemos diferencias en las soluciones nativas, adaptamos el diseño correctamente.

Y si queremos introducir una solución nueva y personalizada, el conocimiento de las directrices ayuda a justificar esta innovación.

Total: el conocimiento de las pautas y sus diferencias es una habilidad importante de un diseñador de aplicaciones móviles.

¿Qué otras diferencias conoces? Compártelos en los comentarios.

32 diferencias en el diseño de una aplicación móvil para iOS y Android