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

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 2)

Hay más y más aplicaciones lanzadas tanto para Android como para iOS. Pero podemos encontrar que el diseño de esas aplicaciones puede no abordar o notar las diferencias entre Android e iOS en los componentes de UI o patrones de comportamiento. A veces podríamos encontrar que los componentes de iOS se usan en aplicaciones de Android o que los patrones de Android se aplican en aplicaciones de iOS. Los componentes / patrones mal utilizados pueden confundir a los usuarios.

Para que los desarrolladores o diseñadores entiendan la diferencia básica entre Android e iOS más fácilmente. Me gustaría presentar y comparar los patrones / componentes de la interfaz de usuario, que a veces tienen nombres diferentes en las dos plataformas, con algunas capturas de pantalla como ejemplos:

1. Cajón de navegación, pestañas y navegación inferior VS. Barras de pestañas

Nos gustaría hablar primero sobre el diseño de navegación porque es un tema esencial sobre la estructura de la información que los diseñadores deben abordar al diseñar aplicaciones al principio.

El cajón de navegación fue el más representativo del diseño de Android en 2013. Los elementos de categoría en el nivel superior de la estructura de información se colocan en un cajón que se puede ocultar para que las IU se vean simples y limpias. Pero más tarde, con muchas investigaciones que revelaron los problemas de usabilidad del cajón de navegación, Google comenzó a mover características importantes / elementos de categoría de los cajones de navegación a pestañas en sus aplicaciones; Youtube fue un ejemplo de eso. En 2016, la navegación inferior apareció en las Directrices de diseño de materiales y eso muestra que algunos componentes de la interfaz de usuario en Android se están acercando a los de iOS.

Evolución de la estructura de YouTube: las características importantes, Mis suscripciones, Historial y Lista de reproducción se colocan en un cajón -> La estructura de la aplicación se reorganiza, el cajón se elimina y las características principales se mueven a pestañas -> Las tendencias se agregan a pestañas.Evolución de la estructura de Google Fotos: las funciones principales se colocan en el cajón -> Las funciones principales se mueven a la navegación del botón -> El botón Buscar acción flotante, que puede interrumpir la exploración de fotos, se transforma en una barra de búsqueda.

Tenga en cuenta que todavía hay algunas diferencias entre las pestañas de Android y la navegación inferior:

  1. Las pestañas se pueden usar en niveles superiores o inferiores en la jerarquía de información, pero la navegación inferior solo se usa en el nivel superior.
  2. Las pestañas admiten no solo tocar, sino también deslizar el gesto para cambiar de vista, sino que Bottom Navigation solo admite tocar.
  3. La cantidad del artículo en pestañas es flexible. Puede colocar de 2 a 5 elementos en pestañas fijas o más elementos en pestañas desplazables. Pero solo se pueden poner 3-5 elementos en la navegación inferior. 2 o más de 5 artículos están prohibidos。

En algunas aplicaciones con estructuras de navegación profundas y complicadas, podemos encontrar que el cajón de navegación, la navegación inferior y las pestañas aparecen al mismo tiempo. No recomiendo que el cajón de navegación y la navegación inferior se utilicen al mismo tiempo en las aplicaciones porque es difícil distinguir las estructuras jerárquicas entre ellas. ¿El nivel del cajón de navegación es mayor o menor que la navegación inferior? ¿O están en el nivel paralelo? Las estructuras ambiguas confundirían a los usuarios. Google Plus es un ejemplo negativo para mí. Realmente me siento confundido después de actualizar Google Plus y luego ver el cajón de navegación y la navegación inferior al mismo tiempo al principio.

Al analizar las aplicaciones actuales de Google, podríamos encontrar que el cajón de navegación y la navegación inferior están en el nivel paralelo. Tome Google Photos y Google Plus como ejemplos, después de revelar el cajón de navegación en la pantalla principal, no hay resaltado en ningún elemento de categoría. Android parece poner categorías como cuenta, configuración y otras funciones secundarias en un cajón y ubicar las funciones principales / de uso frecuente en la navegación inferior.

Google Mas

iOS ha utilizado las "barras de pestañas" inferiores como navegación predeterminada durante mucho tiempo y nunca ha cambiado. Las barras de pestañas, al igual que la navegación inferior de Android, tienen de 3 a 5 elementos de categoría y puede cambiar las vistas de categoría tocando elementos.

