iOS Human 

Interfaces Guidelines
Simon Dellise - iOS Developer & Integrator
Agenda
• UI Elements
• UI Bars
• UI Views
• UI Controls
• Visual Design
• Interactions
• Other things
UI Elements
UI Bars, UI Views, UI Controls
UI Bars
Status, Navigation, Search, Tab & Tool Bars
Status Bar
• Coordonner la couleur de fond Par
défaut, le fond est transparent et le texte
noir.
• Le texte est noir ou bl...
Navigation Bar
• Y inclure soit
• le titre de la vue en cours
• des onglets de type "segmented controls"
• quelques contrô...
Search Bar
• À utiliser sur les listes soit de façon
• proéminente (screenshot 1)
• minimale (screenshot 2)
• Penser à tra...
Tab Bar
• Permet de switcher rapidement entre
différentes sections d’une app ayant la
même importance
• Comment les utilis...
Toolbar
• À utiliser pour afficher des actions
récurrentes pour l’utilisateur
• Comment l’utiliser ?
• Ne pas y placer des ...
UI Views
Action Sheets, Alerts, Tables, ...
Action Sheet
• Ne peut contenir que des actions
• Maximum 5 éléments (+ Annuler)
• L'élément destructif est toujours en
pr...
Alert
• Minimum 1 action, maximum 5
• Ne jamais tenter d'afficher 2 Alerts en
même temps : crash de l'application
• Ne pas ...
Table View
Plain
• Le contenu doit toujours être mis à jour
automatiquement ou offrir une possibilité
d'être rafraichi man...
Table View
Grouped
• Chaque groupe peut avoir un header
et un footer
• Pas d'indexation du contenu possible
• Noms des sec...
… and so many others
Maps, Pages, Popover, Activity Views, ...
https://developer.apple.com/ios/human-interface-guidelines/...
UI Controls
Buttons, Pickers, Switches, Segmented Controls, ...
Buttons
• 3 types de boutons :
• System Buttons
• Add Contact Button
• Detail Closure Button / Info Button
• Un bouton n'a...
Picker
• Placer les valeurs dans un ordre logique
• Le Picker peut être placé directement
sous un champ ou en bas d'une vu...
Switch
• Signifie toujours ON/OFF (pas OUI/NON)
• Il ne faut jamais décrire le switch
• Ajuster les couleurs aux couleurs d...
Segmented Controls
• À utiliser si le contenu d’une vue peut
changer selon un choix de l’utilisateur
• Comment les utilise...
… and so many others
Stepper, Slider, Labels, ...
https://developer.apple.com/ios/human-interface-guidelines/ui-controls/
Visual Design
Typography, icons & images, ...
Typography
" Use font weight, size, and color to highlight 

the most important information in your app. "
• Ne pas utilis...
Icons & images
Penser à toujours fournir toutes les bonnes tailles d'icônes et d'images !



https://developer.apple.com/i...
One more thing ...
Navigation, loaders et temps de chargement, 3D Touch, ...
Navigation
Pushed View Controller vs. Modal
Pushed View Controller
À utiliser dans un flux de navigation
classique pour pas...
Gestures
• Au possible, ne pas créer de geste spécifiques et utiliser les gestes standards : 

https://developer.apple.com/...
Loaders
& temps de chargement
• Au minimum : afficher un spinner
• Jamais d'écran blanc/statique, cela laisse
penser que l'...
3D Touch
Peek & Pop
• Utile pour prévisualiser du contenu riche
(mail, photo) ou live (video)
• Toujours autoriser les Pee...
3D Touch
Home Screen Quick Actions & Widget
Les Home Screen Quick Actions permettent à
l'utilisateur d'accéder directement...
- Steve Jobs -
« Simple can be harder than complex: You have to work hard
to get your thinking clean to make it simple. »
Prochain SlideShare
Chargement dans…5
×

[Afelio] iOS Human Interface Guidelines

1 062 vues

Publié le

Présentation des guidelines iOS pour Afelio

Publié dans : Design
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 062
Sur SlideShare
0
Issues des intégrations
0
Intégrations
207
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

