Zobrazit zdroj

Nemáte oprávnění „upravit tuto stránku“. Důvod:

Můžete si prohlédnout a zkopírovat zdrojový kód této stránky:

[[Category:VSE]][[Category:Informatika]][[Category:Softwarové inženýrství]][[Category:UI_UX]] == Co je to? == * Zjednodušený návrh rozložení prvků uživatelského rozhraní. * Lze kreslit na papír nebo v softwarových nástrojích. * Slouží k rychlému ověření základního návrhu uživatelského rozhraní. * Po schválení uživatelem je podkladem pro: ** Grafiky, kteří vymyslí vizuální podobu prvků (musí vědět, jak velké prvky jsou, kolik textu na nich je,...). ** Programátory, kteří musí navržený vzhled realizovat (programátor musí dodržet to, co je ve wireframe, nemůže dělat další úpravy). == Proč? == * Snížit čas (a tedy i cenu) prvního návrhu. == Co zobrazuje? == ; Musí zachytit * Jak budou prvky rozmístěny na stránce/obrazovce. * Jaký typ prvku to je: obrázek, nadpis, článek textu. * Typickou velikost prvku na obrazovce. ** Bude to jeden řáden textu, nebo článek o 5 odstavcích. (Není důležité, jestli 4 nebo 6 odstavců, ale je rozdíl, jestli dva řádky, nebo 3 stránky textu. ** Jak veliký obrázek bude. ; Neřešíme * Grafický vzhled prvků — ten řeší až v další fázi grafik. * Konkrétní obsah — ten řeší až v dalších fázích copywriter. == Kreslení na papír == * V prvních fázích je nejrychlejší a vždy po ruce. == Rychlé on-line nástroje == * Rychlý náčrt, snadné sdílení. * Příklad: [https://wireframe.cc/ Wireframe.cc] — náčrtky se snadno sdílí, ale kdokoli má odkaz, může i upravovat! == Komplexnější on-line nástroje == * Obvykle zdarma pouze v omezené verzi. * Díky on-line podobě snadná spolupráce více uživatelů. * Vytvoření modelu již zabere značné množství času. * Umí sledovat vazby mezi stránkami. * Příklad: [https://moqups.com/ Moqups.com] — Zdarma jen jeden projekt (v něm libovolné množství stránek, ale max. 200 objektů celkem) * Příklad: [https://ninjamock.com/ NinjaMock.com] — Zdarma do 200 objektů, nelze exportovat. * Příklad: [https://webflow.com/ Webflow.com] * Příklad: [https://www.axure.com Axure] == Desktopové aplikace == * Nepotřebují výpočetní výkon provozovatele, větší šance, že budou zdarma. * Komplikovanější spolupráce více návrhářů na jednom projektu. # [https://www.justinmind.com/ JustInMind] #* Návrh od wireframe až po prototyp webu či mobilní aplikace. #* Umožňuje vazbu mezi obrazovkami. #* Výsledkem je jednoduchý HTML náhled výsledné aplikace. # [https://www.adobe.com/cz/products/xd.html Adobe XD] # [https://pencil.evolus.vn/ Pencil.Evolus.vn] #* Svobodná alternativa #* Desktopová aplikace, instalujete lokálně (stačí zkopírovat nainstalovanou verzi) == Doporučení a časté chyby při tvorbě wireframe == # Musí být jasné, co wireframe popisuje: #* Nadpisu uveďte konkrétní. #* Obsah odstavců textu obvykle stačí jen „šedé čáry“ nebo „Lorem ipsum“. (Ale musí být jasná typická velikost odstavce.) #* Dopište k wireframe popis — o jakou obrazovku se jedná, který případ použití řeší, co jednotlivé prvky znamenají.

Návrat na stránku „Wireframe“.