¿Cuáles son los estándares de diseño de aplicaciones web para teléfonos móviles?

Al diseñar una interfaz de usuario para una aplicación web móvil (no nativa) que se espera que se ejecute en iPhone, Android y posiblemente en más plataformas, ¿cuál debería ser la línea de base?

¿Lo diseñarías según los estándares del iPhone? ¿Estándares de Android? ¿O simplemente selecciona su propio estilo?

¿Cómo, por ejemplo, mostraría una ventana emergente de mensaje del sistema?

Respuestas (3)

Es una aplicación web. No pretendes que no lo es. Los estándares generales se aplican a la mayoría de los dispositivos táctiles (áreas táctiles, tamaños de pantalla relativos, etc.), pero no intente utilizar elementos nativos reales de la interfaz de usuario de ninguno de los dispositivos, ya que es algo engañoso (no es una aplicación nativa) o simplemente confuso (el La interfaz de usuario no es la del dispositivo en el que se encuentra).

En cuanto a una ventana emergente de mensaje del sistema, no puede mostrarla desde el navegador. Así que tienes que construir el tuyo propio. Puede aprovechar la alerta JS nativa del navegador y confirmar las ventanas emergentes, o puede crear su propia implementación de ventana modal mediante JavaScript.

Al crear una aplicación no nativa, debe tener mucho cuidado al incluir elementos de otro sistema operativo en el que ha lanzado. Por ejemplo, si está lanzando en Android e iOS, no incorpore elementos de ninguno de los dos. Si Apple ve una aplicación similar a Android, no la aprobará y si Google encuentra una aplicación similar a iOS, entonces probablemente te pedirán que lo rediseñes. Sin embargo, puede incluir elementos que son comunes a ambos, como el menú lateral deslizable si lo hace con JQuery y/o CSS. Sin embargo, puede crear dos (o más) archivos CSS que cambiarán el aspecto de la aplicación según el dispositivo en el que se encuentre. También debe tener en cuenta que ambos sistemas operativos hacen las cosas de manera diferente entre sí y todos los demás sistemas operativos móviles.

Como dice DA01, no es nativo, así que no intentes fingir que lo es. Los usuarios pueden encontrarlo algo confuso, ya que no podrá hacer todo lo que puede hacer una aplicación nativa, probablemente será más lento y actuará de manera diferente a una aplicación nativa. Si creen que es una aplicación nativa y no funciona o no se ve como debería, probablemente le darán una estrella a su aplicación en el mercado.

Creo que es mejor evitar imitar elementos del sistema operativo en el período de aplicaciones no nativas. Es engañoso y puede dar al usuario la sensación de que su sitio se conecta a su teléfono de más formas de las que prefiere.
Tal vez valga la pena preguntarse si hacer una aplicación es la mejor idea para un proyecto o si un sitio web móvil sería mejor, se supone que las aplicaciones aportan algo único al teléfono que un sitio web no puede.
La terminología es confusa, pero es una aplicación no nativa, que en realidad es un sitio web móvil, visto en el navegador del dispositivo. No estoy 100% seguro del origen de llamarlos aplicaciones frente a sitios móviles, pero asumo que tiene que ver con las aplicaciones nativas existentes para realizar las funciones de los sitios web y los sitios web móviles que tienen interfaces diseñadas para pantallas táctiles y pequeñas, lo que hace que sean casi idéntico a sus aplicaciones nativas correspondientes en términos de interfaz.
Pensé que querías decir que se creó utilizando una plataforma de sistema operativo cruzado como PhoneGap, que actúa como una aplicación pero está escrita en HTML u otro lenguaje basado en la web. Estos son, que yo sepa, lanzados como aplicaciones en el mercado de aplicaciones, pero son poco más que un sitio web en una vista web. ¡Debo estar de acuerdo en que la terminología es muy confusa! Si está hablando de un sitio web móvil, debo aceptar que usar cualquier elemento del sistema operativo es una mala idea.
Tengo entendido que nativo se reduce a descargar a través de una tienda de aplicaciones e instalarlo en el disco duro, mientras que no nativo se accede a través de un navegador web. Podría estar equivocado, pero aquí hay un par de artículos que describen específicamente las diferencias. barefootsolutions.com/blog/… - sixrevisions.com/mobile/native-app-vs-mobile-web-app-comparison

Los grandes factores que debe considerar son el tamaño de la pantalla y el hecho de que está en una pantalla táctil. (La optimización de imagen retina/ultra HD también es importante, pero solo para la estética, no es esencial para la interacción).

Los estándares de Android y iPhone son excelentes para dar consejos en términos de usabilidad con pantallas táctiles pequeñas. Cosas como el tamaño mínimo de los iconos son cosas que deben tomarse en serio.

Sin embargo, no querrás imitar los elementos gráficos del sistema operativo, porque como menciona DA01, eso es engañoso. Puede confundir al usuario en cuanto a dónde está (debe recordar que solo está pasando el rato en su navegador) y cuánto acceso tiene su sitio a través de su dispositivo.

La pantalla táctil, el tamaño de la pantalla y, por supuesto, cómo las personas sostienen y usan el dispositivo son los principales factores que deben preocuparte al desarrollar una interfaz móvil. No es necesario emular el estilo gráfico de una marca u otra.