Share
Ce que vous allez créerSi vous concevez un appareil portable pour la première fois, vous remarquerez qu'il existe certaines différences essentielles par rapport à la conception d'un produit pour un smartphone ou un ordinateur de bureau..
Dans cette astuce, je résume certaines de ces différences tout en vous expliquant comment concevoir des applications pour Apple Watch..
Nous allons concevoir un aperçu pour Apple Watch. Pour rappel, un coup d’œil est un seul écran sans éléments interactifs. Il affiche simplement des informations et peut être exploité pour ouvrir l'application Apple Watch correspondante..
Un utilisateur peut accéder à un regard en balayant l'écran du visage de la montre. Un utilisateur peut également choisir les regards qu'il souhaite voir sur son Apple Watch. C'est opt-in, ce qui signifie qu'un utilisateur doit sélectionner explicitement les regards qu'il souhaite voir sur son appareil. C'est un moyen simple et élégant d'afficher des informations sur leurs applications préférées..
Ce qui différencie un coup d’œil de l’application elle-même, c’est qu’un coup d’œil est un seul écran et, par conséquent, se charge plus rapidement. Il est également plus facile et rapide d'accéder aux regards que l'application Apple Watch correspondante..
Concevoir pour Apple Watch signifie que vous devez garder certaines directives à l'esprit. Ceci est similaire à la conception pour iOS ou Android. Vous pouvez en apprendre plus sur les directives de conception dans le didacticiel précédent de cette série..
Imaginez une application Apple Watch dans laquelle l'utilisateur peut facilement suivre son budget. Dans notre regard, nous voulons afficher un Budget quotidien tout en affichant le montant que l'utilisateur a économisé jusqu'à présent ce mois-ci. En fonction de la façon dont quelqu'un dépense de l'argent pendant la journée, le budget quotidien diminue.
Ouvrez Sketch et insérez une nouvelle planche de travail. La liste de droite montre les différents plans de travail prédéfinis parmi lesquels vous pouvez choisir. Sous iOS devices, sélectionnez Montre Apple 42mm.
Cliquez sur la planche graphique dans votre liste de calques et utilisez le panneau de droite pour sélectionner une couleur d'arrière-plan. Choisissez le noir (# 000000) comme couleur de fond. Le noir est la couleur de fond par défaut des applications Apple Watch..
En raison de la lunette noire de l'Apple Watch, nous pouvons utiliser le tableau de bord bord à bord dans notre conception. Contrairement à une application typique ou à une conception Web, il n'est pas nécessaire d'ajouter une marge à gauche ou à droite de votre conception..
Ajouter un titre, "Budget", pour que l'utilisateur sache de quel regard il regarde. SF Compact est la police par défaut utilisée sur Apple Watch. Pour en savoir plus sur la typographie pour Apple Watch, consultez le site Web des développeurs d’Apple. Pour le cadran de la montre de 42 mm, il est préférable de s'en tenir à 32 points (pour les conceptions à 72 ppp). Le texte doit être aligné dans le coin supérieur gauche.
Enfin, changez la couleur du titre en gris clair (# a2a5ae) pour réduire le contraste du noir et du blanc dans le dessin. Le blanc devrait être réservé aux informations que nous voulons distinguer, telles que le budget restant..
La fonctionnalité la plus importante du regard consiste à afficher le budget quotidien de l'utilisateur. Nous pourrions présenter ceci textuellement, mais rendons le design plus intéressant. Je voudrais concevoir un graphique circulaire, qui diminue lorsque l'utilisateur dépense de l'argent.
Tout d’abord, utilisez l’outil ovale pour créer un cercle de taille 220 x 220. Centrez la forme dans la planche à dessin et définissez la largeur de la bordure sur 24. Cliquez sur le bouton réglages icône en regard du titre de la bordure pour ouvrir le menu des paramètres de la bordure. Ensemble Écart à 1000 et Tiret à 138. Enfin, sélectionnez le rond prend fin. Bien fait, vous avez créé un anneau de bordure.
Dans le menu des paramètres de la bordure, vous pouvez créer un anneau de bordure..Désactiver le remplir la couleur du cercle et changer la frontière colorer selon un gradient angulaire de votre choix. Vous pouvez utiliser le tourner fonction pour déplacer la forme dans l'écran, mais cela n'est pas nécessaire pour notre conception de regard.
Un dégradé angulaire est excellent pour colorer un anneau de bordure.Cliquez avec le bouton droit sur l'ovale dans votre liste de calques et dupliquez l'élément. Ouvrez les paramètres de bordure de la forme dupliquée et définissez Tiret à 690. Déplacez le calque dupliqué en dessous du calque ovale d'origine et jouez avec les couleurs du dégradé et l'opacité pour compléter le graphique. Dans l'exemple ci-dessous, j'ai utilisé un dégradé angulaire gris-noir avec une opacité réduite..
Ensuite, ajoutez un calque de texte avec la copie "14,00 $ restants". Définissez la taille de la police de "$ 14,00" sur 38 points et la taille de la police de "restant" sur 26 pt. Centrez le texte dans la planche. Notre regard se rapproche lentement.
Enfin, nous devons afficher le montant que l’utilisateur a économisé jusqu’à présent au cours de ce mois. Nous allons utiliser la partie inférieure du regard pour ajouter cette information. Comme nous avons déjà un élément graphique au centre du regard, nous utiliserons du texte pour afficher le montant que l'utilisateur a enregistré. Cela créera un regard bien équilibré et informatif.
Créer un nouveau calque de texte et utiliser SF Compact comme la police avec un lumière poids de la police. Nous allons créer un texte de pied de page. Sélectionnez une taille de police de 20 points et définissez le texte comme suit: "265,00 $ enregistrés ce mois-ci". Alignez le texte en bas à gauche de la planche.
Lors de la conception, l’important est que la pagination apparaisse au bas de votre conception. Un utilisateur peut passer d'un regard à l'autre de différentes applications. Déplaçons le texte de pied de page de 40 points vers le haut pour ajouter une marge en bas.
Comme nous avons déplacé le texte de pied de page vers le haut, la section du budget quotidien est déconcentrée. Déplacez le groupe contenant le texte et les différents ovales de 20 points. Et nous avons fini.
Avec quelques formes simples et astuces, nous avons créé un regard élégant Apple Watch. Si vous souhaitez en savoir plus sur la création de produits pour Apple Watch, je vous recommande de lire un tutoriel sur le choix de la stratégie de produit appropriée ou sur les consignes de conception de l'Apple Watch..
Si vous avez des questions sur la conception pour l'Apple Watch, contactez-nous dans les commentaires ou sur Twitter. Merci pour votre temps.
Accentsconagua