Astuces, astuces et techniques de conception d'Adobe Experience

01 sur 07

Astuces, astuces et techniques de conception d'Adobe Experience

Lorsque Adobe a présenté Experience Design en tant qu'aperçu public, l'entreprise a accompli deux exploits assez étonnants en même temps. Premièrement, ils ont pénétré dans le marché émergent des logiciels de prototypage. Deuxièmement, ils ont créé une opportunité pour les utilisateurs de jouer avec un "travail en cours" et leur permettent d'influencer cette progression. Maintenant que l'application est disponible depuis quelques mois, j'ai pensé que ce serait un bon moment pour partager quelques astuces, conseils et techniques relatifs à Experience Design.

Mais d’abord, vous vous demandez peut-être ce que l’on entend par logiciel de prototypage. Parmi les principaux acteurs de cet espace figurent Proto.io, Principle, UXPin, Atomic.io, Experience Design et InVision. Contrairement aux applications telles que Sketch 3, Photoshop et Illustrator, qui produisent des conceptions statiques, ces éditeurs graphiques introduisent l’interactivité, le mouvement et d’autres fonctionnalités courantes dans l’espace de conception mobile et Web d’aujourd’hui.

Avec l'essor du mobile et l'inévitable focalisation du type laser sur l'utilisateur, il ne suffit plus à un concepteur de créer quelques croquis, de rassembler quelques compositions, puis de publier le projet ou de le télécharger sur un serveur Web. Le flux de travail UI / UX a fondamentalement changé les choses. Chaque étape du processus, de l'identification de l'utilisateur à l'esquisse, en passant par les structures filaires, les maquettes et le prototypage, fait maintenant l'objet de tests approfondis par l'utilisateur.

C'est cette dernière étape - le prototypage - où les problèmes sont découverts et résolus avant que le projet ne passe en production finale. C’est là que l’interactivité, le mouvement, les transitions d’écran et le placement de tout sur l’écran sont essentiels. Les problèmes et problèmes ne peuvent pas simplement être affichés sous forme d'image statique ou expliqués verbalement. Après tout, ces produits sont destinés aux vrais humains. Plutôt que de transférer tout cela dans le code, le processus de prototypage est de plus en plus entrepris par un logiciel graphique conçu uniquement à cette fin. Il est plus facile de corriger une erreur, de remplacer une image, de réécrire du texte, de déplacer un bouton, etc. à l'aide d'un éditeur visuel, plutôt que de réécrire et de déboguer le code en permanence.

En fait, ce logiciel est devenu un composant clé de l’environnement actuel de conception et de développement du «prototypage rapide».

Cela dit, amusons-nous avec Experience Design.

02 de 07

Créer un NIP de destination avec un cercle simple dans Adobe Experience Design

Un aspect intéressant de XD est son utilisation d’outils de dessin vectoriel. Vous ne trouvez pas d’icône? Aucun problème. Rouler le vôtre. Voici comment:

1. Sélectionner L'outil Ellipse et, en appuyant sur les touches Option / Alt-Shift, tracez un cercle.
2. Avec le cercle sélectionné, définissez le Remplir la couleur à FF0000 et la bordure à "aucun" dans les propriétés.
3. Double-cliquez sur le cercle pour afficher les points d'ancrage. Faites glisser l'ancre inférieure vers le bas.
4. Double-cliquez sur le point d'ancrage sélectionné et les courbes sont remplacées par des lignes.
5. Tracez un autre petit cercle avec un remplissage blanc et sans charge. Placez-le en position et sélectionnez la goupille et le cercle. Dans le panneau Aligner en haut des propriétés, cliquez sur le bouton Centre horizontal pour créer l'épingle.

03 de 07

Créer un flou d'arrière-plan dans Adobe Experience Design

Il est courant d'avoir du texte ou un autre contenu sur une image d'arrière-plan. Le problème ici est que l'image, le plus souvent, domine le contenu au-dessus d'elle. Un moyen de résoudre ce problème consiste à rendre l’arrière-plan flou. Vous pouvez rendre l’image floue dans Photoshop ou un autre logiciel de traitement d’images, mais c’est quelque peu inefficace, d’autant plus que XD peut désormais s’acquitter de cette tâche à votre place. Voici comment:

