22 bedste UI designværktøjer
De bedste UI-designværktøjer kan passe næsten alle designprocesser og forhåbentlig imødekomme dine kreative krav. Nu er det sådan en god tid at udforske nye værktøjer og se, hvad der er tilgængeligt til at designe og fremvise dine projekter.
Med så mange UI-designværktøjer derude, hvilke skal du dog bruge? I løbet af de sidste par år har kombinationen af Sketch og InVision været et populært valg for mange designere, men andre værktøjer har tilbudt konkurrencedygtige funktioner og muligheder. Der har aldrig været et bedre udvalg af prototyper og wireframe-værktøjer derude, så vi syntes, det var et godt tidspunkt at se nærmere på nogle af de bedste.
For mere generelle værktøjer, se vores værktøjer til webdesign runde op. Planlægger du et nyt sted? Her er vores guider til de bedste webstedsbygger og top webhosting tjenester.
Wireframing
01. MockFlow
MockFlow er en række applikationer, der er meget nyttige til en række opgaver i den typiske projektproces. Primært er WireframePro-appen et godt alternativt prototypeværktøj, som du kan bruge, især hvis du tester nogle nye ideer.
Hvis du bare har brug for at oprette wireframes, så kig på MockFlow. Det er fantastisk til at arbejde på indledende ideer og giver dig mulighed for hurtigt at opbygge grundlæggende layout, hvilket undertiden er alt hvad du behøver for at få tanker til en præsentabel form.
02. Balsamiq
Hvis hurtig wireframing er det, du leder efter, så Balsamiq er et stærkt forslag. Du kan hurtigt udvikle struktur og layout til dine projekter. Træk-og-slip-elementerne gør livet lettere, og du kan linke knapper til andre sider. Dette betyder, at du hurtigt kan begynde at planlægge dine grænseflader og derefter dele dem med dit team eller dine kunder.
03. Aksel
Axure har altid været et af de bedste wireframing-værktøjer på markedet og er fantastisk til mere komplekse projekter, der kræver dynamiske data. Med Axure kan du virkelig fokusere på at spotte projekter, der er mere tekniske og kræver ekstra opmærksomhed, når det kommer til struktur og data.
04. Adobe Comp
Adobe Comp er en god tilføjelse for dem, der finder ud af at skabe og konceptualisere på farten. Har du en tablet med en smart blyant? Dette er værd at downloade i tilfælde af, at inspiration rammer for at udvikle et nyt koncept til et layout, når du er væk fra dit hovedarbejdsområde.
Dagens bedste Adobe Creative Cloud-tilbud AdobeAnbefalet forhandler Creative Cloud Alle apps £ 49,94 / md Udsigt på Adobe Kreativ skyfotografering 9,98 £ / md Udsigt på Adobe Creative Cloud Single App 179,00 kr / md Udsigt på AdobeUI design og prototyping
05. Skitse
Skitse er et meget populært værktøj inden for designfællesskabet, der giver dig mulighed for at oprette hi-fi-grænseflader og prototyper. En af de fantastiske funktioner er symboler, hvor du kan designe UI-aktiver og elementer til genbrug. Dette hjælper med at skabe designsystemer og holde dine grænseflader konsistente. Derfra kan du nemt eksportere dit design til en klikbar prototype. Hvis du er InVision-bruger, skal du tjekke Craft-pluginet (mere om det nedenfor). Hvis du vil gøre dit designsystem problemfrit delbart, skal du sørge for, at dit Sky lagring er op til bunden.
06. InVision Studio
Mange UI-designers drømme er ved at gå i opfyldelse med InVision Studio . Stadig i sin tidlige udgivelse hjælper dette værktøj dig med at oprette smukke interaktive grænseflader med en bucket-masse funktioner. Du kan oprette brugerdefinerede animationer og overgange fra et antal bevægelser og interaktioner. På toppen af det kan du stoppe med at tænke på at oprette adskillige tegnebrætter til flere enheder, fordi responsivt design kan opnås inden for et enkelt tegnebræt. Dette sparer masser af tid, så du kan tænke på flere ideer.
07. Håndværk
Hvis du bruger Sketch eller Photoshop til UI-design, skal du bruge det Håndværk . Dette plugin gør alt, problemfrit at synkronisere dine filer med dine Invision-prototyper og udfylde dine mock ups med ægte data og stockfotografering.
08. Proto.io
Proto.io er en utrolig konkurrent til at skabe naturtro prototyper fra grove ideer til fuldt udviklede designs. Værktøjet giver også mange muligheder for dine projekter, herunder detaljerede animationer og brugerdefinerede vektoranimationer. Du kan starte med at udvikle indledende ideer med en håndtegnet stil og derefter arbejde dem i trådrammer og afslutte med en high-fidelity-prototype. Sketch- og Photoshop-plugins hjælper virkelig, hvis du vil designe ved hjælp af andre værktøjer, men Proto.io håndterer end-to-end designprocessen godt. Andre funktioner som brugertest hjælper også med at validere dine designs. Dette er en alt-i-et-sted-løsning med et stort antal pålidelige mærker, der allerede bruger den.
09. Adobe XD
Adobe XD tilbyder det bedste miljø for digitale projekter under Adobe Creative Cloud samling af designværktøjer. Hvis du er en ivrig Adobe-bruger og ny i XD, finder du muligvis ikke grænsefladen meget Adobe-lignende til at begynde med - det er et spring, hvis du har designet i Photoshop i et stykke tid. Men det stabler op til de andre førende værktøjer derude, og det er det værd, hvis du er en stor Adobe-fan.
Se også vores anbefalinger til Adobe XD-plugins.
10. Marvel
Marvel er et andet prototypeværktøj, der er et godt valg, når det kommer til at producere hurtige ideer og forfine en grænseflade. Som med mange andre applikationer af denne type tilbyder Marvel en rigtig pæn måde at opbygge sider på og giver dig mulighed for at simulere dit design gennem en prototype. Der er nogle vidunderlige integrationer med Marvel, hvilket betyder at du kan indsætte dine designs i din projektworkflow.
11. Figma
Figma giver dig mulighed for hurtigt at komponere og designe grænseflader. Figma-platformen er stolt af at være et samarbejdsdesignværktøj, hvorved flere brugere kan arbejde samtidigt på et projekt - dette er meget effektivt, når du har flere interessenter i et projekt, der er involveret i at forme resultatet. Dette er den slags værktøj, der ville være ideelt, hvis du har et live-projekt, hvor en udvikler, tekstforfatter og designer f.eks. Har brug for at arbejde på noget på samme tid.
12. Framer X
Framer X er et rigtig spændende nyt designværktøj, der bestemt er værd at kigge efter erfarne UI-designere, der ønsker mere fra deres værktøjer. Prototyping og oprettelse af interaktioner er virkelig let. Hvis du er en stor React-fan, skal du ikke lede længere, da du kan designe og kode synkroniseret. Udover at være et godt værktøj, er der et stærkt samfund af designere bag Framer X, der tilbyder UI-aktiver og sæt.
13. Flinto
Flinto er et flot og simpelt designværktøj, der giver dig mulighed for at skabe unikke interaktioner inden for dine designs. Du kan bruge et antal bevægelser og oprette nemme overgange ved at designe tilstandene før og efter. Flinto regner simpelthen ud forskellene og animerer derefter for dig.
14. Princip
Interaktionsdesign er hvad Princip udmærker sig ved, især når det kommer til mobile applikationer. At finjustere og få animerede interaktioner lige rigtigt er en leg med Principle. Du kan se på individuelle aktiver, og hvordan de uafhængigt animeres, helt ned til tidsindstillinger og lempelser.
15. UXPin
Beskrevet som den 'ende-til-ende' UX-platform, UXPin er i det væsentlige et andet designværktøj, men med en stærk evne til at skabe designsystemer. UXPin betjener større designteam, der har brug for at arbejde med de samme stilarter og vejledninger, hvilket sparer tid med produktudvikling, når samarbejde spiller en stor rolle.
16. ProtoPie
Protopic giver dig mulighed for at skabe ret komplekse interaktioner og komme temmelig tæt på, hvordan du ønsker, at dit design skal fungere. Måske er den mest fremtrædende funktion muligheden for at kontrollere sensorerne på smarte enheder i din prototype, såsom tilt-, lyd-, kompas- og 3D Touch-sensorer. Afhængigt af dit projekt er dette et godt værktøj til at omfatte native app-funktioner. Det er let som kage uden kode krævet.
17. Justinmind
Dette værktøj, Justinmind , hjælper med prototyping og integration med andre værktøjer som Sketch og Photoshop. Du kan vælge dine interaktioner og bevægelser for at hjælpe med at sætte din prototype sammen. Det indeholder også UI-sæt, så du hurtigt kan sammensætte skærme.
18. Origami Studio
Givet Origami Studio er bygget og brugt af designere på Facebook, kan du antage, at dette skal være et godt værktøj. Og du ville have ret. Der er en vidunderlig mængde funktioner med Origami, herunder tilføjelse af regler og logik til dine interaktioner. Hvor mange gange har du ønsket, at en knap skal vises eller opføre sig anderledes på grund af noget andet? Der er mulighed for at oprette en ægte-til-form-prototype med Origami, men den er meget teknisk og kræver lidt indlæring. Dette værktøj er perfekt til udviklere og designere, der arbejder sammen.
19. Væske
Væske er et intuitivt værktøj til at opbygge hurtige prototyper og oparbejde designs. Det pakker nogle gode aktiver ud af kassen for at komme i gang med hurtige prototyper, og når du først har opgraderet, er det let at samle dine egne symboler med dine foretrukne UI-aktiver.
20. Keynote
Ud over at være et godt værktøj til at oprette præsentationer, Keynote - specifikt Magic Move-overgangen - er en af måderne til hurtigt at animere dine designs og kommunikere dine ideer.
Andre UI-designværktøjer
21. Typografiregner med gyldent forhold
Har du fast besluttet på at overveje størrelser? Det GRT-regnemaskine bruger videnskaben om det gyldne forhold til at generere en typografisk skala, der kan bruges i dine interface design.
22. Zeplin
Zeplin er ikke nødvendigvis et prototypeværktøj, men det passer meget i det post-design- og præudviklingsstadium sammen med prototyping. Det giver dig mulighed for at tage dit design og dine prototyper, aflevere dem til udviklere og sørge for, at dine ideer udføres godt. Du kan uploade dine Sketch-, Photoshop-, XD- og Figma-filer til Zeplin, og det vil skabe et miljø for udviklere og designere til at aflevere projektet uden den kedelige opgave at oprette retningslinjer. Det er dog værd at sørge for, at du først har brug for det.
Denne artikel opstod oprindeligt i net og webdesigner. Abonner på net og abonner på Web Designer .
Relaterede artikler:
- 6 tendenser, der ændrer ansigtet til mobil UI-design
- Proffens guide til UI-design
- Opret glatte UI-animationer
