• Vigtigste / Råd

Mobile app design: En nybegyndervejledning

Så du har besluttet at prøve design af mobilapps, men du er ikke sikker på, hvor du skal starte. Ingen bekymringer, vi dækker dig. I denne artikel skitserer vi fem ting, du skal vide for at hjælpe dig i gang med design af mobilapps.

Denne guide er rettet mod begyndere til design af mobilapps. Hvis du allerede har nogle færdigheder, skal du kigge på vores sammenfatning af tutorials, der vil lede dig gennem forskellige aspekter af hvordan man laver en app , i detaljer.

Hvad er mobilappdesign?

For at sige det meget bredt er appdesignere ansvarlige for at få en app til at se godt ud, mens udviklere får den til at fungere korrekt. Mobilappdesign omfatter både brugergrænsefladen (UI) og brugeroplevelsen (UX). Designere er ansvarlige for appens overordnede stil, herunder ting som farveskema, skrifttypevalg og de typer knapper og widgets, som brugeren vil bruge. Så hvor skal du starte? I begyndelsen.

Hvilken platform skal jeg designe til?

Afhængigt af dine grunde til, at du vil designe mobilapps, ved du muligvis allerede, hvilken platform du vil arbejde med, og hvorfor. Men hvis du lige er begyndt, og du ikke er sikker på, hvad der passer til dig, har du den, du er mest fortrolig med.

Hvis du bruger en Android-telefon, skal du designe til Android. Hvis du bruger en iOS-enhed, skal du starte der. Alternativt kan du vælge design til begge dele, men det er bedst ikke at bide mere, end du kan tygge - i det mindste ikke i starten.

Hvilke værktøjer skal jeg bruge?

Når du ved, hvilken platform du designer til, er det næste trin at vælge den rigtige værktøjer til webdesign for at få arbejdet gjort. Når det kommer til at designe mobilapps, er den gode nyhed, at du uanset platformen generelt kan bruge de samme værktøjer til begge.

Populære muligheder for appdesign inkluderer Adobe Photoshop, Adobe XD og Sketch. Der er mange, mange flere, men disse er de tunge hitters i branchen. Tilmeld dig Adobe Creative Cloud her .

Du tror måske, at Photoshop er din bedste mulighed for design af mobilapps - især hvis du har brugt det til andre typer designarbejde - men når det kommer til at designe mobilapps, har du det bedre med Adobe XD eller Sketch. Når det er sagt, anses Sketch for at være de facto-standarden her, selvom Adobe XD lægger en vis stærk konkurrence på nyligt tilføjede designsystemer .

En af de største grunde til at bruge Adobe XD eller Sketch over noget som Photoshop er, at disse to værktøjer er bygget med design og prototyping i tankerne. De hjælper med at strømline dine designworkflows og er målrettet mod UI- og UX-designere, mens Photoshop er mere til billedmanipulation.

En vigtig note her: Hvis du planlægger udvikling eller support på tværs af platforme, er Adobe XD den klare vinder her, da Sketch kun er tilgængelig på macOS.

Retningslinjer for OS-design

Før du begynder at designe, fordi du først skal forstå dos og don'ts på din platform. Generelt deler mobilappdesign nogle ligheder mellem de forskellige operativsystemer, såsom:

• Måldrevet design
• Hold det simpelt (mindre er mere)
• Oprethold strømmen
• Læsbarhed er nøglen
• Respekter platformen

Den sidste, 'respekter platformen', er vigtigere end du måske indser. Når brugere downloader og installerer en app til deres enhed, forventer de, at den opfører sig på en måde, der er kendt og intuitiv for dem. De baserer deres meninger på, hvad de ved, så når en app strider mod 90 procent af de OS-specifikke designregler, vil brugerne sandsynligvis slette den.

Ikke alene skal du overveje de forskellige navigationsmønstre, som iOS og Android har, men du skal også tænke på knapper, skrifttypevalg og placering af UI-objekter - som alle varierer for hver platform.

Den gode nyhed er, at du ikke behøver at gætte, hvad der er acceptabelt. Både Apple og Android har et sæt designretningslinjer, som du kan gennemgå, før du kommer i gang (og mens du aktivt designer):

• Retningslinjer for iOS Human Interface
• Retningslinjer for Android-design

Wireframes og app flow

Før du designer en apps udseende, er det vigtigt at arbejde på dens flowkontrol og struktur. Det er her trådrammer spiller ind. Wireframes hjælper dig med at forstå, hvordan brugerne navigerer og bruger en app. De er generelt forenklet i deres design, så fokus er på flow og brugervenlighed.

Mens der er mange dedikerede wireframe-værktøjer , det er ikke ualmindeligt, at designere blot bruger en pen og papir. Men hvis du leder efter noget mere hi-tech og samarbejde (hvilket er især vigtigt, når du arbejder med et eksternt team), skal du overveje at oprette dine wireframes i Sketch eller Adobe XD. Fordelen ved at bruge disse værktøjer til wireframing er, at du med relativ lethed kan forvandle dine low-fidelity wireframes til high-fidelity previews.

Bemærk: Med Adobe XD , kan du endda få fat i nogle gratis kits for at hjælpe dig i gang.

Mockups og prototyper

Når du har arbejdet igennem dine wireframes og delt dem med udviklingsteamet og / eller din klient til diskussion og godkendelse, er det tid til at lave nogle mockups og prototyper.

Dette trin er generelt lettere, hvis du har brugt det samme designværktøj til at oprette både dine wireframes og dit design af din mobilapp. Hvis du ikke har det, kan det tage lidt længere tid at udfylde dit designværktøj, men når du gør det, er du godt på vej. Mange værktøjer, herunder UXPin (som integreres med Sketch), inkluderer måder at kommentere dine wireframes med de detaljerede oplysninger, der kræves af devs, for at fjerne behovet for ethvert gæt.

Mens du arbejder på appens design, er det et fremragende tidspunkt at begynde at opbygge et delt bibliotek med aktiver. For eksempel kan standardknapper, ikoner og andre elementer, som du opretter her, vise sig nyttige i andre apps, du designer, så sørg for at gemme dem.

Find ud af mere om dette trin i vores artikel: 4 forskellige måder at oprette websted og app mockups på .

Overdragelse til udvikling

Designere er også ansvarlige for at levere disse elementer og visuelle aktiver til udvikleren. Ting som ikoner, baggrunde, logoer og endda skrifttyper er alt, hvad en designer måske overleverer til en udvikler.

Når udvikleren har alt, hvad de har brug for, er det deres job at tage designet - og dets forskellige dele - og få det til at fungere. Nogle gange forstår en designer imidlertid ikke de begrænsninger, en udvikler står over for. Og når det sker, bryder helvede løs.

Som mobilappdesigner er du kunne ignorere udvikleren og udviklingsprocessen helt, men det er bedre at forstå de udfordringer, som en udvikler står over for, uanset om de er med de værktøjer, de bruger, eller begrænsningerne i det operativsystem og / eller enheder, som dine apps kører på. Bevæbnet med denne viden kan du designe mobilapps mere effektivt med mindre push-back fra din udvikler og samtidig skabe et mere samarbejdsmiljø.

Læs mere:

• Sådan oprettes en app med Vue.js
• Kom godt i gang med indbygget mobilapp
• Top Sketch-plugins at prøve