Vale la pena señalar que las barras de pestañas generalmente existen incluso cuando ingresa los niveles siguientes o más profundos desde el superior. Al tocar el elemento resaltado en la barra de pestañas, volverá al nivel superior. Las barras de pestañas desaparecen cuando está en la vista modal o ingresa vistas detalladas con las barras de herramientas inferiores. Sin embargo, en las aplicaciones de Android, las pestañas y la navegación inferior desaparecerán cuando ingrese a la página siguiente en niveles más profundos.

2. Barras de aplicaciones (barras de acción) VS. Barras de navegación

Las barras en el área superior de las pantallas de aplicaciones de Android se denominan barras de aplicaciones, también conocidas como barras de acción y barras de herramientas, que se utilizan principalmente para poner el nombre de pantalla actual o los nombres de aplicaciones y botones de acción. Los nombres se colocan en el lado izquierdo de las barras de acción y los botones de acción, que generalmente no son más de 3, se colocan en el lado derecho. Si las acciones son más de 3, usaríamos el icono de desbordamiento y pondríamos las acciones menos importantes en el menú de desbordamiento.

Tanto Android como iOS tienen sus propios estilos de íconos posteriores. Pero iOS generalmente pone una cadena, una parte posterior o el nombre de la página anterior al lado del icono de la parte posterior, que les permite a los usuarios saber a dónde regresarán con mayor precisión.

Varias barras de aplicaciones comunes y barras de navegación

3. Barras de herramientas

Los botones de acción se pueden colocar no solo en las barras de acción / barras de navegación sino en las "barras de herramientas" inferiores tanto en Android como en iOS.

Aunque las barras de herramientas inferiores no se mencionan en las Directrices de diseño de materiales (hablan de las barras de herramientas solo como barras de aplicaciones), todavía podemos encontrar que las barras de herramientas inferiores se usan en Google Keep y Google Photos.

Las barras de herramientas inferiores son uno de los componentes comunes de la IU de iOS y se pueden encontrar en muchas aplicaciones. Tanto los iconos como el texto como botones de acción y descripciones de estado se pueden colocar en las barras de herramientas.

4. Pestañas VS. Controles segmentados

Las páginas en el nivel secundario o inferior de la jerarquía pueden utilizar "pestañas" en Android y "controles segmentados" en aplicaciones iOS.

Tanto las pestañas de Android como los controles segmentados de iOS se pueden colocar en la posición de la barra de acción / barra de navegación.

Las pestañas de Android pueden ser solo con texto, solo con íconos o con íconos y texto, que rara vez se encuentran en las aplicaciones actuales. Tanto los iconos como el texto se pueden poner en controles segmentados de iOS. Se debe evitar mezclar texto e íconos en un control segmentado.

Todos los textos que se pueden tocar en Android son MAYÚSCULAS y, por lo tanto, el texto de las pestañas está en mayúsculas. Los controles segmentados de iOS usan el caso del título.

Acerca de la cantidad de elementos en las pestañas de Android, será 2–5 en una barra de pestañas fija. Se puede usar una barra de pestañas desplazable cuando hay cadenas largas o más de 5 elementos. Un control segmentado debe tener cinco o menos segmentos en el iPhone para garantizar suficiente espacio para tocar fácilmente.

5. Botones

Básicamente, la única diferencia entre los botones de Android e iOS es el uso de mayúsculas y el estilo de apariencia.

Los botones de Android tienen principalmente 2 estilos, botones "planos" y "elevados", que se utilizan en diferentes situaciones. Por ejemplo, no es bueno usar botones en relieve en las IU de estilo tarjeta porque los botones en relieve aparecen demasiado prominentemente en las tarjetas y las sombras redundantes también hacen que las IU no sean simples y limpias. Se recomienda usar botones planos en no solo tarjetas, sino también cuadros de diálogo y pies de página. Android también tiene botones de acción flotantes, que se presentarán en la siguiente sección.

Aunque las Pautas de diseño de materiales solo definen los estilos visuales de los botones planos y elevados, los botones fantasma, que son formas planas sin relleno y un contorno simple, y los botones elevados sin sombra también se pueden encontrar en Google Play. Los botones fantasma se pueden comparar con el botón normal de iOS; botones con forma de botones elevados al botón presionado.

