Design af brugergrænseflader, især til chat-applikationer, kan være en udfordrende, men også kreativ opgave. I denne tutorial viser jeg dig, hvordan du effektivt kan designe chat-controlleren i Sketch. Vi vil især arbejde med lagdeling af elementer for at spare tid og udvikle et rent design.
Vigtigste indsigter
- Lagelementer i Sketch hjælper med at holde overblikket og hurtigt implementere designændringer.
- Brugen af genanvendelige stilarter sparer tid og sikrer konsistens i designet.
- Integration af designretningslinjer giver et tiltalende og professionelt udseende.
Trin-for-trin vejledning
Først begynder vi med at oprette chat-controlleren. Du bør allerede være bekendt med Sketch's brugergrænseflade, så vi går direkte videre til designet.
Trin 1: Oprettelse af chat-controlleren Åbn dit aktuelle projekt i Sketch, og vælg et nyt artboard til chat-controlleren. Sørg for at vælge iPhone 8 som enhed for at have en passende skærmstørrelse. Navngiv artboardet "Chat" for nemmere identifikation.
Trin 2: Kopiering af navigationslinjen For at opnå et ensartet design skal du kopiere navigationslinjerne fra din home-controller. Placer dem i det samme layout som før for at bevare konsistensen. Status- og navigationslinjerne skal være identiske.
Trin 3: Tilpasning af layoutet Sæt hjælpe-linjer med 16 pixels afstand for at sikre, at alle elementer er præcist og pænt justeret. Sørg for, at der ikke opstår "glitches" i justeringen ved at tilpasse værdierne via inspektørvisningen.
Trin 4: Overførsel af stilarter Hvis du ønsker at bruge stilarter fra eksterne biblioteker, skal du åbne det originale dokument for at foretage ændringer. Du kan justere farver og skrifttyper her, som skal anvendes i hele projektet. Dette gør det muligt for dig hurtigt at anvende ændringer på alle relaterede elementer.
Trin 5: Oprettelse af chatboblen For at repræsentere beskederne skal du oprette en ny form i chat-controlleren. Vælg baggrundsfarven til den nye chatboble. Vi opretter en blå og en grøn variant til indgående og udgående beskeder.
Trin 6: Indsættelse af tekst Opret et tekstfelt i chatboblen og indtast en velkomstbesked, som f.eks. "Hej, flot at du er her!" Sørg for at justere skriftfarven og stilen, så teksten træder frem og er letlæselig.
Trin 7: Oprettelse af flere svarmuligheder For at præsentere brugeren for forskellige svarmuligheder kan du bruge kopier af chatboblerne. Sørg for, at afstanden mellem elementerne forbliver ensartet. Du kan tilføje yderligere tekstfelter med forslag til svar, f.eks. "Hvad er dit mål?".
Trin 8: Tilpasning af elementer Sørg for, at alle elementer har samme højde, og kopier dem for hurtigere at afslutte designet. Ved tilpasningen kan du bruge de grupper og ikoner, du har oprettet, for at holde ændringerne konsistente og enkle.
Trin 9: Sidste justeringer og gruppering Saml alle elementer i grupper for at øge overskueligheden. Du kan navngive grupperne, så de er let genkendelige, som "Chat_Boble" eller "Svarmuligheder".
Resume - Chatdesign med lag i Sketch: En trin-for-trin vejledning
Du har nu lært, hvordan du designer en chat-controller med Sketch. Fra valg af det rigtige artboard til oprettelse af chatbobler til anvendelse af stilarter har du lært effektive teknikker til at spare tid og oprette et ensartet design.
Ofte stillede spørgsmål
Hvordan kan jeg oprette genanvendelige stilarter i Sketch?Du kan oprette stilarter ved at oprette en tekst- eller baggrundsstil og anvende den på andre elementer.
Hvad er fordelen ved lag i Sketch?Lag hjælper med at organisere forskellige designelementer og forenkler ændringer samt styringen af designet.
Hvordan kan jeg holde afstanden mellem elementer i Sketch ensartet?Brug hjælpe-linjerne og justeringsværktøjerne for at kontrolere og bekræfte afstanden mellem dine designelementer.
Hvad er en god tilgang til at overveje chat-databeskyttelse?Sørg for, at dit design indeholder klare henvisninger til privatlivspolitikker, der er synlige for brugerne.
Hvilken rolle spiller farvevalg i chat-design?Farver kan fremkalde følelser og påvirke brugeroplevelsen. Vælg farver, der passer til din apps identitet og fremmer læsbarheden.
