Perfektní prototypy a ruční návrhy s Marvelem

Sep 11, 2025
jak
A person sat in a cafe using Marvel on their laptop and displaying a finished prototype on their smartphone.

S kratšící křivkou učení než invision aplikace a zbrusu nový design nástroje pro podnikové týmy, není lepší čas prozkoumat, jak Marvel může být rychlé a snadné řešení pro prototypové webové a mobilní aplikace v týmech.

Marvel pomáhá týmům vzít své vzory (vyrobené buď v náčrtu nebo Marvel sám) z načrtnuté myšlenky na počáteční testovaný koncept. Jeho kolaborativní nástroje povzbuzují zainteresované strany nejen, aby své slovo, ale být součástí návrhu pracovního postupu.

01. Vytvořte svůj první projekt Marvel

Marvel's new design screen, indicating the locations of the buttons to create new designs.

Po vyzvednutí projektu klepněte na jeden ze dvou tlačítek pro spuštění procesu návrhu

Zaregistrujte se na Marvel, abyste mohli začít, kde jsou požadovány pouze vaše jméno a e-mailová adresa. Vyberte jeden projektový projekt nebo projekt prototypu. Projekt prototypu je při nahrávání obrazovek, které jste již navrženi (obvykle v náčrtu). Designový projekt je, když začínáte od nuly a chcete použít Marvel vlastní design nástroje pro vytvoření nízko věrnosti maketa (to je úžasná volba pro rychlé iterace a brainstorming).

Zvolte projekt návrhu a zadejte jej jméno a vyberte iPhone X a klepněte na tlačítko Vytvořit projekt. Odtud (zavoláme to projektový přístrojový panel odtud), klepněte na tlačítko Design na levé straně nebo tlačítko Start Design v uprostřed okna.

02. Design Low-Fidelity Prototypy

Marvel's protoyping screen, showing how easy it is to add mocked up components, include smartphone camera screens.

Můžete použít a přizpůsobit hotové komponenty, jako je tato obrazovka fotoaparátu

Naším klíčovým cílem je vizualizovat naše nápady rychle, aniž byste plýtvali příliš mnoho času znepokojujícího, jak bude vypadat konečný výsledek. Odtud jsme schopni vytvářet tvary, obrazy, text, hotové komponenty, jako jsou tyče na kartu, a dokonce i celé komponenty celé obrazovky, jako je tato obrazovka fotoaparátu (která byla vybrána z levého postranního panelu a restyloed pomocí pravé ruky postranní panel).

Tvary kreslení, vytváření textových vrstev a jednoduchých vizuálních změn je poměrně snadné i pro non-designer, i když ochucené designéři budou milovat, jak rychle budou schopni dohromady dohromady a kliknout na tlačítko Přidat do projektu.

I když nemůžete očekávat vektorové kreslení, maskování a další složité nástroje pro konstrukci, toto rozhraní se bude nicméně cítit docela známý, pokud jste skica, Adobe XD nebo Figma Uživatel (ve skutečnosti diskutujeme o importu s vyšší věrnost návrhy z náčrtu za chvíli). To, co můžete očekávat, je přiblížení, zarovnání, seskupení, základní vizuální konstrukční nástroje, ovládací prvky myši, jako je přetažení, změna velikosti a otáčení a několik šikovných klávesových zkratek.

03. Přijměte zpětnou vazbu

Marvel však není jen pro designéry. I když může vyžadovat návrhář k vytvoření konečného návrhu v aplikaci Design-standardní design, nápady by měly (a dělat) pocházet ze všech druhů zúčastněných stran (manažery, klienty, vývojáři, a tak dále).

Bez ohledu na to, jaká je vaše primární role v týmu, mělo by to být super-snadné říci: "Hej, mohla by to být nápad?", A pak demonstrovat, že vizuálně. Marvel je Pop. Mobilní aplikace snižuje bariéru vstupu ještě dále tím, že tyto zjednodušené konstrukční nástroje do mobilních zařízení, protože se objednají, nápady mohou přijít k nám na nejpodivnějších časech. Nápady načrtnuté na papíře mohou být převedeny na interaktivní obrazovku Marvel pomocí fotoaparátu zařízení. Design musí být demokratizován, kde může mít někdo, aniž by byl omezen na použití komplexních aplikací pro návrh.