El texto en los botones de Android es MAYÚSCULAS; Los botones de iOS utilizan principalmente mayúsculas y minúsculas. A veces, los botones fantasma usan MAYÚSCULAS, como el botón ABRIR y ACTUALIZAR en App Store, pero a veces usan Caso de título, como "Reservar una mesa" y "Direcciones" en el Mapa iOS 10. La regla de mayúsculas en iOS parece ser inconsistente.

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

Botones de acción flotantes, FAB apareció por primera vez con Material Design en Android 5.0. Las FAB, ubicadas en la esquina inferior derecha de las pantallas, se utilizan para solucionar el problema de uso de la operación con una sola mano. Es difícil alcanzar botones en las barras de acción mientras se usan teléfonos con una sola mano. Los FAB a veces también se encuentran en la unión de dos áreas y eso hace que los FAB sean más llamativos.

Un botón de acción flotante representa la acción principal en una aplicación. Por ejemplo, el botón de redacción en la aplicación de correo y el nuevo botón de publicación en la aplicación de red social son adecuados para usar FAB.

El diseño similar para la acción principal en las aplicaciones de iOS es el botón de llamada a la acción que se encuentra en el centro de las barras de pestañas. Los botones de CTA, anteriormente, usaban diferentes colores o diseños para distinguirlos de otras pestañas. Pero ahora, como los usuarios están cada vez más familiarizados con el patrón, el estilo del botón de CTA es el mismo que el de las pestañas en muchas aplicaciones. Los botones para una nueva publicación en Medium y publicar una nueva foto en Instagram son los ejemplos.

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

Las hojas inferiores de Android aparecen desde 2015, pero iOS tiene este diseño similar durante mucho tiempo. Android tiene este tipo de diseño porque quiere resolver el problema de operación con una sola mano.

La hoja inferior de Android tiene 2 formas: hojas inferiores modales y hojas inferiores persistentes.

Las hojas inferiores modales de Android tienen dos contenidos: 1) Hojas inferiores modales con diferentes acciones y 2) Lista de aplicaciones que aparece después de que los usuarios tocan el icono "Compartir". El primero es como las hojas de acción de iOS; el último es como las vistas de actividad de iOS después de tocar el icono "Acciones". El diseño del contenido de las hojas inferiores modales de Android puede ser una lista o una cuadrícula.

Las hojas inferiores persistentes se usan cuando las hojas inferiores tienen la misma importancia que el contenido principal anterior y los usuarios pueden necesitar ver la información al mismo tiempo. Tomando la aplicación Mapa como ejemplo, el área superior muestra un mapa y la hoja inferior muestra los detalles de la ubicación. En una aplicación de música, el área superior mostrará la portada del álbum, y el área inferior puede tener controles para reproducir música.

Aunque no puedo encontrar los componentes como las Hojas inferiores persistentes de Android definidas en las Directrices de interfaz humana de iOS, aún puede ver el diseño similar en las aplicaciones integradas nativas de iOS, Mapa y Música.

Crédito de imagen: Guía de diseño de material de Google y diseño de Facebook

8. Diálogos VS. Alertas

Los diálogos de Android tienen principalmente 3 funciones: 1) Alterar: interrumpe lo que los usuarios intentan hacer e informa al usuario sobre una situación. 2) Menús: brinde a los usuarios la posibilidad de seleccionar una opción o cambiar configuraciones simples. 3) Confirmación: como poka-yoke, confirme la elección de los usuarios antes de comprometerse a evitar errores.

Los cuadros de diálogo de Android consisten en títulos, contenidos y botones. Los títulos a veces pueden omitirse. El contenido no solo puede tener texto puro sino también otros componentes como la lista de opciones o los campos de texto. La alerta de iOS también tiene títulos, contenidos y botones, similares al diálogo de Android. La única diferencia es que se puede omitir el contenido, pero se debe mantener un título.

Los cuadros de diálogo de Android tienen 3 formas: 1) Cuadros de diálogo simples, como un menú: no hay ningún botón Aceptar y Cancelar en el cuadro de diálogo. Puede tocar una opción en el cuadro de diálogo para seleccionar y luego el cuadro de diálogo desaparecerá. Puede tocar fuera del cuadro de diálogo o la tecla Atrás para cerrar los cuadros de diálogo. 2) Diálogos de confirmación, los más comunes: hay botones para que los usuarios toquen para confirmar su acción. 3) Diálogos de pantalla completa, solo se usan en teléfonos: los diálogos de pantalla completa no son de pantalla completa en tabletas. Los diálogos de pantalla completa de Android son como la vista modal de iOS, que se presentará más adelante.

