Sélectionner une page

Guide graphique de l’iOS 10 : 29 éléments à prendre en compte

Guide graphique de l’iOS 10 : 29 éléments à prendre en compte

24 février 2017
L’iOS 10 d’Apple propose principalement des changements du point de vue consommateur : widgets, Siri, notifications…

Côté designers, les seuls changements visibles sont des titres plus gras et une plus grande utilisation des cartes.

Pour les designers et créateurs d’application ou de site qui passent par un prestataire, un retour sur l’iOS 10 et ses fonctionnalités peut être utile. L’occasion de revoir les éléments où l’iOS s’est perfectionné au fil du temps.

La plateforme de la maturité

iOS a évolué au fil des années. A sa 9e mise à jour, Apple a introduit notamment une nouvelle police d’écriture nommée San Francisco, 3D Touch et l’aspect multitâche sur iPad.

En Xcode, vous trouverez Stack Views, un outil pratique (et bien moins complexe qu’Auto Layout) qui permet de créer une application responsive, qui s’adaptera donc à tout format d’écran. Ainsi, Apple encourage le responsive qui est devenu primordial de nos jours.

1. Agencement responsive et multi-tâche

Avec le nombre grandissant de résolutions d’écran différentes, ne pas prendre en compte le responsive est une énorme erreur.
Un design et une mise en forme flexibles, qui permettent de montrer des menus supplémentaires si nécessaires, sont vitaux.

Le gif ci-dessous permet de voir comment un design s’adapte sur plusieurs écrans, de l’iPhone à l’iPad Pro. L’interface utilisateur s’étend plutôt que de s’agrandir.
Pour des écrans plus larges, comme l’iPad ou l’iPhone 7 Plus en mode paysage, un volet de navigation à gaucheremplace la barre d’onglets habituelle.

2. Police d’écriture San Francisco

iOS 10 - Typographie - Http5000

La police par défaut est à présent San Francisco, création maison d’Apple qui a fait ses débuts avec l’Apple Watch.
Cette écriture remplace ainsi Helvetica Neue, décrite par certaines comme étant “la police de caractères la plus aimée du monde”. San Francisco a été pensé pour donner un visuel parfait sur les écrans de la Pomme la plus célèbre au monde.

3. Ajustement de la police d’écriture

iOS ajuste automatiquement l’alignement et l’affichage pour les contenus utilisant San Francisco. Ainsi, la police est toujours parfaitement lisible.
Par ailleurs, le plugin SF IU Font Fixer de Sketch permet d’ajouter les valeurs d’espacement correctes de façon rapide.

4. 3D Touch

iOS 10 - 3D Touch - Http5000

Une nouvelle caractéristique présente dans l’iOS est nommée 3D Touch, qui permet d’accéder rapidement à diverses options dans et en dehors des applications.

En restant appuyé sur l’icône de votre application, les utilisateurs peuvent maintenant dérouler les fonctionnalités qu’ils utilisent souvent. A l’intérieur d’une application, ils peuvent jeter un œil à leurs mails, et avoir un aperçu du contenu d’un lien avant de l’ouvrir.

Pensez à 3D Touch comme les raccourcis claviers des ordinateurs ; il permet aux usagers d’aller plus vite dans les tâches qu’ils réalisent fréquemment. Il faut donc créer des raccourcis qui rendront le pouvoir des utilisateurs plus productif.
Mais tout comme les raccourcis clavier, les caractéristiques essentielles ne doivent pas être exclusives à 3D Touch. Les utilisateurs doivent pouvoir y accéder aussi en utilisant votre application normalement, sans 3D Touch.

5. Points et pixels

iOS 10 - Résolutions - Http5000

Les développeurs travaillent à base de points ; il est donc important de connaître la différence entre points et pixels.
Quand l’iPhone a vu le jour, les 2 valeurs se valaient : 1 point était l’équivalent d’1 pixel.
Avec l’arrivée des écrans Retina, 1 point est devenu l’équivalent de 2 pixels. Selon le modèle, l’équivalence diffère donc. Un élément à prendre en compte et à garder à l’esprit quand vous travaillez avec des graphistes ou développeurs d’application.

 

