Android VS. iOS: compare 20 componentes y patrones de la interfaz de usuario (Parte 2)

20 diferencias entre Android e iOS que debes saber al diseñar aplicaciones multiplataforma

中文 版 Versión original en chino publicada el 10 de diciembre de 2016

Android VS. iOS: compare 20 componentes y patrones de la interfaz de usuario (Parte 1)

14. Listas de cuadrículas VS. Vista de colección

Las listas de cuadrícula se usan principalmente en un conjunto ordenado de contenido, especialmente para imágenes. En Android, se puede agregar un encabezado o pie de página a una cuadrícula para proporcionar información o acciones adicionales. Las vistas de colección de iOS son para mostrar básicamente contenido basado en imágenes.

Al cortar las cuadrículas en la posición de desplazamiento inicial de la vista, puede indicar el desbordamiento de contenido. Tanto las listas de cuadrículas como las Vistas de colección se pueden tocar para ingresar a la pantalla de detalles para obtener más información.

Fuente de la imagen: Directrices de diseño de materiales de Google y Directrices de interfaz humana de iOS

15. Tarjetas

Las tarjetas se han utilizado en el diseño de la interfaz de usuario durante mucho tiempo. Después de que Google lanzó Material Design en 2015, las tarjetas se convierten en un representante común del diseño de Android. La interfaz de usuario de la tarjeta tiene su ventaja en múltiples tamaños de dispositivos. Las tarjetas se pueden redimensionar y reorganizar fácilmente de acuerdo con diferentes tamaños de pantalla. Además, las tarjetas pueden contener información variada, como textos, imágenes y gráficos.

Aunque iOS no define la interfaz de usuario de la tarjeta en sus pautas, se puede encontrar un diseño similar en la aplicación Apple iOS.

En estilo visual, Android enfatiza las sombras de las tarjetas, pero las tarjetas son planas en iOS 10. (¡Después del lanzamiento de iOS 11, aparecen largas sombras!)

Fuente de la imagen: Directrices de diseño de material de GoogleFuente de la imagen: diseño de Facebook

15. Menús VS. Recogedores y nuevas pantallas

Los menús de Android son similares a sus cuadros de diálogo simples. La diferencia entre ellos es que los cuadros de diálogo aparecen en el centro de la pantalla con una superposición negra transparente, pero la posición de los menús es relativa a la posición de los elementos tocados. Los menús tienen menos interrupción que los diálogos.

Los menús aparecen en las siguientes 3 situaciones: 1) Después de tocar el icono de desbordamiento en una barra de acción o una fila de la lista; 2) después de tocar el menú desplegable y 3) después de tocar una fila de estilo de 2 líneas que consta de etiqueta y valor.

iOS no tiene este tipo de estilo de menú. Después de tocar una celda que consta de etiqueta y valor, la pantalla cambiará a la nueva pantalla que muestra las opciones en una tabla con una marca de verificación en una de las opciones para marcar el estado seleccionado en los teléfonos. En tabletas, se puede usar un popover para la tabla de menú.

Otra alternativa es "selectores", listas desplazables de valores distintos que le permiten seleccionar un valor. Después de tocar una celda con un valor, aparecerá un selector debajo de la celda o se deslizará desde la parte inferior de la pantalla.

Se recomienda utilizar los recolectores solo para algunas opciones. Si tiene una lista larga, una nueva pantalla para la tabla de opciones sería la mejor opción.

16. Selector de fecha / hora

Tanto Android como iOS tienen sus propios selectores de fecha / hora predeterminados. Android tiene un selector de fecha para seleccionar una fecha específica (fecha, mes y año) y un selector de hora. iOS tiene 4 tipos de selector: 1) Fecha que muestra meses, días del mes y años. 2) Tiempo que muestra horas, minutos y (opcionalmente) una designación AM / PM. 3) Fecha y hora que muestra fechas, horas, minutos y (opcionalmente) una designación AM / PM. 4) Temporizador de cuenta regresiva que muestra horas y minutos.

17. divisores

Para separar el contenido, generalmente se usan divisores.

Android tiene 2 tipos de divisores: 1) Divisores de sangrado completo, que se utilizan para separar secciones de contenido distintas. 2) Separadores de inserción, utilizados para separar el contenido relacionado.

