Comment suivre les directives ios lors de la conception en points? Comment être sûr de la taille des éléments de l'interface utilisateur?
Bonjour à tous,
Besoin d'aide de concepteurs UX très expérimentés, qui peuvent fournir une réponse détaillée ici.
J'ai quelques questions concernant le processus de conception d'une application mobile iPhone (application du gestionnaire de tâches quotidiennes pour être exact). Il doit s'agir d'une application iPhone prenant en charge iOS version 9.
Question générale: si nous devions fournir une conception d'application mobile (dans Sketch) pour les appareils iPhone (rendu Iphone 5S (320x568) à 2x, 6 (375x667) à 2x, 6 + (414x736) à 3x), qui ont des dimensions et des résolutions, quelle est la taille (depuis le début) avec laquelle nous devons commencer à travailler pour suivre les bonnes pratiques? Dois-je d'abord fournir une maquette haute fidélité pour des appareils spécifiques, puis la réduire ou la réduire à d'autres tailles 1x par la suite? P.S .: Lorsque nous voulons transférer des fichiers au développeur, nous devrons exporter dans toutes les tailles @ 1x, @ 2x et @ 3x. Je sais que Sketch exportera ma conception 1x vers 2x et 3x. Mais encore une fois, la question est la même - dois-je concevoir pour 1x tailles pour tous les appareils séparément - 1x taille pour 5S, 1x taille pour 6 et 1x taille pour 6+ en premier?
Je travaille dans Sketch 3. Et j'ai commencé avec 375 * 667 points pour @ 1x pour iPhone 6 en premier. Lorsque je dois concevoir des iPhones, je commence généralement par un art-board de l'iPhone 6 à 1x (375x667 px). J'ai trouvé cela plus pratique que tous les autres tableaux artistiques. Lorsque je travaille sur des points, dois-je toujours respecter IOS Guidelines/Standards? Je sais que la règle générale est de 44 pt pour les boutons et de 12 pt pour le petit texte, 17 pt pour le corps du texte et 20 pt + pour les titres . Pourquoi lorsque je travaille en points, la taille de 44 pt semble-t-elle être une taille similaire pour les boutons et pour les contrôles segmentés? Cela prend plus d'espace apparemment. Comment puis-je respecter les tailles des éléments de l'interface utilisateur dans ce cas? Comment suivez-vous les normes GUI lors de la conception en points?
Excellent que vous travailliez avec Sketch!
1.0) Non, vous ne devez pas concevoir séparément pour chaque appareil. Vous pouvez certainement faire des maquettes de haute fidélité de cette façon mais, croyez-moi, ce sera un douleur de faire des changements. Et il y aura probablement de nombreux changements.
Il y a quelques écoles de pensée différentes ici, mais le consensus est à peu près que vous devez d'abord concevoir dans la résolution la plus basse (dans votre cas: 320x568, pour iPhone 5 @ 1x). Si vous avez commencé à 750x1334 (qui est l'iPhone 6 @ 2x), par exemple, et avez créé un élément de dimensions 55x55, lorsque vous avez essayé de sous-échantillonner à @ 1x, vous vous retrouvez avec des décimales (27,5x27,5), donc il doivent être arrondis à 28x28. Selon l'œuvre d'art, cela pourrait gâcher votre image.
1.1) L'exception ici est lorsque vous travaillez avec des images bitmap. Comme vous le savez probablement, étirer une image bitmap est beaucoup plus problématique que la réduire, vous devez donc travailler à 4x (100%) et sous-échantillonner à 3x (75%), 2x (50%), 1x (25%).
Travailler avec 4x garantit que vos bitmaps seront prêts pour Android xxxhdpi (qui est 4x) et minimise également l'arrondi des pixels, car 3x -> 2x nécessiterait 66,66666666666666% de la taille de l'image.
2.0) Je recommande de concevoir le plus petit appareil qui sera utilisé. Dans votre cas, iPhone5 (320x568). Vous souhaitez peut-être que l'un des écrans s'intègre confortablement dans l'appareil sans défilement. Si vous concevez à partir de l'iPhone 6, sur l'iPhone 5, certains contenus peuvent être hors écran.
Une autre chose est que, même si l'iPhone 5 et 6 rendent tous les deux @ 2x, et ont tous deux la même hauteur pour la barre de tabulation et la barre de navigation, ils auront des largeurs différents. Ainsi, une barre d'onglets qui semble confortable sur le 6 peut être encombrée sur le 5. Et un titre qui tient sur le 6 peut être tronqué sur le 5.
2.1) À propos des points: tout d'abord, toutes les recommandations de points sont pour @ 1x. Un bouton sur l'iPhone 5 ou 6 aura donc une hauteur de 88 pixels. Les points sont juste un moyen pratique de communiquer avec vos développeurs, donc au lieu de dire que quelque chose fait 100 pixels de large, vous dites que c'est 100 points de large, et ils savent que c'est censé avoir 200 pixels sur @ 2x, et ainsi de suite.
2.2) Visuellement, les contrôles segmentés n'ont que 29 points de hauteur. Je ne suis pas sûr de la fonctionnalité technique, mais notez que sur les applications Apple les contrôles segmentés (29 points de hauteur) sont placés sur des zones de 44 points de hauteur. Donc même si cela regarde plus petit, la zone de prise peut être en fait plus grande.
Cela sert également de coup sûr à vos éléments de conception. Vous voulez peut-être une petite étoile 24x24 à utiliser comme icône préférée cliquable. Vous pourriez (et devriez parfois) faire une image 44x44 avec une étoile 24x24 au milieu.
L'exception à cela est dans le cas où vos développeurs sont bien informés sur les zones minimales exploitables. Ensuite, vous pouvez créer une icône 24x24 et leur indiquer qu'elle doit apparaître sur une zone utilisable 44x44.
2.3) Dans certains cas, cependant, vous souhaiterez peut-être ou devrez-vous casser le HIG (iOS Human Interface Guidelines). Peut-être que vous voulez la petite icône 24x24 et que vous n'avez pas d'espace pour la zone 44x44 autour d'elle. Ça arrive. Mais il est très important de tester avec les utilisateurs et de vous assurer que ces écarts ne compromettent pas la convivialité de votre produit.