Quelle taille doivent avoir les images de la barre d'onglets ?

Question

J'ai des icônes pour une barre d'onglets de taille 100.

J'ai vérifié aux directives d'interface humaine d'Apple de 2013 et il est dit que la taille de l'image doit être 30x30 / 60x60 .

Mais comme la hauteur du contrôleur de barre d'onglets est de 50, j'ai gardé la taille de l'image à 50x50 .

Maintenant, quand j'exécute le projet, je vois l'affreux dessin ci-dessous :

Avez-vous une idée de la taille des images que je dois utiliser pour que le design soit parfait ?

Note : Je n'écris pas non plus de texte (par exemple, Accueil, Recherche, etc.). Le texte du bouton de l'onglet est présent dans l'image elle-même.

Answer 1

Selon le Directives d'interface humaine d'Apple :

@1x : environ 25 x 25 (max : 48 x 32)

@2x : environ 50 x 50 (max : 96 x 64)

@3x : environ 75 x 75 (max : 144 x 96)

Answer 2

30x30, ce sont des points, ce qui veut dire 30px @1x, 60px @2x, pas quelque chose entre les deux. De plus, ce n'est pas une bonne idée d'intégrer le titre de l'onglet dans l'image : les résultats en matière d'accessibilité et de localisation seront plutôt médiocres.

Answer 3

Selon les derniers Directives d'interface humaine d'Apple :

En orientation portrait, les icônes de la barre d'onglets apparaissent au-dessus des titres des onglets. En orientation paysage, les icônes et les titres apparaissent côte à côte. Selon le périphérique et l'orientation, le système affiche une barre d'onglets normale ou compacte. Votre application doit inclure des icônes de barre d'onglets personnalisées pour les deux tailles.

Je vous suggère d'utiliser le lien ci-dessus pour comprendre l'ensemble du concept. Parce qu'Apple met à jour ses documents à intervalles réguliers.

Answer 4

Référence : https://developer.apple.com/ios/human-interface-guidelines/graphics/custom-icons/ [https://developer.apple.com/ios/human-interface-guidelines/graphics/custom-icons/] .

Le format 50x50 est donc un bon choix.

Answer 5

Selon ma pratique, j'utilise le format 40 x 40 pour l'icône standard de l'élément de la barre d'onglets de l'iPad, 80 X 80 pour la rétine.

De la référence Apple. https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/BarIcons.html#//apple_ref/doc/uid/TP40006556-CH21-SW1

Si vous souhaitez créer une icône de barre qui semble liée à la famille d'icônes d'iOS 7, utilisez un trait très fin pour la dessiner. Plus précisément, un trait de 2 pixels (haute résolution) fonctionne bien pour les icônes détaillées et un trait de 3 pixels fonctionne bien pour les icônes moins détaillées.

Quel que soit le style visuel de l'icône, créez une icône de barre d'outils ou de barre de navigation dans les tailles suivantes :

Environ 44 x 44 pixels Environ 22 x 22 pixels (résolution standard) Quel que soit le style visuel de l'icône, créez une icône de barre d'onglets dans les tailles suivantes :

Environ 50 x 50 pixels (96 x 64 pixels maximum) Environ 25 x 25 pixels (48 x 32 pixels maximum) pour une résolution standard.