Adobe XD-tutorial - Erfaringsdesign og prototyping

Rasterdesign med Adobe XD til intuitive layoutninger

Alle videoer i tutorialen Adobe XD-guide - Oplevelsesdesign og prototyping

Adobe XD giver dig kraftfulde værktøjer til at designe layouter præcist. Når du arbejder med rasterindstillinger, kan du sikre, at dine designs er ensartede og æstetisk tiltalende både på desktop- og mobile enheder. Ved at bruge søjle- og rektangulære raster, gør du det ikke kun lettere at arrangere elementer, men skaber også en klar struktur i dit projekt.

Vigtigste indsigter

  • Layoutet i Adobe XD bruger som standard fire søjler, men det er også muligt at tilpasse antallet af søjler.
  • Søjleafstande og -bredder kan defineres frit, hvilket giver dig kontrol over dit design.
  • Det rektangulære raster er især nyttigt til mere præcise arrangementer af elementer.
  • Hjælpelinjer og justeringsfunktioner optimerer arbejdsgangen ved design.

Trinvise instruktioner

Aktiver raster

For at aktivere dit raster, skal du åbne dit artboard og finde afkrydsningsfeltet for raster i højre panel. Klik på det for at gøre rasteret synligt. Dette er det første skridt mod et struktureret design.

Rasterdesign med Adobe XD til intuitive layouts

Tilpas søjleindstillinger

Som standard viser Adobe XD fire søjler. Du kan ændre antallet af søjler alt efter dit projekt. Hvis du for eksempel arbejder med mobile designs, er fire søjler ofte optimale. Tilføj derefter et nyt artboard ved at trykke på genvejstasten 'A'. Vælg en tablet-format for at vise otte søjler, eller en webopløsning for tolv søjler.

Rasterdesign med Adobe XD til intuitive layouts

Definer søjleafstande

En vigtig funktion er muligheden for at ændre søjleafstanden. Sæt for eksempel søjleafstanden til 30 pixel for at påvirke udseendet. Så snart du ændrer afstanden, tilpasser rasteret sig. Ændr også søjlebredderne for at modificere afstanden mellem elementerne.

Konfigurer margener

Ud over søjlerne kan du også justere margenerne. Aktiver marginindstillingen og indstil værdierne for margenerne ovenfor og nedenunder til eksempelvis 50 pixel. Det giver dit design mere luft og struktur.

Rasterdesign med Adobe XD til intuitive layout

Praktisk eksempel med screenshots

Træk et screenshot fra din telefon ind på arbejdsfladen for at se en praktisk anvendelse af rasteret. Aktiver layout-rasteret for at tjekke margenerne og afstanden. Denne opsætning støtter placeringen af elementerne i henhold til rasteret.

Rasterdesign med Adobe XD til intuitive layouts

Arbejde med det rektangulære raster

Brug tastaturgenvejen 'Command + Shift + #' (eller 'Ctrl + Shift + #' for Windows) for at tænde og slukke for det rektangulære raster efter behov. Dette giver dig fleksibilitet til at skifte mellem forskellige rastertyper og bruge dem målrettet. Tilføj et andet artboard for at vise, hvordan det rektangulære raster fungerer.

Rasterdesign med Adobe XD til intuitive layouts

Fleksibel elementplacering

Når du opretter et rektangel med rektangelværktøjet, kan du flytte dine elementer i intervaller af ti eller tyve. Det gør det lettere at placere dem præcist i rasteret. At placere elementer langs rasterlinjerne fungerer gnidningsløst, så længe du holder øje med hjælpelinjerne.

Rasterdesign med Adobe XD til intuitive layouts

Brug hjælpelinjer

Når du arbejder med søjler og raster, vil du bemærke hjælpelinjerne, der hjælper dig med at justere. Disse er særligt nyttige til at arrangere elementer for at sikre, at alt ser godt ud og er pænt arrangeret. Ved at holde 'Command'-tasten nede kan du deaktivere automatisk justering, hvis du har brug for mere frihed til at placere elementerne.

Rasterdesign med Adobe XD til intuitive layouts

Integration af designprincipper

Husk altid, at når du arbejder med raster, handler det om at skabe et rent og effektivt layout. Brug de indsigter, du opnår under designprocessen, til at optimere dine designs og være fleksibel, især når du arbejder med responsive designs.

Rasterdesign med Adobe XD til intuitive layouts

Sammenfatning – Mestere rasterindstillinger i Adobe XD

Brugen af raster- og søjleindstillinger i Adobe XD er essentielt for at skabe strukturerede designs. Du har lært, hvordan du aktiverer layouter, tilpasser søjler og afstande og bruger hjælpelinjer til din fordel. Gennem disse teknikker arbejder du mere effektivt og designer tiltalende brugerflader.

Ofte stillede spørgsmål

Hvordan aktiverer jeg rasteret i Adobe XD?Du kan aktivere rasteret ved at klikke på afkrydsningsfeltet under raster i dit højre panel.

Hvor mange søjler kan jeg bruge i mit layout?Du kan vælge mellem 4, 8 og 12 søjler, afhængigt af format og størrelse af dit design.

Hvordan ændrer jeg søjleafstanden?Ændr søjleafstanden direkte i højre panel ved at indtaste den relevante værdi.

Hvad er formålet med hjælpelinjerne?Hjælpelinjer hjælper dig med at justere og positionere elementer præcist inden for rasteret.

Kan jeg sætte rasterindstillingerne som standard?Ja, du kan tilpasse rasterindstillingerne og sætte dem som standard for nemmere brug i fremtidige projekter.