Quelle est la résolution généralement acceptée pour la conception mobile?
Donc, je suis dans une semaine et demie dans un nouveau projet, et j'ai conçu pour une résolution de 320px * 480px. Je suis nouveau dans le jeu et je viens de découvrir que cette résolution est trop petite compte tenu des écrans haute densité des nouveaux smartphones et que mes graphismes seront flous sur les nouveaux appareils.
Mon ignorance me coûte vraiment cher et j'aimerais savoir s'il existe un équivalent de la résolution de stock mentionnée ci-dessus (qui, je suppose, a été utilisée avant l'introduction des écrans haute densité).
Si vous avez des suggestions sur la façon dont je peux récupérer mes graphiques existants sans refaire les .PSD, cela sera également apprécié.
Au lieu de concevoir votre interface utilisateur pour une seule résolution, vous devez la concevoir de manière indépendante de la résolution. Jetez un œil à la façon dont cela est géré dans Android: http://developer.Android.com/guide/practices/screens_support.html
La résolution que vous utilisez (320x480) est une résolution MDPI typique, vous pouvez donc continuer à l'utiliser, tant que vous fournissez vos ressources graphiques pour l'application dans d'autres tailles DPI également:
- LDPI (faible): x0,75 la taille de vos actifs graphiques actuels
- MDPI (moyen): la taille des actifs graphiques que vous utilisez actuellement
- HDPI (élevé): x1,5 la taille des actifs courants
- XHDPI (extra élevé): x2,00 la taille des actifs courants
Le système d'exploitation utilise ensuite le graphique le mieux adapté à l'appareil.
Dans iOS, tout cela est beaucoup plus facile, car il vous suffit de fournir deux ressources graphiques, une pour les anciens écrans (320x480) et une pour les nouveaux écrans rétine (640x960).
La résolution pour laquelle vous concevez dépend de la résolution que votre public cible utilisera. Parfois, vous le savez à l'avance, mais sinon, vous devez essayer restez flexible dans un ensemble de résolutions.
C'est l'une des raisons pour lesquelles la conception réactive est si utile. Vous devez concevoir sans avoir une résolution fixe à l'esprit, mais concevoir d'une manière flexible et qui fonctionnera pour une gamme de résolutions. Je regarde généralement iOS et résolutions Android (avec Android étant la plus grande part de marché), et je m'assure que tout design fonctionne bien dans l'un ou l'autre.
Vous devez également faire la distinction entre résolution matérielle et résolution design/css car pour de nombreux téléphones, les deux ne sont pas les mêmes.
Tableau de résolution Android: 
Ce qui peut être déroutant, c'est qu'il y a la résolution de la dimension de l'écran, puis la résolution de la densité de pixels. Ils sont souvent liés, mais pas toujours.
Par exemple, un iPhone 3 mesure 320 pixels x 480 pixels.
Et l'iPhone 4, avec écran Retina, est de 640 x 960.
Cependant, les deux appareils traitent l'écran comme ayant une largeur de 320 px. C'est juste que l'écran Retina aura le double de la densité de pixels à sa disposition.
Par exemple, si vous créez une icône 100x100 et que vous l'affichez côte à côte sur les deux appareils, ils auront physiquement la même taille. Pour profiter de l'affichage de la rétine, vous devez créer une deuxième icône 200x200 et la donner au dispositif de rétine. Il aura toujours la même taille physique, mais a maintenant 4x les pixels, il sera donc plus net/plus clair.
Et un moyen facile de concevoir pour iOS est de prendre votre fichier PhotoShop, de le configurer aux dimensions de l'écran de la rétine, puis de le concevoir à 50%.
Hélas, iOS facilite assez tout cela car il existe une relation assez directe entre les deux types d'écrans. Ce n'est pas toujours le cas sur d'autres appareils - en particulier les BlackBerry, où un écran à densité de pixels plus élevée équivaut généralement à avoir plus de contenu à l'écran, mais tout le contenu est beaucoup plus petit.
La raison du flou est que lorsque l'image est augmentée en taille, elle n'est pas augmentée en nombre parfait, ..
Si vous définissez la résolution principale sur 100x100, elle sera parfaite sur 200x200 et 300x300 ..etc, mais elle ne sera pas correcte sur 150x150 ou 160x160.
Si l'image est agrandie ou diminuée de 1x, 2x, 3x, 4x ou 0,5x, 0,25x, 0,125x, elle devrait être fine, mais pas parfaite.
Vous devriez envisager de le rendre indépendant de la résolution, votre application doit détecter la résolution et gérer l'affichage en conséquence.
La plupart des mobiles et tablettes actuels sont de très haute résolution.
1080x1920 pourrait être une option moyenne pour maintenant quelques jours (sept. 2017).
Veuillez vérifier le lien ci-dessous https://mydevice.io/devices/
Chaque élément graphique qui n'est pas une photo doit être conçu comme un vecteur pour vous éviter d'avoir à recréer vos actifs si quelque chose doit être mis à l'échelle.
Pendant ce temps, les éléments photo haute résolution peuvent être placés dans Photoshop en tant qu'objets intelligents, ce qui les rend également redimensionnables en un point.
Si vous utilisez ces deux méthodes, peu importe la taille de votre fichier Photoshop au stade de la conception.