Optimalt Design i Adobe XD til iPhone X og iPhone 8

Når du designer applikationer til iPhones, er præcision og forståelse for enhedens unikke karakteristika afgørende for at skabe en fremragende brugeroplevelse. Især når det kommer til modeller som iPhone X og iPhone 8, som trods deres fællesskab inden for Apple-økosystemet, præsenterer forskellige designudfordringer. Denne omfattende guide vil dykke ned i, hvordan du korrekt sætter dit artboard op i Adobe XD for både iPhone X og iPhone 8, med et særligt fokus på de vigtige "sikre områder" og de UI-elementer, der er unikke for hver model. Det handler ikke kun om at få dit design til at se godt ud, men også om at sikre, at det fungerer fejlfrit og intuitivt for slutbrugeren, uanset hvilken enhed de anvender.

Forståelse af Sikre Områder (Safe Areas) i iOS

Før vi kaster os ud i designprocessen, er det fundamentalt at forstå konceptet med iOS's "sikre områder". Apple har defineret disse områder for at hjælpe designere med at placere indhold, så det er fuldt synligt og tilgængeligt, uden at blive skjult af enhedens hardware (som notch'en på iPhone X) eller systemets UI-elementer (som statuslinjen). Forestil dig det som en usynlig ramme, der guider dig til, hvor dit app-indhold trygt kan bo.

De sikre områder varierer afhængigt af skærmens orientering – altså om telefonen holdes vertikalt (portræt) eller horisontalt (landskab). Dog er de vertikale retningslinjer de mest almindelige og ofte de vigtigste at mestre for UI/UX-designere. Her er en opdeling af de primære elementer, der definerer de sikre områder:

• Statuslinjen: Øverst på skærmen findes statuslinjen, som viser tid, batteriniveau, Wi-Fi-signal og mobildækning. Denne er standard på både iPhone 6/7/8 og iPhone X, men dens placering og højde kan påvirkes af notch'en på iPhone X.
• Hjemmeindikatoren: Unik for iPhone X og nyere modeller er hjemmeindikatoren, en lille vandret bjælke nederst på skærmen, der bruges til at navigere tilbage til hjemmeskærmen. Dette område skal respekteres for at undgå at dække vigtigt indhold.
• Navigationslinjen: Ofte placeret under statuslinjen og bruges til app-specifik navigation og titler. Denne kan tilpasses i højden afhængigt af appen (tænk på Instagram eller Twitter).
• Fanebladsmenuen (Tab Bar): Typisk placeret nederst på skærmen (over hjemmeindikatoren på iPhone X) og bruges til at skifte mellem hovedsektioner i appen. Også denne kan tilpasses.
• Hovedindholdsområdet: Dette er det grå layoutområde (undgå layoutmargenen), hvor din apps primære indhold, herunder tekst, knapper og de fleste billeder, skal placeres. Selvom billeder kan strække sig ud over margenen og være fuld bredde (som f.eks. Instagram-fotos), bør kerneinteraktioner og vigtig information altid forblive inden for de sikre rammer.

At designe med disse retningslinjer i tankerne sikrer, at din app ser professionel ud og er intuitiv at bruge. Ignoreres de, risikerer du, at vigtige elementer bliver afskåret, skjult eller svære at interagere med, hvilket fører til en dårlig brugeroplevelse.

Kom godt i gang med Adobe XD og Apple UI Kits

For at begynde din designrejse i Adobe XD er det første skridt at vælge det korrekte artboard og derefter integrere Apples officielle UI-kits, som indeholder præcise elementer og skabeloner. Disse kits er uundværlige for at sikre, at dine designs lever op til Apples standarder og bedst muligt afspejler den faktiske enhedsoplevelse.

Start med at åbne Adobe XD. På startskærmen får du mulighed for at vælge forskellige artboard-størrelser. Vælg her artboard for iPhone X og iPhone 6/7/8. Disse er dine grundlæggende lærreder, men for at få den fulde pakke af designvejledninger og elementer skal vi hente UI-kittet.

Download af Apple iOS UI Kits

Adobe XD gør det nemt at få adgang til de officielle Apple iOS UI-kits. Følg disse trin:

1. I topmenuen i Adobe XD, vælg Filer > Hent UI-kits > Apple iOS.
2. Dette vil føre dig til Apples officielle Design Resources-side i din webbrowser.
3. På denne side skal du klikke på "Download for Adobe XD" for at downloade den seneste version af Apple Design Resources for iOS. Dette er en zip-fil, der indeholder alle de nødvendige UI-elementer og skabeloner.