[Afelio] iOS Human Interface Guidelines

  1. 1. iOS Human 
 Interfaces Guidelines Simon Dellise - iOS Developer & Integrator
  2. 2. Agenda • UI Elements • UI Bars • UI Views • UI Controls • Visual Design • Interactions • Other things
  3. 3. UI Elements UI Bars, UI Views, UI Controls
  4. 4. UI Bars Status, Navigation, Search, Tab & Tool Bars
  5. 5. Status Bar • Coordonner la couleur de fond Par défaut, le fond est transparent et le texte noir. • Le texte est noir ou blanc en fonction de la couleur décidée dans la Nav Bar • Eviter de la masquer en permanence • Sauf pour du contenu full screen temporaire (cf. app Photos)
  6. 6. Navigation Bar • Y inclure soit • le titre de la vue en cours • des onglets de type "segmented controls" • quelques contrôles rapides • Ne pas y inclure • "trop" de contrôles • le chemin de navigation, le bouton de retour joue ce rôle
  7. 7. Search Bar • À utiliser sur les listes soit de façon • proéminente (screenshot 1) • minimale (screenshot 2) • Penser à traduire le placeholder • Ne pas avoir peur de les utiliser !
  8. 8. Tab Bar • Permet de switcher rapidement entre différentes sections d’une app ayant la même importance • Comment les utiliser ? • Ne pas désactiver d’onglets • Maximum 5 items • L'utilisateur ne peut pas éditer les items • Uniquement pour la navigation :
 pour des actions, utiliser une Toolbar
  9. 9. Toolbar • À utiliser pour afficher des actions récurrentes pour l’utilisateur • Comment l’utiliser ? • Ne pas y placer des commandes peu utilisées • Ne pas y inclure de segmented ctrls • Icônes si plus de 3 éléments, sinon texte
  10. 10. UI Views Action Sheets, Alerts, Tables, ...
  11. 11. Action Sheet • Ne peut contenir que des actions • Maximum 5 éléments (+ Annuler) • L'élément destructif est toujours en premier et en rouge • Ne pas customiser cet élément !
  12. 12. Alert • Minimum 1 action, maximum 5 • Ne jamais tenter d'afficher 2 Alerts en même temps : crash de l'application • Ne pas customiser cet élément !
  13. 13. Table View Plain • Le contenu doit toujours être mis à jour automatiquement ou offrir une possibilité d'être rafraichi manuellement (pull to refresh) • Possibilité d'ajouter un header et un footer, ainsi qu'une indexation • Pas de customisation du type des flèches (hors couleur)
  14. 14. Table View Grouped • Chaque groupe peut avoir un header et un footer • Pas d'indexation du contenu possible • Noms des sections toujours en majuscules • Sert de menu ou à structurer de l’information !
  15. 15. … and so many others Maps, Pages, Popover, Activity Views, ... https://developer.apple.com/ios/human-interface-guidelines/ui-views/
  16. 16. UI Controls Buttons, Pickers, Switches, Segmented Controls, ...
  17. 17. Buttons • 3 types de boutons : • System Buttons • Add Contact Button • Detail Closure Button / Info Button • Un bouton n'a habituellement pas de fond • Fond possible pour les Call To Action (CTA) • Les intitulés sont de la responsabilité 
 UX uniquement
  18. 18. Picker • Placer les valeurs dans un ordre logique • Le Picker peut être placé directement sous un champ ou en bas d'une vue en superposition • Attention : utiliser une TableView à la place d'un Picker si grand nombre de valeurs !
  19. 19. Switch • Signifie toujours ON/OFF (pas OUI/NON) • Il ne faut jamais décrire le switch • Ajuster les couleurs aux couleurs de l'app • Pas de customisation des formes ! • À utilise uniquement dans des Tables Row • Peuvent afficher ou masquer dynamiquement d'autres éléments de la vue
  20. 20. Segmented Controls • À utiliser si le contenu d’une vue peut changer selon un choix de l’utilisateur • Comment les utiliser ? • Limiter le nombre de contrôles
 (min 2 - max 5) • Ils ont toujours la même largeur • Les couleurs doivent rester cohérentes
  21. 21. … and so many others Stepper, Slider, Labels, ... https://developer.apple.com/ios/human-interface-guidelines/ui-controls/
  22. 22. Visual Design Typography, icons & images, ...
  23. 23. Typography " Use font weight, size, and color to highlight 
 the most important information in your app. " • Ne pas utiliser de police custom, San Francisco est pensée pour fonctionner dans tous les cas. • N'utiliser qu'une seule police au sein de l'application. https://developer.apple.com/ios/human-interface-guidelines/visual-design/typography/
  24. 24. Icons & images Penser à toujours fournir toutes les bonnes tailles d'icônes et d'images !
 
 https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/ https://developer.apple.com/ios/human-interface-guidelines/graphics/custom-icons/
  25. 25. One more thing ... Navigation, loaders et temps de chargement, 3D Touch, ...
  26. 26. Navigation Pushed View Controller vs. Modal Pushed View Controller À utiliser dans un flux de navigation classique pour passer de page en page Modal À utiliser lors d’une action (ajout à un liste, paramètres, filtres, …)
  27. 27. Gestures • Au possible, ne pas créer de geste spécifiques et utiliser les gestes standards : 
 https://developer.apple.com/ios/human-interface-guidelines/interaction/gestures/ • Ne pas bloquer les gestes du système (centre de notifications, Control Center, ...) • Les gestes "custom" doivent être des suppléments et non des remplacement aux gestes du système
  28. 28. Loaders & temps de chargement • Au minimum : afficher un spinner • Jamais d'écran blanc/statique, cela laisse penser que l'application freeze • Au possible, afficher une barre de progression en temps réel • Divertir ou éduquer l'utilisateur avec des informations, trucs, astuces permet de masquer le temps de chargement
  29. 29. 3D Touch Peek & Pop • Utile pour prévisualiser du contenu riche (mail, photo) ou live (video) • Toujours autoriser les Peek à être Poppés • Ne pas lancer de Peek à partir d'un bouton mais bien de l'élément directement • Toujours prévoir un autre moyen d'accéder à l'élément que le Peek & Pop
  30. 30. 3D Touch Home Screen Quick Actions & Widget Les Home Screen Quick Actions permettent à l'utilisateur d'accéder directement depuis son Home Screen à des fonctions principales de l'application. • À n'utiliser que pour accéder à des fonctions importantes (pas de paramètres par exemple) • Ne pas rendre les quick-actions dynamiques si le pourquoi n'est pas clair pour l'utilisateur (en fonction de l'heure, de sa position, ...) • Ce n'est pas une alternative à une navigation mal pensée !
  31. 31. - Steve Jobs - « Simple can be harder than complex: You have to work hard to get your thinking clean to make it simple. »

×