APPLICATIONS IOS / APPLE WATCH
COMPOSANTS ET RECOMMANDATIONS UI
SPLASHSCREEN
Point d’entrée obligatoire dans l’app

• Court : pas d’infos essentielles

• Ne pas le prolonger plus que
néc...
MENU LATÉRAL
Rien n’existe de manière native !
Au choix :
• Faire un menu original (librairie)

• Se calquer sur la versio...
LES ONGLETS
Version native : la Tab Bar
• En bas de l’écran
• Max 5 items (4 conseillés)
• Icône et/ou texte
• Le dernier ...
BARRE DE
NAVIGATION
• En haut de l’écran
• Fond monochrome, opaque ou non
• Bouton de gauche : Back
• 2 boutons de droite ...
DIALOGUES ET
NAVIGATION
2 types « naturels » de transition :
• Push (navigation classique)
• Modale (ouverture « par dessu...
DIALOGUES ET
NAVIGATION
Bonnes pratiques concernant les alertes :
• Information : non critique, ne pas
bloquer la navigati...
DIALOGUES ET
NAVIGATION
La popover :
• Sur iPad, à partir d’un bouton avec un
point d’ancrage
• Sur iPhone, à partir du ba...
LES BOUTONS
• Nom/Image explicite : l’utilisateur
ne doit pas se demander à quoi
sert le bouton
• La taille du bouton doit...
LES BOUTONS
• Dans les Navigation Bar / Tool Bar :
donner assez d’espace pour
faciliter la sélection
• Idem que pour les b...
WATCHOS 2
Les notions essentielles :
• L’Apple Watch reste une montre :
informations essentielles, interactions
légères
• ...
WATCHOS 2 : LES
NOTIFICATIONS
• 2 modes : short look et long look
• Short look : apparait quand on
approche le poignet, in...
WATCHOS 2 : LES
APERÇUS
L’aperçu est une vue permettant à
l’utilisateur d’avoir un accès rapide aux
informations essentiel...
WATCHOS 2 : LA
NAVIGATION
• Pas obligatoire !!
• 2 modes principaux, selon l’utilisation
• Navigation par pager pour des
i...
WATCHOS 2 : LE
DESIGN
• Fond noir (pour créer l’illusion d’une
absence de transition avec le bord de
l’écran)
• Alignement...
AUTEUR : NICOLAS GOOSSAERT
SOURCES : USER INTERFACE GUIDELINES (DEVELOPER.APPLE.COM)
VOUS VOULEZ FAIRE DÉVELOPPER UNE APP ...
Prochain SlideShare
Chargement dans…5
×

iOS 9 et Watch OS 2, infos et bonnes pratiques | Bewoopi

227 vues

Publié le

A l'usage des designer d'Apps, une rappel des bonnes pratiques à adopter pour une ergonomie adaptée aux guidelines et aux usages d'Apple. Quelques infos aussi sur ce qu'il est désormais possible de faire avec la Watch. Plus d'infos sur http://www.bewoopi.net

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
227
Sur SlideShare
0
Issues des intégrations
0
Intégrations
11
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

iOS 9 et Watch OS 2, infos et bonnes pratiques | Bewoopi

  1. 1. APPLICATIONS IOS / APPLE WATCH COMPOSANTS ET RECOMMANDATIONS UI
  2. 2. SPLASHSCREEN Point d’entrée obligatoire dans l’app
 • Court : pas d’infos essentielles
 • Ne pas le prolonger plus que nécessaire
 • Fond + Image et/ou texte
  3. 3. MENU LATÉRAL Rien n’existe de manière native ! Au choix : • Faire un menu original (librairie)
 • Se calquer sur la version Android
 • S’en passer et adopter une navigation plus créative
  4. 4. LES ONGLETS Version native : la Tab Bar • En bas de l’écran • Max 5 items (4 conseillés) • Icône et/ou texte • Le dernier bouton peut ouvrir un menu latéral • Couleur de sélection La version « Android-like » nécessite le passage par une librairie
  5. 5. BARRE DE NAVIGATION • En haut de l’écran • Fond monochrome, opaque ou non • Bouton de gauche : Back • 2 boutons de droite max (1 seul fortement conseillé par Apple) • Si besoin de plus : Toolbar en bas ou repenser l’ergonomie Titre centré sur l’espace disponible, Espace occupé par les boutons déterminé par l’OS
  6. 6. DIALOGUES ET NAVIGATION 2 types « naturels » de transition : • Push (navigation classique) • Modale (ouverture « par dessus ») Un écran affiché par push a un bouton Back Un écran affiché de façon modale a (ou pas) un bouton Close
  7. 7. DIALOGUES ET NAVIGATION Bonnes pratiques concernant les alertes : • Information : non critique, ne pas bloquer la navigation
 —> Toast (rien de natif) • Erreur / Confirmation : Bloquer la navigation, donner des options à l’utilisateur
 —> AlertView • Formulaire, ou input utilisateur de manière générale : nouvelle vue modale
  8. 8. DIALOGUES ET NAVIGATION La popover : • Sur iPad, à partir d’un bouton avec un point d’ancrage • Sur iPhone, à partir du bas de l’écran, en semi-transparence
  9. 9. LES BOUTONS • Nom/Image explicite : l’utilisateur ne doit pas se demander à quoi sert le bouton • La taille du bouton doit être suffisante pour un touch facile OUI NON
  10. 10. LES BOUTONS • Dans les Navigation Bar / Tool Bar : donner assez d’espace pour faciliter la sélection • Idem que pour les boutons dans l’écran : le bouton doit être suffisamment grand pour que le clic soit facile OUI NON
  11. 11. WATCHOS 2 Les notions essentielles : • L’Apple Watch reste une montre : informations essentielles, interactions légères • Digital Crown : la molette sert à scroller ou à sélectionner un élément d’un picker • Force touch : un appui fort sur l’écran ouvre le menu associé
  12. 12. WATCHOS 2 : LES NOTIFICATIONS • 2 modes : short look et long look • Short look : apparait quand on approche le poignet, informations minimales, design par défaut • Long look : apparait au touch ou après un moment, customisable, peut comporter des interactions
  13. 13. WATCHOS 2 : LES APERÇUS L’aperçu est une vue permettant à l’utilisateur d’avoir un accès rapide aux informations essentielles de son app Pour qu’il soit intéressant : • Pertinent par rapport au contexte • Contenu concis et facile à lire • Cohérent par rapport aux autres Un utilisateur choisit quels aperçus il veut afficher sur sa montre !
  14. 14. WATCHOS 2 : LA NAVIGATION • Pas obligatoire !! • 2 modes principaux, selon l’utilisation • Navigation par pager pour des informations non liées • Navigation hiérarchique pour des informations liste - détail Pager Hiérarchique
  15. 15. WATCHOS 2 : LE DESIGN • Fond noir (pour créer l’illusion d’une absence de transition avec le bord de l’écran) • Alignement à gauche pour la lisibilité • Utiliser le scroll intelligemment pour ne pas afficher trop d’informations sur une taille trop réduite • Afficher le même contenu sur les 2 tailles d’écran
  16. 16. AUTEUR : NICOLAS GOOSSAERT SOURCES : USER INTERFACE GUIDELINES (DEVELOPER.APPLE.COM) VOUS VOULEZ FAIRE DÉVELOPPER UNE APP IOS ? HTTP://WWW.BEWOOPI.NET CONTACT@BEWOOPI.NET

×