Conception d'interface utilisateur pour les applications mobiles HTML
Je travaille actuellement sur la conception de l'interface utilisateur pour une application mobile réactive qui est codée en HTML. C'est le premier projet de développement d'applications mobiles pour moi ainsi que pour mon chef de l'ingénierie et pour diverses raisons, il a choisi de coder en html et non de coder une application native Android ou application native iOS).
Ma question est la suivante: existe-t-il des directives pour la conception de l'interface utilisateur pour les applications mobiles basées sur html? J'ai suivi en détail les directives de conception de matériaux de Google et les utilise autant que possible dans ma conception et mes spécifications, mais cela a été inutilisable pour de nombreuses raisons, dont certaines sont décrites ci-dessous:
Material Design utilise 'dp' comme unité de mesure mais ce n'est pas utilisé en html
De nombreux modèles d'utilisation suggérés dans Material Design ne sont pas facilement disponibles dans les bibliothèques html. Par exemple, le plugin Floating Action Button n'est pas facilement disponible en html et il y a donc une perte de fidélité entre mes fiches techniques et le produit final à la fin de chaque sprint.
Toute suggestion de ressource pour les applications basées sur le HTML du point de vue de la conception serait très très utile. J'ai essayé la recherche Google plusieurs fois mais je n'ai rien trouvé de concret.
Je n'avais pas l'intention d'écrire une vraie réponse, mais comme mon commentaire est devenu trop long, je suppose que j'en ferai une réponse à la place.
Lignes directrices pour la conception de l'interface utilisateur
En général, tout ce qui peut être une application native peut également être une application mobile. La partie "en général" principalement limitée par:
- La compétence du développeur
- Les applications Web sont un peu plus lentes, il est donc tout à fait possible de réaliser des transitions impressionnantes, mais elles ralentissent considérablement les appareils mobiles bas de gamme. En d'autres termes: N'exagérez pas trop les transitions.
Vous devez ensuite décider du style à suivre. Lorsque vous développez une application Web mobile, je suppose que l'un des principaux objectifs est une expérience multiplateforme naturelle. Dans ce cas, la meilleure chose à garder à l'esprit est quelque chose qui se sentira "juste" pour la majorité, même si cela peut sembler quelque peu étrange pour un sous-ensemble d'utilisateurs. Mon opinion personnelle est que la spécification Material Design est un choix absolument génial car c'est ce que la majorité des utilisateurs attendent (étant donné la domination d'Android sur le marché des smartphones) et se sent bien sur iOS (le plus étrange est Windows Phone qui pourrait devenir un peu aliéné).
Conception matérielle
Si vous décidez d'aller avec Material Design, il existe une variété d'implémentations basées sur le Web de la spécification Material Design, celle que je recommanderais est celle de Google Collection d'éléments en papier polymère (l'autre que Google a faite elle-même est Matériel angulaire ). Consultez les liens "démo" dans la colonne de gauche pour les différents composants pour leur apparence et utilisez simplement des captures d'écran de cela dans votre conception. Ceci est particulièrement utile car cela signifie que la conception n'obtient pas un anti-aliasing de texte très coûteux (les applications natives et les applications Web ne peuvent pas faire de manière réaliste le type d'anti-aliasing que vous obtenez dans Photoshop) et d'autres différences similaires dans la mise en œuvre qui donneront au développeur implémenter un mal de tête.
DP vs PX
Dans certains cas, vous trouverez cependant des composants pour lesquels aucune implémentation prête à l'emploi n'est disponible. Vous n'aurez alors qu'à suivre directement la spécification et à laisser au développeur le soin de l'implémenter à la main. Pour répondre simplement à votre question DP vs PX:
Lors de l'écriture de CSS, utilisez px partout où dp ou sp est indiqué. Dp doit uniquement être utilisé dans le développement pour Android.
Source: google.com/design
Si vous utilisez un outil tel que Cordova ou Ionic, vous pouvez toujours utiliser la conception matérielle de Google.
Selon la documentation, vous devez remplacer px par dp lors du développement en css:
Un dp est égal à un pixel physique sur un écran avec une densité de 160. Pour calculer le dp:
dp = (largeur en pixels * 160)/densité d'écran
Lors de l'écriture de CSS, utilisez px partout où dp ou sp est indiqué. Dp doit uniquement être utilisé dans le développement pour Android.
Il existe en fait un framework matériel dédié pour Ionic vous pourriez trouver utile: http://ionicmaterial.com/
Les applications conçues pour les mobiles utilisant html/css/javascript sont appelées applications "hybrides". Si vous utilisez ce terme lors de la recherche, vous trouverez peut-être des réponses plus utiles. Voici un article qui contient des liens utiles: https://www.smashingmagazine.com/2014/10/providing-a-native-experience-with-web-technologies/