32 diferencias de diseño entre apps de iOS y Android

No es solo una comparación simple, sino también un buen artículo para entender las características y fortalezas de la UI de cada OS.

Diferencias básicas

1. HIG vs. Material Design

2. Unidades: pt vs. dp

3. Pantalla: 320pt x 568pt vs. 360dp x 640dp

4. Tipografía: San Francisco vs. Roboto

5. Barra de navegación de Android

6. Shadow y Elevation de Material Design

7. Naming:

→ Tab bar vs. Bottom Navigation Bar

→ Navigation Bar vs. Top App Bar,

→ Segmented Controls vs. Tabs

→ Alerts vs. Dialogs

→ Touch ID vs. Android Fingerprint

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

9. Diferencias entre la tab bar y la barra de navegación inferior

10. Funciones especiales de las tabs en Android

11. Diferencias en cómo se muestran las páginas secundarias

12. Patrón de invocación del navigation drawer (drawer)

13. Diferencias de comportamiento al hacer scroll

14. Diferencias en el comportamiento de búsqueda

Diferencias de componentes (UI)

15. Lo que no existe en iOS

→ Navigation Drawer, Backdrops, Banner, Snackbar, Chips, Bottom App Bar, FABs(Floating Action Button), Bottom Navigation Drawer, Side Sheet, Expanding Bottom Sheet, Standard Bottom Sheet,

16. Lo que no existe en Android

→ Page Control, Toolbars, Steppers, Popovers

17. Status Bar: igual, pero diferente

18. Refresh Content Control vs. Swipe to refresh

19. Diferencias visuales entre los controles

20. Diferencias en la forma de la flecha de regreso y en la posición del header

21. Diferencias en el ícono de "tres puntos"

22. Pickers: en iOS, la selección de fecha es tipo tambor; en Android, tiene forma de calendario común

23. Diferencias en los campos de texto

→ En iOS, la etiqueta se muestra sobre el campo y desaparece al escribir; en Android, se mueve hacia arriba al ingresar texto

→ El botón para borrar contenido es parecido

→ En Material Design, al escribir se resalta la línea inferior con el color primario

24. Context Menus vs. Menus

25. Action View/Activity View vs. Modal Bottom Sheet

26. Edit Menus vs. Text Selection Toolbar

27. Tamaño del divider: iOS 0.5pt vs. Android 1dp

Otras diferencias

28. Tamaño de la zona táctil: iOS 44x44pt, Android 48x48dp

29. App Store vs. Google Play

30. El peculiar Undo/Redo de iOS: si el usuario sacude el teléfono, se activa la función Undo

31. Diferencias en la pantalla de lanzamiento: Material permite el logo de la app en la pantalla de lanzamiento, pero HIG no recomienda usarla con fines de marketing. Solo como placeholder

32. Elementos adicionales de Material Design: Data Format, Data Visualization, Empty States, Offline States, etc.

[xguru]

Si es una startup, ¿con qué deberían desarrollar la app? A esa pregunta, mi respuesta básica es:

#1 Si es un servicio que no necesariamente necesita una app, primero basta con hacer bien solo la web móvil.

#2 Si la app es realmente necesaria, al inicio den soporte simultáneo a las plataformas iOS/Android con React Native o Flutter.

#3 Cuando aumenten los usuarios, también el número de desarrolladores y haya presupuesto, pueden cambiar a una app nativa optimizada para cada OS. (Swift & Kotlin)

Pero esta respuesta es igual que hace 10 años.

En ese entonces solo eran HTML5, Hybrid(Phonegap), Objective C++ & Java...

Ahora, si hacen la web con React, seguramente será un poco más cómodo gracias a React Native.

Recomiendo sí o sí #1 y #2, y #3 es opcional.

Este artículo comparando UI es algo que hay que entender bien cuando se trata del caso #3, y también conviene revisarlo en el caso #2.

[laeyoung]

Continuando con el comentario que dejó xguru

Pero si es un servicio que depende mucho del hardware, como la cámara, el GPS o el acelerómetro, vaya directamente al punto 3.

(p. ej., quiero crear una app de filtros de video en tiempo real -> al #3...)