04. Integrovat Marvel s náčrtem

Po produktivně brainstormingu s nízkou fidelity myšlenky s vaším týmem budete chtít posmívat první iteraci ve vašem návrhu aplikace volby. I když můžete zcela nahrát exportované PNG obrazovky z jakékoli aplikace Design App, Skica je doporučená aplikace, protože je zde vyhrazen náčrtu plugin, který automatizuje proces (a dokonce připravuje návrh, takže může být kontrolován vývojáři později). Photoshop Support for Design Handoff přijde později, ale Adobe není touting Photoshop pro design uživatelského rozhraní, protože vytvořil Adobe XD.

Z přístrojové desky klepněte na položku Nastavení a GT; Integrace a gt; Skica plugin, pak stáhnout plugin. Jakmile je nainstalován, a váš návrhový soubor otevřený, stiskněte tlačítka Sync vybrané nebo synchronizujte všechna tlačítka ve sloupci Marvel (zobrazí se nad seznam vrstev) pro zahájení výběru projektu Marvel pro synchronizaci obrazovek do.

05. Prototypové interakce

Marvel screen showing how you can create interactions, for example placing your thumb on the thumbprint scanner to progress to the next screen.

Přetáhněte pole pro vytvoření hotspotů pro propojení z jedné obrazovky do druhé

Ale samozřejmě nemůžeme otestovat prototypy, pokud jsme k nim nepřidali žádné interakce, takže to udělejme teď. Přesunutí zpět do palubní desky Marvel, kde uvidíte obrazovky, které jsme synchronizovali, klepněte na tlačítko Zobrazit na některý z obrazovek do režimu obrazovky.

Odtud můžeme stále procházet obrazovkami pomocí šipek vlevo a vpravo na obou stranách okna, klepněte na položku Časovač, abyste měli odbočení pojistným cyklem po určitém počtu sekund (užitečné pro prezentace!) Nebo klikněte na žádné komentáře k přidání Vaše první komentář nebo anotace na obrazovce.

Pravděpodobně první věc, kterou si všimnete, je pevná záhlaví a pevná zápatí tlačítka, která se zobrazují v blízkosti horních levých a dolních levých rohů obrazovky. Tato tlačítka jsou draggable a mohou být také přesunuty, aby označili mezní oblast záhlaví sekce, která má zůstat na vrcholu rolovacího výřezu. Textová pole můžete také použít v pravém horním a dolním rohu pro ruční zadání této hodnoty.

Ale jak skutečně propojujeme jednu obrazovku do druhého? Jednoduché: Pomocí myši přetáhněte oblast na obrazovce, která má odkazovat na jinou obrazovku (to se nazývá "hotspot"). Jakmile to uděláte, rozhraní se zobrazí v dolní části okna, která umožňuje přizpůsobit tam, kde je uživatel převzat, jakýkoli přechod, který se stane během interakce a jaké gesto je nutné aktivovat tuto interakci (kohoutek, přejeví atd. ).

A samozřejmě můžeme tyto prototypové nástroje používat i na mobile-fidelity maketa. Ve skutečnosti doporučuje se, že budete dělat, všechny při použití funkcí komentování diskutovat a opakovat.

06. Vydání návrhů pro vývojáře

A screen grab of Marvel showing how easy it is for developers to access detailed information from handed off designs, such as the positions and sizes of each element.

Designová handkoff umožňuje snadné pro design a vývojář, který bude pracovat s sebou

Když váš tým zachovává plnou důvěru v konečný design, ověřený pomocí nástroje komentování a testování uživatelů, je čas ji předat vývojářům, kteří pak mohou kontrolovat a kódovat. Je důležité si uvědomit, že návrhář není "hotový", jakmile je design předán a že designéři a vývojáři by měli vždy komunikovat v souladu s cílem dohlížet na vývoj až do jeho dokončení. Vývojář může mít také několik otázek, takže tyto funkce komentování by měly být stále velmi aktivní.

