Täydelliset prototyypit ja käsilaukun mallit, joissa on ihme

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

Lyhyemmällä oppimiskäyrällä kuin Invision App ja upouusi suunnittelu HandOff työkalut yritysjoukkueille, ei ole parempaa aikaa tutkia, miten ihma voi olla nopea ja vaivaton ratkaisu prototyyppien verkko- ja mobiilisovelluksiin joukkueissa.

Marvel auttaa joukkueita ottamaan malleja (joko luonnoksessa tai ihmeessä) luonnoksesta ideasta alustavan konseptin alustamiseen. Sen yhteistyökaluja kannustaa sidosryhmiä paitsi sanomaan, mutta olla osa suunnittelun työnkulkua.

01. Luo ensimmäinen Marvel-projekti

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

Kun olet valinnut projektin, napsauta jotain kahdesta painikkeesta aloittaaksesi suunnitteluprosessin

Rekisteröidy Marvelin alkamiseen, jos vain nimesi ja sähköpostiosoitteesi tarvitaan. Valitse joko suunnitteluprojekti tai prototyyppihanke. Prototyyppihanke on silloin, kun lataat näytöt, jotka olet jo suunnitellut (yleensä luonnos). Suunnitteluprojekti on, kun aloitat tyhjästä ja haluat käyttää Marvelin omia suunnittelutyökaluja alhaisen uskollisuuden mockupin luomiseksi (tämä on hämmästyttävä vaihtoehto nopean iterointiin ja aivoriihi).

Valitse suunnitteluprojekti, anna sitten nimi ja valitse sitten iPhone X ja napsauta Luo projektipainiketta. Täältä (me kutsumme tämän projektin kojelaudan täältä ulospäin), napsauta Design-painiketta vasemmanpuoleisella puolella tai Aloita suunnittelu-painike ikkunan keskellä.

02. Suunnittele Low-Fidelity Prototypes

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

Voit käyttää ja muokata valmiita komponentteja, kuten tämän kameran näytön

Ydin tavoitteena on visualisoida ideamme nopeasti tuhlaamatta liikaa aikaa huolestuttava siitä, mitä lopullinen lopputulos näyttää. Täältä voimme luoda muotoja, kuvia, tekstiä, valmiita komponentteja, kuten välilehtipalkkeja ja jopa koko koko näytön komponentteja, kuten tämän kameranäytön (joka valittu vasemmanpuoleisesta sivupalkista ja restyled käyttäen oikeaa kättä sivupalkki).

Piirustusmuodot, tekstikerrosten luominen ja yksinkertaisten visuaalisten muutosten tekeminen on melko helppoa myös ei-suunnittelijalle, vaikka maustetut suunnittelijat rakastavat kuinka nopeasti he voivat heittää ajatuksen yhdessä ja napsauttaa Lisää projekti-painikkeeseen.

Vaikka et voi odottaa vektorin piirtämistä, peittämistä ja muita monimutkaisia ​​suunnittelutyökaluja, tämä käyttöliittymä kuitenkin tuntuu varsin tuttuja, jos olet luonnos, Adobe XD tai Figma käyttäjä (itse asiassa keskustelemme tuodaan korkeamman uskollisuuden mallien tuomisesta luonnosta hetkessä). Mitä voit odottaa, on zoomaus, kohdistus, ryhmittely, perusvisulun suunnittelutyökalut, hiiren säätimet, kuten vetäminen, koon muuttaminen ja pyörittäminen ja muutama kätevä näppäimistö pikavalinnat.

03. Vastaanota palautetta

Kuitenkin Marvel ei ole pelkästään suunnittelijoille. Vaikka se voi vaatia suunnittelija luoda lopullinen muotoilu alan standardin suunnittelupyynnössä, ideoita (ja tehdä) tulevat kaikenlaisista sidosryhmistä (johtajat, asiakkaat, kehittäjät ja niin edelleen).

Riippumatta siitä, mitä ensisijainen rooli on tiimissä, sen pitäisi olla erittäin helppo sanoa: "Hei, voisiko tämä olla idea?" Ja sitten osoittaa, että visuaalisesti. Marvel's POP Mobiilisovellus vähentää pääsyn esteen entisestään tuomalla nämä yksinkertaistetut suunnittelutyökalut mobiililaitteisiin, koska kohtaamme sen, ideat voivat tulla meille kummallisimpia aikoja. Paperin piirretty ideat voidaan muuntaa interaktiiviseksi ihastusaikana laitekameralla. Suunnittelun on oltava demokratisoitu, jossa kukaan voi sanoa ilman, että se rajoittuu monimutkaisiin suunnittelusovelluksiin.