1. Créez un nouveau plan de travail et ajoutez votre image de fond.
2. Sélectionnez l'outil Rectangle and trace un rectangle sur l’image. Avec le rectangle sélectionné, définissez le remplissage sur blanc et le contour sur aucun.
3. Avec le rectangle sélectionné, sélectionnez Flou d'arrière-plan dans le panneau des propriétés. Les trois curseurs sont Blur Amount, Brightness et Opacity. Voici ce qu’ils font:

• Flou Montant: Ajuste le flou de l'image sous la forme. La valeur maximale est +50.
• Luminosité: Ajuste les hautes lumières et les ombres dans l'image. La valeur minimale est -50 et la valeur maximale, +50.
• Opacité: Affecte la transparence de la forme et la visibilité de l'image sous la forme. Les valeurs vont de 0% à 100%.

Si vous voulez vraiment “changer les choses”, changez la couleur de la forme et jouez avec la valeur d'opacité pour changer le “look” de l'image.

04 de 07

Créer un Scrim dans Adobe Experience Design

Un problème de conception courant est que les éléments d'interface doivent avoir une couleur commune, mais sont perdus lorsqu'ils sont placés sur une image d'arrière-plan ou une couleur unie. La solution est un canevas. Un canevas est un dégradé quelque peu opaque placé entre l'élément d'interface et l'arrière-plan. Ceci est facile à accomplir dans XD. Voici comment:

1. Créez votre planche graphique dans XD, ajoutez une image, copiez et collez un élément de l'interface à partir de l'élément approprié. Kit d'interface utilisateur - Fichier> Ouvrir le kit d'interface utilisateur … - dans l'artboard. Dans l'image ci-dessus, la photo rend la barre d'état et la barre d'applications difficiles à voir.
2. Sélectionnez l'outil Rectangle et tracez un rectangle. Dans le panneau Propriétés, sélectionnez Remplissage et sélectionnez Dégradé dans le menu déroulant du sélecteur de couleurs. Définissez les couleurs du dégradé sur Noir et blanc. Définissez la valeur A - Opacité - sur 60% et le Blanc Une valeur à 0%.
3. Avec le rectangle sélectionné, sélectionnez Objet> Organiser> Renvoyer. Les éléments d'interface sont maintenant visibles sur l'image.

05 de 07

Créer un avatar image dans Adobe Experience Design

Un motif de conception courant se retrouve dans les applications de conversation où les gens se parlent et où la photo du haut-parleur apparaît à l'écran. Ces avatars sont généralement des images masquées. Il est très simple d'accomplir cela dans XD. Voici comment:

1. Vous commencez avec une image et un cercle ou une autre forme sur la planche. Vous pouvez remplir le cercle avec n'importe quelle couleur. Ce que vous n’avez pas besoin de faire est d’ajouter une couleur de trait. Il disparaîtra lorsque vous créerez l'effet, alors pourquoi vous embêter. Si vous devez attiser le cercle, copiez-le dans le presse-papiers.
2. Déplacez le cercle sur l'image et sélectionnez à la fois l'image et le cercle. Avec les objets bot sélectionnés, sélectionnez Objet> Masque avec forme. Lorsque vous relâchez la souris, l'avatar est créé. De là, vous pouvez le redimensionner.
3. Si vous avez besoin d'ajouter un trait, collez le cercle situé sur votre presse-papiers sur la planche. Lorsque la copie est sélectionnée, désactivez le remplissage dans les propriétés et ajoutez une couleur et une largeur de trait. Pour les aligner, sélectionnez les deux objets et cliquez sur les boutons Centrer l'alignement dans les options Aligner en haut du panneau de propriétés.
4. Si vous souhaitez déplacer la photo dans le masque, double-cliquez sur le masque. Cela montrera l'image et la forme du masque. Cliquez sur l'image et faites-la glisser en position. Lorsque vous relâchez la souris, l'image se trouve dans sa nouvelle position à l'intérieur du masque.

06 de 07

Jouez avec les planches d'art Adobe Experience Design

