Taille d'écran à concevoir pour Android et iOS React Native App?
Je conçois une application mobile (UI/UX Design) pour un client qui sera développée en utilisant React Native. Quelle taille d'écran dois-je commencer? Dois-je concevoir 2 applications différentes pour cela ?
J'ai conçu des applications à plateforme unique jusqu'à présent et je sais comment fonctionnent les tailles d'écran. Je sais donc quelle est la taille de l'écran de base pour Android (largeur-360 px) et iOS (largeur-375 px).
Les appareils partagent souvent des dimensions d'écran similaires, il faudrait donc une éternité pour créer une version pour chaque configuration d'appareil possible.
Le moyen le plus efficace serait de créer une disposition unique et évolutive (voir Material Design , par exemple) pour chaque type d'appareil, par ex. téléphone, tablette et ordinateur de bureau. Cependant, vous pouvez envisager de créer des versions pour chaque système d'exploitation car les directives diffèrent beaucoup et ont un impact beaucoup plus important sur la convivialité.
Commencez toujours par les plus petites dimensions d'écran physiques que vous avez dans votre liste cible. Si vous pouvez adapter l'espace plus petit, vous pouvez facilement adapter le plus grand.
Réfléchissez à la façon dont chacun de vos éléments d'écran répondra à l'augmentation des dimensions de l'écran. À un moment donné, certains d'entre eux commenceront à avoir l'air maladroits. C'est là que vous devez envisager de définir un point d'arrêt pour modifier certains paramètres de votre conception. Continuez ainsi jusqu'à ce que vous atteigniez le plus grand écran de votre liste cible.
La plupart des widgets natifs des deux grands systèmes d'exploitation mobiles se ressemblent. Il y a quelques exceptions (notamment le widget sélecteur qui rend une roue dans iOS et une liste déroulante dans Android). Lorsque vous utilisez l'un de ceux-ci, vous peut-être devez considérer des dispositions alternatives pour les deux systèmes. Sinon, vous devriez être bien avec un seul.
Évitez les définitions au pixel près de votre mise en page et de votre typographie. Il existe un certain nombre de widgets de disposition invisibles dans React Native. Apprenez et utilisez leur terminologie pour décrire votre conception.