Utformingen av brukergrensesnitt, spesielt for chat-applikasjoner, kan være en krevende, men også kreativ oppgave. I denne veiledningen viser jeg deg hvordan du kan designe chat-kontrolleren effektivt i Sketch. Vi vil særlig jobbe med lagdeling av elementer for å spare tid og utvikle et ryddig design.
Videoen lastes først fra YouTube når den spilles av – da overføres data (blant annet IP-adressen) til YouTube/Google. Mer i personvernerklæringen
Viktigste funn
- Lag-elementer i Sketch hjelper deg å holde oversikt og innføre designendringer raskt.
- Bruk av gjenbrukbare stiler sparer tid og sikrer konsistens i designet.
- Integrering av designretningslinjer gir et tiltalende og profesjonelt utseende.
Trinn-for-trinn-guide
Først begynner vi med å lage chat-kontrolleren. Du bør allerede være kjent med brukergrensesnittet til Sketch, så vi vil gå rett inn i designet.
Trinn 1: Lage chat-kontrolleren Åpne ditt nåværende prosjekt i Sketch og velg et nytt artboard for chat-kontrolleren. Sørg for at du velger iPhone 8 som enhet for å få en passende skjermstørrelse. Gi artboardet navnet “Chat” for enklere referanse.
Trinn 2: Kopiere navigasjonslinjen For å oppnå et enhetlig design, kopier navigasjonslinjene fra din hjemme-kontroller. Plasser disse i samme oppsett som før for å opprettholde konsistens. Status- og navigasjonslinjene bør være identiske.
Trinn 3: Justering av oppsettet Sett opp hjelpelinjer med 16 piksler avstand for å sikre at alle elementer er nøyaktig og ryddig justert. Pass på at det ikke oppstår “glitches” i justeringen ved å justere verdiene gjennom inspektørvisningen.
Trinn 4: Overføre stiler Hvis du vil bruke stiler fra eksterne biblioteker, åpne originaldokumentet for å gjøre endringer. Du kan justere farger og skrifttyper som skal brukes gjennom hele prosjektet. Dette lar deg bruke endringer raskt på alle relaterte elementer.
Trinn 5: Lage chat-boblen For å vise meldingene, lag en ny form i chat-kontrolleren. Velg bakgrunnsfarge for den nye chat-boblen. Vi lager en blå og en grønn variant for innkommende og utgående meldinger.
Trinn 6: Legge til tekst Lag et tekstfelt i chat-boblen og skriv en velkomstmelding, som for eksempel “Hallo, hyggelig å ha deg her!” Pass på å justere skriftfarge og stil slik at teksten skiller seg ut og er lett å lese.
Trinn 7: Lage flere svaralternativer For å presentere brukeren med ulike svaralternativer, kan du bruke kopier av chat-boblene. Sørg for at avstanden mellom elementene forblir jevn. Du kan legge til flere tekstfelt med forslag til svar, f.eks. “Hva er målet ditt?”.
Trinn 8: Justere elementene Sjekk at alle elementer har samme høyde og kopier dem for å fullføre designet raskere. Når du justerer, kan du bruke gruppene og symbolene du har laget for å holde endringene konsistente og enkle.
Trinn 9: Siste justeringer og gruppering Samle alle elementer i grupper for å øke oversikten. Du kan navngi gruppene slik at de blir lett identifiserbare, for eksempel “Chat_Bubble” eller “Svaralternativer”.
Oppsummering - Chatdesign med lag i Sketch: En trinn-for-trinn-guide
Du har nå lært hvordan du designer en chat-kontroller i Sketch. Fra valg av riktig artboard til oppretting av chat-bobler og anvendelse av stiler, har du lært effektive teknikker for å spare tid og lage et enhetlig design.
Vanlige spørsmål
Hvordan kan jeg lage gjenbrukbare stiler i Sketch?Du kan lage stiler ved å opprette en tekst- eller bakgrunnsstil og deretter anvende den på andre elementer.
Hva er fordelen med lag i Sketch?Lag hjelper deg å organisere forskjellige designelementer og forenkler endringer samt administrering av designet.
Hvordan kan jeg holde avstanden mellom elementer jevn i Sketch?Bruk hjelpelinjer og justeringsverktøy for å sjekke og bekrefte avstanden mellom dine designelementer.
Hva er en god tilnærming for å ta hensyn til personvernet i chat?Sørg for at designet ditt inneholder tydelige henvisninger til personvernregler som er synlige for brukerne.
Hvilken rolle spiller fargevalg i chat-design?Farger kan fremkalle følelser og påvirke brukeropplevelsen. Velg farger som passer til identiteten til appen din og fremmer lesbarhet.
