Designet af en brugergrænseflade kan gøre forskellen mellem en god og en fantastisk app. I denne tutorialfokuserer vi på, hvordan du kan bruge designsom værktøjtil at gøre din app mere tiltalende. Vi tager fat på en ny skærm, som visuelt adskiller sig fra eksisterende elementer og fanger brugeren med en tiltalende design.
Vigtigste indsigter
- Forskellige farver og kontraster øger den visuelle appel.
- Klare layoutstrukturer hjælper brugerne med at navigere bedre.
- Ensartede skrifttyper og design fremmer en behagelig brugeroplevelse.
Trin-for-trin vejledning
Tilføj ny controller
For at oprette den nye skærm begynder vi med at tilføje en ny controller. Gå til din interface-builder, klik på „Tilføj controller“ og placer den, så den tilpasser sig under de eksisterende skærme.
Indstilling af controlleren
Navngiv din nye controller som „Kursus Controller“ for at lette den fremtidige tildeling. Sørg for, at det forældede „iPhone 8 copy“ navn bliver erstattet med „Profil Controller“.
Tilpas baggrundsfarve
Forat sikre appens visuelle appel, er det vigtigt at vælge en dominerende baggrundsfarve. Vælg en stærk grøn, som allerede bruges andre steder i din app. Denne strategi forstærker kontrasten til de hvide elementer og giver mere dynamik.
Konfigurer statuslinje
Sæt statuslinjen til „Dark“ for at sikre, at teksten er letlæselig på den grønne baggrund. Tjek positionen, og sørg for, at den er perfekt tilpasset.
Opret label
Opret en ny label til kursusvisningen. Begynd med en overskrift, der strækker sig over hele controllerens bredde. Vælg skrifttype H4, og farv teksten hvid.
Tilføj yderligere labels
Tilføj en anden label til kurstitlen. Brug skrifttypestørrelsen 40 pixel og sørg for, at den er korrekt placeret – der bør ikke være afstand til den foregående label.
Vis yderligere oplysninger
For at give brugerne mere information, tilføj en tredje label. Brug en mindre skrifttype på 17 pixel, så teksten ikke træder for meget frem, indtil den er nødvendig.
Oprettelse af tabel
Tilføj til sidst en tabel for at præsentere lektionerne klart. Start med et simpelt rektangel, der dækker hele bredden, og design baggrunden lidt mørkere for at kunne arbejde med hvide tekstfarver.
Lektioner som celler
Opret en celle til den første lektion med titlen „Basics Part 1“. Vær opmærksom på den passende afstand og justering.
Indsæt separator
For at skabe en klar opdeling mellem lektionerne, tilføj en separator (en tynd linje). Denne linje skal placeres mellem cellerne for at opnå en visuel adskillelse.
Opret afbryderknap
For at give brugerne mulighed for at forlade denne visning, tilføj en afbryderknap i form af et „X“. Sørg for, at denne er godt synlig i midten af skærmen.
Udsigt til de næste trin
Når den nye kursus controller er oprettet, vil det næste trinvære at integrere en login funktion. Dette giver brugerne mulighed for at gemme deres fremskridt inden for appen.
Resumé – Design som værktøj til app-fine-tuning
I denne tutorial har du lært, hvordan du kan skabe en forbedret brugeroplevelse gennem effektivt design af din app. Fra tilføjelsen af en ny controller, valg af passende farver til integration af celler og knapper – du har gennemgået alle nødvendige trin for at gøre din app visuelt tiltalende.
FAQ
Hvad er hovedmålene med designprocessen?Hovedmålet er at skabe en tiltalende og brugervenlig grænseflade, der letter brugen af appen.
Hvor vigtige er farver i design?Farver er afgørende, da de påvirker brugeroplevelsen og hjælper med at fremhæve vigtige informationer.
Hvordan kan jeg sikre, at skrifttyperne er ensartede?Brug fastsatte tekststørrelser og stilarter i dit designsystem for at sikre ensartethed.
Hvor ofte skal jeg gennemgå designet af min app?Det anbefales at gennemgå designet regelmæssigt og tilpasse det til brugerfeedback og app-opdateringer.
Hvilke værktøjer anbefales til prototyping?Populære værktøjer inkluderer Sketch, Figma og Adobe XD, som alle tilbyder omfattende funktioner til prototyping.
