Cómo hacer un borrador de diseño que sea compatible con las plataformas Android e iOS, y la diferencia entre la interfaz de usuario de IOS y Android

Las diferencias entre los sistemas Android e IOS se dividen en los siguientes puntos:

1. Estilo general

A partir de iOS7, Apple dejó de intentarlo. del estilo de diseño esqueuomórfico se convierte en diseño plano. Lo contrario ocurre con Google. Las nuevas pautas de Material Design de Google tienden a crear efectos más cercanos al mundo real.

2. Botón Real

Los teléfonos Android tienen un botón "atrás", que permite a los usuarios volver a la interfaz anterior en la interfaz de la aplicación.

No existe tal botón en los iPhone. La operación de regresar a la interfaz anterior generalmente se logra a través del ícono "Volver al nivel anterior" en la esquina superior izquierda de la pantalla, pero es necesario considerar el. diferentes rutas de la interfaz de la aplicación al usarla.

3. Elementos globales

Hay algunos iconos globales (como estado y encabezados) que aparecerán en todas las interfaces. Si desea que su diseño luzca natural, deje intactas la altura y el estilo de las barras. Recomiendo definir estos elementos cuando diseñes tu primera interfaz. En diseños posteriores, puede utilizar gráficos de marcador de posición (o estados y encabezados en el sistema operativo) para reemplazarlos en el archivo de simulación, pero asegúrese de informar al desarrollador que estos elementos deben permanecer coherentes en todas las páginas.

Las dos plataformas tienen diseños de navegación ligeramente diferentes. En Android, el texto del título está alineado a la izquierda, mientras que en iOS, el texto está centrado. En iOS, muchas empresas sustituirán el título por el icono de la empresa, pero en Android esta no es una buena estrategia. Debido a que la barra de estado (que incluye señal, batería, hora y otra información) viene con el sistema nativo, no es necesario considerar su diseño. Lo que hay que garantizar es que al crear archivos de simulación se utilicen los iconos correctos para evitar malentendidos.

4. Navegación

Quizás la mayor diferencia entre Android e iOS se refleje en su respectiva navegación. El principal método de navegación en la plataforma Android es un directorio de cajones. Parece estar presente en la interfaz todo el tiempo que el usuario usa la aplicación. La navegación de Apple utiliza el modo de barra de pestañas, que se encuentra en la parte inferior de la pantalla y permite a los usuarios ver diferentes áreas de actividad de primer nivel en la aplicación. Por lo tanto, al diseñar el área de actividad de primer nivel de la aplicación, se deben diseñar directorios diferentes para las dos plataformas.

Considerando la situación general, la estructura de la aplicación puede ser más importante que el directorio de navegación. Si la estructura general de la aplicación es buena, la barra de navegación también se verá bien. Como acabamos de decir, hay dos modos de navegación con los que tienes que lidiar, el cajón en Android y la barra de pestañas en iOS. Al diseñar una página separada, a veces es una buena idea ocultar directamente la capa de navegación.

5. Si se debe utilizar la interfaz de tarjeta

La interfaz de tarjeta (Tarjetas) se está convirtiendo gradualmente en un tipo de interfaz de usuario importante en el diseño digital. Son flexibles y permiten a los usuarios comprender rápidamente el contenido de la interfaz. En términos de efectos visuales, la interfaz estilo tarjeta también es muy consistente con el concepto de diseño de materiales de Android. El sombreado entre las cartas hace que se vea y se sienta muy natural.

En iOS, debes tener cuidado al utilizar la interfaz de la tarjeta. Incluso las grandes empresas como Facebook y Pinterest, cuando utilizan diseños de tarjetas, sienten que no cumplen con las pautas de diseño de iOS.

iOS recomienda a los diseñadores utilizar efectos de diapositivas y en cascada, pero su intento básico se acerca más a un estilo de diseño plano. Todas las aplicaciones de Instagram adoptan un diseño de estilo plano, aunque en términos de estructura general, cada publicación debe considerarse como una interfaz de tarjeta. Por lo tanto, si desea utilizar una interfaz estilo tarjeta en la plataforma iOS, asegúrese de utilizar los efectos de sombra con cuidado y hacer que las sombras se vean lo más suaves posible.

6. Composición tipográfica

La fuente utilizada por iOS es Helvetica Neue, mientras que Android utiliza Roboto. Aunque los estilos de ambas fuentes son diferentes, sus especificaciones son parecidas. Si desea garantizar la velocidad, también puede elegir una fuente a utilizar. Sin embargo, la comunicación debe realizarse con el desarrollador y el tamaño de fuente elegido debe ser adecuado para la plataforma. Cuando se trabaja con diseños más importantes o tamaños de fuente extremos, se recomienda probar ambas fuentes.

Si desea lograr el efecto, debe realizar una mayor optimización en función de las diferentes características de las dos plataformas. Los siguientes son solo algunos puntos a tener en cuenta:

Material Design de Android utiliza mucho espacio en blanco en el diseño

En Material Design, el uso de fuentes es más atrevido. Un título exagerado combinado con mucho espacio a menudo puede crear un efecto de capas.

En iOS faltan cambios dramáticos. Pero ajustando el tamaño de fuente. También puede desempeñar un papel de capas.

Normalmente, ambas plataformas utilizan el tamaño de fuente más pequeño en la biblioteca de fuentes. Sin embargo, en el siguiente ejemplo también podemos ver que Android usa una fuente estándar más pequeña, mientras que iOS usa una fuente estándar Helvetica Neue en negrita. Este sencillo ejemplo muestra que incluso una tipografía muy simple tiene efectos completamente diferentes en Android e iOS.