Stiskněte tlačítko Přehrát a klepněte na tlačítko Přemístěte v levém dolním rohu, abyste otevřeli rozhraní návrhu. Odtud budou moci vývojáři schopni kliknout na prvky návrhu a zkontrolovat jednotlivé styly, které je činí tím, co jsou, pomocí postranního panelu na pravé straně (podobně jako inspektor rozhraní v náčrtu, figmu nebo Adobe XD). Jediný rozdíl zde je, že vývojáři jsou schopni kliknout na tlačítko Kopírovat pro kopírování stylů jako kód do schránky.

Tento článek byl původně publikován v čísle 301 sítě, nejprodávanější časopis světa pro web designéry a vývojáře. Koupit Vydání 301. nebo Přihlásit se k odběru Net. .

Získejte více informací o iterativní prototypování

Generate NYC 2018 runs from the 25th-27th April 2018

Marisa Morby dává její rozhovor zjistit, jak se iterativní testování prototypu pomůže vytvořit vítězný design, pokaždé na generování New Yorku od 25. do 27. dubna 2018

Když většina firem musí vytvořit nový web design, proces obvykle začíná nohavicí nápady, přesune se na design, pak vývoj, a pak jde žít. Ale co nefunguje? To je spousta času, úsilí a peněz na trávení jen proto, abyste zjistili, že myšlenka proběhla špatně.

Naštěstí ve svém rozhovoru Generovat New York od 25. do 27. dubna 2018 , Marisa Morby, vedoucí výzkumu na Clearhead, vám ukáže lepší způsob, jak vytvořit a ověřit nové návrhy, které jsou rychlejší, jednodušší a levnější než tradiční konstrukční proces s použitím iterativního prototypování a testování.

Generovat New York se koná od 25. do 27. dubna 2018. Dostaňte svou letenku .

Související články:

  • 10 Top prototypovací nástroje
  • 18 nejlepších nástrojů drátů
  • Jak se vyhnout prototypování nástrah

jak - Nejoblíbenější články

Cloud Skladování pro fotografie a obrázky: Jak si vybrat nejlepší cloud pro vaši práci

jak Sep 11, 2025

(Image Credit: Getty Images) Cloud Storage nabízí tunu výhod pro kreativy všech typů, zejména fotografů. Ať u..

6 Rychlé tipy pro zlepšení kresby štětcem

jak Sep 11, 2025

(Image Credit: Artem SoloP) Vždycky jsem se snažil rozvíjet svůj osobní styl, umělecký hlas, který mluví pro..

Jak změnit den v noci ve Photoshopu

jak Sep 11, 2025

Denní konverze byly kolem tak dlouho, dokud Photoshop měl nastavovací vrstvy, ale zvládnutí efekt trvá mnoho praxe. Klíče..

Vytvořit a animovat polygony SVG

jak Sep 11, 2025

V tomto tutoriálu budeme vytvářet řadu snímků z trojúhelníků SVG a zřídit animovaný přechod z jednoho obrázku na dr..

Tráva v neskutečném motoru

jak Sep 11, 2025

Při vytváření architektonické vizualizace musíte představovat spoustu údajů, a jeden z nejvíce časově náročných je..

Jak získat více z digitálních textur

jak Sep 11, 2025

Digitální práce vás osvobozuje, aby se co nejvíce chyb, jak se vám líbí, v pracovním prostoru, kde je prvek rizika odebr..

Modelování komplexní geometrie: 5 Top tipů

jak Sep 11, 2025

V průběhu dlouholetých zkušeností, práce ve videohře Studio nastavení a výuku 3D umění Pro hladové mla..

Jak vytvořit animovaný webový banner ve Photoshopu

jak Sep 11, 2025

Vytváření webových bannerů není nejvíce okouzlující práce na světě, ale je to něco, co bude každý návrhář povinen udělat v určitém bodě v jejich kariéře, pravděpodobn..

Kategorie