iOS no define divisores en sus pautas. iOS usa tablas agrupadas y hay un área gris entre 2 tablas agrupadas para la separación. iOS tiene divisores insertados en su tabla para formar una celda.

Android tiende a usar "espacio" para separar las filas, por lo que Android rara vez tiene divisores entre las filas cuyos datos están relacionados.

En Android, si hay un ícono o imagen en el lado izquierdo de una fila, el divisor de recuadro comienza desde el borde izquierdo del texto y termina en el borde derecho de la pantalla. En iOS, una celda con un icono es lo mismo que Android, pero para una celda con una imagen, el divisor comienza desde el borde izquierdo de la imagen.

18. Campos de texto

Los campos de texto de Android generalmente aparecen en los formularios que debe completar. Hay 3 tipos: 1) Línea simple 2) Líneas múltiples y 3) Ancho completo. En 2017, Android agregó otro tipo: área de texto en sus directrices.

Según el formato de entrada diferente, se debe proporcionar un tipo de teclado apropiado. Tanto Android como iOS proporcionan varios tipos de teclado diferentes. Básicamente, se pueden clasificar en 3 tipos: 1) Teclado numérico (iOS tiene teclado numérico y teclado telefónico), utilizado para ingresar números de teléfono, números de tarjeta de crédito o códigos PIN. 2) Teclado de texto, usado para los nombres de las personas. 3) Teclado mixto, utilizado para direcciones de correo electrónico o URL.

Tanto Android como iOS pueden poner marcadores de posición e iconos o imágenes en campos de texto como indicadores para ayudar a la comunicación. En Android, los marcadores de posición flotan hacia arriba cuando el campo de texto está enfocado o lleno. Es un diseño bastante inteligente para ayudar a los usuarios a conocer las etiquetas, incluso cuando se completan todos los campos de texto. En iOS, sugiere no usar una etiqueta separada para describir un campo de texto cuando el texto del marcador de posición es suficiente.

iOS tiene un diseño más inteligente que es cuando los campos de texto están llenos y enfocados, el botón de borrar se muestra en el lado derecho del campo de texto, para que las personas puedan borrar fácilmente todos los textos con un solo toque. Android no tiene ese diseño en el campo de texto predeterminado, pero puede encontrarlo en la barra de búsqueda. En Android, puede personalizar el campo de texto y agregar un botón para borrar todo en el lado derecho.

Las pautas de Android también definen textos de ayuda, contadores de caracteres y mensajes de error para los campos de texto.

19. deslizadores

Los controles deslizantes son los componentes para ajustar la configuración que refleja los niveles de intensidad, como el volumen, el brillo o la saturación de color. Normalmente, el valor más pequeño se encuentra a la izquierda de los controles deslizantes y el valor más grande a la derecha. Los controles deslizantes pueden tener iconos en ambos extremos de la barra para reflejar la intensidad del valor tanto en Android como en iOS.

Los controles deslizantes de Android tienen 2 tipos: 1) controles deslizantes continuos, lo que permite a los usuarios seleccionar un valor a lo largo de un rango. 2) Controles deslizantes discretos, lo que permite a los usuarios seleccionar un valor específico, como 10 o 20, de un rango.

Android también proporciona un cuadro de texto editable para la entrada de números para usuarios que necesitan establecer el valor exacto.

20. Otros patrones

20-1. Buscar

La búsqueda de Android tiene 2 tipos: búsqueda persistente y búsqueda ampliable, que se puede comparar con la búsqueda destacada de iOS y la búsqueda mínima.

La búsqueda persistente de Android y la búsqueda destacada de iOS se utilizan principalmente para la función principal de las aplicaciones: la búsqueda, como la aplicación relativa a la tienda, en la que los usuarios pueden querer encontrar un producto para comprar mediante la búsqueda.

La búsqueda expandible de Android y la búsqueda mínima de iOS para la aplicación cuya búsqueda es secundaria. Android reduce la barra de búsqueda a un ícono. Después de tocar el icono de búsqueda en la barra de aplicaciones, la barra de aplicaciones se convierte en una barra de búsqueda. iOS utiliza la forma de diseño visual, haciendo que las barras de búsqueda se vuelvan semitransparentes, para que no sean visibles.

