Prototypování pro web s Framerem
Framer je opravdu mocný nástroj, který dokáže prototypovat cokoliv, o čem si myslíte, ale pokud se podíváte na Framerova galerie, něco rychle uvidíte:
Z jejich 54 příkladů je 48 z nich, 4 pro Apple Watch, 1 pro iPad a 1 pro Apple TV. Je Framer dokonce určen pro "tradiční" web / desktop design?
Absolutně.
V IBM Design většina z mých návrhů je určena pro podnikové desktopové webové aplikace. Většina návrhářů pracuji s používáním Skica (včetně sebe). Tyto soubory Sketch jsou potom prototypovány pomocí nástroje jako je InVision nebo znovu vytvořené a prototypované v kódu. Jako přední vývojář na projektovém týmu mám jedinečnou pozici, kde jsem navrhl a kódoval prototypy.
Poté, co jsem se seznámil se základy Frameru, rozhodl jsem se ho přidat do svého workflow a skutečně zlepšil svůj návrh. Jediný nejsilnější díl je schopen importovat statický soubor Sketch do Frameru a přeměnit ho do realistického interaktivního prototypu v relativně krátkém čase.
Tímto způsobem nemusím trávit drahocenný čas na začátku procesu znovuvytváření návrhů v kódu. Můžu získat nápady před zainteresovanými stranami a uživateli mnohem rychleji. Mohu ušetřit kódování pro pozdější dobu, kdy je projekt solidifikován.
Poté, co jsem na pár měsíců použil Framer, je to pár věcí, které jsem se dozvěděl:
Plánujte a zkopírujte své prototypy
Než začnu projekt, rozhoduji se o několika věcech:
Co se snažím dosáhnout?
Ať už je prototyp určen pro testování uživatelů nebo pro získání nápadu, co je minimální množství práce potřebné k získání nápadu nebo k získání náhledu z testování? Nejsem jen líný;), to pomáhá rozhodovat o potřebných interakcích, animacích a obrazovkách, které jsou potřeba.
Čím více času strávíte na svém designu, tím více se stáváte připojeni. Čím více je spojeno, tím méně je pravděpodobné, že provedete potřebné změny.
Jako příklad použijeme prototyp výše.
Pracoval jsem na novém projektu a chtěl jsem prozkoumat, jak by vypadalo rozložení založené na kartě s animacemi "shuffling" mezi státy. Nakreslil jsem základní myšlenku, kterou jsem chtěl udělat, a použil jsem to jako svůj výchozí bod.
jestli ty podívej se u dokončeného prototypu je v každém kroku možné kliknout pouze na první kartu. Neexistuje žádný způsob, jak se vrátit, žádné stavy vznášení, obsah na poslední obrazovce není úplný a není to dokonalý pixel. Žádný z nich nebyl nutný, abych získal svůj nápad, takže jsem netrávil čas včetně nich. Framer může dělat téměř cokoliv, ale to neznamená, že byste se měli pokusit udělat všechno ve svém prototypu.
Vytvořte tok UI pomocí úžasného modulu ViewController od společnosti Andreas
Můžete použít ViewController Doplněk náčrtu vytváří tok UI přímo ve skici. Rychle přeměňte návrhy na prototypy, na které lze kliknout, aniž byste museli psát kód.
To je skvělé pro prezentaci vaší práce zúčastněným stranám a je opravdu poměrně jednoduché. Místo toho, abyste procházeli sketchovým souborem s deseti kreslicemi nebo .pdf, můžete prezentovat interaktivní prototyp nebo sdílet svou hostovanou adresu URL projektu Framer.
V závislosti na tom, co se snažím dosáhnout, můžu nakonec napsat nějaký kód pro věci, jako jsou efekty, animace a textové vstupy, aby se dal další realismus a interaktivita. Znovu, jako návrhář, rozhodněte se, co je nezbytné, abyste svůj námět napravili a správně provedli.
Překontrolovat Andreas 'Vytvořte tok uživatelského rozhraní pomocí článku Sketch a Framer dozvíte se více o pluginu.
Mikrointerakce
Myslím, že existuje několik důvodů, proč je mobilní prototypování velmi oblíbený u Framer, z čehož jeden z nich se zdá být mnohem běžnější na mobilním zařízení. Ale to nemusí být tak! Myslím, že jako návrháři pro web může být lepší, aby naše práce měla více pohybu a Framer je opravdu dobrý v tom.
Jedná se o jednoduchý příklad rychlé interakce, kterou jsem vytvořil pomocí souboru Sketch, který už můj tým vytvořil. Zkoumání interakcí, jako je tato, trvá několik minut.
Jistě, ale proč ne jen kód?
Jako vývojář fronty hodně mých projektů nakonec skončí s kódovaným prototypem. Potom používám tento prototyp jako základ pro napsání kódu fronty do produktu, který pracuje podél inženýrství. Tak proč ne jen kód od začátku?
Jak jsem již zmínil, rychlost. Můžu rychle vymýšlet myšlenky, které jsem již vytvořil já nebo jiný návrhář importováním z Sketch do Framer. Je to skvělé pro počáteční část procesu navrhování, kde se snažíte rychle prozkoumat nápady a provádět zpětnou vazbu. Můžu se pohybovat velmi rychle v kódu, ale Framer je převezme na další úroveň.
Dalším důvodem je svoboda. Jednoduchý fakt, že veškerý můj kód napsaný v Frameru bude odhozen, je skutečně velkolepý. Umožňuje mi vyzkoušet věci, které bych jinak neudělal, a abych byl trochu volnější s mým kódem. Můžu strávit 15 minut zkoumáním myšlenek a pak to bez jakéhokoli výčitku.
Několik tipů a triků
Vy (nebo návrhář, s nímž pracujete) pravděpodobně budete muset trochu jinak nastavit soubory náčrtu.
- Seskupte své vrstvy. Vrstvy, které nejsou ve skupině, jsou ignorovány
- Nepoužívejte mezery ve jménech skupin
- Skryté vrstvy ve skici jsou stále importovány, ale jejich viditelnost bude nastavena na hodnotu false.
- Vytvořte si jednoduché, jedinečné názvy pro vaše umělecká díla
- Mínus (-) na konci vašeho kreslicího plátna vyloučí to, že bude importován do Frameru
V nákresech vyrovnejte všechny vrstvy, které zůstanou statické. Tím se zlepší doba načítání vašeho projektu, což je zvláště skvělé při vytváření heterového prototypu. To můžete provést přidáním hvězdičky (*) do konce vrstvy ve Skici.
Stojí za to nějaký čas s návrháři ve vašem týmu, aby přešli na to, jak nastavit soubory nákresů tak, aby nejlépe odpovídaly pracovnímu postupu a co nejlépe pracuje pro tým.
Při importu souboru Sketch do programu Framer uvidíte něco podobného:
# Import file "design" sketch = Framer.Importer.load("imported/design@1x")Nahraďte náčrt za $ a teď můžete použít $ pro odkaz na vrstvy náčrtu, ušetříte se od psaní náčrtu slov stokrát:
$ = Framer.Importer.load("imported/design@1x")Pro běžný ukazatel myši použijte úryvek 'Normal Cursor':
document.body.style.cursor = "auto"and then scale them down, so they're extra crisp. Dovážím své návrhy na @ 2x a pak je měnit dolů, takže jsou extra ostrý. Všimněte si, že se nezdá, že se to shoduje s modulem ViewController uvedeným výše.
Framer.Device.contentScale = .5Nástroj Sketch a Framer používají pro web různé výchozí nástěnky / zařízení. Skica používá 1440 × 1024, zatímco Framer používá 1440 × 900. Rozhoduji se pro 1440 × 900. Nemyslete si, že jste omezeni na výšku 900 pixelů, avšak můžete snadno vytvářet scrollable stránky v Framer.
[- Tento článek byl původně zveřejněno na médium , znovu publikováno s povolením autora -]