Share
Cette conception a été utilisée conjointement avec notre site partenaire Mobiletuts +. Bart Jacobs, développeur très expérimenté, a utilisé cette interface utilisateur pour créer une application fonctionnelle et, mieux encore, vous pouvez suivre et apprendre à créer la vôtre! Vous pouvez trouver sa série ici: Part 1, Part 2, Part 3.
Dans ce tutoriel, je voudrais vous montrer comment créer une interface utilisateur prête pour la rétine pour une application météo. Nous utiliserons plusieurs planches d’art et typographie pour créer une interface très minimale..
Téléchargez les ressources de police ici:
Lorsque vous utilisez des polices pour des applications ou pour une raison quelconque, veuillez vous assurer de vérifier le contrat de licence. Comme il ne s'agit que d'un tutoriel et que l'application elle-même ne sera pas disponible à la vente, nous acceptons d'utiliser les polices susmentionnées. Cependant, si vous envisagez de créer la vôtre et souhaitez obtenir une licence commerciale, veuillez suivre les instructions du concepteur de caractères pour le faire..
Nous allons utiliser plusieurs tableaux artistiques pour les différents points de vue de l'application. Une fois que nous avons décidé de le faire avec l'aide de notre développeur, nous pouvons aller de l'avant et obtenir la création de notre document..
Pour commencer, nous devons créer un document de la taille de notre appareil mobile. Puisque nous travaillons sur la plate-forme iOS, nous allons concevoir pour l'iPhone 5, dont la taille d'écran est supérieure à celle des précédentes incarnations de l'iPhone. Je trouve que travailler à la taille plus grande, il est facile de réduire plus tard pour d'autres appareils. Étant donné que la conception globale est si minimale, il sera plus facile de supprimer de l’espace plus tard que d’essayer de l’agrandir. À cette fin, notre document sera 640 x 1136 pts (pas de pixels).
Lors d’un brainstorming avec le développeur, il a été décidé qu’un écran principal glisserait vers la gauche ou la droite pour révéler davantage d’informations. En gardant cela à l’esprit, nous allons également installer plusieurs tableaux d’art. Un pour chaque fenêtre qui apparaîtra. Assurez-vous de bien regarder la capture d'écran pour voir les détails.
Une fois le document créé, nous devrons ajuster le profil de couleur. Alors allez à Édition> Attribuer un profil et assurez-vous de désactiver tous les profils de couleur. Lorsque XCode prépare vos ressources à être groupées avec l'application, il supprime complètement tous les profils de couleur associés aux ressources. Pour cette raison, il est préférable de supprimer tout profil de couleur de votre document et de tester régulièrement votre dessin sur un écran mobile pour garantir une sortie couleur correcte..
Notre fond est assez simple. Parce que nous travaillons avec un design plus ou moins «plat», nous travaillons avec des couleurs unies et des mélanges pour obtenir nos effets..
Nous utiliserons le tableau d'art intermédiaire pour représenter notre page principale de l'application. Celui de gauche correspond à ce qui se passe lorsque vous sélectionnez l'emplacement. Et celui de droite apparaîtra lorsque vous sélectionnez la date. Commencez par dessiner un rectangle de la même hauteur et de la même largeur que la planche d’art au milieu et remplissez-le avec notre couleur de base.
Ensuite, créez un cercle qui est exactement 30 x 30 pt et remplissez-le avec la couleur indiquée ci-dessous.
Copiez ce cercle nouvellement créé et collez-le derrière l'autre. Maintenant, ajustez la taille à 2300 x 2300pt et déposez le Opacité jusqu'à 0%.
Maintenant, allez à Objet> Fusion> Options de fusion… et sélectionnez Étapes spécifiques puis le mettre à 30. Puis faire (Objet> Mélange> Marque) le mélange.
Avec le mélange toujours sélectionné, centrez-le horizontalement sur la planche d’art, puis centrez le cercle au sommet de la planche d’art, comme indiqué ci-dessous..
Dupliquez le rectangle d’arrière-plan plat et collez-le au-dessus du mélange que nous venons de créer. Sélectionnez maintenant le rectangle et le fondu dans la palette des calques, puis sélectionnez Objet> Masque d'écrêtage> Marque. De cette façon, nous n'avons pas à nous soucier de notre mélange assez volumineux qui se répercute sur nos autres tableaux d'art..
Une fonctionnalité intéressante qui, à notre avis, ajouterait du talent à l'application serait de faire changer la couleur de l'arrière-plan en fonction de la température. Donc, bien que l'arrière-plan que nous avons créé tout à l'heure soit celui où il fait "chaud", nous allons maintenant dupliquer ces éléments et ajuster la couleur et la position pour représenter une sensation plus "froide".
Parce que notre effet de cercle mélangé comporte de nombreuses étapes, vous remarquerez peut-être un certain retard tout en continuant de créer le design de votre application. Comme il ne s'agit que d'esthétique, nous pouvons désactiver les calques de fusion et laisser la couleur de fond unie pour le moment. Assurez-vous de réactiver le calque de fusion lorsque vous testez sur votre appareil mobile afin de voir comment le texte fonctionne avec votre arrière-plan..
Nous allons beaucoup nous fier à la typographie pour faire passer les informations météorologiques. C'est pour cette raison que j'ai choisi des polices agréables, propres et faciles à lire qui donnent vraiment une certaine personnalité à l'application. Je vais coller avec deux familles de polices et utiliser différentes largeurs pour créer les éléments vus.
Pour commencer, nous devrons montrer une date quelconque. Sélectionnez le Outil de type (T) et entrez un jour de la semaine. J'utiliserai "mardi" et notre police "Mission Gothic" avec le poids défini sur "Thin". Le texte lui-même sera blanc et nous ajouterons un Ombre portée pour l'aider à se détacher de l'arrière-plan. Ensuite, nous allons le positionner de sorte qu'il soit centré sur le tableau des arts et 20px du haut. Pour ce faire, il vous suffit de l’aligner tout en haut, à l’endroit où la boîte englobante touche le bord du tableau, puis de le maintenir Décalage et appuyez sur le Vers le bas flèche sur le clavier deux fois.
Sélectionnez le Outil de type (T) encore et créons notre jauge de température. J'aime l'idée que les chiffres eux-mêmes soient centrés, tandis que le symbole "degré" est affiché à droite. Donc, plutôt que de centrer le type dans le Paragraphe Je l'ai gardé aligné à gauche et je n'ai saisi que le numéro que nous allons utiliser pour l'espace réservé. Je vais utiliser "86" et la police "Maven Pro" avec les informations suivantes dans la capture d'écran ci-dessous.
Une fois créé, alignez-le sur le centre du tableau puis sur le haut. Une fois aligné vers le haut, clic-droit le texte et Transformer> Déplacer… le bas 210 pt. Maintenant, sélectionnez le type et ajoutez le symbole de degré.
Maintenant que nous avons la température, ajoutons un emplacement. Tapez votre emplacement, pour moi c'est "Nassau, BAH", n'hésitez pas à utiliser le vôtre. Pour donner un peu de contraste à la ville et au pays, nous utiliserons deux poids différents. La ville sera "Mission Gothic" sur "Régulier" et le pays sur "Mission Gothic" sur "Thin".
En ce qui concerne le placement, j'ai déjà dit que j'aime bien l'idée de centrer la valeur de la température, mais je souhaite que tout le texte soit aligné à gauche en fonction de la largeur de la valeur de la température. Donc, pour le moment, je vais manuellement mettre cette adresse à la gauche de la température et la placer sur 20 pt du fond. N'hésitez pas à modifier cette distance à votre guise. Assurez-vous de toujours vérifier les éléments sur votre appareil mobile.
Nous pouvons nous arrêter ici si nous le souhaitons, mais le développeur souhaite inclure des informations supplémentaires. Nous allons donc créer trois lignes de texte distinctes. Un pour l’heure actuelle, un pour la vitesse du vent et un autre pour l’humidité. Assurez-vous de les créer séparément car nous utiliserons différentes tailles de police et différents poids, ce qui peut réduire la hauteur de ligne de ces éléments..
J'aime les formes numériques de notre police "Maven Pro", je vais donc continuer à utiliser cette police pour les nombres de ces éléments, mais nous utiliserons le poids "Moyen" et les contraster avec la police "Mission Gothic" définie sur " Thin "et pour cette police plus fine, nous allons également le définir sur" Small Caps ". Vous pouvez définir des petites majuscules en mettant en surbrillance la police appropriée et en cliquant sur l’icône de menu en haut à droite de la fenêtre. Personnage panneau puis en choisissant Lettres minuscules.
Notre typographie comprend assez bien notre message, mais nous avons toujours besoin de créer des icônes pour représenter les différentes figures et spécifier des menus dans l'application. Je suis tombé amoureux de la forme du symbole représentant les degrés de notre police "Maven Pro" et je me suis dit que je lierais les éléments de l'icône au type en réutilisant cette forme pour créer les icônes..
Avec le Outil de type (T) activé tapez le symbole de degré. La taille exacte n'a pas d'importance à ce stade puisque nous l'adapterons à la taille de nos icônes. Puis faites un clic droit et choisissez "Créer des contours"afin de convertir le type en une forme éditable. Activez maintenant la Outil de sélection directe (A) et sélectionnez le plus petit chemin interne et supprimez-le. Nous utiliserons un trait plus tard pour obtenir le widget approprié pour nos icônes. Une fois que vous avez votre forme carrée incurvée, assurez-vous d’ajuster la hauteur largeur afin qu'ils soient exactement les mêmes. Ils seront légèrement en retrait et nous devons nous assurer qu'ils sont précis lors de l'ajout d'éléments ultérieurement..
Nous allons utiliser et réutiliser cette forme plusieurs fois, alors assurez-vous d'en avoir une copie au cas où vous perdriez l'original pendant que vous travailliez. Pour l'instant nous allons créer une icône pour représenter le menu d'emplacement.
Avec notre forme carrée arrondie copiée, réduisons-le à 32 x 32 pt, et ajouter un intérieur Accident vasculaire cérébral de 3px
Activer le Outil Rectangle Arrondi et créer un rectangle qui est 3 x 12 pt et augmentez les angles arrondis pour que les extrémités soient complètement arrondies. À présent, dupliquez cette forme trois fois de plus et faites-la pivoter pour former une sorte de croix en croix, puis regroupez tous les objets. Enfin, avec le groupe sélectionné, ajoutez un Ombre portée et le placer 30 pt du haut et de la gauche du tableau d’art. Assurez-vous de vérifier l'espacement sur votre appareil mobile et ajustez-le en conséquence.
Copions notre forme carrée arrondie à partir de notre icône Emplacement car les autres icônes seront basées sur cette même forme et cette même taille. Ajustez l’emplacement du rectangle arrondi à l’être près de notre élément Time. Tout comme le symbole de degré de l'élément de température, je souhaite que les icônes de ces détails supplémentaires soient également en dehors de la température, mais cette fois-ci, il sera évidemment situé à gauche des éléments..
Comme vous pouvez l'imaginer, une icône d'horloge est créée pour l'élément Time. Notre forme carrée arrondie sera le cadran de l’horloge et nous devons maintenant fabriquer les aiguilles de l’horloge. Sélectionnez le Outil Rectangle Arrondi et créer un rectangle qui est 10 x 4 pt et alignez-le au centre du cadran. Dupliquer ce processus seulement cette fois le rendre 4 x 12 pt. Une fois que vous avez les aiguilles dans un endroit confortable, regroupez les éléments et ajoutez un Ombre portée.
Dupliquez encore une fois le carré arrondi de notre icône précédente et alignez-le à côté de notre élément Vent. Pour cette icône, nous allons essayer d’obtenir un effet intéressant, l’icône elle-même contribuant à l’information sur le vent en fournissant une flèche indiquant le sens direct du vent. Donc, comme vous pouvez l’imaginer, nous allons créer une flèche. au centre de cette icône particulière. Commencez par créer un Rectangle arrondi C'est 4 x 9 pt et le centrant dans la place arrondie. Ensuite, créez un carré parfait avec le Outil Rectangle Arrondi C'est 12 x 12 pt et enlevez un des coins. Fermez maintenant ce chemin ouvert et faites-le pivoter de manière à créer le point haut de notre flèche, puis centrez-le sur la partie tige de la flèche, en veillant à masquer complètement les coins arrondis supérieurs..
Avec notre flèche terminée, groupez la tige et pointez ensemble, puis créez sept autres copies. Faites pivoter chacune de ces copies par incréments de quart afin d’en avoir une qui pointe vers le haut, une vers le coin supérieur droit, une autre vers la droite, etc. Parce que notre forme principale n'est pas un cercle complet, la rotation de la forme avec la flèche ne fonctionnera pas. Nous devons donc avoir une icône de flèche pour chaque direction dans laquelle le vent pourrait souffler. Une fois que ceux-ci sont créés, vous pouvez masquer les flèches inutiles, puis regrouper les flèches et le carré arrondi et appliquer un Ombre portée.
Collez une copie de notre forme carrée arrondie une dernière fois et alignez-la avec notre élément Humidité. Maintenant, créez un cercle qui est 8 x 8 pt et centrez-le dans la forme principale et placez-le plus bas. Activer le Outil de sélection directe (A) et sélectionnez le point d’ancrage le plus haut dans le cercle et faites-le glisser vers le haut pour créer une forme semblable à une goutte, puis amenez un peu les poignées pour affiner le point. Reproduisez cette forme de gouttelette deux fois de plus, réduisez-la et placez-la près du sommet et de chaque côté de la plus grosse. finalement Groupe (Contrôle + G) les éléments ensemble et ajouter un Ombre portée.
Pour la dernière icône de cette section principale, nous aurons besoin de quelque chose qui représente la date. Nous avons créé une icône de calendrier qui indique également la date du mois..
Pour commencer créer un Rectangle arrondi C'est 40 x 36 pt et lui donner un coup intérieur 3 pt. Maintenant, allez à Objet> Développer l'apparence convertir le trait en une forme réelle. Avec le Outil de sélection directe (A) activé, sélectionnez les points d'ancrage intérieurs supérieurs et déplacez-les vers le bas 9px en utilisant les touches fléchées de votre clavier. Avec le Outil Rectangle Arrondi créer deux formes de pilule arrondies qui sont 9 pt large et de la hauteur que vous souhaitez, placez-les sur le grand carré arrondi de manière à ce que le fond se rejoigne à mi-chemin entre la grande zone blanche. Puis moins ces nouvelles formes de la forme carrée en utilisant le Éclaireur panneau. Créez deux autres formes de pilule, cette fois, elles le seront 3 x 8 pt et les aligner à l'intérieur des sections découpées. Enfin, nous ajouterons une date de réservation avec les paramètres suivants, puis nous grouperons ces éléments et ajouterons un Ombre portée.
Une fois lancé, le développeur souhaitait disposer, au bas de la page principale de l'application, d'un ensemble de widgets défilables indiquant les prévisions météorologiques toutes les heures pour ce jour particulier. Donc, pour terminer notre page principale de l'application Créons ceux maintenant.
Activer le Outil Rectangle Arrondi et créer un rectangle blanc qui est 165 x 250 pt, centre alignez-le avec le tableau d'art et placez-le 40px du bas de la planche d'art.
Dupliquez ce rectangle et remplissez-le de noir. Dupliquer encore une fois et le pousser 4px puis Minus Front dans le Éclaireur panneau. Vous pouvez ensuite laisser tomber l'opacité à 15%.
Dupliquez à nouveau notre rectangle blanc et remplissez-le de noir réduit à 15% Opacité. Dessinez une autre forme de rectangle sur celle qui est 79 pt haut et n’importe quelle largeur et alignez-le sur le haut du rectangle sous-jacent. Sélectionnez son nouveau rectangle et le plus grand noir rempli ci-dessous puis choisissez Couper du Éclaireur panneau.
Activer le Outil de type (T) et entrez une température de votre choix. Je voulais m'assurer que j'avais assez d'espace pour agrandir, alors j'ai choisi le nombre «100». Pour cela, je vais utiliser la police "Missing Gothic" avec le poids de "Black". Le texte lui-même sera également un noir mat avec le Opacité tombé à 15%. Nous l'alignerons ensuite vers le haut de la section blanche de notre conteneur..
Étant donné que cela est censé être une prévision météorologique, il ne sera pas aussi précis, nous allons donc également inclure les valeurs possibles "faible" et "élevé". Avec le Outil de type (T) Encore une fois, tapez votre estimation et au lieu d’utiliser le poids "Noir", nous utiliserons plutôt "Mince". Alignez-le vers le bas en vous assurant qu'il y a suffisamment de marge de manœuvre.
La barre plus sombre en haut sera notre indicateur de temps. Copiez l'icône d'horloge créée précédemment dans ce didacticiel et placez-la au centre et à gauche de cette barre plus sombre. Vous pouvez également copier le texte de l'heure auparavant. Assurez-vous de retirer le Ombre portée de ces éléments comme il n'est pas nécessaire.
Enfin, ajoutez un Ombre portée au rectangle blanc principal, puis regroupez ces éléments. Vous pouvez maintenant copier ce groupe et les placer 20px de part et d’autre des éléments centrés en prenant soin de régler l’heure de chaque nouvelle copie. En prime, j’ai pris les widgets de temps qui sortent de la page et réduit leur taille pour les rendre 235pt haute. Si la contrainte est verrouillée lors du redimensionnement de la hauteur, le widget fera de même. Cela aura un nombre décimal derrière, donc ce n'est pas exact. Comme ils ne sont pas sur la page, utilisez le masque que nous avons créé précédemment pour masquer les éléments qui disparaissent de l'écran..
Avec cela notre page principale est terminée. Assurez-vous d'activer le fond d'écran et de tester pour voir à quoi il ressemble sur votre appareil mobile..
Commençons maintenant à travailler sur nos menus. Je trouvais plus facile de copier le calque avec tous les éléments de la page principale, puis de sélectionner le tableau graphique à gauche de la page principale et de coller le calque dupliqué. Positionnez-le de sorte que seule l'icône d'emplacement soit visible du côté droit du tableau d'art. Créez maintenant un masque aux mêmes dimensions que notre panneau d’art et masquez les éléments hors page..
Comme notre conception générale est "plate" au lieu d'une ombre graduée pour indiquer que la page principale est au-dessus de l'élément de menu, nous allons utiliser un rectangle rempli de noir mat défini sur 10% d'opacité C'est 4 pt large et la même hauteur que notre tableau d'art.
Dans ce menu, nous aurons besoin d’une zone pour ajouter un nouvel emplacement, ainsi que pour répertorier les emplacements définis et les commutateurs pour activer / désactiver la détection automatique d’emplacement et les unités dans lesquelles la température est affichée. Commençons par créer la nouvelle section emplacement.
Sélectionnez le Outil Rectangle (M) et créer un rectangle qui est 640 x 100 pts et alignez-le sur le dessus du tableau d'art, puis ajoutez un Ombre portée.
Maintenant, activez le Outil Rectangle Arrondi et créer un rectangle qui est 8 x 32 pt et remplissez-le de noir. Dupliquez ce rectangle et faites-le pivoter afin qu'il croise la forme précédente en formant un "+". Sélectionnez les deux rectangles et Unir les de la Éclaireur panneau. Diminuer Opacité à 25% et centrer verticalement avec l'élément rectangle que nous avons créé avec le Ombre portée D'avant. Une fois centré verticalement, déplacez-le pour qu'il soit à peu près à la même distance de la gauche que des bords supérieur et inférieur..
Enfin, sélectionnez le Outil de type (T) et entrez la phrase "Ajouter un nouveau lieu…" en utilisant la police "Mission Gothic" envoyée à "Thin" et déposez la Opacité à 15%.
Dupliquez le rectangle précédent et alignez-le au bas du précédent, puis ajustez le Ombre portée.
Copiez sur notre forme carrée arrondie que nous utilisions précédemment pour nos icônes et au lieu d’un trait, remplissez-la de noir mat puis réduisez le Opacité à 15%. Copiez le symbole "+" que nous avons créé à l’étape précédente et faites-le pivoter de manière à former un "X" et centrez-le dans notre forme carrée arrondie, puis choisissez le symbole Minus Front option du Éclaireur panneau.
Maintenant, copiez le texte de l'élément Location de notre page principale et supprimez le Ombre portée et réglez la couleur de la police sur noir et réduisez le Opacité à 25%. N'hésitez pas à ajouter plusieurs instances pour que nous puissions voir comment la liste sera remplie à mesure que de nouveaux éléments sont ajoutés..
Travaillons sur l'élément switches de ce menu. Cet élément sera collé au bas de ce menu, quelle que soit la longueur de la liste des lieux. Commencez par créer un rectangle qui est 640 x 200 pt et ajouter un Ombre portée.
Avec le Outil de type (T), tapez les étiquettes pour les commutateurs que nous sommes sur le point de faire. L'un sera pour la détection automatique de la position et l'autre déterminera si la température est affichée en Fahrenheit ou en Celsius. Étant donné que l’élément principal sur lequel ces commutateurs sont installés est 200 pt espace élevé.
Ajoutons un séparateur entre ces deux étiquettes. Avec le Outil de segment de ligne (\), créer une ligne qui est 476pt large et lui donner un coup de 2 pt. Ce trait sera noir avec le Opacité réduit à 10 pt.
Pour créer les commutateurs eux-mêmes, nous allons réutiliser la forme carrée arrondie. Copiez cette forme et redimensionnez-la 50pt et remplissez-le de noir. Clic-droit cette forme et choisissez Transformer> Déplacer… puis déplacez-le horizontalement 80 pt et cliquez sur "Copier", pas "OK". Vous devriez maintenant avoir deux carrés arrondis l'un à côté de l'autre.
Sélectionnez le Outil Rectangle (M) et tracez un rectangle qui a la même hauteur que nos carrés arrondis et qui se rencontre directement au milieu. Sélectionnez ces trois éléments et Unir eux dans le Éclaireur panneau. Diminuer Opacité de cette forme à 15% et alignez-le correctement à côté de notre étiquette.
Collez encore une fois dans notre carré arrondi, remplissez-le de blanc et ajustez la taille 40 x 40 pt. Alignez-le à gauche ou à droite pour qu'il y ait une distance autour des pièces de bord. Vous pouvez maintenant dupliquer ces formes et les retourner horizontalement pour indiquer l'état du commutateur opposé. Ajoutez ensuite votre texte pour représenter l'état du commutateur. Faites cela pour les deux sur et en dehors.
Enfin, vous pouvez également dupliquer cet élément pour le sélecteur d’unités. Et avec cela, notre menu de localisation est complet. Passons à notre menu Date.
Ce menu de date affichera la météo pour les prochains jours. Répétons les premières étapes à partir du menu Emplacement et copions le calque de la page principale dans son ensemble, puis masquons les éléments hors page et ajoutons un rectangle pour représenter l'ombre du menu..
Maintenant, créez un rectangle qui est 640 x 160 pt et alignez-le au sommet de cette planche d'art, puis donnez-lui un Ombre portée.
Nous aurons besoin de quelque chose pour représenter le jour et la date, donc comme avant, créons une icône de calendrier. Créer un rectangle arrondi qui est 120 x 120 pt et ajouter un trait interne qui est 8px. Maintenant, allez à Objet> Développer l'apparence convertir le trait en une forme réelle. Avec le Outil de sélection directe (A) activé, sélectionnez les points d'ancrage intérieurs supérieurs et déplacez-les vers le bas 30px en utilisant les touches fléchées de votre clavier. Puis réduire le Opacité à 15%.
Maintenant, ajoutez votre texte à l'icône. Nous voulons que la meilleure action soit le jour de la semaine. Ce sera du texte blanc. La date elle-même sera noire avec le Opacité tombé à 15%. Les deux utilisant "Maven Pro" dans le poids "Moyen".
Enfin, ajoutez la température attendue. La police sera "Mission Gothic" pour les chiffres et "Maven Pro" pour le symbole du degré. Nous allons également ajouter une sélection "haut / bas" en bas à droite de l'élément.
Si vous le souhaitez, vous pouvez dupliquer cet élément et ajuster le jour / la date pour le reste de la semaine..
Assurez-vous de noter l'espacement entre les éléments et les chiffres de localisation exacts auxquels vous pouvez penser pour faciliter le travail des développeurs. Plus vous fournissez d'informations, plus il sera facile au développeur de coder le produit en fonction de la conception. De plus, je ne saurais trop insister sur l’importance de toujours tester pendant la conception afin que vous sachiez que votre conception sera traduite sur l’écran mobile. Bonne chance avec la conception de votre application!
Accentsconagua