6. Résolutions d’iPhone

iOS 10 - Design - Http5000

Les iPhones ont 4 résolutions principales : 320x480pt (iPhone 4), 320x568pt (iPhone 5), 375x667pt (iPhone 7) et 414x736pt (iPhone 7 Plus).
La mise en page ne se met pas à l’échelle mais s’étend selon la résolution.
Par exemple, la barre de navigation s’ajustent seulement sur la longueur mais garde la même hauteur. Ainsi, les éléments qu’elle contient restent intacts.
L’iPhone 7 Plus est le seul à fonctionner plus ou moins comme un iPad en mode paysage. Autrement dit, un volet de navigation à gauche remplace la barre de navigation inférieure, la Tab Bar.

 

7. Résolutions d’iPad

iOS 10 - Design iPad - Http5000

Les iPad ont 2 résolutions principales : 768x1024pt (iPad) et 1024x1366pt (iPad Pro).

L’iPad comprend 2 nouvelles caractéristiques : le Slide Over et le Split View.
Le Slide Over est un volet qui recouvre la partie droite de l’écran sans affecter la mise en forme de l’application.

iOS 10 - Slide Over - Http5000

Le Split View, ou Vue fractionnée, permet aux utilisateurs d’utiliser 2 applications en parallèle, en mode paysage.

iOS 10 - Split View - Http5000

 

8. L’icône de l’application

iOS 10 - icône d'application - Http5000

L’icône d’une application est un point important de votre communication visuelle. C’est la première chose que les utilisateurs voient quand ils utilisent votre application.
L’icône apparaît bien en évidence à plusieurs endroits : Home, App Store, Spotlight, Paramètres.
L’iPhone ne supportent plus les résolutions @1x ; il est donc inutile de les générer. Il reste donc 2 résolutions en terme d’icônes à présent : @2x et @3x. Et 3 types d’icône : icône de l’application, Spotlight et Paramètres.
Pour l’iPad, @1x et @2x sont utilisées.

iOS 10 - points et pixels - Http5000

 

9. Courbe de Lamé

iOS 10 - courbe de Lamé - Http5000

Depuis l’iOS 7, les coins arrondis sont passés de faiblement arrondis à une forme en courbe de Lamé.
Il est important de noter que vous ne devez pas exporter vos icônes avec les calques, ou vous y trouverez potentiellement avec des artefacts noirs (le transparent de l’image deviendra noir). Exportez donc plutôt une version carrée de votre icône sur l’App Store.

 

10. La grille des icônes

iOS 10 - Grille d'analyse d'icône - Http5000

Apple applique un ratio sur certaines de ses icônes. Cela assure que les icônes qui y correspondent sont optimales et bien proportionnées. Bien que ce soit une règle intéressante à suivre, elle n’a rien d’obligatoire. Même Apple ne l’applique pas sur la totalité de ses icônes.

 

11. Les couleurs

iOS 10 - Couleurs - Http5000

iOs utilise des couleurs vives pour faire ressortir les boutons. Ces couleurs ont tendance à bien fonctionner autant sur un fond blanc qu’un fond noir. Gardez à l’esprit que les couleurs doivent être utilisées à bon escient et avec modération. On les utilisera principalement pour les call-to-actions et les zones de branding minimales, telle que la barre de navigation.
Pour schématiser, seulement 10 à 20% de votre design doit avoir des couleurs. Autrement, les couleurs entreront en compétition avec le contenu.

iOS utilise souvent des couleurs neutres pour les fonds et zones de menus. Un texte noir bien contrasté sur un fond blanc permet de rendre la lecture confortable. Enfin, un bleu pastel permet de faire ressortir les boutons et liens.

iOS 10 - Couleurs d'écran - Http5000

 

12. Boutons et tailles de police