iOS también usa el icono de búsqueda para reducir la importancia de la búsqueda. Además, a veces iOS oculta barras de búsqueda detrás de las barras de navegación. Los usuarios deben deslizar hacia abajo para evocar la barra de búsqueda oculta.

20-2. Eliminar y otras acciones

Los usuarios de Android pueden seleccionar un elemento presionando prolongadamente y luego ingresar al modo de selección en el que los botones de acción, como eliminar, se muestran en las barras de aplicaciones. Los usuarios de Android también pueden tocar el icono de desbordamiento para evocar el menú con una opción de "selección" y tocarlo para ingresar al modo de selección.

Los usuarios de iOS pueden deslizar hacia la izquierda para evocar acciones ocultas, como eliminar. También pueden tocar “Editar” en las barras de navegación para ingresar al modo de edición para eliminar o reordenar elementos. Si hay más acciones, como mover y lograr, en el modo de edición, la pantalla tendrá una tabla con múltiples controles de selección y una barra de herramientas con esas acciones.

20-3. Seleccionar texto

Tanto en Android como en iOS, los usuarios pueden mantener presionados los textos para seleccionarlos. Después de presionar prolongadamente, en Android, los iconos de acción se mostrarán en la barra de acción que se convirtió en otro estilo para indicar el estado actual, el modo de selección. En iOS, las acciones solo se muestran en un menú sobre los textos seleccionados. Android ahora también tiene la barra de herramientas flotante como iOS que se muestra arriba en el área de selección con acciones de cortar, copiar, pegar y más.

Después de copiar o cortar los textos, los usuarios pueden presionar los campos de texto durante mucho tiempo para mostrar una ventana emergente de pegar y tocarla para pegar.

Fuente: Google

20–4.Progreso y actividad

En general, las barras de progreso son mejores que las hilanderías porque las barras de progreso les permiten a los usuarios conocer el estado, cuántos porcentajes quedan, por lo que tendrían que esperar pacientemente.

Las barras de progreso se utilizan para que el progreso sea predecible. Si el progreso es incontable, se utilizarán hiladores. Pero si el progreso es predecible y el tiempo de espera es de menos de 3 a 4 segundos, también puede considerar usar hiladores.

Aparecen barras de progreso, además de textos de contenido y cuadros de diálogo, borde inferior de las barras de aplicaciones / barras de navegación. Puede encontrar el ejemplo en las aplicaciones del navegador.

Las barras de progreso no solo tienen lineales sino también indicadores circulares. Los indicadores de progreso circulares a menudo se usan con botones de descarga. Después de tocar los botones de descarga, los botones se convertirán en indicadores circulares de progreso.

Los indicadores de progreso de Android tienen 4 tipos: 1) Determinado 2) Indeterminado 3) Buffer 4) Consulta indeterminada y determinada para diferentes situaciones.

Indicadores de progreso y actividad lineal de AndroidIndicadores de progreso de Android Circular indeterminado y determinado

Acerca de la actualización, Android aprendió de iOS, usando deslizar hacia abajo para actualizar el contenido. Aparecerá una flecha circular después de deslizar hacia abajo y desaparecerá después de cargar el contenido.

Actualice las listas deslizando hacia abajo. Aparecerán los indicadores de carga.

20-5. Iconos: Compartir VS. Acción

Cuando desea compartir el contenido de esta aplicación a otra, Android e iOS tienen su propio icono para compartir. Vale la pena señalar que el botón de acción (compartir) de iOS evoca una vista modal que contiene no solo la lista de aplicaciones, sino también acciones como copiar, favorito o guardar, que son útiles en el contexto actual.

Icono de Android Share VS. Ícono de acción de iOS

20-6. Barras de estado

Las barras de estado de Android e iOS tienen información como la hora, el estado de la batería, el estado de Wi-Fi y la intensidad de la señal. Deslizarse hacia abajo desde las barras de estado para evocar centros de notificación.

20-7. Barras de navegación VS. Botón de inicio

Las barras de navegación de Android y las barras de navegación de iOS son diferentes. Por favor no los confundas.

Las barras de navegación de Android tienen 3 botones para Atrás, Inicio y Aplicaciones recientes. Las barras de navegación pueden ser virtuales o físicas.