Når download er fuldført, skal du pakke zip-filen ud. Du vil finde en mappe ved navn "iOS Adobe XD". Inden i denne mappe er der yderligere undermapper; find den, der hedder "UI Elements + Design Templates + Guides", og åbn derefter de relevante XD-filer for henholdsvis iPhone X og iPhone 8. Disse filer er fyldt med alle de standard UI-elementer, du finder på en iPhone, lige fra knapper og ikoner til systemlinjer og skærmvejledninger.

Sådan Integrerer du Nødvendige UI Elementer

I de downloadede UI-filer for iPhone X og iPhone 8 finder du en guldgrube af foruddefinerede elementer. For denne specifikke opsætning skal vi primært bruge tre vigtige UI-elementer, der hjælper os med at definere de sikre områder og tage højde for notch'en:

• Notch-skærmguiden: Specifik for iPhone X, denne guide viser præcist, hvor notch'en er placeret, så du kan designe udenom den.
• Statuslinjen: Selvom den er til stede på begge modeller, vil den fra UI-kittet være præcist dimensioneret for hver model.
• Hjemmeindikatoren: Også specifik for iPhone X, denne guide sikrer, at du efterlader plads til den interaktive hjemmebjælke.

For at overføre disse elementer til dit eget design artboard, skal du først navigere til de relevante UI-kit filer (iPhone X eller iPhone 8 XD-filen). Vælg de ønskede objekter. Hvis et objekt er låst, kan du låse det op ved at trykke Cmd + L (Mac) eller Ctrl + L (PC). Kopier derefter objekterne ved at trykke Cmd + C (Mac) eller Ctrl + C (PC), og indsæt dem på dit eget iPhone X eller iPhone 8 artboard ved at trykke Cmd + V (Mac) eller Ctrl + V (PC). Sørg for at arrangere objekterne præcist, så de flugter med dit artboard og danner den korrekte opsætning for de sikre områder.

Når elementerne er placeret korrekt, er det en god praksis at låse guide-lagene. Dette forhindrer dig i ved et uheld at flytte eller ændre dem, mens du arbejder på dit faktiske designindhold. Du kan låse et lag ved at klikke på låseikonet ud for laget i lagpanelet. Nu er dit artboard klar til, at du kan begynde at designe med fuld tillid til, at dine elementer er placeret korrekt i forhold til enhedens sikre zoner.

Hvorfor er Sikre Områder Afgørende for Brugeroplevelsen?

At ignorere de sikre områder i dit design er en opskrift på en dårlig brugeroplevelse. Tænk på det som at bygge et hus uden at tage højde for, hvor døre og vinduer skal placeres – resultatet vil være ufunktionalt og frustrerende. For mobilapps betyder det, at vigtig tekst kan blive skjult under statuslinjen, knapper kan blive umulige at trykke på på grund af hjemmeindikatoren, eller visuelle elementer kan blive afskåret af notch'en.

En korrekt implementering af sikre områder sikrer:

• Læsbarhed: Tekst og ikoner forbliver synlige og lette at læse.
• Interaktivitet: Alle interaktive elementer (knapper, links, indtastningsfelter) er tilgængelige og kan trykkes på uden besvær.
• Visuel Harmoni: Dit design ser balanceret og professionelt ud, da indholdet er korrekt justeret og ikke "kolliderer" med systemets UI.
• Konsistens: Appen opfører sig forventeligt på tværs af forskellige enheder og iOS-versioner, hvilket opbygger tillid hos brugeren.

Det er vigtigt at bemærke, at selvom hovedindholdet skal holdes inden for de sikre områder, kan baggrundselementer eller store billeder ofte strække sig helt ud til skærmens kanter for at skabe en mere fordybende oplevelse. Et godt eksempel er fuldskærmsbilleder i en fotogalleri-app, hvor billedet fylder hele skærmen, men alle kontroller og tekster stadig respekterer de sikre områder. Balancen mellem et visuelt engagerende design og en funktionel, brugervenlig grænseflade er nøglen.

Praktiske Tips til UI/UX Designere

Ud over at opsætte dine artboards korrekt, er her nogle yderligere tips, der kan hjælpe dig med at optimere din designproces for iPhones i Adobe XD:

