Utformningen av användargränssnitt, särskilt för chatt-applikationer, kan vara en utmanande men också kreativ uppgift. I den här handledningen visar jag dig hur du effektivt kan designa chattkontrollen i Sketch. Vi kommer särskilt att arbeta med lager av element för att spara tid och utveckla en ren design.
Viktigaste insikter
- Att använda lager av element i Sketch hjälper till att hålla översikten och snabbt genomföra designändringar.
- Användning av återanvändbara stilar sparar tid och säkerställer konsekvens i designen.
- Integrationen av designriktlinjer ger ett tilltalande och professionellt utseende.
Steg-för-steg-guide
Vi börjar med att skapa chattkontrollen. Du bör redan vara bekant med Sketch-användargränssnittet, så vi går direkt in i designprocessen.
Steg 1: Skapa chattkontrollen Öppna ditt aktuella projekt i Sketch och välj en ny arbetsyta för chattkontrollen. Se till att du väljer iPhone 8 som enhet för att få en lämplig skärmstorlek. Namnge arbetsytan "Chatt" för enklare identifiering.
Steg 2: Kopiera navigationsfältet För att uppnå en enhetlig design, kopiera navigationsfältet från din hemsida. Placera dem i samma layout som tidigare för att behålla konsekvensen. Status- och navigationsfältet bör vara identiska.
Steg 3: Justera layouten Använd hjälplinjer med 16 pixels mellanrum för att säkerställa att alla element är exakt och prydligt alignerade. Se till att inga "glitches" uppstår i rupturen genom att justera värdena via inspektörsvisningen.
Steg 4: Överföring av stilar Om du vill använda stilar från externa bibliotek, öppna originaldokumentet för att göra ändringar. Du kan justera färger och typsnitt här, som ska användas genom hela projektet. Detta gör att du snabbt kan tillämpa ändringar på alla relaterade element.
Steg 5: Skapa chattbubblan För att visa meddelandena, skapa en ny form i chattkontrollen. Välj bakgrundsfärgen för den nya chattbubblan. Vi skapar en blå och en grön variant för inkommande och utgående meddelanden.
Steg 6: Infoga text Skapa ett textfält i chattbubblan och skriv in ett välkomstmeddelande, till exempel "Hej, kul att du är här!" Se till att justera textfärgen och stilen så att texten står ut och är lättläst.
Steg 7: Skapa flera svarsalternativ För att ge användaren olika svarsalternativ kan du använda kopior av chattbubblorna. Se till att avståndet mellan elementen förblir jämnt. Du kan lägga till fler textfält med förslag på svar, till exempel "Vad är ditt mål?".
Steg 8: Anpassa elementen Se till att alla element har samma höjd och kopiera dem för att snabbare slutföra designen. När du justerar kan du använda de grupper och symboler du har skapat för att hålla ändringarna konsekventa och enkla.
Steg 9: Sista justeringar och gruppering Gruppera alla element för att öka överskådligheten. Du kan namnge grupperna så att de är lätta att identifiera, som "Chat_Bubble" eller "Svarsalternativ".
Sammanfattning - Chattdesign med lager i Sketch: En steg-för-steg-guide
Du har nu lärt dig hur du designar en chattkontroll med Sketch. Från att välja rätt arbetsyta till att skapa chattbubblor och tillämpa stilar har du lärt dig effektiva tekniker för att spara tid och skapa en enhetlig design.
Vanliga frågor
Hur kan jag skapa återanvändbara stilar i Sketch?Du kan skapa stilar genom att skapa en text- eller bakgrundsstil och sedan tillämpa den på andra element.
Vad är fördelen med lager i Sketch?Lager hjälper till att organisera olika design-element och förenklar ändringar samt hantering av designen.
Hur kan jag hålla avståndet mellan element i Sketch jämnt?Använd hjälplinjer och justeringsverktyg för att kontrollera och bekräfta avståndet mellan dina designelement.
Vad är en bra strategi för att ta hänsyn till chattens dataskydd?Se till att din design innehåller tydliga hänvisningar till sekretesspolicyer som är synliga för användarna.
Vilken roll spelar färgval i chattdesign?Färger kan väcka känslor och påverka användarupplevelsen. Välj färger som passar din apps identitet och främjar läsbarheten.
