Skab Interaktive Prototypes med Adobe XD: Faste Elementer og Overlays

I sommeren 2023 introducerede Adobe XD to banebrydende funktioner til prototyping: faste elementer og overlays. Disse værktøjer er essentielle for enhver designer, der ønsker at tage sine prototyper til næste niveau og simulere mere komplekse brugerinteraktioner. I denne artikel vil vi dykke ned i, hvordan du nemt kan anvende disse funktioner til at skabe en dynamisk restaurantapp-prototype, der demonstrerer, hvordan en menulinje forbliver synlig under scrolling, og hvordan en undermenu kan poppe op ved et klik. Vi vil også inkludere en Illustrator-fil med ikoner, så du hurtigt kan komme i gang med dine egne designs.

Hvad er Faste Elementer og Overlays?

Faste elementer giver dig mulighed for at låse et objekt fast til en bestemt position på din artboard. Dette betyder, at uanset hvordan brugeren scroller på siden, vil det faste element forblive på sin plads. Dette er utroligt nyttigt til at simulere elementer som navigationsbarer, footers eller call-to-action-knapper, der skal være konstant tilgængelige.

Overlays, derimod, bruges til at simulere interaktioner, hvor et nyt element eller en ny skærm popper op over det eksisterende indhold. Tænk på det som en lightbox-effekt, en modal dialogboks eller en undermenu, der glider ind på skærmen. Dette tilføjer et lag af realisme til dine prototyper, der gør dem langt mere intuitive og engagerende.

Inspiration fra Kendte Brands

Før vi går i gang med selve guiden, lad os se på, hvordan store brands som McDonald's og Netflix anvender disse funktioner:

Kom Godt i Gang med Din Restaurantapp i Adobe XD

I denne tutorial vil vi designe en simpel restaurantapp. Vi vil oprette to hovedlayouts. Den første vil være en lang side, der viser effekten af faste elementer, og den anden vil indeholde et fuldskærms hero-billede med en knap, der åbner en overlay-menu.

Forberedelse af Mobile Layouts

1. Åbn Adobe XD og vælg en passende skabelon, f.eks. "iPhone 6/7/8 Plus". Gem din fil (f.eks. som "RestaurantApp.xd").

2. Opret en ny Artboard: Klik på "Artboard Tool" (eller tryk på A) og klik ved siden af din eksisterende artboard for at oprette en identisk kopi. Vi skal bruge to artboards til vores demonstration.

Design af Navigationsbaren (Fast Element)

På den første artboard skal vi designe en navigationsbar, der skal være et fast element.

1. Opret en rektangel (R) med en bredde på 414 pixels og en højde på 48 pixels. Giv den en passende farve, f.eks. #DE4F4F (en dybrød farve).

2. Importer ikoner: Vi har inkluderet en Illustrator-fil med ikoner. Åbn filen, og træk/slip de ønskede ikoner ind i dit Adobe XD-bibliotek (File > Import or drag and drop). Alternativt kan du importere dem direkte til din artboard.

3. Tilføj ikoner: Træk ikonerne fra dit bibliotek til navigationsbaren. Sørg for, at de er jævnt fordelt og har en ensartet størrelse (ca. 25 pixels bredde). Juster farven på ikonerne til hvid for at matche baggrunden.

4. Tilføj logo og tekst: Brug "Text Tool" (T) til at tilføje dit app-navn, f.eks. "Gusto". Brug en læselig skrifttype som "Lato" eller "Leckerli One" og centrer teksten i navigationsbaren.

5. Gruppér navigationselementerne: Marker alle elementerne i navigationsbaren (logo, ikoner, baggrundsrektangel), højreklik og vælg "Group" (Ctrl+G eller Cmd+G). Giv gruppen navnet "Menu".

Design af Hero-sektionen og Indhold

1. Tilføj et hero-billede: Træk et attraktivt billede ind på din artboard. Juster højden til ca. 380 pixels.

2. Skab en gradient-overlay: Opret et rektangel med samme størrelse som hero-billedet og placer det ovenpå. Anvend en gradient-overlay (f.eks. fra mørk til gennemsigtig) for at give teksten bedre læsbarhed.

3. Tilføj tekst og knap: Placer hvid tekst med en overskrift og en kort beskrivelse på hero-billedet. Opret en cirkulær knap med teksten "Bestil nu" og tilføj et lille ciffer på indkøbskurv-ikonet.

Gør Artboardet Scrolbart

