Kuidas luua UX-vooge eskiisi ja automaatse paigutusega

Ja kiirendage oma töövoogu.

Laadige eskiisfail alla siit (selle korralikult töötamiseks peate installima pistikprogrammi Automaatne paigutus)

Kiire sissejuhatus

Isiklikult armastan Sketchi kasutamist peaaegu igal toote kujundamise protsessi etapil, kuid alati on olnud paar ülesannet, mis on sundinud mind Sketchist lahkuma ja lootma teistele rakendustele. Voodiagrammide koostamine oli üks neist.

Ma leian end google draw abil kiirete kasutajavoogude loomiseks, kuid siis, kui soovisin luua vähese või suure täpsusega traatvõrgu vooge, oleks mul probleem. Kuna mulle meeldib luua kõik oma kaadreid visandis, otsiksin viisi ekraanide eksportimiseks visandist. See oli juba liiga keeruline lihtsalt seetõttu, et peaksin kahe rakenduse vahel edasi-tagasi minema. Kuid eile õhtul kell 2 laupäeva õhtul (ma ei tea, miks ma ka sel ajal seda vaatasin), ma arvan, et leidsin praktilise lahenduse.

Sketši ja automaatse paigutuse abil õnnestus mul lahendada kaks peamist probleemi, milleks olid kiirus ja järjepidevus.

Kasu

Selle meetodi abil saate luua ulatuslikke vooge 100% järjepidevusega. Kõik, mida peate tegema, on uue ekraani või ekraanirühma kopeerimine ja kleepimine ning kõik muu korraldatakse ümber, et mahutada uued üksused, säilitades samasugused vahed üksteise vahel. See kohandab isegi teie tausta ka! See säästab nii palju raisatud aega, kui üritate kõik ühtlaselt asetada, kuid samal ajal saate parema väljanägemise.

Ekraanide või rühmade vahelist kaugust enam ei mõõdeta.

1. samm - voolugrupp

Ekraani sümbol

Alustage ekraani enda sümboliga, millel on ekraani tiitliriba ja tühi ala ekraani sisu jaoks.

Ekraani polstripakk

Mõlemal pool ekraani mõlemal küljel moodustage polsterdusena kaks ristkülikut, et anda natuke rohkem hingamisruumi. Järgmisena looge oma esimene automaatse paigutuse virn, seadke see horisontaalsele ja lisage seejärel soovitud vahekaugus automaatse paigutuse iga ekraani vahele. Kui see on tehtud, siis saan uued ekraanid kopeerida ja kleepida virnasse ning ekraanid automaatselt ümber korraldada, säilitades samal ajal kõik õiged vahed. (Hiljem vähendage polstri läbipaistmatust 0% -ni, nii et neid pole näha.)

Vastuvõtlik taust

Looge oma taustarühma jaoks sümbol, mis on halli taustaga konteiner ja rühma pealkiri riba. Seadke taust suuruse muutmiseks ja kinnitage tiitliriba ülaossa. Grupeerige taust ekraanipolsterdamise virna abil ja kasutage automaatse paigutuse vasak- ja parempoolset tihvti, et muuta see reageerivaks, kohandades seda uutele ekraanidele.

2. samm - voolu korstnad

Horisontaalne virn

Pange kokku kaks või enam voolukomplekti ja määrake vahekaugus. Iga kord, kui lisate uue vooluhulga, on iga rühma vaheline kaugus konstantne.

Vertikaalne virn

Pange kaks või enam horisontaalset virna üksteise peale ja määrake jälle vahe. See võimaldab teil nüüd horisontaalseid virna kopeerida ja kleepida.

3. samm - tundlik taust

Horisontaalne polster

Kahe suure polsterdatud ristküliku paigutamine, üks vertikaalse virna kohal ja teine ​​allpool. Rühmitage need kokku ja keerake grupp teise horisontaalseks virnaks.

Vertikaalne polster

Tehke sama uuesti, grupeerides horisontaalse polsterduse veel kahe suure polsterduse ristkülikuga, millest üks asub ülal ja all, muutke grupp vertikaalseks virnaks.

Vastuvõtlik taust

Lõpuks grupeerige vertikaalne polster taustal ja kinnitage kõik taust neli serva. Nüüd muudetakse tausta suurust, kui kopeerite mõnda elementi!

4. samm - Brucie boonus

Pesastatud sümbolid

Kasutage iga ekraani sisu hõlpsaks muutmiseks ekraani sümbolites pesastatud sümboleid. Ma kasutan vähese lojaalsusega voogude jaoks mõnda põhilist ekraanimalli. Pange tähele ka seda, et rühmitan

TEHTUD!

Pidage meeles, et vooluhulga mõlemas otsas asuvaid vahesid saate uuesti kasutada, et tekitada ekraanide vahel suuremaid jaotusi alamrühmade loomiseks.

Laadige eskiisfail alla siit (selle korralikult töötamiseks peate installima pistikprogrammi Automaatne paigutus)

Mõned krediidid

Kickpush - see on olnud tohutu inspiratsioon, kui ma nägin nende raamiraami esimest korda, et mind lõi 1) kui hea nad välja nägid. 2) kui selged ja loetavad nad on. Vaadake nende töötlemisraami ja veebisaiti www.kickpush.com

Animaapp - see tehnika pole võimalik ilma selle hämmastava pistikprogrammi automaatse paigutuse pistikprogrammita

Pablo Stanley - omab suurepärast viisi, kuidas asjad toimivad, vaadake tema automaatse paigutuse õpetust siin youtube-õpetus

Terviseks

Ma ei tea, kas keegi suutis seda lolli jälgida, kuid peaks olema lähtefailiga ringi käinud ja tutvuda mõnede automaatse paigutuse õpetustega.

Loodan, et keegi leiab sellest kasulikku. See oli minu esimene õpetus läbi aegade, nii et palun vastake tagasiside või küsimusega.

Lisateavet minu kohta leiate aadressilt https://dribbble.com/yeta1