• Brug Komponenter: Opret genanvendelige komponenter for ofte brugte UI-elementer som knapper, navigationslinjer og tekststile. Dette sparer tid og sikrer konsistens på tværs af dit design.
• Arbejd med Responsive Resize: Adobe XD's Responsive Resize-funktion er utrolig nyttig, når du designer til flere skærmstørrelser. Brug den til hurtigt at tilpasse elementer, når du skifter mellem iPhone X og iPhone 8 artboards eller forskellige orienteringer.
• Prototyping og Test: Udnyt Adobe XDs prototyping-funktioner til at skabe interaktive prototyper. Test dine designs på faktiske iPhone-enheder (via Adobe XD mobilappen) for at få en realistisk fornemmelse af brugeroplevelsen. Dette er især vigtigt for at vurdere, hvordan notch'en og hjemmeindikatoren påvirker interaktioner.
• Fokus på Tilgængelighed: Overvej farvekontraster, skriftstørrelser og interaktionsområder for at sikre, at din app er tilgængelig for alle brugere, inklusive dem med nedsat syn eller motoriske færdigheder.
• Hold dig opdateret: Apples Human Interface Guidelines (HIG) opdateres løbende. Gør det til en vane at tjekke dem regelmæssigt for at sikre, at dine designs følger de nyeste anbefalinger.

Ved at inkorporere disse praksisser i dit workflow kan du ikke blot fremskynde din designproces, men også forbedre kvaliteten og brugervenligheden af dine applikationer betydeligt.

Sammenligning: iPhone X vs. iPhone 8 Designovervejelser

Selvom begge er iPhones, kræver iPhone X og iPhone 8 forskellige designovervejelser på grund af deres unikke hardware- og skærmlayout. Her er en sammenligning af de vigtigste forskelle, der påvirker dine designvalg:

Disse forskelle understreger vigtigheden af at designe specifikt for hver enhedstype. Hvad der ser godt ud på en iPhone 8, vil potentielt blive afskåret eller virke malplaceret på en iPhone X, og omvendt. Ved at benytte de korrekte UI-kits og følge Apples retningslinjer sikrer du, at din app leverer en optimeret og indbydende oplevelse på tværs af Apples forskellige enheder.

Ofte Stillede Spørgsmål (FAQ)

Hvad er en 'notch'?

En 'notch' (eller "hak") er den udskæring øverst på skærmen på iPhone X og nyere modeller, der huser TrueDepth-kamerasystemet (til Face ID), højttaleren og andre sensorer. Den er en designmæssig udfordring, da den "spiser" en del af skærmens øverste kant, hvilket kræver, at indholdet placeres udenom for at være fuldt synligt.

Hvorfor er sikre områder vigtige?

Sikre områder er vigtige, fordi de garanterer, at dit app-indhold er synligt og interagerbart for brugeren. De forhindrer, at vigtige designelementer (tekst, knapper, billeder) bliver skjult af enhedens hardware (som notch'en) eller af iOS-systemelementer (som statuslinjen eller hjemmeindikatoren). At respektere sikre områder fører til en mere professionel, brugervenlig og tilgængelig app.

Kan jeg placere indhold uden for de sikre områder?

Ja, i visse tilfælde. Baggrundsbilleder, farvefyld eller andre rent visuelle elementer kan ofte strække sig ud over de sikre områder og fylde hele skærmen for at skabe en mere fordybende effekt. Dog skal alle interaktive elementer, vigtig tekst og kerneindhold altid placeres inden for de sikre områder for at sikre optimal funktionalitet og læsbarhed. Det handler om at finde den rette balance mellem visuel æstetik og brugervenlighed.

Hvor finder jeg de officielle UI-kits?

De officielle Apple iOS UI-kits kan downloades direkte fra Adobe XD. Gå til Filer > Hent UI-kits > Apple iOS i Adobe XD, hvilket vil lede dig til Apples Design Resources-side, hvor du kan downloade den seneste version. Disse kits er afgørende for at arbejde med præcise dimensioner og elementer.

Hvordan tester jeg mine designs på en rigtig iPhone?

Adobe XD tilbyder en fremragende måde at teste dine designs på faktiske enheder. Du kan downloade Adobe XD-appen til din iPhone fra App Store. Når du har appen installeret og er logget ind med din Adobe ID, kan du enten tilslutte din iPhone til din computer via USB og vælge "Forhåndsvisning på enhed" i Adobe XD, eller du kan gemme din XD-fil i Creative Cloud og åbne den direkte fra mobilappen. Dette giver dig den mest realistiske oplevelse af, hvordan din app vil se ud og føles i praksis.

At mestre design for iPhone X og iPhone 8 i Adobe XD handler om mere end blot æstetik; det handler om at forstå og respektere de tekniske specifikationer, der definerer hver enheds unikke brugeroplevelse. Ved at gøre brug af sikre områder, de officielle UI-kits og de praktiske tips, der er delt i denne guide, er du godt rustet til at skabe applikationer, der ikke kun ser fantastiske ud, men også fungerer fejlfrit og intuitivt for millioner af iPhone-brugere verden over. Din opmærksomhed på disse detaljer vil løfte dine designs fra gode til exceptionelle.

Hvis du vil læse andre artikler, der ligner Optimalt Design i Adobe XD til iPhone X og iPhone 8, kan du besøge kategorien Teknologi.