Conception de chat dans Sketch pour une expérience utilisateur efficace

La conception d'interfaces utilisateur, en particulier des applications de chat, peut être une tâche exigeante mais aussi créative. Dans ce tutoriel, je vais te montrer comment concevoir efficacement le contrôleur de chat dans Sketch. Nous allons travailler particulièrement sur la superposition d'éléments (couches) pour te faire gagner du temps et développer un design propre.

Principales conclusions

• Les éléments de superposition dans Sketch aident à garder une vue d'ensemble et à mettre en œuvre rapidement les changements de design.
• L'utilisation de styles réutilisables fait gagner du temps et assure la cohérence du design.
• Intégrer des directives de conception donne un aspect attrayant et professionnel.

Guide étape par étape

Tout d'abord, nous allons commencer par créer le contrôleur de chat. Tu devrais déjà être familiarisé avec l'interface de Sketch, donc nous allons directement passer à la conception.

Étape 1: Création du contrôleur de chat Ouvre ton projet actuel dans Sketch et choisis un nouveau plan de travail pour le contrôleur de chat. Assure-toi de sélectionner l'iPhone 8 comme appareil pour avoir une taille d'écran appropriée. Nomme le plan de travail « Chat » pour une identification plus simple.

Étape 2: Copier la barre de navigation Pour obtenir un design cohérent, copie les barres de navigation de ton contrôleur d'accueil. Positionne-les dans la même mise en page qu'auparavant pour maintenir la cohérence. Les barres d'état et de navigation doivent être identiques.

Étape 3: Ajustement de la mise en page Ajoute des lignes de repère à 16 pixels d'intervalle pour t'assurer que tous les éléments sont correctement et proprement alignés. Assure-toi qu'aucun « glissement » ne se produise en ajustant les valeurs via la vue d'inspecteur.

Étape 4: Transfert des styles Si tu souhaites utiliser des styles d'autres bibliothèques, ouvre le document original pour apporter des modifications. Tu peux ici ajuster les couleurs et les polices qui seront utilisées dans l'ensemble du projet. Cela te permet d'appliquer rapidement les changements à tous les éléments associés.

Étape 5: Création de la bulle de chat Pour afficher les messages, crée une nouvelle forme dans le contrôleur de chat. Choisis la couleur de fond pour la nouvelle bulle de chat. Nous allons créer une variante bleue et une verte pour les messages entrants et sortants.

Étape 6: Insertion de texte Crée un champ de texte dans la bulle de chat et écris un message de bienvenue, comme « Bonjour, heureux que tu sois ici! » Assure-toi d'ajuster la couleur et le style de la police pour que le texte se démarque et soit bien lisible.

Étape 7: Création de plusieurs options de réponse Pour présenter différentes options de réponse à l'utilisateur, tu peux utiliser des copies des bulles de chat. Assure-toi que l'espacement entre les éléments reste uniforme. Tu peux ajouter d'autres champs de texte avec des propositions de réponses, par exemple « Quel est ton objectif? ».

Étape 8: Ajustement des éléments Assure-toi que tous les éléments ont la même hauteur et fais des copies pour terminer la conception plus rapidement. Lors de l'ajustement, tu peux utiliser les groupes et les symboles que tu as créés pour garder les changements cohérents et simples.

Étape 9: Derniers ajustements et regroupement Regroupe tous les éléments pour améliorer la lisibilité. Tu peux nommer les groupes de manière à ce qu'ils soient facilement identifiables, comme « Bulle_Chat » ou « Options_de_Réponse ».

Résumé - Design de chat avec des couches dans Sketch: Un guide étape par étape

Tu as maintenant appris à concevoir un contrôleur de chat avec Sketch. De la sélection du bon plan de travail à la création de bulles de chat en passant par l'application de styles, tu as appris des techniques efficaces pour gagner du temps et créer un design cohérent.