Kuinka luoda UX-virtauksia luonnoksen ja automaattisen asettelun avulla

Ja nopeuta työnkulkua.

Lataa Sketch-tiedosto täältä (Sinun on asennettava automaattinen asettelu -laajennus, jotta se toimii oikein)

Pikaesittely

Henkilökohtaisesti rakastan Sketchin käyttöä melkein jokaisessa vaiheessa tuotesuunnitteluprosessissani, mutta on aina ollut pari tehtävää, jotka ovat pakottaneet minut poistumaan Sketchistä ja luottamaan muihin sovelluksiin. Vuokaavioiden luominen oli yksi niistä.

Löysin itseni käyttämään google draw -sovellusta nopeiden käyttäjävirtojen luomiseen, mutta silloin, kun halusin luoda vähän tai erittäin uskollisia rautalankavirtoja, minulla olisi ongelma. Haluan luoda kaikki kehyskehykseni Sketchissä, joten etsin tapaa viedä näytöt Sketchistä. Tämä oli jo liian monimutkaista vain siksi, että minun piti mennä edestakaisin kahden sovelluksen välillä. Mutta eilen illalla klo 2 lauantai-iltana (en myöskään tiedä miksi tarkastelin tätä tuolloin) Luulen löytäneeni käytännöllisen ratkaisun.

Luonnoksen ja automaattisen asettelun avulla onnistuin ratkaisemaan kaksi pääongelmaa, jotka olivat nopeus ja johdonmukaisuus.

Edut

Tätä menetelmää käyttämällä voit luoda laajoja virtauksia 100-prosenttisesti yhdenmukaisella tavalla. Ainoa mitä sinun täytyy tehdä, on kopioida ja liittää uusi näyttö tai näyttöryhmä, ja kaikki muu järjestelee itsensä uudelleen, jotta uudet kohteet mahtuvat pitäen kaikki samat etäisyydet toistensa välillä. Se säätää jopa taustaasi! Tämä säästää niin paljon hukkaan jäänyttä aikaa yritettäessä saada kaikki tasaisesti etäisyydelle ja antaa samalla paremman näköisen tuloksen.

Ei enää mittaa näyttöjen tai ryhmien välistä etäisyyttä.

Vaihe 1 - virtausryhmä

Näytön symboli

Aloita itse näytön symbolilla, jossa on otsikkopalkki näytölle ja tyhjä alue näytön sisällölle.

Näytön pehmustepino

Luo kaksi suorakaiteenäyttöä näytön kummallekin puolelle pehmusteena, jotta saat hieman enemmän hengitystilaa. Seuraavaksi luo ensimmäinen automaattisen asettelun pino, aseta se vaakasuoraan ja lisää sitten haluamasi välimatka kunkin näytön väliin Automaattisissa asetteluissa. Kun tämä on tehty, voin kopioida ja liittää uudet näytöt pinoon ja järjestää ne automaattisesti uudelleen pitäen samalla kaikki oikeat etäisyydet. (Vähennä myöhemmin pehmusteen opasiteetti 0 prosenttiin, jotta niitä ei voi nähdä.)

Vastaava tausta

Luo taustaryhmälle symboli, joka on harmaa tausta ja ryhmän otsikkopalkki yläpuolella. Aseta tausta koon muuttamiseksi ja kiinnitä otsikkorivi ylös. Ryhmittele tausta näytön pehmustepinoon ja käytä automaattisen asettelun vasenta ja oikeaa nastaa, jotta se on reagoiva, kun taas säädetään uusiin näytöihin.

Vaihe 2 - virta-pinot

Vaakasuuntainen pino

Pinoa vähintään kaksi virtauspinoa ja aseta välimatka. Joka kerta kun lisäät uuden virtauspinon, etäisyys kunkin ryhmän välillä on vakio.

Pystypino

Pinoa kaksi tai useampia vaakatasoja päällekkäin ja aseta välimatka uudelleen. Tämän avulla voit nyt kopioida ja liittää vaakatasossa olevia pinoja.

Vaihe 3 - reagoiva tausta

Vaaka-tyyny

Kaksi suurta pehmuste suorakulmiota, yksi pystysuoran pinon yläpuolella ja toinen alapuolella. Ryhmitä nämä yhteen ja käännä ryhmä toiseksi vaakasuoraksi pinoksi.

Pystypehmuste

Suorita sama uudelleen ryhmittelemällä vaakatyyny kahdella suurella täyttö suorakaiteella, yksi yläpuolella ja toinen alapuolella, kääntämällä ryhmä pystysuoraksi pinoksi.

Vastaava tausta

Lopuksi ryhmitä pystysuora pehmuste taustan kanssa ja kiinnitä kaikki taustan neljä reunaa. Nyt taustan koko muuttuu, kun kopioit jotakin elementtiä!

Vaihe 4 - Brucie-bonus

Sisäkkäiset symbolit

Käytä näytön symbolien sisäkkäisiä symboleja muuttaaksesi helposti jokaisen näytön sisältöä. Käytän muutama perusnäyttömalli alhaisen uskollisuuden virtauksilleni. Huomaa myös, että ryhmittelin

TEHTY!

Muista, että voit käyttää välilyöntiä uudelleen virtauspinojen molemmissa päissä luodaksesi suurempia jakoja näyttöjen välillä alaryhmien luomiseksi.

Lataa Sketch-tiedosto täältä (Sinun on asennettava automaattinen asettelu -laajennus, jotta se toimii oikein)

Jotkut luotot

Kickpush - Olen ollut massiivista inspiraatiota, kun näin ensimmäisen kerran heidän kehysrakenteensa, minua räjäytti 1) kuinka hyvä ne näyttivät. 2) kuinka selkeät ja luettavat ne ovat. Checkout heidän Process-Wireframeista ja verkkosivustosta www.kickpush.com

Animaapp - Tämä tekniikka ei olisi mahdollista ilman tätä hämmästyttävää automaattisen asettelun laajennusta

Pablo Stanley - Hänellä on hieno tapa selittää asioiden toimivuutta, katso hänen automaattisen asettelun opetusohjelma täältä youtube-opetusohjelma

Kippis

En tiedä, olisiko kukaan voinut seurata tuota lol: ta, mutta pelata lähdetiedoston kanssa ja tutustua autoasettelu-oppaisiin.

Toivon, että joku pitää tätä hyödyllisenä. Tämä oli ensimmäinen opetusohjelmani, joten vastaa kaikkiin palautteisiin tai kysymyksiin.

Löydät lisää minulta osoitteessa https://dribbble.com/yeta1