iOS 10 - Tailles du design - Http5000

La règle générale est 44pt pour les boutons, 12pt pour le petit texte, 17pt pour le corps de texte et 20pt+ pour les titres.

 

13. Espaces et alignements

iOS 10 - Espacement - Http5000

La règle générale est d’avoir une marge et un espacement minimum de 8pt. Cela aère suffisamment l’espace, ce qui rend l’analyse et la lecture plus simple. De plus, les éléments doivent être alignés les uns par rapport les autres et les textes doivent se positionner sur la même baseline.

 

14. La barre d’état

 

iOS 10 - Barre d'état - Http5000

Il est recommandé d’inclure la barre d’état à chaque fois que cela est possible, sinon en permanence. Les utilisateurs s’en servent pour obtenir des informations importantes telle que la qualité du signal, l’heure et la batterie. Le texte et les icônes peuvent être noirs ou blancs, mais le fond peut avoir n’importe quelle couleur et fusionner avec la barre de navigation.

 

15. La barre de navigation

iOS 10 - Barre de navigation - Http5000

La barre de navigation donne rapidement les informations sur l’écran. La partie de gauche peut servir pour placer un Retour sur l’écran précédent, l’onglet Profil ou Menu. La partie de droite est surtout utilisée pour les boutons “Ajouter” ou “Editer” par exemple.

Tout comme la barre d’état, le fond peut avoir la couleur que vous voulez et être légèrement flouté pour assurer un texte toujours lisible. Quand la barre d’état est présente, les 2 fonds peuvent fusionner.

 

16. La barre de recherche

iOS 10 - Recherche - Http5000

Quand vous proposez un contenu volumineux, permettre aux utilisateurs de le chercher textuellement est une sage décision.

 

17. La barre d’outil

iOS 10 - Barre d'outil - Http5000

Si vous avez besoin de plus de place pour vos boutons, vous pouvez ajouter une barre d’outil.

 

18. La barre d’onglets

iOS 10 - Barre d'onglets 2 - Http5000

Il s’agit du menu de navigation principal, présent sur plusieurs écrans de l’application.
Si vous n’avez que quelques items, évitez un menu Hamburger (icône représentant 3 lignes les unes sur les autres, où l’on regroupe généralement des fonctionnalités peu utilisées). Les menus qui restent visibles en permanence sont toujours utilisé plus souvent, étant donné que ce qui est apparent est toujours plus impactant que ce qui est seulement supposé.
Par ailleurs, il est recommandé d’ajouter du texte près des icônes que les internautes ne reconnaîtront pas d’emblée. C’est surtout le cas d’icônes utilisant des symboles qui ne sont pas mondialement connus et partagés.

Quand elles sont inactifs, les icônes sont généralement vides, seuls leurs contours sont visibles. Ainsi, elles attirent moins l’attention.

iOS 10 - Barre d'onglets - Http5000

 

19. Le tableau d’affichage

iOS 10 - Tableau d'affichage - Http5000

C’est un écran très répandu qui liste les contenus. La plupart des applications utilisent une vue en mode de tableau d’affichage. Car cet agencement peut être très basique autant que hautement customizés.

 

20. La liste d’aperçus

iOS 10 - Liste aperçu - Http5000

Quand vous proposez des rangées et colonnes dans une grille, vous aurez besoin de la Vue sous forme de liste d’aperçus. Offrant un visuel un peu plus recherché, cela permet de créer à peu près tout type d’agencement imaginable.

iOS 10 - Liste aperçu 2 - Http5000

Voici quelques exemples d’agencement. Les possibilités sont infinies.

 

21. Boîtes de dialogue

iOS 10 - Boite de dialogue - Http5000

La pop-up d’alerte permet de transmettre des informations capitales. Leur fréquence doit être minimale et le bouton de fermeture bien voyant.

La boîte de dialogue permet de partager du contenu (texte, image, lien) par Airdrop, les favoris et marque-pages, Mail, Facebook ou encore Twitter entre autres. L’apparence ne peut être customisée, mais les options, si.

