Justinmind Mobil App: Din Guide til Prototyping

Velkommen til Justinmind, det mest kraftfulde værktøj til prototyping og design. I denne guide vil vi dykke ned i de grundlæggende funktioner i Justinmind, herunder hvordan du opretter og designer skærme, tilføjer interaktioner og samarbejder effektivt med dine kunder. Uanset om du er nybegynder eller en erfaren designer, vil denne artikel give dig den nødvendige viden til at mestre Justinmind.

Oprettelse af dit Første Projekt

Når du logger ind på Justinmind, vil du blive mødt af Hjem-skærmen. Herfra kan du nemt starte et nyt projekt ved at klikke på "new project". Du vil blive præsenteret for forskellige enhedstyper at starte med: website, mobil, tablet eller andre. Du kan vælge at gemme dit projekt i skyen eller lokalt på din enhed. Derefter kan du indstille dimensionerne ved hjælp af dropdown-menuen for enheden. Når du er tilfreds, skal du blot klikke på "OK" for at oprette dit projekt.

Udforskning af Justinmind Brugergrænsefladen

Justinmind's brugergrænseflade er organiseret i forskellige paletter, som du vil bruge til at oprette og tilpasse dine wireframes. Lad os se nærmere på de vigtigste: * Toolbar: Her finder du værktøjer til at vælge former, billeder og tekstelementer, som du kan placere på Canvas for at designe dit projekt. Klik på '+' knappen i værktøjslinjen for at se yderligere elementer som dropdowns, hotspots og inputfelter. Mange af disse elementer har keyboard-genveje for hurtigere adgang. * Screens: Denne palette viser og giver dig mulighed for at tilføje nye skærme til dit projekt. Skærme fungerer ligesom Artboards eller Frames i andre designprogrammer. Hver skærm har sit eget Canvas, og et projekt kan indeholde mange forskellige skærme, som du kan forbinde med hinanden ved hjælp af events. * Canvas: Dette er dit primære arbejdsområde, hvor du placerer elementer for at bygge dine designs og wireframes. * Alignment: Bruges til at justere og fordele elementer på Canvas. * Properties: Her kan du se og redigere et elements styling, position og synlighed under simulering. Forskellige elementer har deres egne unikke egenskaber, som du kan tilpasse. * Events: Denne palette er essentiel for at skabe interaktioner og omdanne dine wireframes til high-fidelity prototyper. Du kan lære mere om events ved at følge det angivne link. * Layers: Giver dig mulighed for at se og omarrangere elementernes hierarkiske placering på Canvas. Du kan trække elementer for at ændre deres rækkefølge. Ved at holde musen over et element eller en gruppe, kan du skjule eller vise det, mens du redigerer. * Libraries: Indeholder ekstra foruddefinerede elementer. Afhængigt af den enhed, du designer til, vil forskellige biblioteker blive vist her som standard. For eksempel, hvis du designer til Android, vil du se Android-komponenter. Du kan finde flere UI-biblioteker ved at klikke på 'More libraries' linket. Du kan også oprette dine egne brugerdefinerede biblioteker ved at klikke på '+' knappen.

Design af den Første Skærm i Dit Projekt