For at simulere scrolling skal vi forlænge vores artboard.

1. Juster Artboard-højde: Dobbeltklik på artboard-navnet og ændr højden til f.eks. 1265 pixels. Sørg for, at "Scrolling" er sat til "Vertical" og "Viewport Height" til 736 pixels (eller den ønskede synlige højde på en mobilskærm).

2. Tilføj menu-elementer: Du kan nu begynde at tilføje dit restaurantmenu. Brug "Rectangle Tool" (R) til at oprette bokse til billeder, "Text Tool" (T) til titler, beskrivelser og priser. Tilføj "Add to Cart"-knapper til hvert menupunkt.

3. Brug "Repeat Grid": Tilføj et menupunkt med billede, tekst og knap. Marker elementerne og klik på "Repeat Grid" i højre sidebar. Du kan nu nemt duplikere og tilpasse hvert menupunkt ved at ændre det første element.

Design af den Anden Artboard (Overlay)

1. Kopiér og indsæt navigations- og hero-sektionen fra den første artboard til den anden.

2. Tilpas hero-billedet: Gør hero-billedet fuldskærm på denne artboard.

3. Tilføj en "Try Now" knap på hero-billedet.

Anvendelse af Faste Elementer

Nu skal vi gøre navigationsbaren fast.

1. Vælg "Menu"-gruppen på din første artboard.

2. I højre sidebar, under "Appearance", aktiver "Fixed Position".

3. Vigtigt: Sørg for, at "Menu"-gruppen er øverst i lagpanelet, så alle andre elementer scroller under den.

4. Forhåndsvisning: Klik på "Desktop Preview"-knappen øverst til højre. Når du scroller på siden, vil du se, at navigationsbaren forbliver fast.

Anvendelse af Overlays

Lad os nu opsætte overlay-menuen til vores anden artboard.

1. Opret undermenuer: På en ny artboard (eller en kopi af din anden artboard), design tre små "overlay"-menuer. Brug rektangler, linjer og tekst til at skabe dem. Du kan bruge ikonerne fra Illustrator-filen her også. Disse vil fungere som de menuer, der popper op.

2. Skift til Prototype-tilstand: Klik på "Prototype"-fanen øverst til venstre.

3. Forbind knap til Overlay: Dobbeltklik på "hamburger-menu"-ikonet på din anden artboard. Træk den lille blå pil ud og placer den over på den artboard, der indeholder din første overlay-menu. I pop-up-vinduet, vælg "Overlay" som "Interaction" og "Slide right" som "Animation".

4. Forbind andre ikoner: Gør det samme for bruger-ikonet (forbind til Overlay Menu 2 med "Slide left") og indkøbskurv-ikonet (forbind til Overlay Menu 3 med "Slide left").

5. Test din Prototype: Klik på "Desktop Preview"-knappen. Nu kan du klikke på ikonerne og se dine overlay-menuer poppe op!

Konklusion

Med Adobe XD's funktioner til faste elementer og overlays er det blevet utroligt nemt at skabe interaktive og realistiske prototyper. Disse værktøjer kan markant forbedre brugeroplevelsen af dine designs og give en klarere demonstration af, hvordan din app vil fungere i praksis. Uanset om du designer en restaurantapp eller en hvilken som helst anden type applikation, vil mestring af disse funktioner utvivlsomt løfte dine prototyper til et professionelt niveau.

Ofte Stillede Spørgsmål (FAQ)

• Hvordan sikrer jeg, at et fast element forbliver øverst? Placer elementgruppen øverst i lagpanelet til venstre. Dette sikrer, at det altid er synligt over andre elementer.
• Kan jeg bruge overlays til mere end bare menuer? Ja, overlays er alsidige og kan bruges til alt fra modal-vinduer, pop-up-beskeder, billedgallerier eller enhver situation, hvor du vil vise indhold over det eksisterende layout.
• Hvordan kan jeg se min prototype på min telefon? Du kan uploade din XD-fil til Adobe Creative Cloud og derefter downloade Adobe XD-appen til din mobile enhed for at se din prototype direkte på din telefon.

Denne artikel er en del af en UX-designserie, sponsoreret af Adobe. Adobe XD er designet til en hurtig og flydende UX-designproces, der giver dig mulighed for at gå fra idé til prototype hurtigere. Design, prototype og del – alt i én app.

Hvis du vil læse andre artikler, der ligner Skab Interaktive Prototypes med Adobe XD, kan du besøge kategorien Teknologi.