Les planches d’art Experience Design ne sont pas là pour vous permettre de placer du contenu. Eux aussi peuvent être manipulés. Voici deux choses que vous pouvez faire:

1. Si vous avez besoin des versions Paysage et Portrait d'une planche graphique, dupliquez-la et, lorsque la copie est sélectionnée, cliquez sur le bouton Paysage dans le panneau Propriétés. La planche graphique passera en orientation paysage. Si le contenu de l’artboard est défini, cliquez sur le nom de l’artboard. Les propriétés de l’artboard apparaissent dans le panneau des propriétés.
2. Pour ajouter une couleur personnalisée à la planche graphique et au projet, sélectionnez-la, puis cliquez sur la pastille de couleur de remplissage dans la section Apparence du panneau Propriétés. Entrez la valeur hexadécimale de la couleur et cliquez sur le signe +. La couleur sera ajoutée en tant que couleur personnalisée. Pour appliquer cette couleur ailleurs, sélectionnez un objet et cliquez sur la puce Couleur personnalisée pour appliquer la couleur.
3. Les planches peuvent être faites défiler verticalement. Pour ce faire, sélectionnez la planche graphique et modifiez sa hauteur, soit dans les panneaux de propriétés, soit en faisant glisser le bas de la planche graphique vers le bas. Dans la zone Défilement du panneau des propriétés, sélectionnez verticale dans le menu déroulant et entrez la hauteur de la fenêtre d'affichage pour l'écran. Cette ligne bleue en pointillé vous montre le bas de la fenêtre. Pour le tester, cliquez sur le bouton Lecture et faites défiler. Pour désactiver le défilement, sélectionnez Aucun dans la liste déroulante Défilement.

07 de 07

Modifier un kit d'interface utilisateur mobile dans Adobe Experience Design

Experience Design contient un kit d’interface utilisateur pour développer les interfaces utilisateur iOS, Android et Windows. Lorsque vous les ouvrez pour la première fois, vous pouvez penser qu’elles sont assez bien placées. Pas tout à fait, chacun des éléments de ces kits est entièrement modifiable. Découvrons-le en construisant une structure filaire Android.

1. Vous commencez par sélectionner l'outil Artboard et en sélectionnant Android Mobile dans la section Google du panneau de propriétés.
2. Sélectionnez Fichier> Ouvrir le kit d'interface utilisateur> Matériel Google.. Cela ouvre le kit d'interface utilisateur Material Design. Sélectionnez la loupe et le rectangle de sélectionil planche d'art. J'aime commencer par celui-ci, car il me donne les indications pour placer correctement les éléments d'interface à l'écran. Si vous cliquez sur l'une des barres bleues, vous verrez qu'elle est verrouillée. Cliquez sur le verrou attaché à chacun d'eux pour le déverrouiller. Sélectionnez la planche graphique et copiez la sélection dans le presse-papiers. Revenez à votre document et collez l'écran dans votre planche de travail.
3. Cliquez une fois sur la barre d'applications en haut de la planche graphique. Remarquez comment vous pouvez le sélectionner. Un séjour sans failleSélectionnez Objet> Organiser> Mettre au premier plan. Votre sélection est maintenant au-dessus des guides d’écran. Cela devrait vous indiquer que chacun des éléments à l'écran peut être modifié.
4. Double-cliquez sur la barre d'état en haut et, dans le panneau Propriétéset la couleur de remplissage à 455A64. Double-cliquez sur la barre des applications et définissez son remplissage sur 607D8B. Cela devrait vous indiquer que chaque élément d'un kit d'interface utilisateur peut être modifié pour répondre aux spécifications de couleur du projet.
5. Qu'en est-il des icônes? Voici comment changer leur couleur. Double-cliquez sur le coeur pour le sélectionner. Si vous regardez le panneau Propriétés, vous pouvez supposer que vous ne pouvez pas modifier la sélection. Pas assez. Double-cliquez sur le coeur une fois de plus. Les propriétés s’ouvrent et vous modifiez la couleur de remplissage en FF0000. Répétez cette astuce double-double pour les icônes restantes et le texte.