Share
Avec le lancement prochain du produit le plus récent et le plus brillant d'Apple, l'Apple Watch (err, WATCH), de nombreux concepteurs sont impatients de découvrir le nouveau jouet de Cupertino. Il existe de nouveaux moyens d'interagir avec l'appareil. comme Apple forcer le menu tactile et couronne numérique, ainsi que de nombreux éléments d'interface utilisateur que vous connaissez peut-être déjà, comme les boutons, les styles de texte et les commutateurs, oh mon!
Avant d'explorer les éléments d'interface utilisateur présents sur l'Apple Watch, abordons d'abord certaines des bases à prendre en compte lors de la conception de ce nouvel appareil. Au moment de la rédaction de cet article, la Apple Watch n’a pas encore été publiée. Si vous avez des conseils, des remarques ou des corrections, merci de le faire savoir sur Twitter ou dans les commentaires..
L'écran d'accueil déjà familier de l'Apple WatchPremièrement, l'Apple Watch est physiquement liée à l'utilisateur. Tenez compte de cette connexion et de la manière dont les utilisateurs se sentiront concernés lors de leurs interactions avec l'interface utilisateur..
Selon vous, quelles sont les intentions d'Apple vis-à-vis des émotions de leurs utilisateurs avec l'Apple Watch? Si cette publicité est conforme à la stratégie de contenu d'Apple, les émotions qu'elle véhicule sont le bonheur, l'excitation, l'émerveillement et l'émerveillement, tout en transmettant un sentiment de personnalisation grâce à l'utilisation de bracelets, de couleurs et de visages différents. Comment pourriez-vous transmettre ces mêmes sentiments avec la conception de votre application de montre? En quoi le fait que la montre soit attachée à l'utilisateur modifie-t-il le sentiment que celui-ci pourrait avoir sur la conception de votre application??
L'Apple Watch n'est pas aussi puissante que votre nouveau smartphone. Lorsque je conçois pour le Web et le mobile, je suis parfois coupable d'utiliser une belle image par rapport à une plus petite. Dans le cas de l'Apple Watch, il est rappelé de garder le moins de poids possible, car ces kilo-octets supplémentaires font vraiment la différence..
Les appareils les plus médiocres du Web (téléphones bas de gamme) ont des caractéristiques similaires à celles des nouvelles technologies les plus cools (montres intelligentes). Concevoir pour tous, toujours.
- Todd Parker (@toddmparker) 19 mars 2015
Les utilisateurs ne veulent pas d'une expérience lente et lente. L'utilisation d'images et d'animations plus grandes créera non seulement une expérience utilisateur médiocre, mais elle entraînera aussi probablement le rejet de votre application lorsque le moment sera venu de la soumettre à Apple..
Tous les développeurs iOS #applewatch qui ont approuvé des applications utilisant de nombreuses animations - la mienne en utilise beaucoup et s'inquiète du rejet https://t.co/5tmnBY3Qm4
- Henry Ton (@archtrainer) 3 avril 2015
Demandez-vous: “Mes animations sont-elles vraiment nécessaires?” Les animations sont mauvaises si elles provoquent un retard, quelles que soient leurs qualités d'amélioration. N'oubliez pas que vous construisez pour un ordinateur la taille d'un timbre-poste qui doit également transmettre sans fil les données du téléphone. Il existe un goulot d'étranglement.
Imaginez que vous construisez un site Web au début des années 90 qui doit transférer ses informations via un modem de 14,4 Ko à un utilisateur disposant d’un ordinateur doté d’un processeur 386 et de 2 Mo de RAM. Vous ne voudriez pas utiliser des polices personnalisées, des animations et de grandes bibliothèques JavaScript dans cette situation, n'est-ce pas? Gardez les choses légères. Construisez pour la vitesse et respectez le temps de vos utilisateurs. Résistez à l'envie d'éblouir. Gardez les interactions significatives. N'utilisez pas d'animations inutiles. Boire beaucoup d'eau. Soyez gentil et respectueux envers les autres. Écoute ta mère.
«Si vous mesurez les interactions avec votre application iOS en quelques minutes, vous pouvez vous attendre à ce que les interactions avec votre application WatchKit soient mesurées en quelques secondes. Alors gardez les interactions brèveset interfaces simples. »- Instructions d'interface utilisateur Apple Watch
L'utilisation de la couleur et de la typographie est importante dans la stratégie de marque de votre application, mais vous devez garder à l'esprit certains points essentiels..
"La couleur aide à assurer la continuité visuelle et la stratégie de marque de votre application." - Consignes relatives aux interfaces utilisateur Apple Watch
Bien sûr, utilisez des polices personnalisées, mais sachez que la police système a été conçue pour fonctionner correctement sur ce nouveau périphérique..
«Avant tout, le texte doit être lisible. Si les utilisateurs ne peuvent pas lire les mots dans votre application, peu importe la beauté de la typographie. »- Consignes relatives aux interfaces utilisateur Apple Watch
Les avantages de la police système (San Francisco) incluent:
Les styles de texte sont des descriptions sémantiques des utilisations prévues pour vos polices. Les exemples sont des choses comme Headline, Body etc. Vous connaissez probablement les équivalents HTML de
etc. Si vous utilisez les styles de texte intégrés, vous bénéficiez d'une prise en charge gratuite de Dynamic Type qui répond automatiquement aux préférences d'accessibilité des utilisateurs. Si vous utilisez des polices personnalisées, vous devez effectuer quelques travaux pour adopter la fonctionnalité..
L'Apple Watch est évidemment plus petite qu'un téléphone intelligent. Tous les espaces disponibles doivent être utilisés de manière intelligente pour rendre les interactions que vos utilisateurs rendront les plus agréables possibles. Gardez vos boutons gros pour pouvoir interagir facilement avec eux. Envisagez différentes manières d'utiliser le menu tactile forcé pour des options supplémentaires. Résistez à la tentation d'afficher votre logo dans l'application. Il existe d'autres moyens de personnaliser votre application en utilisant des couleurs et des images significatives et contextuelles..
«L'espace disponible sur Apple Watch est limité et chaque occurrence d'un logo réduit l'espace du contenu que les utilisateurs souhaitent voir.» - Instructions d'interface utilisateur Apple Watch
Comparaison de la taille d'écran relative iOSL'Apple Watch a un cadre sur les bords qui ajoute un rembourrage physique à vos conceptions. Vous n'avez donc pas besoin d'ajouter de marges aux bords de vos écrans.
a) écran actuel et b) lunette en verre Cela semble un peu étrange au début lors du développement dans Xcode, car vous ne verrez pas ce remplissage sur les bords, mais gardez-le à l'esprit pour vos conceptions:
Les applications affichent la même interface sur les deux tailles de l’Apple Watch, (38mm et 42mm) Ainsi, en utilisant des unités relatives, vous pouvez permettre à vos objets de croître et de se réduire pour occuper l’espace disponible sur les deux tailles. L’écran est toujours en mode portrait: la hauteur est supérieure à la largeur.
| Taille de l'appareil | Largeur (en pixels) | Hauteur (en pixels) |
|---|---|---|
| 38mm | 272 | 340 |
| 42mm | 312 | 390 |
Dans les applications WatchKit, vous rencontrerez deux modèles de navigation complètement différents:
«Hiérarchique» est un modèle de navigation qui comprend une liste de défilement verticale permettant à l’utilisateur de faire une sélection (en appuyant sur) par écran jusqu’à ce qu’ils atteignent la destination souhaitée..
"Basé sur la page" est un style de navigation à défilement horizontal qui indique la page actuelle par une série de points au bas de l'écran de veille..
Vous ne pouvez pas combiner ces deux systèmes dans la même application, mais vous pouvez afficher des «feuilles modales», quel que soit votre type de navigation..
Vous pouvez considérer une feuille modale comme une carte qui donne à l’utilisateur un moyen de mener à bien une tâche. Les feuilles modales contiennent un seul écran ou plusieurs écrans affichés dans une mise en page par page. La seule différence entre les deux réside dans l'ajout d'indicateurs de points au bas de l'interface basée sur les pages..
Notez les points de navigation sur la deuxième imageN'ajoutez pas de bouton de fermeture à votre feuille modale, car il y en a un en haut à gauche de l'écran par défaut. Il est toujours blanc, bien que vous puissiez changer le texte de Fermer à Annuler ou quelque chose d'autre pour ajouter plus de sens. Un utilisateur peut également fermer une feuille modale en faisant glisser son doigt depuis la gauche de l'écran..
Tous les boutons que vous ajoutez sur vos feuilles modales doivent exécuter l’action pour laquelle ils ont été conçus. et fermez la feuille de modal pour que l'utilisateur n'ait pas à effectuer cette étape supplémentaire. Apple suggère de ne pas ajouter une deuxième interface modale à partir de l'interface initiale. Si vous le faites, cela pourrait entraîner un rejet lors de la soumission de l'application. Si Apple met en garde contre quelque chose, il est généralement préférable d'écouter, sauf si vous avez une très bonne raison de ne pas.
Là peut être plus de moyens pour un utilisateur d'interagir avec votre application dans les générations futures (telles que le multi-touch et les nouveaux gestes), mais pour l'instant ce sont les seuls moyens.
Apple décrit l’interface Glance comme un «moyen supplémentaire pour l’utilisateur de visualiser les informations importantes de votre application». Pensez aux informations dont vous pourriez avoir besoin rapidement sur un seul écran, comme l'heure. Votre application dispose-t-elle d'informations que l'utilisateur voudra consulter fréquemment? Envisagez de créer un «regard» pour afficher cette information..
Les regards sont construits à partir d'une série de modèles prédéfinis pour la moitié supérieure et inférieure de l'écran. Les regards ne peuvent pas être consultés par l'utilisateur et ouvriront l'application sur l'écran approprié lorsque l'utilisateur en tapera un. Les regards sont facultatifs et ne sont pas obligatoires.
Les groupes sont des conteneurs d'objets dans votre application, vous pouvez les considérer comme un peu comme des div en HTML. Les groupes ont un remplissage par défaut que vous pouvez modifier ou supprimer si vous le souhaitez. Ils n'ont pas d'apparence par défaut, mais possèdent des attributs permettant de définir la position, le rayon, la taille, les marges et l'arrière-plan. Vous pouvez définir un groupe pour mettre en forme les éléments horizontalement ou verticalement et vous pouvez imbriquer des groupes dans d'autres groupes pour créer des mises en page plus sophistiquées..
Voici quelques-uns des modèles de groupe supérieur et inférieur pour l'écran de survol:
Modèles de groupe supérieurs
Quelques-uns des nombreux modèles de groupes inférieursLes notifications sont présentées à l'utilisateur de deux manières différentes: un aperçu rapide et un aperçu détaillé..
Celles-ci indiquent à l'utilisateur quelle application les notifie et donne un titre. Si l'utilisateur abaisse rapidement son poignet ou ne tape pas, la notification est rejetée. L'utilisateur n'a pas à interagir manuellement avec la notification pour la supprimer. La conception de la notification abrégée est basée sur un modèle et contient l’icône de l’application, son nom et une chaîne de titre. Gardez vos chaînes de titre aussi courtes et significatives que possible.
Ceux-ci fournissent plus de détails sur la notification et sont plus personnalisables dans leur apparence. La structure de base est la même pour toutes les applications et comprend un volet en haut qui affiche l'icône et le nom de l'application, le contenu personnalisé de votre application, jusqu'à quatre boutons d'action et, enfin, un bouton de rejet en bas..
Consacrés à ces bases, explorons les différents éléments de l'interface utilisateur de l'Apple Watch..
"Lors de la conception des éléments graphiques de votre application, rappelez-vous que chaque élément personnalisé doit bien paraître et fonctionner correctement, mais qu'il doit également ressembler à celui des autres éléments de l'application, qu'ils soient standard ou standard." - Apple Observez les directives d'interface humaine
Les animations dynamiques doivent être transférées depuis l'iPhone, ce qui entraîne un retard inévitable. Une application de surveillance peut être rejetée en raison de la grande dépendance à l'égard des animations. Utilisez-les uniquement pour communiquer l'état et informer l'utilisateur. L'utilisation gratuite d'animations n'est pas recommandée (même si l'animation est celle d'un bébé dansant hilarante et réaliste). Stockez des animations pré-rendues à l'aide d'une séquence d'images statiques de votre ensemble d'applications WatchKit afin qu'elles puissent être présentées rapidement à l'utilisateur au lieu d'être transférées depuis le téléphone..
Utilisez des icônes au lieu de texte pour les boutons placés côte à côte et ne jamais en avoir plus de trois (Apple indique dans un cas de ne pas utiliser plus de deux boutons l'un à côté de l'autre, et dans un autre cas, de ne pas utiliser plus de Trois.)
Cela peut sembler évident, mais rappelez-vous que les écrans de la montre sont petits, veillez à ce que vos boutons soient aussi grands que possible. Les utilisateurs ne doivent pas avoir à appuyer sur un bouton. Les boutons peuvent avoir une image ou une couleur définie pour l'arrière-plan, ainsi qu'une couleur différente pour le texte. Ils peuvent contenir une étiquette ou un objet de groupe et présenter des angles arrondis (le rayon par défaut étant de 6 points)..
Le menu Forcer tactile affiche le menu contextuel facultatif de l'écran actuel (s'il en existe un) avec un maximum de quatre actions. Il affichera les actions de haut en bas, de gauche à droite, en fonction de l'ordre dans lequel elles sont ajoutées au menu. Ils ne défilent pas.
Les actions de menu (boutons) nécessitent une image et une étiquette. L'image doit être un dessin au trait et une couleur unique avec un arrière-plan transparent. Utilisez des épaisseurs de ligne adaptées à la taille du périphérique et à la complexité de l'icône, entre 4 et 9 pixels selon Apple..
N'oubliez pas le menu contextuel Force Touch, car il s'agit d'un moyen nouveau et excitant d'interagir avec l'appareil. Au lieu d’ajouter des boutons supplémentaires à votre interface, envisagez d’utiliser le menu contextuel Force Touch..
Les icônes sont des cercles png. Vous pouvez les créer en tant que couleurs indexées pour économiser de l'espace, 24 bits et aucune transparence. Les icônes ne contiennent pas de texte sur l'écran d'accueil de la montre.
Téléchargez ce modèle d'icône Apple Watch pour l'utiliser dans vos propres projets..
Tailles des icônes pour une application WatchKit sur Apple Watch:
| Atout | Montre 38mm (en pixels) | Montre 42mm (en pixels) |
|---|---|---|
| Icône du centre de notification | 48 x 48 | 55 x 55 |
| Icône de notification de longue durée | 80 x 80 | 88 x 88 |
| Icône de l'écran d'accueil | 80 x 80 | 80 x 80 |
| Icône Short-Look | 172 x 172 | 196 x 196 |
Tailles des icônes pour l’application Apple Watch sur iPhone:
| Atout | @ 2x | @ 3x |
|---|---|---|
| Icône de l'application | 58 x 58 | 87 x 87 |
Utilisez une image pour toutes les tailles d'écran. La vitesse et l'efficacité sont extrêmement importantes. Compressez donc le plus possible vos images. Essayez d’enregistrer vos pngs avec des couleurs indexées sur un fond noir uni plutôt que sur un fond transparent. Créer tous les éléments d’image sous forme de ressources @ 2x; il n'est pas nécessaire de créer des images non-rétines.
Compressez vos pngs avec des outils comme tinypng, pngout et pngcrush. ImageOptim est un excellent utilitaire gratuit pour les utilisateurs de Mac.
Les cartes sont des captures d'écran statiques d'un lieu et ne sont pas interactives. En tapant sur une carte, l'utilisateur accède à l'application cartographique..
Une étiquette est une manière élégante de dire «une chaîne de texte statique». Il ne permet pas d'interaction directe avec l'utilisateur, même s'il peut être mis à jour par programme et sur plusieurs lignes..
Le séparateur est un élément d’interface utilisateur simple mais précieux: une ligne pour séparer le contenu.
Les curseurs permettent aux utilisateurs de faire des ajustements en tapotant les images à gauche et à droite. Si vous ne fournissez pas d'images, les valeurs par défaut sont un plus (+) et un moins (-).
Les commutateurs permettent à l'utilisateur de spécifier l'une des deux options. Oui ou non, oui ou non, etc. Stylistiquement, ils vous seront familiers depuis iOS et ils comporteront toujours une étiquette..
Un tableau présente des lignes de données dans une colonne unique que l'utilisateur peut faire défiler verticalement. Conservez les tableaux de moins de 20 rangées, car il est difficile de faire défiler plus de résultats. Si vous avez plus de 20 lignes, vous pouvez donner à l'utilisateur la possibilité d'en charger plus. Les tables sont redimensionnées dynamiquement en fonction du nombre de lignes qu'elles contiennent. En conséquence, les tables ignorent les restrictions de hauteur imposées par les groupes. Apple recommande de ne pas incorporer de tables dans des groupes.
Apple's Watch est une nouvelle plate-forme passionnante qui continuera d'évoluer à mesure que les concepteurs et les développeurs y jouent et créent de nouvelles expériences étonnantes. Les idées associées à un appareil connecté à l'utilisateur et pouvant collecter la fréquence cardiaque et d'autres informations continueront d'évoluer. Si vous avez de nouvelles idées sur la meilleure façon de travailler avec et créer de nouvelles interactions intéressantes avec ces systèmes, faites-le nous savoir.!
Accentsconagua