Træk og Slip Elementer på CanvasVælg elementer fra værktøjslinjen og bibliotekerne og placer dem på Canvas for at designe dit projekt. Du kan også bruge tastaturgenveje til hurtigt at tilføje elementer til skærmen. Tegn Vektorformer med Pen-VærktøjetPen-værktøjet, placeret ved siden af Selection-værktøjet, giver dig mulighed for at tegne alle former for kombinationer af lige linjer og kurver, ligesom i mange andre designprogrammer. For at tegne en form skal du klikke på dette værktøj og derefter på Canvas. Det første ankerpunkt vil blive oprettet. For at tegne en lige linje, klik et andet sted på Canvas. For at tegne en kurve, klik på Canvas og træk, mens du holder museknappen nede. Du kan lukke en form ved at klikke på det første ankerpunkt eller lade stien være åben ved at trykke på 'ESC'. Yderligere muligheder for stier og ankerpunkter kan findes i Properties-paletten. Tilføj BillederKlik på Image-elementet i værktøjslinjen, eller tryk på 'I' for at tilføje et billede til dit projekt. Vælg et billede i filbrowseren, eller træk et billede fra dit skrivebord til Canvas. Tilføj Interaktive InputfelterJustinmind's præfabrikerede input-widgets er automatisk interaktive. Du kan skrive i Input Text Fields, vælge værdier fra Dropdowns, markere Check Boxes og meget mere uden at skulle tilføje events. Placer enhver widget fra sektionen 'Interactive Input Fields' i værktøjslinjen på Canvas, og simuler dit projekt for at teste det. Tilføj en Ny SkærmGå til Screens-paletten, hvor du finder en liste over alle skærme i dit projekt. Klik på '+' knappen for at tilføje en ny skærm. Dobbeltklik på en skærm i denne palette for at give den et nyt navn. Klik på en skærm i Layers-paletten eller dobbeltklik på Canvas for at få adgang til muligheder for at ændre Canvas-størrelse, enhedstype og baggrundsfarve. Tilføj Links og Klikbare ElementerNaviger mellem forskellige skærme, mens du forhåndsviser dit projekt, ved at tilføje interaktive links. Der er tre måder at oprette links på: * Træk og Slip: Vælg et element på Canvas, som du vil linke til en anden skærm. Træk det derefter til Screens-paletten og til den ønskede skærm. Dette vil automatisk oprette en 'On Click + Navigate To' event. * Højreklik: Vælg et element på Canvas, som du vil linke til en anden skærm. Højreklik på det og vælg 'Navigate To' i pop-up-menuen. Du kan derefter vælge en skærm at linke til og om der skal inkluderes en overgangseffekt. * Events-paletten: Vælg et element på Canvas, som du vil linke til en anden skærm. Gå til Events-paletten og klik på 'Add Event'. I dialogboksen for events skal du klikke på dropdown-menuen 'Choose Trigger', holde musen over 'Mouse'-sektionen og vælge en 'On Click' trigger. Derefter vælger du 'Navigate To' fra 'Action' dropdown-menuen. Vælg en skærm at linke til fra listen og klik på 'OK'. I Events-dialogboksen kan du også vælge at linke til den forrige viste skærm i dit projekt eller til en ekstern URL.

Simulering af Dit Projekt

Test dit projekts interaktivitet i realtid ved at simulere det. Klik på 'Play' knappen eller tryk på F5 for at starte simuleringsvisningen i en browser. Du vil finde en topbjælke i visningen, hvor du manuelt kan navigere gennem projektet samt ændre Canvas-størrelsen. Luk eller minimer simuleringsvinduet for at vende tilbage til editoren.

Deling og Feedback

Fra fanen "My project" / "Cloud" kan du invitere brugere til at se dit projekt. Højreklik på projektet og vælg "Share". I dialogboksen "Share with editors and viewers" skal du vælge "Can view" og tilføje brugere ved at vælge dem fra listen eller indtaste deres e-mailadresser. Du kan også tilføje nye brugere og få et delbart link. Hvis du er blevet inviteret til at se et projekt, vil du modtage en e-mail notifikation. Du kan altid fjerne brugere ved at klikke på de tre prikker til højre for deres navn. Du kan også tilføje seere til dit projekt, mens du designer, ved at klikke på "Share" ikonet i værktøjslinjen.

Simulering af et Projekt på en Reel Enhed

For at få en fornemmelse af, hvordan dine prototyper ser ud og føles på en reel enhed, kan du bruge Justinmind mobil appen. * Projekt Skabere: Download og installer Justinmind mobil appen fra Apple App Store eller Google Play Store. Log ind med dine Justinmind kontooplysninger. Du vil derefter se en liste over de projekter, du har delt til din Justinmind cloud-konto. Tryk på et projekt for at se det. Projekter med en rød prik skal downloades, før du kan se dem – tryk blot på dem for at starte downloaden. Projekter på din enhed vil have al den interaktivitet, du har defineret i Justinmind editoren. * Projekt Seere: Reviewers og kunder kan også se og interagere med dine projekter på deres mobile enheder. Dette kan gøres på to måder: 1. Via Justinmind Mobil App: Hvis de har appen installeret, kan de logge ind med deres egne Justinmind kontooplysninger (hvis de er inviteret som seere) eller blot åbne appen og indtaste et projekt-ID eller en URL, hvis det er delt offentligt. 2. Via Web Browser: Projekter kan også deles via et link, der kan åbnes direkte i en mobil webbrowser, hvilket giver en problemfri oplevelse uden behov for at installere en app. Justinmind mobil appen er et uundværligt værktøj for enhver, der arbejder med digital design og prototyping, da den giver mulighed for real-time feedback og test på tværs af forskellige enheder. Med disse trin er du godt på vej til at skabe overbevisende og brugervenlige prototyper.

Hvis du vil læse andre artikler, der ligner Justinmind Mobil App: Din Guide til Prototyping, kan du besøge kategorien Software.