04. Integroi ihmotella luonnostaan

Kun olet tuottanut Brainstorm, Low-Fidelity ideoita tiimisi kanssa, sinun kannattaa pilata ensimmäisen iteraation suunnittelussa sovelluksessa. Vaikka voit täysin ladata vietyjä PNG-näytöitä mistä tahansa suunnittelupyynnöstä, Sketch on suositeltu sovellus, koska siellä on oma luonnos plugin, joka automatisoi prosessin (ja jopa tyydyttää suunnittelua, jotta kehittäjät voivat tarkastaa sen myöhemmin). Photoshop-tuki suunnittelun kanavanvaihtoon tulee myöhemmin, mutta Adobe ei enää toimi Photoshopille käyttäjän käyttöliittymäsuunnittelussa, koska se on luonut Adobe XD: n.

Valitse kojelaudasta Asetukset & GT; Integraatiot & GT; Sketch plugin ja lataa sitten plugin. Kun olet asentanut sen, ja suunnittelutiedosto auki, osoita synkronointi valittu tai synkronoi kaikki nauhan palkin painikkeet (tämä näkyy kerrosluettelon yläpuolella) aloittaaksesi Marvel-projektin valitsemiseksi näytöt.

05. Prototyyppien vuorovaikutukset

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

Vedä-Valitse alueet, jotta voit luoda hotspotit yhdestä näytöstä toiseen

Mutta tietenkään emme voi testata prototyyppejä, jos emme ole lisänneet niille vuorovaikutusta, joten tee se nyt. Siirtyminen takaisin Marvel-hallintapaneeliin, jossa näet synkronoidut näytöt, napsauta mitä tahansa näytössä näppäintä, jos haluat syöttää näytön tilaan.

Täältä voimme silti navigoida näytöillä vasemmalla ja oikealla nuolella ikkunan molemmilla puolilla, valitse Ajastin, kun haluat ihmeellisen syklin näyttöjen läpi tietyn sekunnin kuluttua (hyödyllinen esityksiin!) Tai napsauta Lisää kommentteja lisätäksesi kommentteja Ensimmäinen kommentti tai merkintä näytöllä.

Todennäköisesti ensimmäinen asia, jonka huomaat, on kiinteä otsikko ja kiinteät alatunnisteet, jotka näkyvät näytön vasemmassa yläkulmassa ja vasemmassa yläkulmassa. Nämä painikkeet ovat taaksiamattomia ja niitä voidaan myös siirtää merkitäksesi otsikkoosan raja-alueen, joka on pysyvän paikallaan vieritettävän näkymän yläosaan. Voit myös käyttää tekstikenttiä oikeassa yläkulmassa ja oikeassa nurkassa määrittääksesi tämän arvon manuaalisesti.

Mutta miten voimme todella yhdistää yhden näytön toiseen? Yksinkertainen: Hiirellä vetää - valitse alue näytöllä, joka on linkittää toiseen näyttöön (tätä kutsutaan "hotspotiksi"). Kun olet tehnyt, että käyttöliittymä näkyy ikkunan alareunassa, jonka avulla voit muokata, missä käyttäjä otetaan käyttöön, mikä tapahtuu vuorovaikutuksen aikana ja mitä ele tarvitsee aktivoidakseen, että vuorovaikutus (napauta, pyyhkäise jne. ).

Ja tietenkin voimme käyttää näitä prototyyppiä koskevia työkaluja myös alhaisen uskollisuuden mockupsissa. Itse asiassa on suositeltavaa, että teet, kun käytät kommentointiominaisuuksia keskustelemaan ja toistamaan.

06. Muotojen luovuttaminen kehittäjille

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.

Suunnittelun kanavanvaihto helpottaa suunnittelua ja kehittäjää työskentelemään toistensa kanssa

Kun tiimisi säilyttää täydellisen luottamuksen lopulliseen muotoiluun, validoitu käyttämällä kommentointi- ja käyttäjän testaustyökaluja, on aika luovuttaa se kehittäjille, jotka voivat sitten tarkastaa ja koodia. On tärkeää muistaa, että suunnittelija ei ole "tehty", kun muotoilu luovutetaan ja että suunnittelijoiden ja kehittäjien olisi aina toimitettava sopusoinnussa valvomaan kehitystä sen loppuun saakka. Kehittäjä voi olla myös joitain kysymyksiä, joten ne kommentointitoiminnot olisivat edelleen erittäin aktiivisia.