Textos

El título y el texto del contenido en los cuadros de diálogo de Android se alinean a la izquierda; El título y el texto descriptivo en el centro de alineación de alertas de iOS. Android utiliza "Sentence case" para los títulos; iOS utiliza "Caso de título". Tanto Android como iOS usan "Caso de oración" para el texto del contenido.

El título del diálogo de Android y la alerta de iOS deben ser cortos y claros. Evite preguntas con algunas indicaciones, como "¿Está seguro de que desea eliminar el archivo?". La oración debe ser simple, neutral y directa, como "¿Eliminar el archivo?".

Botones

Sobre el número de botones, Android e iOS pueden tener 1–2 botones. Las pautas de iOS sugieren evitar 3 o más botones en general porque más botones crean complejidad y pueden requerir desplazamiento. Si necesita más de dos opciones, considere usar una hoja de acción. Pero cuando iOS pregunta a los usuarios si desean actualizar su versión de iOS, muestra tres botones, Instalar ahora, Más tarde y Detalles en la alerta.

Cuando hay dos botones, cancelar y el botón de acción principal, Android e iOS colocan el botón de cancelación en el lado izquierdo y el botón de acción principal en el lado derecho (puede consultar este artículo para saber la razón por la que tienen esta regla). Cuando la copia de los botones es más larga, se pueden colocar dos botones verticalmente. El botón de acción principal estará en la parte superior del botón de cancelar.

La copia en los botones debe evitar usar Sí y No, la acción de escribir en los botones sería más clara y directa, como Cancelar y Guardar, Cancelar y Eliminar.

iOS usa texto rojo en el botón para advertir si la acción es irrecuperable, como eliminar. Android no utiliza colores específicos en el texto del botón. Acerca del texto del botón, Android usa MAYÚSCULAS pero iOS usa el Caso del título. El texto del botón se alinea directamente en Android, pero se alinea al centro en iOS.

Cuando el contexto es mucho, los diálogos de Android pueden corregir el título y el pie de página del diálogo, pero el contenido es desplazable. Los cuadros de diálogo de contenido desplazable a menudo aparecen cuando se colocan muchas opciones en los cuadros de diálogo. Las pautas de iOS sugieren que el contenido debe ser corto para evitar desplazarse en las alertas.

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

Los diálogos de pantalla completa de Android solo se pueden encontrar en dispositivos móviles pequeños como teléfonos inteligentes, que se pueden comparar con las vistas modales de iOS. Las vistas modales de iOS tienen 4 estilos, pantalla completa, hoja de página, hoja de formulario y otras, como vista dividida y popover. Acerca de la transición de las vistas modales en los teléfonos, una vista modal se deslizará hacia arriba cuando ingrese y se deslizará hacia abajo cuando salga.

Popovers se usan solo para tabletas

10. Snackbars y tostadas VS. Alertas

Además de los cuadros de diálogo, Android también usa barras de pan o tostadas como mensajes indirectos con interferencia de bajo nivel. barras de pan tostado o tostadas como comentarios generalmente aparecen durante unos 3 segundos después de que los usuarios toman una acción y luego se deslizan o desaparecen automáticamente.

Los Snackbars pueden tener un botón de acción que permite al usuario rehacer o realizar otras acciones. Las tostadas se utilizan principalmente para mostrar mensajes del sistema. No puedes poner íconos en los bares o tostadas.

Las pautas de iOS no tienen ese tipo de componentes. A veces podemos encontrar que algunas aplicaciones usan alertas como comentarios, pero las alertas interrumpirían a los usuarios y podrían tener una mayor interferencia. Los componentes similares en iOS serían una pequeña ventana emergente que aparece cuando ajusta el volumen del sonido y desaparece después de unos segundos. Algunas aplicaciones personalizan la ventana emergente que aparece durante segundos solo como las tostadas de Android como comentarios.

Algunas aplicaciones pueden personalizar sus alertas para que aparezcan por segundos, como las tostadas de Android.

11. Listas VS. Mesas

Las listas, el componente más común y básico, se pueden encontrar en todas las aplicaciones (al menos puede encontrarlas en la Configuración de las aplicaciones). En Android, las listas están formadas por una columna continua de filas. En iOS, llamamos Listas como Tabletas, que consisten en muchas celdas, también conocidas como filas.

