Share
Ce que vous allez créerDans ce tutoriel, je vais vous apprendre à concevoir une application de mise en forme iOS simple et facile à utiliser pour suivre la course à pied et le cyclisme en extérieur. Outre l'application iOS, je vais également vous donner un exemple de conception pour l'interface Apple Watch..
À la fin de ce didacticiel, vous pourrez concevoir une application iOS avec différents écrans et vues dans Sketch. Nous allons utiliser quelques techniques de base et intermédiaires dans Sketch, alors commençons!
Vous aurez besoin de ces atouts pour suivre:
Avant de commencer, je dois souligner que ce concept est entièrement théorique. Dans le cas d'un projet réel, cela nécessiterait une analyse beaucoup plus approfondie du comportement du marché et des utilisateurs, avant que nous puissions transformer cela en une application mobile réelle et utilisable. Je fais de la course à pied et du vélo régulièrement depuis quatre ans. J'ai donc créé ce concept pour montrer à quoi ressemblerait une application de mise en forme. mon la perspective.
Nous utilisons Sketch, une application de conception créée à l'origine pour la conception d'interfaces. Elle constitue aujourd'hui le moyen le plus rapide et le plus simple de concevoir pour iOS..
Après avoir ouvert Sketch, sélectionnons le Artboard (A) option dans le Insérer menu.
Sur le panneau latéral gauche, je vous recommande de choisir l'iPhone 6 dimensions, mais si vous avez un iPhone différent, vous constaterez qu'il est préférable de choisir celui-ci. Cela est important, car avec l’aide de Sketch Mirror, nous pouvons immédiatement visualiser notre travail, en temps réel sur notre appareil iOS, sans exporter ni transférer d’images. Sketch Mirror est un élément crucial de mon processus de conception, car il me permet de voir et de ressentir le résultat final de mon travail en quelques secondes..
Pour activer Sketch Mirror, vous devez télécharger l'application Sketch Mirror depuis l'App Store, puis cliquer sur l'icône. Miroir Icône dans Sketch (assurez-vous que vos appareils sont sur le même réseau Wi-Fi ou connectés via un câble USB).
Depuis l'introduction de l'iPhone 6 et 6 Plus, il est presque impossible d'utiliser le bouton de navigation caché dans le coin supérieur gauche, car la plupart des utilisateurs ne pourront pas l'atteindre d'une seule main. Pour cette raison, j'ai placé la navigation principale au bas de l'écran. toujours visible et facilement accessible.
Créons un 100px grand rectangle, pleine largeur, au bas de l'écran.
Divisons maintenant ce rectangle pour obtenir cinq rectangles égaux, dans lesquels nous pourrons placer les icônes de navigation plus tard. Je vous recommande de donner à chaque rectangle une couleur légèrement différente afin de bien voir les bordures de chacun.
Créons un autre 50x50px carré pour les icônes. Ci-dessous, nous pouvons ajouter les étiquettes pour les différents écrans: Activités, Défis, GO, Amis et Profil. Pour ces étiquettes, je règle Avenir Next Regular avec une taille de police de 24px et une hauteur de ligne de 24px.
Nous pouvons maintenant placer nos icônes dans ces petits carrés. Assurez-vous que chaque icône mesure 50 pixels de haut ou 50 pixels de large. Pour notre icône de profil, créons un cercle de 50x50 pixels avec notre Outil ovale (O) et sélectionnez remplissage d'image sur le Panneau de remplissage.
Masquer les rectangles guides en cliquant sur la petite icône représentant un œil en regard des calques.
Pour le fond de notre barre d’onglet, j’ai choisi un blanc #FFFFFF couleur avec 70% opacité et 8px flou d'arrière-plan. J'ai aussi ajouté un 1px # B4B4B4 aligner avec le Outil ligne (L) comme séparateur visuel en haut de la barre d'onglets.
Pour les icônes et les étiquettes inactives, je recommande une nuance de gris # 666666 au lieu d'un simple noir, et pour la partie active, définissons une couleur rouge vif comme # FF3B30.
La majorité de nos utilisateurs ouvriraient l'application juste avant d'être prêts à exécuter ou à exécuter un cycle. La première chose qu'ils souhaitent faire avec l'application est donc de commencer à suivre leurs séances d'entraînement. C’est la raison pour laquelle nous commençons par concevoir l’écran GO, permettant ainsi à l’utilisateur de commencer immédiatement sa formation..
Avant toute activité de plein air, je vérifie toujours la météo à l'avance, afin de savoir à quoi m'attendre, notamment la force du vent et l'heure du coucher du soleil. À mon avis, ces détails sont vraiment essentiels si vous êtes à l'extérieur. J'ai donc conçu une section météo intégrée sur l'écran GO. De cette façon, les utilisateurs n'ont pas à vérifier une application météo à chaque fois avant d'ouvrir notre application de fitness..
Tout d’abord, nous aurons besoin d’une barre de navigation et de statut iOS blanche du modèle Sketch iOS UI Design, que vous trouverez sous Fichier> Nouveau à partir d'un modèle> Conception d'interface utilisateur iOS.
Pointe: parce que le modèle de conception d'interface utilisateur iOS Sketch nous fournit des actifs 1x dont nous avons besoin pour les convertir en résolution 2x. Cela peut être facilement fait avec le Outil d'échelle.
Pour la couleur de fond de notre barre de navigation, je voulais choisir une couleur vive et vitale, qui incitera les utilisateurs à se déplacer et à agir immédiatement. Alors j'ai choisi un appartement, mais toujours rouge vif, # FF3B30, qui est destiné à attirer votre attention la première fois que vous le voyez.
Pour l’indicateur de force GPS, j’ai utilisé un simple gradient de # 15FF00 à # 15FF00 dans un rectangle d'angle arrondi.
Sur le côté opposé, j'ai placé une icône de vélo, pour basculer facilement entre le mode course et le mode vélo.
Créons maintenant nos prévisions météo en haut de l’écran. Étant donné que la plupart de nos entraînements ne durent généralement pas plus de trois heures, nous vous fournirons une prévision de trois heures avec des informations supplémentaires sur la force du vent et l'heure du coucher du soleil. Je recommande un gris clair comme #ACACAC pour ce type d'informations, car nous ne voulons pas trop insister sur les prévisions météorologiques.
En tant que séparateur visuel entre différentes sections de l’interface, dessinons un #ECECEC rectangle, avec une hauteur de 54 px et une largeur de 100%.
Avant de commencer la séance d’entraînement, il peut être motivant de se fixer un objectif. Cela peut prendre la forme d’une distance, d’un temps ou d’un nouveau record de vitesse moyenne. Pour afficher ces objectifs, créons deux cercles distincts ayant les dimensions suivantes: 270x270px et 230x230px.
Après avoir placé les cercles, faites glisser le premier et déposez-le dans le second sur le panneau des calques. Pour créer une forme d’anneau, sélectionnez le 'Soustraire' option.
Pour la couleur de fond de cet anneau, créons un dégradé linéaire à partir de # AAFFA9 à # 11FFBD et régler l'opacité à 20%. Ce sera l'état inactif de notre bague.
Pour la partie active, dupliquons notre forme en sélection de la forme dans le panneau Calque> clic droit> dupliquer (alternativement, nous pouvons dupliquer avec ⌘-C et ⌘-V, aussi).
Maintenant nous aurons besoin de Outil vectoriel (V) créer un masque sur notre cercle actif.
Pointe: en appuyant sur le Décalage clé tout en utilisant le Vecteur outil nous aide à créer des lignes parfaitement droites.
Déplaçons ce calque sous le cercle actif, puis définissons-le comme calque de masque. N'oubliez pas de désactiver le remplissage de bordure de notre forme vectorielle.
Pour les détails les plus fins, ajoutons deux cercles supplémentaires de 20 x 20 pixels à la forme de notre masque, ce qui nous donne un joli bord arrondi à la fin de la bague active..
Pro tip: Pour le texte au centre de l'anneau, définissons une petite quantité d'ombre intérieure.
Maintenant, la seule chose qui manque à notre écran GO est le bouton GO, qui sera un rectangle de 120px avec # FF3B30 couleur rouge.
Sur l'écran Activités, nous pouvons parcourir rapidement les séances d'entraînement de nos amis ou de nous-mêmes. Après avoir appuyé sur l'un de ces entraînements, nous pouvons obtenir un aspect plus détaillé, y compris un graphique interactif..
Au bas de cet aspect détaillé, nous afficherons les résultats globaux de l'entraînement sélectionné, tandis qu'en haut, vous pourrez voir les résultats spécifiques en fonction de l'endroit où vous touchez le graphique (indiqué par une barre verticale claire)..
Comme auparavant, nous allons commencer par notre barre de navigation, en ajoutant une icône "plus" supplémentaire pour permettre à l'utilisateur d'ajouter manuellement des séances d'entraînement..
Pour basculer entre les séances d'entraînement de nos amis et les nôtres, nous devons créer une barre de navigation secondaire. Choisissons le Outil Rectangle (R) et créez un rectangle de 90px avec un bleu foncé # 1F2033 remplissage de couleur.
Maintenant, créez un autre carré 22x22px et faites-le pivoter de 45 degrés.
Nous pouvons regrouper ces deux couches comme nous l’avons fait avec nos anneaux d’objectif. Assurez-vous que vous utilisez le Soustraire option au lieu de syndicat.
Pointe: remarquez le léger changement d'opacité entre les éléments de navigation secondaire actif et inactif.
Pour l'aspect détaillé, nous allons créer un autre rectangle avec le même fond bleu foncé. Mais cette fois, la hauteur sera de 387px. Pour les lignes directrices, utilisons le Outil ligne (L).
Pour afficher visuellement la différence d’altitude pendant l’entraînement, nous devrons créer une forme personnalisée avec le Outil vectoriel (V). Il n’existe pas de technique spécifique pour la création de ce graphe. Modifions donc la courbe de Bézier.
Outre la différence de niveau, nous pouvons également afficher les changements de vitesse pendant l'entraînement avec une courbe colorée, où les zones rouges et vertes indiquent le rythme..
La méthode est la même que précédemment avec le Vecteur outil et courbes de Bézier. Pour la couleur de remplissage j'ai utilisé # FF3B30 pour le rouge et # 22EA05 pour le vert (vert signifie plus rapide que le pas moyen, rouge signifie plus lent.)
À l'aide du plugin Content Generator Sketch, nous pouvons facilement ajouter différentes images de profil à nos cercles d'avatar..
Nous sommes maintenant prêts avec l'écran Activités!
Sur l'écran des défis, vous pouvez voir les défis particuliers auxquels nous participons. Lors de la conception de cet écran, j'ai combiné un design circulaire inspiré par Apple Watch avec un design de type carte, de sorte que l'utilisateur puisse réorganiser les défis en fonction de leur importance..
Après avoir conçu les écrans précédents, il sera beaucoup plus facile de créer celui-ci, car nous en avons déjà conçu l'essentiel. Tout d'abord, créons un nouveau Artboard (A) et copiez la barre de navigation et la barre de navigation secondaire à partir de l'écran Activités.
Pour créer les cartes, nous aurons besoin d’un 355x400px rectangle.
En tant que couleur d’arrière-plan, j’utilisais un simple blanc, mais pour séparer visuellement les cartes de l’arrière-plan, j’ajoutais un peu d’ombre noire avec 20% d'opacité.
Afin d'être cohérent et cohérent dans toute l'application, il est important de montrer aux utilisateurs le même type d'informations de la même manière. Comme vous vous en souvenez peut-être, nous avons déjà conçu un petit anneau pour indiquer les buts sur l'écran GO. Nous pouvons maintenant utiliser la même technique ici..
Pointe: si vous souhaitez obtenir plus d'inspiration pour de bons dégradés d'interface utilisateur, je vous recommande de vérifier uigradients.com.
Le dernier élément encore manquant est la barre d’onglet en bas de l’écran, copions-le donc à partir de l’écran précédent et assurons-nous de modifier l’état actif de l’onglet..
Sur l'écran Parcourir les défis, nous pouvons faire défiler rapidement les défis les plus populaires et les plus récents, et nous pouvons voir combien de jours il reste à compléter un défi particulier et combien de membres y participent..
Comme toujours, nous pouvons dupliquer les éléments de conception familiers des écrans précédents, mais n'oubliez pas de modifier la barre de navigation secondaire..
Créons les informations de base sur un défi et ajoutons un badge personnalisé comme motivation. Ce sera la récompense quand quelqu'un relèvera le défi.
Remarque: Pour ce tutoriel, je n'ai créé qu'un simple badge, mais dans un projet réel, je passerais beaucoup plus de temps à concevoir des badges très polis..
Pointe: Notez les petites différences de taille et de couleur du texte, ce qui nous aide à créer une hiérarchie claire.
Pour afficher visuellement le temps restant, créons un plan de montage chronologique. Ce bar aura 40px coins arrondis et un # F5F5F5 Couleur de fond.
Pour la partie active de cette barre, copions notre rectangle précédent, le raccourcissons un peu et définissons un dégradé linéaire à partir de # 44FF30 à # FFDA30.
Après avoir dupliqué cette section et copié la barre d'onglets de l'écran précédent, nous sommes prêts avec la section Parcourir les défis.!
Enfin, j'ai créé une interface Apple Watch pour notre application. Ce concept est basé sur les directives d'interface humaine Apple Watch. Ces instructions sont fournies par Apple aux développeurs et aux concepteurs pour leur permettre de mieux comprendre les possibilités de cette nouvelle plate-forme..
J'ai créé quatre interfaces de montre différentes pour notre application de fitness. Dans le cas du premier concept, j'ai créé un écran hautement personnalisable, dans lequel vous pouvez réorganiser les informations en fonction de vos intérêts. En outre, la couleur des données les plus importantes (les plus importantes) change constamment en fonction de votre distance par rapport à votre objectif initial. Dans ce cas, la couleur verte signifie que vous avez presque atteint votre objectif de distance..
Nous avons terminé la conception de notre application de fitness iOS. Après avoir suivi ce tutoriel, j'espère que vous serez plus confiant dans l'utilisation de Sketch pour la conception d'applications mobiles..
N'hésitez pas à télécharger le fichier Sketch complet pour avoir un aperçu plus détaillé des techniques de conception que nous avons utilisées. Je suis curieux de savoir comment vous avez trouvé le processus, alors n'hésitez pas à laisser des commentaires et des questions dans les commentaires..
Accentsconagua