Paina PLAY-painiketta ja valitse sitten alareunassa vasemmassa kulmassa Kanavanvaihto. Täältä kehittäjät voivat napsauttaa suunnitteluelementtejä ja tarkastaa yksittäiset tyylit, jotka tekevät niistä mitä he ovat, käyttäen sivupalkkia oikealla puolella (kuten tarkastaja liitäntä luonnos, Figma tai Adobe XD). Ainoa ero on, että kehittäjät voivat napsauttaa kopiointipainiketta kopioidaksesi tyylejä koodiksi leikepöydälle.

Tämä artikkeli julkaistiin alun perin liikkeeseen 301, maailman parhaiten myytävänä lehden web-suunnittelijoiden ja kehittäjien osalta. Ostaa Issue 301 tai Tilaa Net .

Saat enemmän tietoa iteratiivisesta prototyypistä

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

Marisa Morby antaa Talk Tutustu, miten iterative prototyyppi-testaus auttaa sinua luomaan voittavan suunnittelun joka kerta tuottaa New York 25.-27.4.2018

Kun useimmat yritykset tarvitsevat uuden web-suunnittelun, prosessi alkaa tyypillisesti pitching ideoita, siirtyy suunnitteluun, sitten kehitykseen ja sitten elää. Mutta entä jos se ei toimi? Se on paljon aikaa, vaivaa ja rahaa viettää vain selvittää, että idea teki huonosti.

Onneksi hänen puheenvuorossaan Luo New York 25.-27.4.2018 , Marisa Morby, tutkimuksen päällikkö selkeällä, näyttää paremman tavan luoda ja vahvistaa uusia malleja, jotka ovat nopeampia, helpompaa ja edullisempaa kuin perinteinen suunnitteluprosessi, joka käyttää iteratiivista prototyyppiä ja testausta.

Luo New York järjestetään 25.-27. Huhtikuuta 2018. Hanki lippu nyt .

Aiheeseen liittyvät artikkelit:

  • 10 Top Prototyyppiasiat
  • 18 parasta Wireframe-työkalua
  • Miten välttää prototyyping-kisat

Miten tehdään - Suosituimmat artikkelit

Eläinten piirtäminen: 15 Top Vinkkejä

Miten tehdään Sep 11, 2025

(Kuva luotto: Aaron Blaise) Oppiminen eläinten piirtäminen on olennainen osa kuvaa. Wildlife-kohtauksista ympäri m..

Affinity Designer: Viennin käyttäminen

Miten tehdään Sep 11, 2025

Affinity Designer on suosittu vektori muokkaustyökalu. Sekä MAC- ja Windows-versiot, Serif äskettäin julkaistu Affini..

5 tapaa lisätä verkkosivustosi SEO

Miten tehdään Sep 11, 2025

SEO: Se on likainen työ, mutta jonkun on tehtävä se, ja jos haluat kenenkään nähdä Suunnittelu portfolio Mu..

Miten prototyyppi mobiilisovellus origami studiolla

Miten tehdään Sep 11, 2025

Maailmassa, jossa käyttäjillä on suuria odotuksia kokemuksistaan ​​verkosta ja mobiililaitteesta, prototyyppistä ja käyttäjän arvioinnista on avainasemassa. Nyt on tavallista astei..

Miten maalata zombie Clip Studio Paint

Miten tehdään Sep 11, 2025

Tässä piirustuksessa opetusohjelmassa opit Miten piirtää ja maalata zombie käyttäen Clip Studio Pain..

Kuinka luoda hämmästyttäviä vaikutuksia CSS-muotoihin

Miten tehdään Sep 11, 2025

Etukentäjät ajattelevat suorakulmioita; Suorita suorakulmioita suorakulmioita suorakulmioita suorakulmioita. Voisimme käyttä�..

Kuinka luoda RedShift-välityspalvelimen elokuvateatteri 4d

Miten tehdään Sep 11, 2025

Cinema 4D On suuri monissa asioissa, mutta se voi hidastua, kun se on paljon esineitä paikalla, mikä on todellinen ..

Piirrä tarkat luut ja lihakset

Miten tehdään Sep 11, 2025

Anatomia on valtava aihe ja vaatii tieteellistä tietoa ja taiteellista käytännöllisyyttä. Tarvitset esimerkiksi insinöörin..

Luokat