Profesionální návrhy poskytované pomocí InVision

Prezentace designů je jednou z centrálních požadavků v vývoji aplikací. Vývojáři jsou na tvé designy závislí, aby aplikaci úspěšně realizovali. V této příručce ti ukážu, jak snadno své designy poskytnout v InVision, aby tvůj designový tým měl vždy přístup k nejnovějším verzím. S InVision se postaráš o to, že tvé nápady budou optimálně vizualizovány a komunikovány, zatímco zároveň můžeš změny jednoduše provádět.

Nejdůležitější poznatky

• InVision umožňuje jednoduchou synchronizaci a prezentaci designů.
• Můžeš své designy přímo exportovat ze Sketch a nahrát je do InVision.
• Nástroj nabízí různé režimy pro zobrazení a interakci s prototypy.
• Funkce zpětné vazby a komentářů podporují spolupráci mezi designéry a vývojáři.

Krok za krokem návod

Krok 1: Vytvoř nové projekty v InVision

Nejprve otevři InVision a vytvoř nový projekt. Zvol možnost vytvořit „prototyp“ a vyber šablonu iPhone, abys své designy optimálně prezentoval na mobilních zařízeních. Jako jméno projektu zvol „Mobility Stream Udemy“ a klikni na „Vytvořit“.

Krok 2: Exportuj designy ze Sketch

Jakmile máš svůj projekt nastaven, importuj své designy ze Sketch. Při tomto procesu se ujisti, že vybíráš správné artboardy a nahráváš je do InVision. Můžeš soubory přímo přetáhnout do projektu InVision. Pro to je důležité zvolit správný exportní formát ze Sketch, abychom se vyhnuli komplikacím.

Krok 3: Nainstaluj InVision plugin

Aby ses usnadnil proces synchronizace, měl bys použít InVision plugin pro Sketch. Nainstaluj plugin, přihláš se se svým účtem InVision a aktivuj možnost synchronizace. To ti umožní přenést změny designu přímo ze Sketch do svého projektu InVision, aniž bys musel soubory nahrávat ručně.

Krok 4: Přiřaď artefakty k rozhraní

Teď můžeš vytvořit uživatelské rozhraní své aplikace a interaktivně navrhnout jednotlivé obrazovky. Klikni na tlačítka v režimu vytváření, abys vytvořil hotspoty, které simulují navigaci v aplikaci. Můžeš zvolit různé přechody jako „Slide in“ nebo „Instant“, aby byla uživatelská zkušenost realistická.

Krok 5: Urči přechody

Pokud jsi přidal interakce, je důležité určit správné animace pro přechody mezi obrazovkami. Můžeš vybrat typ animace, která se použije při přechodu na jinou obrazovku. Ujisti se, že tyto detaily jsou pro vývojáře jasně a přesně zobrazeny, aby mohli realizovat požadované chování.

Krok 6: Určete barvy a pozadí

Měl bys také zajistit, že všechny barvy pozadí a stylistické detaily jsou správné. Často se zapomíná stanovit barvy pozadí v souborech Sketch. Projdi každý screen a zkontroluj, zda pozadí, která jsi v designu plánoval, jsou také zobrazeny v InVision. Ujisti se, že všechno vypadá harmonicky.

Krok 7: Synchronizace a aktualizace

Až provedeš všechny změny, je čas vše synchronizovat. Ulož změny v Sketch a klikni na tlačítko synchronizace v pluginu. To automaticky aktualizuje tvé nové obrazovky a úpravy v InVision. Měj na paměti, že tento proces může chvíli trvat.

Krok 8: Sbírej zpětnou vazbu

Využij funkci komentářů a zpětné vazby v InVisionu, abys vyjasnil obecné otázky k tvým designům. Můžeš přímo v prototypu přidat komentář, který může být poté zodpovězen ostatními členy týmu. To je zvláště užitečné, abys zajistil, že tvůj design odpovídá briefing a splňuje všechna očekávání.

Krok 9: Uzavření prezentace

Na závěr bys měl testovat své designy a ujistit se, že vše bezchybně funguje. Zkontroluj všechny hotspoty, které jsi vytvořil, a simuluj interakci, abys získal zkušenosti z perspektivy uživatele. Tak zajistíš, že celkový dojem je konzistentní, než to prezentuješ svému týmu nebo vývojářům.

Souhrn - Úspěšné poskytnutí designů v InVision

V této příručce ses naučil, jak krok za krokem poskytnout své designy v InVision. Dowiedziałeś się, jak snadné je pracovat s InVision a jak můžeš zvýšit efektivitu svých přenosů designu. Pečlivá příprava a využití užitečných funkcí ti pomohou úspěšně realizovat tvé projekty a poskytnout vývojářům potřebné informace.