¿Cómo diseñar una APPUI que pueda usarse tanto para Android como para iOS?
1. Estilo general
Desde iOS7, Apple ha estado adoptando un modo de diseño plano, eliminando todas las texturas y sombras innecesarias, completamente diferente a las versiones anteriores. Las nuevas pautas de diseño MD de Google tienen disposiciones más detalladas para crear relaciones más jerárquicas a través de un método llamado "papel".
2. Botón físico
Android tiene un botón de retroceso. Haga 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 poner una tecla Intro en la esquina superior izquierda de la pantalla.
3. Elementos comunes
Hay algunos elementos comunes entre las dos plataformas, como la barra de estado y la barra de título, que aparecen en la parte superior de cada pantalla. Si desea que su aplicación se vea más natural, no debe cambiar la altura de la barra de navegación. Por lo tanto, le sugiero que defina el estilo de la barra de título en la primera página del diseño y luego lo reemplace con un cuadro de marcador de posición en otras pantallas. Esto puede ahorrar mucho tiempo, pero debe explicarle al programador qué es la barra de título. lo mismo en diferentes pantallas.
Las barras de navegación de diferentes plataformas son diferentes. En Android, el texto está alineado a la izquierda, pero en iOS está centrado. En iOS, muchas empresas reemplazan el texto de la barra de título de la página de inicio con su logotipo, pero esto no es una buena idea en los dispositivos Android. La barra de estado (que muestra información de red, energía y hora) es un componente del sistema. No es necesario que pienses en diseñarlos, sólo asegúrate de que no engañen a los demás.
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 esta 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 encuentra en la parte inferior de la pantalla y cambia el contenido de arriba de una forma muy sencilla. Cuando estructura su aplicación, puede diseñar diferentes estilos de navegación para diferentes plataformas.
5. ¿Quieres utilizar la tarjeta?
En el diseño de UI, las tarjetas se están convirtiendo gradualmente en un estilo de diseño de UI importante que puede hacer frente a muchas situaciones y brindar a los usuarios una manera conveniente de presentar contenido efectivo. Visualmente, las tarjetas encajan perfectamente en el diseño material de Android (que en realidad se inspiró en el papel). Usar un espacio razonable entre la sombra y la tarjeta crea una apariencia natural.
En iOS, el diseño de tarjetas debe ser más cuidadoso, aunque algunas aplicaciones grandes, como Facebook y Pinterest, utilizan estilos de diseño que se desvían ligeramente de las normas visuales de iOS. Instagram adopta un estilo de diseño completamente plano. Si bien desde una perspectiva estructural, cada uno de sus feeds puede considerarse una tarjeta, vale la pena dedicar tiempo al diseño de Instagram para descubrir cómo se adhiere a las convenciones visuales de iOS. Si desea aplicar sombras en iOS, será mejor que tenga cuidado y trate de hacer que esas sombras sean menos notorias.
Paso 6: Composición
La fuente predeterminada para iOS es Helvetica·Newy y la fuente predeterminada para Android es Roboto. Si bien existen diferencias significativas en apariencia entre las dos fuentes, ambas son casi idénticas en tamaño. Si desea ahorrar tiempo en el diseño, puede usar una fuente, pero debe comunicarse con el desarrollador para usar la fuente correspondiente en diferentes plataformas. Al diseñar estructuras de diseño importantes y utilizar fuentes grandes, le sugiero que utilice ambas fuentes 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, lo siguiente:
El diseño MD de Android requiere más espacio para el diseño.
En MD, los cambios de tamaño de fuente serán más diversos.
En iOS, la diferencia en el tamaño de fuente no es tan grande, pero hay más variación en el peso de la fuente, lo que también permite crear estructuras primarias y secundarias.
Ambas plataformas utilizan fuentes más delgadas para reflejar el contenido del texto.
Sin embargo, en el siguiente ejemplo, Android usa fuentes Lightr y normales, mientras que iOS usa fuentes Negrita y normales.
Este es un ejemplo muy simple para mostrarle que algunas diferencias sutiles en la tipografía pueden generar grandes diferencias en las impresiones: ¡puede saber rápidamente si está usando un teléfono Android o un iPhone!
7. Elementos táctiles y de cuadrícula
IOS (44px a @ 1x) y Android (48p a una proporción de 1:1) tienen especificaciones de diseño para elementos 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 para Android, ya que las claves más grandes de 48 píxeles funcionan bien en ambas plataformas y las especificaciones MD son más completas y se actualizan con más frecuencia. De todos modos, debes usar cuadrículas en tus diseños, pero hemos descubierto que una cuadrícula de Android más claramente definida funciona mejor.