iOS tiene un botón físico, Inicio. Una pulsación para volver a casa; presione dos veces para ir a las listas de aplicaciones lanzadas recientemente. Vale la pena señalar que iOS no tiene una tecla de retroceso como Android, por lo que la pantalla de la interfaz de usuario debe tener un botón de retroceso en las barras de navegación.

Después del lanzamiento de iPhoneX, no hay una tecla de inicio en el dispositivo. Deslice hacia arriba en un indicador de barra para volver a casa.

Resumen

Navegación

Android solía usar el cajón de navegación como navegación principal, pero actualmente, las pestañas y la navegación inferior son más populares debido a una mejor usabilidad. iOS siempre como de costumbre utiliza barras de pestañas para la navegación.

Barra de aplicaciones / barra de navegación

Las barras de aplicaciones de Android, los títulos de pantalla se alinean a la izquierda y los botones de acción se colocan en el lado derecho. En iOS, los títulos se colocan en el centro de las barras de navegación y los botones de acción se colocan en el lado derecho e izquierdo de las barras de navegación.

Barras de herramientas

Android e iOS tienen barras de herramientas inferiores para textos de acción, iconos de acción o estado.

Tabs VS. Controles segmentados

Para la navegación del segundo nivel o niveles inferiores, Android utiliza pestañas que contienen 2 tipos: fijo y desplazable y admite gestos de deslizamiento para cambiar de vista. iOS usa controles segmentados, cuyos elementos están limitados a 2–5.

Botones

A pesar de que Android e iOS tienen sus propios estilos de botones predeterminados, los diseñadores visuales aún pueden diseñar botones según su pensamiento siempre que los estilos de botones no confundan a los usuarios. Lo único que debe notarse es que Android usa MAYÚSCULAS, para todos los textos que se pueden tocar, incluidos sus botones.

Botones de acción flotante VS. Botones de llamada a la acción

Android tiene su propio botón de acción flotante característico para la acción principal en la pantalla. Los FAB se colocan en la esquina inferior derecha para alcanzar y tocar fácilmente. Botones de llamada a la acción de iOS, colocados en el centro de las barras de pestañas, que normalmente tienen un estilo diferente con otras pestañas reales.

Hojas inferiores VS. Hojas de acción y vistas de actividad

iOS ha tenido hojas de acción durante mucho tiempo y luego Android también tiene hojas inferiores con acciones para usar con una sola mano.

Diálogos VS Alertas

Los cuadros de diálogo se utilizan para advertencia, proporcionando opciones y confirmación. Android e iOS ponen el botón de acción principal en el lado derecho y la acción secundaria, como cancelar, en el lado izquierdo. Los textos en el botón deben ser simples y claros. Los verbos se pueden usar para Sí y No.

Diálogos de pantalla completa VS. Vistas modales y popovers

Los cuadros de diálogo de Android a pantalla completa y las vistas modales o popovers de iOS en dispositivos telefónicos son de pantalla completa, pero en las tabletas no son de pantalla completa.

Snackbars y tostadas VS. Alertas de cierre automático

Snackbars, tostadas y alertas se utilizan como comentarios después de tomar una acción.

Listas VS. Tablas y Celdas (Filas)

Android tiende a usar el espacio en lugar de un divisor para separar los textos de contenido relacionados en las listas. Android usa divisores cuando los textos de contenido son totalmente distintos. iOS tiene divisores para formar celdas en sus tablas. Las celdas que se pueden tocar con iOS tienen indicadores de la siguiente pantalla que proporcionan una mejor usabilidad que Android. Las tabletas iOS tienen 2 tipos: tablas simples y agrupadas.

Subcabeceras VS. Encabezados de tabla agrupados y encabezado de sección

Android solo tiene subtítulos, pero iOS tiene encabezados de tabla para tablas agrupadas y encabezados de sección para tabletas simples.

Controles de lista

Android e iOS tienen sus propios controles de lista para selección única, selección múltiple y reordenamiento. Elija las adecuadas según cada plataforma.

Menús VS. Recogedores y nuevas pantallas

Android tiene menús, pero iOS usa selectores para listas cortas y nuevas pantallas para listas más largas.

