Profesionálne navrhovanie s InVision

Predstavenie dizajnov je jednou z kľúčových požiadaviek pri vývoji aplikácií. Vývojári sa spoliehajú na tvoje dizajny, aby úspešne realizovali aplikáciu. V tejto príručke ti ukážem, ako môžeš svoje dizajny bez námahy sprístupniť v InVision, aby tvoj dizajnérsky tím mal vždy prístup k najnovším verziám. S InVision zabezpečuješ, že tvoje nápady sú optimálne vizualizované a komunikované, zatiaľ čo zároveň môžeš jednoduchým spôsobom upravovať zmeny.

Najdôležitejšie zistenia

• InVision umožňuje jednoduchú synchronizáciu a prezentáciu dizajnov.
• Môžeš svoje dizajny priamo exportovať zo Sketch a nahrať ich do InVision.
• Nástroj ponúka rôzne režimy na zobrazenie a interakciu s prototypmi.
• Funkcie spätných väzieb a komentárov podporujú spoluprácu medzi dizajnérmi a vývojármi.

Krok za krokom - Návod

Krok 1: Vytvorenie nového projektu v InVision

Najprv otvoríš InVision a vytvoríš nový projekt. Vyber možnosť vytvorenia „Prototypu“ a rozhodni sa pre šablónu iPhone, aby si svoje dizajny optimálne prezentoval pre mobilné zariadenia. Ako názov projektu vyber „Mobility Stream Udemy“ a klikni na „Vytvoriť“.

Krok 2: Export dizajnov zo Sketch

Ako náhle si nastavil svoj projekt, importuj svoje dizajny zo Sketch. Počas tohto procesu sa musíš uistiť, že vyberáš správne artboardy a nahrávaš ich do InVision. Môžeš súbory priamo pretiahnuť do projektu InVision. Pre tento účel je dôležité vybrať správny exportný formát zo Sketch, aby si predišiel komplikáciám.

Krok 3: Nainštalovať plugin InVision

Aby si zjednodušil proces synchronizácie, mal by si použiť plugin InVision pre Sketch. Nainštaluj plugin, prihlás sa do svojho účtu InVision a aktivuj možnosť synchronizácie. To ti umožní prenášať zmeny dizajnu priamo zo Sketch do svojho projektu InVision bez toho, aby si musel súbory manuálne nahrávať.

Krok 4: Pridať rozhrania k artefaktom

Teraz môžeš vytvoriť používateľské rozhranie svojej aplikácie a interaktívne navrhnúť jednotlivé obrazovky. Klikni na tlačidlá v režime stavby, aby si vytvoril hotspoty, ktoré simulujú navigáciu v aplikácii. Môžeš vybrať rôzne prechody, ako je „Slide in“ alebo „Instant“, aby si realisticky predstavil používateľskú skúsenosť.

Krok 5: Stanoviť prechody

Ako náhle si pridal interakcie, je dôležité stanoviť správne animácie pre prechody medzi obrazovkami. Môžeš si vybrať typ animácie, ktorý sa uplatní pri prechode na iný obrazovku. Dbaj na to, aby boli tieto detaily pre vývojárov jasne a presne zobrazené, aby mohli realizovať požadované správanie.

Krok 6: Stanoviť farby a pozadia

Mala by si sa tiež uistiť, že všetky farby pozadia a stylistické detaily sú v poriadku. Často sa zabúda nastaviť farby pozadia v súboroch Sketch. Prejdi každú obrazovku a skontroluj, či sú pozadia, ktoré si navrhla, tiež zobrazené v InVision. Dbaj na to, aby všetko vyzeralo súladne.

Krok 7: Synchronizácia a aktualizácia

Ako náhle si uskutočnil všetky zmeny, je čas všetko synchronizovať. Ulož zmeny v Sketch a klikni na tlačidlo synchronizácie v plugine. To automaticky aktualizuje tvoje nové obrazovky a úpravy v InVision. Ber na vedomie, že tento proces môže chvíľu trvať.

Krok 8: Zbieranie spätných väzieb

Využi funkciu komentárov a spätných väzieb v InVision, aby si objasnil všeobecné otázky týkajúce sa svojich dizajnov. Môžeš pridať komentár priamo do prototypu, ktorý môže byť následne zodpovedaný inými členmi tímu. To je obzvlášť užitočné na zabezpečenie toho, že tvoj dizajn odpovedá zadaniu a splňuje všetky očakávania.

Krok 9: Ukončenie prezentácie

Na záver by si mala otestovať svoje dizajny a uistiť sa, že všetko funguje bez problémov. Skontroluj všetky hotspoty, ktoré si vytvorila, a simuluj interakciu, aby si získala skúsenosti z pohľadu používateľa. Týmto zabezpečíš, že celkový pohľad je súladný pred tým, než ho predstavíš svojmu tímu alebo vývojárom.

Zhrnutie - Úspešné sprístupnenie dizajnov v InVision

V tejto príručke si sa naučila, ako môžeš svoje dizajny krok za krokom sprístupniť v InVision. Zistila si, aké jednoduché je pracovať s InVision a ako môžeš zvýšiť efektivitu svojich prenosov dizajnu. Starostlivá príprava a využívanie užitočných funkcií ti pomôže úspešne realizovať svoje projekty a poskytnúť svojim vývojárom potrebné informácie.