El estilo de lista de Android tiene una lista de una sola línea, una lista de dos líneas (consiste en un texto primario y un texto secundario) y una lista de varias líneas (consiste en un texto primario y 2 o más textos secundarios). Se pueden agregar a las listas iconos, miniaturas y controles de lista, como casillas de verificación, botones de opción y botones de cambio. Normalmente, las acciones principales se colocan en el lado izquierdo de la lista y las acciones secundarias se colocan en el lado derecho de la lista.

Las tablas de iOS son similares a las listas de Android, pero todavía hay algunos puntos que debe tener en cuenta:

1) En el teléfono, cuando la fila de Android tiene un título primario y un texto secundario, se colocan verticalmente. El texto secundario puede ser descripción o valor. En iOS, además del estilo de dos líneas, también tiene un estilo de línea única. El texto primario, etiqueta, se coloca en el lado izquierdo de la celda y el valor se coloca en el lado derecho de la celda. En la tableta, debido al espacio más amplio, la fila de Android a veces es como iOS, colocando un título primario y un texto secundario horizontalmente como una sola línea.

2) La fila de iOS tiene mejor usabilidad que Android. Si hay una pantalla secundaria, iOS mostrará un indicador de flecha en una celda en la pantalla principal, para que los usuarios puedan saber que la celda es tappable y conducirá a otra pantalla. Pero en Android, no podemos saber si las listas son solo para mostrar información o la entrada para otra pantalla también. Todos tienen el mismo aspecto.

3) Las tablas de iOS tienen 2 formas: simple y agrupada. Una mesa simple tiene una pantalla blanca completa con divisores. Aunque solo unas pocas celdas tienen contenido, el área de descanso todavía tiene divisores. Las tablas agrupadas tienen un fondo gris. La primera tabla agrupada tiene algo de espacio con una barra de navegación y la segunda tabla agrupada a continuación. Android tiene un solo estilo y solo usa un divisor para separar dos listas diferentes.

12. Subtítulos VS. Encabezados de tabla agrupados y encabezados de sección

Los subtítulos de Android y los encabezados de iOS se usan para separar y agrupar listas o listas de cuadrículas con diferentes contenidos. iOS tiene 2 estilos diferentes para separar las listas: 1) Tablas agrupadas, utilizadas para agrupar información totalmente diferente; 2) Los encabezados de sección se pueden ver en tablas simples, que se utilizan para ordenar el formato de datos similar, como fotos con diferentes fechas tomadas o contactos con diferentes nombres.

Los subtítulos de Android usan mayúsculas y minúsculas. Los encabezados de tabla agrupados de iOS usan "MAYÚSCULAS" y los encabezados de tabla simples usan "Caso de título".

Al desplazarse, los subtítulos de Android permanecen fijados en la parte superior de la pantalla hasta que los siguientes subencabezados los empujan fuera de la pantalla, cuyo comportamiento es como los encabezados de sección de iOS. Los encabezados de tabla agrupados no tienen este tipo de comportamiento.

13. Lista de controles

Los controles de lista también son componentes esenciales para las aplicaciones. En este capítulo se presentarán los controles de lista, como la sección múltiple, la selección única, los interruptores, las pinzas de reordenamiento, los abandonos y los conmutadores de expansión / contracción.

13-1. Selección múltiple: casillas de verificación VS. Marca de verificación con círculo

Android usa casillas de verificación para la selección múltiple. Un cuadro con una marca representa el estado del elemento seleccionado; una casilla sin marca significa que el artículo no está seleccionado. Las casillas de verificación, que se pueden encontrar en el sitio web o el sistema operativo de escritorio, generalmente son componentes utilizados para la selección múltiple, pero iOS no tiene este componente. En iOS, se usa un círculo con una marca para la selección múltiple, pero su forma puede hacer que los usuarios lo confundan con un botón de radio.

Las casillas de verificación de Android se pueden colocar en el lado izquierdo o derecho, pero iOS generalmente pone múltiples controles de selección en el lado derecho.

Cabe mencionar que Android a veces usa casillas de verificación como interruptores para habilitar / deshabilitar funciones, pero iOS usa botones de interruptor para hacerlo en lugar de sus controles circulares

13–2. Selección individual: botones de opción / marcas de verificación VS. Marcas de verificación

Android tiene botones de radio, que también se pueden encontrar en páginas web o sistemas operativos de escritorio, como un control de selección único. Un botón de radio tiene un círculo con un punto dentro si el elemento está seleccionado. Los botones de radio se usan para listas de dos o más elementos mutuamente excluyentes.