iOS 10 - Boite de dialogue 2 - Http5000

Quand l’information présentée est assez longue, vous pouvez ajouter un volet qui prendra toute la taille de l’écran. Là encore, il faut que l’action soit facile à annuler.

iOS 10 - Boite de dialogue 3 - Http5000

 

22. Les claviers

iOS 10 - Claviers - Http5000

Le clavier permet d’écrire dans les champs de texte tels que la recherche, le chat ou le login notamment. C’est un aspect customisable à bien des niveaux, autant pour les champs URL, Email, Numéro de téléphone ou même les Émoticônes. Vous pouvez choisir entre les thèmes clairs et sombres. De même, vous pouvez changer le nom du bouton d’action(“Retour” étant le nom par défaut).

 

23. Le contrôle Date and Time Picker

iOS 10 - Date and Time Picker - Http5000

Quand vous devez moduler plusieurs options à choisir, vous pouvez utiliser le contrôle Date and Time Picker. Comme son nom l’indique, il est particulièrement utile pour les dates, qui requièrent le contrôle de 3 champs à la fois.

 

24. Le contrôle segmenté

iOS 10 - Controle segmenté - Http5000

Quand la barre d’onglets est présente sur toutes les sections principales, le contrôle segmenté est utilisé pour les écrans secondaires.

 

25. Sliders

iOS 10 - Sliders - Http5000

Les sliders sont des panneaux de contrôle interactifs moins précis, mais très utile pour l’ajustement de paramètres comme le son, la luminosité ou la barre de progression d’une vidéo.

 

26. La barre de progression

iOS 10 - barre de progression - Http5000

La barre de progression, comme son nom l’indique, montre la progression d’une action. Par exemple, elle peut montrer l’avancée du chargement d’une page.
A noter que la hauteur est personnalisable.

 

27. Switch

iOS 10 - Switch - Http5000

Le switch permet de passer facilement d’actif à inactif. A ne pas utiliser pour autre chose que du on/off.

 

28. Stepper

iOS 10 - Stepper - Http5000

Le stepper est plus lent mais plus précis que le slider. Il permet aux utilisateurs d’augmenter ou réduire une valeur d’un degré à la fois. Les contours et couleurs sont personnalisables.

 

29. Icônes iOS

iOS 10 - Icônes iOS - Http5000

Il s’agit des icônes originelles d’iOS. Étant grandement utilisées, elles sont reconnues instantanément par les utilisateurs. Les utiliser pour des actions qui ne sont pas leurs actions d’origine perdra les utilisateurs. Ainsi, il est important de savoir leur usage sur iOS.

Quand vous designez ou faites designer une nouvelle icône qui ne correspond pas à celles-ci, il est important de connaître les symboles qui font sens pour tous. Dans le doute, il est toujours préférable d’accompagner vos icônes d’un court texte de 10pt ou plus.

 

(Photos et traduction libre de designcode)

Ceci peut vous intéresser

Études : Les marques et les attentes des consommateurs

Études : Les marques et les attentes des consommateurs

Il y aura un avant et un après confinement.. Les Français aspirent à de nombreux changements politiques, économiques, concernant l’écologie ou même dans leur manière de consommer. Kantar et Trust Barometer Edelman mettent en avant les attentes des Français vis à vis des marques et des entreprises. Faisons le bilan

À quoi ça sert un VPN sur iPhone, et comment en installer-un ?

À quoi ça sert un VPN sur iPhone, et comment en installer-un ?

ous le savez certainement, mais l’iPhone fait partie des téléphones les plus sécurisés au monde (et c’est d’ailleurs l’un de ses arguments de vente n°1). Il suffit de voir les efforts employés récemment par le FBI pour tenter...

http5000 - Agence de communication lyonnaise depuis 2000

Restons en contact

Des infos pertinentes, des idées, pas de spam, laissez nous votre mail.

Inscription confirmée, merci!

Pin It on Pinterest