Share
Ce que vous allez créerDans ce tutoriel, je vais vous expliquer le processus de conception d'un écran de bienvenue pour une application de fitness iOS. Nous allons travailler avec Affinity Designer, un nouvel outil prometteur créé par Serif et une application géniale pour la conception d'interface utilisateur..
Vous n'aurez besoin d'aucune expérience préalable avec l'application. À la fin de ce didacticiel, vous aurez acquis une connaissance de base du flux de travail d'Affinity Designer. Nous allons travailler avec des types, des vecteurs, des images et des styles de calque.
Commençons par créer un nouveau document.
Après avoir ouvert Affinity Designer, allez à Fichier> Nouveau dans le menu principal. Dans la fenêtre contextuelle qui apparaît, vous pouvez spécifier les paramètres de fichier les mieux adaptés à vos besoins. Pour l'instant, concentrons-nous sur deux options: Type et Présélection de page. Nous allons concevoir une application iPhone. La meilleure façon de procéder consiste à choisir Type: Appareils et Préréglage: iPhone 5 (Retina). Affinity Designer définira atomiquement les autres options pour nous.
Nous devons ensuite préparer un environnement de travail. Je suis un grand partisan de l’utilisation des grilles dans la conception. Nous n'allons pas nous attarder là-dessus pour le moment, mais nous allons mettre en place une grille de présentation très simple.
Cette conception s’appuiera sur les directives de base d’interface humaine d’Apple, ce qui signifie qu’il faut adhérer à une hiérarchie spécifique. Nous devrons allouer un espace pour la barre d'état (20 points). Ensuite, bien que transparent, il y aura une simple barre de navigation en dessous de celle-ci (44 pt).
Ensuite, un espace pour les informations principales sur les performances de l'utilisateur et un emplacement pour un bouton permettant de démarrer une séance d'entraînement..
Aller à Voir> Gestionnaire de guides et une fenêtre contextuelle apparaîtra, avec des repères horizontaux et verticaux (vierges pour le moment). Cliquez sur la petite icône de page vierge en dessous de la Guides horizontaux section. Cela ajoutera un nouveau guide horizontal. Ensuite, double-cliquez sur la valeur qui apparaît dans la liste et remplacez-la par 20 pt. Ajouter d'autres guides en utilisant des attributs comme indiqué ci-dessous.
Nous allons maintenant créer notre arrière-plan d'application. Dans le menu de gauche, sélectionnez un Outil Rectangle (M) et tracez un rectangle couvrant toute la zone de travail. Sur le panneau de gauche, il y a un Transformer section. Vous pouvez vérifier les dimensions de votre rectangle ici, ainsi que ses points de départ (vous devriez avoir X: 0, Y: 0 et W: 320 pt, H: 568 pt).
Nous allons maintenant changer la couleur de fond. Aller au Barre d'outils contextuelle juste en dessous de la barre d’outils principale (si vous ne le voyez pas, allez à Affichage> Afficher la barre d'outils contextuelle dans le menu principal). Sur le côté gauche de la barre d'outils contextuelle, vous verrez les propriétés relatives à la forme que nous venons de créer. Cliquez sur le petit rectangle blanc décrit comme un Remplir (avec la forme sélectionnée). Choisissez RGB Hex Sliders dans la liste de sélection, puis entrez # 151515 dans le champ de saisie du paramètre HEX et appuyez sur Entrer.
Aller au Couches panneau. Double-cliquez sur le calque contenant notre forme et changez son nom en «BG». Ensuite, cliquez sur la petite icône de cadenas pour verrouiller la couche de glycémie. De cette façon, vous ne jouerez pas par accident lorsque vous travaillez sur les autres éléments.
Concentrez votre attention sur la barre d'état. Nous ne nous occuperons pas de réinventer le cercle, mais téléchargerons les fichiers source joints à ce tutoriel pour trouver le fichier stat-bar. Ensuite aller à Fichier> Importer dans le menu principal du concepteur Affinity, sélectionnez le stat-bar.afdesign déposer et cliquer n'importe où sur la conception.
Sélectionnez le groupe et placez-le en haut de l'écran de l'application..
Il est temps de créer notre menu de hamburgers. Pour commencer, activez la grille, les pixels et les repères s'alignant dans la barre d'outils principale. Changez votre couleur principale en «blanc» dans le coin supérieur gauche de la fenêtre de l'application. Sélectionnez le Outil Rectangle du Outils panneau de gauche et dessinez un rectangle de 18 x 2 points. Tenez le Alt + Shift boutons et cliquez et faites glisser le rectangle en dessous de celui d'origine (nous copions simplement le rectangle). Faites-le une fois de plus et vous obtiendrez une icône de menu hamburger.
Sélectionnez les trois formes (Maj + clic) et cliquez sur le Ajouter bouton dans le coin supérieur droit du concepteur d’affinité pour le fusionner en un seul. Trouvez votre icône sur le Couches volet et renommez-le "hamburger-menu-icon".
Sélectionnez le Outil de texte artistique (T) dans le panneau des outils et cliquez quelque part dans la barre de navigation de notre conception. Entrez le texte "Running App" et sélectionnez le lot entier.
Clique sur le Personnage bouton, changez les attributs du texte comme indiqué ci-dessous, puis fermez la fenêtre.
Centrez maintenant le texte dans la zone de la barre de navigation. Ça va claquer automatiquement. Sinon, assurez-vous d'activer les options d'accrochage de la barre d'outils principale en haut..
Il est temps de nettoyer les choses dans le panneau des couches. Clique le Ajouter un nouveau calque bouton au bas de la Couches et faites glisser l’icône du hamburger, le titre de l’application et la barre d’état dans celui-ci Regroupez le titre de l’application et les icônes de menu (sélectionnez les deux, puis cliquez sur Cmd + G) puis renommez le calque comme indiqué ci-dessous:
Sélectionnez le Outil de cercle (M) dans le panneau Outils et tracez un cercle. Avec votre nouvelle forme sélectionnée, ouvrez le Propriétés de l'AVC panneau en haut à gauche et modifiez les paramètres comme indiqué ci-dessous.
Commencez à dessiner à partir du guide central créé initialement, puis maintenez enfoncée la touche Cmd (en partant du point central) et Décalage (dessiner un cercle, pas une ellipse) en dessinant. Votre cercle devrait être d'environ 200x200 pt.
Sélectionnez le cercle et appuyez sur le bouton Convertir en courbe bouton dans le menu de la barre d’outils. Sélectionnez le Outil de nœud (A) et cliquez sur le Courbe de rupture bouton. Avec Outil de nœud toujours sélectionné créer deux points sur la courbe environ 3/4 de sa hauteur.
Remarque: Vous pouvez créer des guides supplémentaires pour mieux aligner ces nouveaux nœuds. presse Cmd + R montrer Règles et cliquez et maintenez sur la règle supérieure, puis faites glisser un curseur vers le bas pour créer un guide.
Sélectionnez le nœud supérieur du cercle et cliquez sur Effacer sur votre clavier pour le supprimer. Vous devriez avoir une bonne base pour un diagramme circulaire ouvert maintenant.
Sélectionnez la forme du graphique et dupliquez-la (CMD + J). Sélectionnez sa partie supérieure gauche avec l'outil de nœud et supprimez-le. Ouvrez le Propriétés de l'AVC panneau et modifier les valeurs comme indiqué ci-dessous. La couleur verte est # 4DFA41 et jaune # F7D203.
Sélectionnez le Outil de texte artistique et entrez des informations supplémentaires, puis placez et formatez-les comme indiqué ci-dessous.
Nous avons maintenant un tableau de progression vraiment saisissant avec des informations supplémentaires sur les réalisations des utilisateurs.!
Sélectionnez le Outil Rectangle (M) de la Outils panneau et dessinez un rectangle d’environ 290 px x 44 pt. Dans «Human Interface Guidelines for iOS», les concepteurs Apple suggèrent que la hauteur du bouton de 44 points est parfaite pour un appui facile..
Tout en maintenant la touche Maj enfoncée, cliquez sur l'arrière-plan de l'application et le rectangle que vous venez de créer, puis cliquez sur l'icône. Aligner horizontalement au centre bouton en haut à gauche de l'écran. Placez-le au bas de la conception de votre interface utilisateur. Vous pouvez également sélectionner la forme du rectangle et modifier ses paramètres X / Y dans le menu déroulant. Transformer panneau à ceux indiqués ci-dessous:
Sélectionnez la forme que vous venez de créer. Ouvrez le Remplissage de couleur en haut à gauche de l’écran et changez la couleur de remplissage en transparent. Changez le trait en # 4CFA41. Ouvrez le Préférences de course panneau (à côté de la couleur), réglez l’épaisseur du trait sur 2 pt et alignez-la à l’intérieur de la forme.
Maintenant pour l'étiquette du bouton. Sélectionnez le Outil de texte artistique et utilisez-le pour créer une étiquette au centre du rectangle que vous venez de créer. Tapez "Start Running" et ouvrez le Personnage fenêtre en cliquant sur le Personnage bouton dans le menu d'outils supérieur (avec l'objet texte sélectionné). Modifiez toutes les préférences pour refléter les exemples ci-dessous:
Nous allons placer une vue statistique simple entre le graphique de progression et le bouton «Démarrer la course». Nous afficherons le rythme de course moyen, le nombre total de courses et les calories brûlées.
Rendez-vous sur le site Web Icons8 et téléchargez l’icône En cours d’exécution, l’icône Chronomètre et l’icône Feu. Icons8 est un endroit idéal pour trouver des icônes modernes et élégantes. Vous pouvez obtenir gratuitement le format PNG (n'oubliez pas de vous connecter au site Web Icons8 si vous les utilisez) ou acheter une version vectorielle..
Commencez par placer l'icône Running dans votre conception. Aller à Fichier> Place et sélectionnez le fichier ou faites simplement glisser le fichier dans Affinity Designer. Placez-le centré verticalement sous le graphique de progression.
Ensuite, allez au Effets panneau (avec l’icône sélectionnée) et ouvrez le Superposition de couleurs languette. Changez la couleur de superposition en # 4CFA41.
Puis passez au modes et créez un style personnalisé à partir de la sélection en cliquant sur la petite icône du menu déroulant à droite et en sélectionnant Ajouter un style de la sélection. En faisant cela, il sera plus facile de réutiliser notre style plus tard.
Encore une fois, sélectionnez le Outil de texte artistique et créer deux objets texte. Tapez un numéro d'échantillon et le texte «Total Runs». Formatez-les comme indiqué ci-dessous. Centrez-les verticalement et placez-les sous l'icône Running Man.
Placez les autres icônes téléchargées dans la conception de l'interface utilisateur. Avec l’un d’eux sélectionné, choisissez le style que nous venons de définir à partir du modes panneau. Voila! Nos styles ont été réappliqués sans avoir à les spécifier à nouveau.
Avec l'icône toujours sélectionnée, cliquez sur Cmd + C ou aller à Édition> Copier. Sélectionnez la dernière icône et cliquez sur Cmd + Shift + V ou aller à Menu> Édition> Style de collage. Cela collera le style de l'objet précédemment copié dans le nouvel. Assez pratique, droite?
Lorsque tous les composants sont placés sur notre toile, il est temps de travailler sur certains détails. Tout d’abord, nous avons un vilain trou au milieu de la conception, faisons quelque chose à ce sujet.
Si vous gardez vos couches organisées, cela sera facile. Sélectionnez le calque / groupe avec notre graphique de progression et déplacez-le d'environ 50 points vers le bas. Si vous ne gardez pas vos couches organisées, cette étape sera plus difficile - elle vous sert bien!
Allons aussi pimenter le fond. Créez un rectangle de 320x320pt et placez-le au-dessus du dessin. Sélectionnez-le et choisissez le Outil de coin (C) à partir du panneau d’outils. Cliquez sur l'un des points d'ancrage du rectangle pour le rendre éditable, activez les paramètres précédemment définis Des guides (Cmd +;) et cliquez sur le centre du coin inférieur du rectangle pour créer un nœud. Sélectionnez-le et déplacez-le vers le bas de 40pts. Et nous avons ici notre nouvelle flèche en forme de coutume. Aller au Couches panneau et déplacez-le vers la couche bg (placez-le en haut).
Prenez les fichiers sources attachés à ce tutoriel et jetez un coup d'œil à la photo d'une jolie rue parisienne. C'est l'une des photos que j'ai prises lors de ma visite à Paris. Cela a l'air agréable, c'est aussi un excellent endroit pour courir. Ouvrez-le dans Affinity Designer et Copy (Cmd + C) il.
Revenez à la conception et sélectionnez notre forme de flèche précédemment faite (dans le Couches panneau). Puis clique Cmd + Alt + V pour le coller dans la forme sélectionnée. Déplacez-le pour recadrer comme vous le souhaitez. Sélectionnez la forme de la flèche et réglez-la à une opacité de 40%. Cliquez sur Cmd + G mettre la courbe dans un groupe et changer sa Mode de fusion de Ordinaire à lueur.
Avec le groupe toujours sélectionné, prenez le Outil de transparence (Y) dans le menu Outils et créez un Gradient de mélange linéaire sur le groupe (cliquez et faites glisser) du bas vers le haut. Vous pouvez jouer avec l'outil pour obtenir les résultats souhaités.
Ajoutons maintenant une ombre portée sous notre flèche. Sélectionnez le groupe et allez au Effets panneau. Étendre le Ombre extérieure onglet et allumez-le. Un rayon de 20 points et un décalage de 15 points devraient bien fonctionner.
Vous avez terminé! Vous venez de créer votre première conception d'application mobile avec Affinity Designer. Avec un peu de chance, les étapes répétitives de ce processus vous auront appris un certain nombre de techniques de flux de travail très utiles dans Affinity Designer. J'ai hâte de voir quels autres dessins vous allez en faire!
Accentsconagua