iOS no tiene botones de radio, pero tiene marcas de verificación en su lugar como controles de selección de selección.

Android solía poner botones de radio en el lado derecho de las listas, pero ahora puede encontrar que los botones de radio se colocan en el lado izquierdo gradualmente. iOS coloca marcas de verificación en el lado derecho, pero las marcas de verificación se pueden colocar en el lado izquierdo si el lado derecho tiene otros elementos, como un indicador de la página siguiente, por ejemplo.

Aunque las Pautas de diseño de materiales no introducen marcas de verificación, que aparecen gradualmente desde 2016, puede encontrar el ejemplo en el menú de Google Calendar.

Selección única de Android: botones de radio y marcas de verificación. Pero el de la izquierda es un mal ejemplo como un simple diálogo, NO debe tener un botón CENCEL de acuerdo con las Pautas de Google. O podría ser un diálogo de confirmación agregando un botón Aceptar, pero conducirá a más pasos.

13-3. Interruptores

Un interruptor es una alternancia entre dos estados mutuamente excluyentes, encendido y apagado. En el pasado, Android no tenía interruptores y usaba casillas de verificación para habilitar / deshabilitar algunas funciones, pero ahora Android usa interruptores cada vez más. iOS siempre usa interruptores para habilitar / deshabilitar funciones. Los interruptores se colocan en el lado derecho de las listas tanto en Android como en iOS.

Configuración de Android activada y desactivada: Gmail usa casillas de verificación pero Fotos usa botones de cambio

13-4. Reordenar / Pinza

Android usa un ícono que consta de 4 líneas horizontales paralelas como control de reordenamiento, para evitar confundir a las personas con el ícono de hamburguesa que consta de 3 líneas, usadas para expandir y colapsar el cajón de navegación. El icono de la grabadora generalmente aparece en el modo de edición.

El ícono de agarre de iOS apareció antes que Android. También puedes verlo en modo edición. Pero la pinza iOS consta de 3 líneas solo porque iOS no usa un cajón como navegación predeterminada como Android.

13-5. Abandonos (acciones de deslizamiento)

Después de deslizar hacia la izquierda o hacia la derecha, puede encontrar algunas acciones ocultas detrás de una lista. Es muy común encontrarlo en iOS. Normalmente en el pasado, podría encontrar una acción de eliminación al deslizar, ahora hay más acciones además de eliminar. En una aplicación de correo, puedes encontrar archivos, banderas y más después de deslizarte hacia la izquierda; Marque como leído o no leído deslizando hacia la derecha.

Después de Android 5.0, las acciones de deslizamiento, llamadas Leave-Behinds, se muestran en las pautas. Vale la pena señalar que Leave-Behinds no debe usarse en una pantalla con pestañas debido a un conflicto de gestos y es por eso que Android no tenía este componente antes.

Después de deslizar una lista por una distancia y luego detenerse, puede ver 1–3 acciones detrás, y luego toca una de ellas para tomar medidas. Pero si desliza una distancia más larga, se tomarán medidas predeterminadas. Android solo tiene una acción detrás y realiza la acción deslizando directamente.

Fuente de la imagen: Guía de diseño de material de Google y diseño de Facebook

13-6. Expandir el colapso

Los controles de expandir / contraer pueden ayudar a la jerarquía a adular porque los usuarios no necesitan ingresar a la siguiente pantalla para ver la información, la información se mostrará en la misma pantalla. Este control se puede encontrar a menudo en las listas de preguntas frecuentes. Después de tocar una pregunta, aparecerá la respuesta. Se requieren menos pasos si intenta examinar esos QA.

Además de incluir expandir / contraer en las listas, también puede colocar este control en los encabezados, lo que permite a los usuarios contraer el grupo que no usan con frecuencia.

Fuente de la imagen: Guía de diseño de materiales de Google

Expandir / contraer no se puede encontrar en las pautas de interfaz humana de iOS y rara vez se encuentra en las aplicaciones de iOS. Los controles similares podrían ser algo que apareció en la pantalla Explorar de App Store, en iOS 8. Pero es más como una ruta en lugar de un control de expansión / colapso porque no puede ver otros elementos agrupados en diferentes encabezados en la misma pantalla.

iOS 8 App Store
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 :)

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

Referencia