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

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.

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.

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 à gauche remplace la barre d’onglets habituelle.Lecteur vidéo

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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

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

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 .

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 .

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 .

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

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.

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.

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).

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 .

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

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.

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.

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

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.

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)