Système de grille pour les maquettes d'applications mobiles?
1) Pour les applications mobiles natives (iOS7, Android etc.), faites-vous également des maquettes en utilisant le système de grille? Comme peut-être une disposition de grille à 4 colonnes pour les applications mobiles? J'ai entendu système de grille utilisé pour les sites Web réactifs, mais ne semble pas en entendre beaucoup s'appliquer aux applications mobiles natives (pas aux sites Web mobiles).
2) Dans mon entreprise, je dois faire des maquettes pour iPhone 3GS, 4, 5, 6, 6+, ainsi que pour les appareils Android etc.). Dois-je commencer par la maquette pour iPhone 6 d'abord, puis réduire en conséquence? Qu'en est-il des appareils Android?
J'utilise Photoshop et Edge Reflow CC, bien que je ne sois pas sûr que Edge Reflow soit adapté pour simuler des applications mobiles de différentes résolutions, car cela semble plus pour les sites Web.
Tks!
1) Un système de grille peut être utile pour l'alignement et l'équilibre agréable du contenu, mais je ferais également attention aux directives d'interface humaine/conception spécifiques au système d'exploitation ( Apple & Android =) pour déterminer la taille des éléments, l'espacement minimum, les modèles de conception communs et le placement standard des fonctions typiques du système. Ceux-ci peuvent ou non coopérer avec le système de grille que vous avez choisi.
En général, les appareils iOS ont 3 proportions différentes qui pourraient affecter une grille partagée:
- 3: 2 (iPhone4 et versions antérieures)
- 4: 3 (tous les iPad jusqu'à présent)
- 16: 9 (iPhone 5 et versions ultérieures, +/- quelques pixels selon l'appareil).
Les appareils Android sont en quelque sorte un peu partout, mais peuvent également généralement s'inscrire dans ces catégories (donner ou prendre quelques pixels). Je pourrais recommander de créer des grilles basées sur celles-ci et de les appliquer si nécessaire.
Vous souhaitez également présenter une expérience cohérente qui répond aux attentes des utilisateurs pour leur appareil choisi. Cela diffère entre iOS et Android & les gens n'aiment généralement pas voir les interfaces utilisateur conçues pour l'une directement sur l'autre. Cela seul nécessitera un remaniement de la mise en page et repenser où placer les contrôles ou fonctionnalités communs.
2) Évitez de commencer grand et de rétrécissement - généralement mieux pour commencer petit et grandir.
Commencez avec l'iPhone 3GS et 4 car ils sont les plus petits à 3,5 ". L'iPhone 4/4S a un affichage de la rétine @ 2x qui affecte la création d'actifs, mais l'écran a la même taille physique et le même rapport d'aspect 3: 2 que le 3GS, donc toutes les décisions de mise en page devrait être identique.
- Testez sur de vrais appareils pour avoir une idée de leur minuscule taille. Appliquez les mêmes considérations " mobile-first " qu'un site Web réactif - la conception de votre espace le plus restreint vous oblige d'abord à vous concentrer sur les besoins critiques tout en laissant de la place pour vous développer. Ajoutez également quelques petits appareils Android Android à ce processus et essayez de trouver un bon compromis entre leurs tailles.
l'iPhone 5/5S est presque exactement 16: 9 comme l'iPhone 6 et 6 Plus. Ce rapport d'aspect totalement différent devrait avoir ses propres variantes, donc je ne recommanderais pas de commencer par là.
l'iPhone 6+ et similaire Android "phablets" ont d'autres exigences uniques, en plus de la densité de pixels @ 3x qui complique encore les choses pour vos graphistes. Mieux vaut redimensionner ces conceptions jusqu'à la taille de la tablette que Commencez ici et essayez de les réduire.
- De la même manière, une application iPad avec une disposition iPhone standard semble assez mauvaise et gaspille beaucoup d'espace sur l'écran, ces appareils plus grands permettent souvent des dispositions de style tablette à 2 colonnes/"maître-détail" et différents modèles d'interaction ("Accessibilité" "sur iOS pour faire défiler automatiquement des éléments trop éloignés, par exemple). Ils ont également des cas d'utilisation légèrement différents et peuvent simplement afficher plus de contenu, alors considérez comment les gens pourraient les utiliser différemment.
Enfin, je ne suis pas sûr de l'équivalent Android Android, mais vous voudrez peut-être regarder Adaptive Design (nouveau depuis iOS8) d'Apple qui repense en quelque sorte comment les dispositions devrait changer selon les classes de taille de périphérique. Ceci est probablement plus utile plus tard dans le processus, mais cela pourrait aider à faire des maquettes avec ces concepts à l'esprit.