Cuadrículas Listas VS. Vistas de colección

Básicamente, Android e iOS tienen vistas de cuadrícula / colección similares.

Tarjetas

La interfaz de usuario con estilo de tarjeta es una característica clave de Android Material Design, pero iOS también tiene un diseño similar.

Selectores de fecha / hora

Android e iOS tienen sus propios selectores de fecha / hora predeterminados.

Divisores

Android tiene divisores, pero iOS usa tablas de grupo para separar contenido distinto.

Campos de texto

Android e iOS tienen sus propios campos de texto. Muestra los teclados adecuados según los formatos de entrada de los campos de texto.

Deslizadores

Android e iOS tienen sus propios componentes. Ambos son parecidos.

Buscar

Android tiene una búsqueda persistente y una búsqueda ampliable como iOS tiene una búsqueda prominente y una búsqueda mínima. A veces, iOS oculta las barras de búsqueda detrás de la barra de navegación, los usuarios deben deslizar hacia abajo para evocarlas.

Eliminar y otras acciones

Los usuarios de Android primero deben seleccionar elementos y luego realizar otras acciones como eliminar. iOS admite deslizar para eliminar. Los usuarios de iOS también pueden ingresar al modo de edición para eliminar elementos o seleccionar elementos para realizar otras acciones.

Seleccionar textos

Tradicionalmente, después de seleccionar los textos, las barras de aplicaciones de Android muestran acciones, como copiar, cortar, seleccionar todo. Android ahora también tiene una barra de herramientas con acciones que se muestran arriba de los textos seleccionados, como suele hacer iOS.

Progreso y actividad

Si el progreso de una acción es predecible y medible, use la barra de progreso; si no, use hiladores en su lugar.

Iconos: Compartir VS. Acción

Android e iOS tienen su propio icono de compartir. No use el ícono de compartir Android en iOS, y viceversa.

Barras de estado

La barra de estado de Android e iOS básicamente tiene tiempo, estado de la batería, señal de Wi-Fi y señal de conexión celular. Evoca centros de notificación deslizando hacia abajo desde las barras de estado.

Barras de navegación VS. Botones de inicio

Las barras de navegación de Android tienen 3 teclas, atrás, inicio y aplicaciones recientes. iOS tiene una clave, solo hogar. Toca dos veces para evocar la lista de aplicaciones recientes. Los botones de retroceso en las barras de navegación en las aplicaciones de iOS son necesarios.

Resumen

Según la observación de los últimos años, el comportamiento de Android y los componentes de la interfaz de usuario son cada vez más similares a los de iOS, a pesar de que Android aún conserva algunos de sus propios comportamientos únicos. Creo que Google ha estado tratando de dominar el lenguaje de diseño de interfaz de usuario en diferentes plataformas. En el futuro, es predecible que Android e iOS estarán cada vez más cerca y eso es bueno para los usuarios y desarrolladores.

Aunque algunos componentes de la IU no están definidos en las pautas de diseño de material de Android o en las pautas de interfaz humana de iOS, no significa que no pueda usar esos componentes. En algunas situaciones debido a la limitación de los componentes predeterminados de la interfaz de usuario, aún podemos tomar prestada experiencia de otras plataformas y personalizar los componentes para superar las dificultades. El punto real es que los comportamientos o componentes confundirían a nuestros usuarios o no.

Esos patrones introducidos aquí no se pueden aplicar a todas las aplicaciones directamente. Es posible que deban ajustarse según los diferentes escenarios y requisitos. Espero que todos conozcan mejor los componentes y comportamientos de 2 plataformas. Si hay errores o tiene preguntas, bienvenido a corregir o discutir conmigo. ¡Gracias!

Dé 10 aplausos si ha leído este artículo.
Dé 20 aplausos, si cree que es útil.
¡Da 50 aplausos, si crees que es increíble!
Gracias :)
-------------------------------------------------- ------------------
No hablo de las razones por las que las Directrices de diseño de materiales y las Directrices de diseño de interfaz humana de iOS tienen este tipo de comportamientos o reglas en lugar de otras. Este artículo es más para uso práctico. Me gustaría discutir los contextos y razones en otros artículos en el futuro.
Tampoco he actualizado para Android O e iOS 11.

Referencia