Cómo diseñar una APPUI que pueda usarse tanto para Android como para iOS

¡Sigue estos pasos y tu aplicación seguirá siendo perfecta tanto en iOS como en Android!

1. Estilo general

Desde iOS7, Apple ha adoptado un estilo. modo de diseño plano y elimina todas las texturas, sombras y otros efectos innecesarios, completamente diferente a las versiones de años anteriores. Las nuevas especificaciones de diseño MD de Google tienen disposiciones más detalladas y utilizan un método llamado "hojas de papel" para crear relaciones más jerárquicas.

2. Botón físico

Android tiene un botón de retorno, haz clic en él para volver a la pantalla anterior.

No existe tal botón en el iPhone, por lo que debe haber una manera para que el usuario regrese a la pantalla anterior. La solución habitual es colocar una tecla de retorno en la esquina superior izquierda de la pantalla.

3. Elementos comunes

De hecho, existen algunos elementos comunes entre las dos plataformas, como la barra de estado y la barra de título, que aparecerán en la parte superior de cada pantalla. No debes cambiar la altura de la barra de navegación si quieres que tu aplicación se vea más nativa. Por lo tanto, te recomiendo que definas el estilo de la barra de título en la primera página del diseño y luego uses un cuadro de marcador de posición para reemplazarlo en otras pantallas. Esto puede ahorrar mucho tiempo, pero debes explicárselo al programador. La barra de título tiene el mismo aspecto en diferentes pantallas.

Las barras de navegación en diferentes plataformas tienen ciertas diferencias. El texto está alineado a la izquierda en Android, mientras que en iOS está alineado al centro. En iOS, muchas empresas reemplazan el texto de la barra de título de la página de inicio con su logotipo, pero en dispositivos Android esto no es una buena idea. La barra de estado (que muestra su red, batería e información de tiempo) es un componente del sistema en el que no necesita pensar en diseñar, solo asegúrese de que no engañe a los demás.

4. Navegación

Quizás la mayor diferencia entre las plataformas iOS y Android es su estilo de navegación. El principal método de navegación en Android es el menú del cajón, y los usuarios de Android suelen acceder a este menú. Y la experiencia es consistente en toda la aplicación. El estilo de navegación de Apple se inclina más hacia la barra de pestañas, que se sitúa en la parte inferior de la pantalla y cambia el contenido superior de una forma muy sencilla. Cuando estructura su aplicación, puede diseñar diferentes estilos de navegación para diferentes plataformas.

5. ¿Deberías usar tarjetas?

En el diseño de UI, las tarjetas se están convirtiendo gradualmente en un estilo de diseño de UI importante. Pueden hacer frente a una variedad de situaciones y brindar a los usuarios una forma conveniente. para presentar contenido efectivo. Visualmente, las tarjetas encajan muy bien en el Material Design de Android (que en realidad se inspiró en el papel). El uso de sombras y un espacio razonable entre las tarjetas crea una apariencia natural.

En iOS, el uso de diseños de tarjetas requiere más cuidado, aunque algunas aplicaciones grandes como Facebook y Pinterest utilizan un estilo de diseño que se desvía ligeramente de las normas visuales de iOS. Instagram utiliza un estilo de diseño completamente plano. Aunque desde un punto de vista estructural, el empuje de cada usuario puede considerarse como una tarjeta. Vale la pena dedicar tiempo a descubrir cómo seguir las especificaciones visuales de iOS. Si vas a utilizar sombras en iOS, será mejor que tengas cuidado e intentes que sean lo más sutiles posible.

6. Tipografía

La fuente predeterminada en iOS es Helvetica Neue y en Android es Roboto.

Aunque existen diferencias significativas en apariencia entre las dos fuentes, los tamaños de las dos fuentes son casi idénticos. Si desea ahorrar tiempo al diseñar, utilice una fuente, pero deberá comunicarse con el desarrollador para utilizar la fuente correspondiente en diferentes plataformas. Al diseñar estructuras de diseño importantes y utilizar fuentes grandes, le recomiendo que siga utilizando estas dos fuentes al mismo tiempo para probar el efecto.

Si quieres luchar por la excelencia, debes prestar más atención a las especificaciones de diseño en las diferentes plataformas. Por ejemplo:

El diseño MD de Android requiere más espacios para el diseño

Los cambios en el tamaño de fuente en MD serán más diversos

En iOS, no hay tantas diferencias en el tamaño de fuente, pero hay más variaciones en el peso de la fuente, lo que también le permite crear estructuras primarias y secundarias

Ambas plataformas utilizan fuentes de texto real, sin embargo, en el siguiente ejemplo, Android. usa fuentes Light (Lighr) y Regular (Regular), mientras que iOS usa fuentes Bold (Bold) y Regular

Este es un ejemplo muy simple que muestra que algunas diferencias sutiles en la tipografía pueden llevar a grandes diferencias en Impresiones: ¡puedes saber rápidamente si estás usando un teléfono Android o un iPhone!

7. Componentes táctiles y de cuadrícula

iOS (44px a @1x) y Android (48p a 1x). :1 relación) ambos tienen especificaciones de diseño para componentes táctiles. La especificación MD también recomienda utilizar una alineación de cuadrícula de 8 dp para todos los elementos.

En proyectos recientes, descubrí que es más seguro cumplir con estas especificaciones de diseño de Android, porque los botones más grandes de 48 píxeles funcionan bien en ambas plataformas y las especificaciones de MD son más completas y se renuevan con frecuencia. Deberías usar cuadrículas en tus diseños pase lo que pase, pero descubrimos que las cuadrículas de Android más claramente definidas funcionan mejor.