Visandõpetused

Kuidas kasutada visioonis InVision DSM-i teeki

Kui te pole veel lugenud minu esimest artiklit disainisüsteemi seadistamise kohta InVision DSM-i abil, soovitan teil see kõigepealt läbi lugeda:

Taust

Üks asünkroonse koostöö raskemaid osi on kogu asünkroonne osa. Lõppude lõpuks on projektiga kellegagi raske koos töötada, kui töötate erinevatel ajakavadel, erinevatel ajatsoonidel ja erineva kogemustasemega.

Mis võib valesti minna?! Noh ...

  • Korduvad jõupingutused: mitu inimest ... töötavad sama asja kallal ... teadmata teise inimese tegevusi.
  • Aegunud töö: kui keegi teeb muudatusi, ilma et kogu meeskond seda teaks, siis on teil maailm haiget teha, kui pooled saadetistest kasutavad ühte nuppu, teine ​​aga teist.
  • Lisatöö: loomulikult, kui dubleerite pingutusi ja / või töötate dateeritud tööriistadega, on asjade parandamiseks vaja täiendavat tarbetuid töid. Yikes.

Nii tore, kui see oleks, kui kõik 50-liikmelise disainimeeskonnaga taasiseseisvunud puitpõrandal istuksid ristisirgel, et töötada koos disainilahendusel, see pole lihtsalt võimalik. Maailmas pole piisavalt kombucha, et sellist sünkroonset innovatsiooni korraga nagunii käivitada, eks?

Seetõttu on olemas disainisüsteemid !!!

Nad koondavad reeglid, parimad tavad ja mis kõige tähtsam - otsused, nii et kõik oleksid samal lehel. Kui ettevõtte meeskondadel on oma ainulaadne väljakutse - mitme kujundusraamatukogu haldamine (meeskonna- ja organisatsiooni tasandil), navigeerimine õigustega, värskenduste pärandus ja operatiivsed väljakutsed, on disainisüsteemid imeline lahendus suurtele ja väikestele meeskondadele, kes kasutavad standardiseeritud visuaalne keel.

Samamoodi tsentraliseerib Dropbox failihalduse ja koostöö, disainisüsteemi haldustööriist tsentraliseerib iga tööriista ja otsuse, mida teie meeskond võib vajada oma töö tegemiseks.

Enne kui sukeldume…

Nagu ma juba ütlesin, eeldan, et olete juba lugenud mu teist artiklit. Kui teil seda pole, kinnitan teile, et see on väga hästi kirjutatud, läbimõeldud ja ausalt öeldes tõesti esmaklassiline sisu Kui soovite teada, kuidas oma disainisüsteemi InVision DSM-i importida, lugege seda:

Nii ehitasite endale ilusa kujundussüsteemi ja olete selle InVision DSM-i abil kogu meeskonna disaineritele kasutusele võtnud. See on raske osa!

Lõbus osa on tegelikult selle kasutusele võtmine ja jagatud teegi / tööriistakasti esmakordse kasutamise eelised.

See artikkel on mõeldud säravatele ja innovaatilistele inimestele, kes kasutavad tegelikku InVision DSM-i kujundussüsteemi oma igapäevastes töödes.

Räägin tekstistiilide, kihtstiilide ja komponentide kasutamisest ning sellest, mida võite oodata DSM-i raamatukoguhoidjalt raamatukogu värskenduste saamisel.

Siin me läheme!

Mida me kujundame

Annan teile teada võltsitud disainerite turul kasutatava saidi peamisest armatuurlaualt, mis võimaldab mul vaadata oma portfelli statistikat.

Kuna ma näitan teile lihtsalt, kuidas DSM-i kasutada, keskendume ainult tööriistale. Selle õpetuse huvides pole kujundus ja UX olulised.

Märkus. Alustan uuest uuest failist, millel pole olemasolevaid stiile ega sümboleid, et kajastada kasutusjuhtu, mille kohaselt olen disainimeeskonna liige, kuid mitte raamatukoguhoidja.

Kihistiilid

Alustame ülemise navigatsiooniriba ehitamisega. Olen joonistanud ristküliku ja nüüd tahan hakata kasutama kujundussüsteemis määratletud stiile.

Märkus. Enamikul juhtudel luuakse navigeerimisriba teile juba sümbolina ja lohistate selle lihtsalt DSM-i teegi lõuendile, kuid tahtsin teile näidata, kuidas stiile kujunduses kasutatakse.

Mul on paremal avatud pistikprogramm InVision DSM ja vasakul minu visandiaken. Otsimine on kiire, kuid mul on sama lihtne leida raamatukoguhoidja loodud organiseeritud sektsioonidest mulle vajalik stiil (mina… haha). Pidage meeles, et DSM-i akent saate kuvada ja peita, vajutades Command + L.

Pro näpunäide. Selle akna kuvamiseks ja peitmiseks vajutage Command + L!

Nii et jah ... päris lihtne! Ma ei pidanud muretsema selle pärast, et otsida õige heksaväärtus ja veenduda, et see sobib. Kuni valin DSM-i teegist stiile, tean enesekindlalt, et kasutan õigeid värve.

Kui seda stiili värskendatakse kunagi millekski muuks, saan sellest märku ja kõik selle stiili eksemplarid värskendatakse automaatselt. Ilus! Vaatame seda siiski veidi hiljem.

Teksti stiilid

Vajame oma navigatsioonis mõnda üksust ja soovime, et meie tekst vastaks süsteemile, nii et tekstistiilid on meie parim sõber.

Jätkake seni, kuni teil on olemas kõik navigeerimise üksused. Nende automaatse paigutuse funktsiooni jaoks kasutan Anima Appi pistikprogrammi. Ma ei saa sõna otseses mõttes ilma selleta töötada.

Pidage meeles, et kõik need lehe vahelehed kasutavad tekstistiile, nii et kui meie kujundussüsteemi raamatukoguhoidja värskendab DSM-is vastavaid tekstistiile (stiile), saame värskenduse. See on nagu nad kinnitaksid kõik meie eest, kuid me ei pea midagi tegema. Milline unistus.

Komponentide kasutamine

Komponendid… sümbolid… helistage neile ükskõik, mida soovite. Ma kipun neid mõtlema kui "komponente" disainimeeskonna liikme seisukohalt ja "sümboleid" raamatukoguhoidja vaatenurgast.

Me ei pea tegelikult palju sümbolitest rääkima, kuna need on meile juba loodud. Me peame neid lihtsalt kasutama.

Lisagem logo meie navigeerimisribale ... vajame lõppude lõpuks kaubamärki:

ProTip: kinnitage vanemtasemel automaatse paigutuse pinu vasakule. Nii lukustub logo oma kohale.

Üks DSM-i fantastilisi asju on see, et see toetab selliste asjade nagu komponentide sügavalt pestud sümboleid. Kui raamatukoguhoidja selle logo sümboli lõi, kasutasid nad värvi maskeerimise tehnikat värvisümbolikihiga, mis võimaldab mul logo värvi üle kirjutada. Siin on originaaltehnika, mille varastasin Francesco Bertocci käest

Kui see ei olnud ülaltoodud GIF-is ilmne, ei pidanud ma tegelikult midagi tegema, et kõik need värvide alistused oleksid saadaval. DSM toob need pesatud värvid sõiduks automaatselt.

Uuenduste vastuvõtmine

Nagu me arutasime, on tsentraliseeritud disainisüsteemi peamine kasutusjuht asünkroonne koostöö. Kujundussüsteemi värskendamisel tuleks sellest kõigile teada anda ja oma kujunduse (te) sünkroonimine uuema versiooniga peaks olema üsna valutu.

Lisasin mõned armatuurkaardid meie armatuurlaua ülaossa, kuid mingil hetkel värskendas raamatukoguhoidja minu kasutatud sparkline erineva värviga. Neid värskendusi on lihtne alla tõmmata, klõpsates sünkroonimisnupul:

See töötab ka stiiliuuenduste jaoks. Ütleme nii, et meie brändi värv muudeti sini siniseks. Meie DSM-i raamatukoguhoidja saadab selle stiili värskenduse teeki, siis sünkroonime oma kujunduse kõige uuema versiooniga:

Ma ei taha isegi mõelda, kui kaua oleks mul aega olnud kõigi värskendamiseks. vallaline. näiteks. kohta. seda. värvi. hiiglaslikus disainifailis. Suudad sa ettekujutada?

See on suurepärane aja kokkuhoid ja sobib suurepäraselt meeskondadele.

Kiire väike märkus:
Sõltuvalt sellest, kuidas raamatukoguhoidja sümboleid konstrueerib, peate värskenduste sünkroonimisel silma peal hoidma oma ülekirjutustel.
Meie raamatukogu nupud kasutavad pesastatud teksti sümboleid, võimaldades disaineritel nupu teksti värvi alistada. Kui raamatukoguhoidja otsustab muuta pesastatud teksti sümboli teistsuguseks tekstisümboliks (võib-olla tahtsid nad, et nupu tekst oleks suurem või väiksem), mõjutab see teie olemasolevat nupu teksti alistumist.
See ei ole InVision DSM-i viga ... see on visand visandi ja pesasümbolitega. Kuni pesastatud sümbolid jäävad puutumatuks, pole teil probleeme.

Kokkuvõte

Arvan, et DSM-i teegiga kujundamisel on kõige toredam see, et te ei pea tõesti oma töövoogu palju muutma. Olen skeptiline kõigi tööriistade suhtes, mis sunnivad mind kujundamise viisi muutma, kuna olen juba nii efektiivseks saanud.

Võimalus otsida DSM-i raamatukogust muudab uskumatult hõlpsa leidmise minu pidevalt kasvavas komponentide kollektsioonis.

Suurimad mängude vahetajad:

  • Asünkroonne koostöö: Ma ei saa absoluutselt alahinnata disainilahenduste väljatöötamise ajal disainilahendustega töötamise mugavust. See on tohutu ajakulu säästja ja seda on intuitiivselt kasutada isegi visandikeelega alustajatele.
  • Organisatsioon: Sketch tegi kaldkriipsude abil ikoone (sümbolid / tooted / Facebooki ikoon) korrektselt stiili- ja sümbolikorraldusega, kuid see on natuke nõme. Komponentide läbimõeldult korraldatud nägemine muutis asjade leidmise palju lihtsamaks just sirvimise ajal.
  • Sisejuhised: Kui ma oleksin organisatsioonis täiesti uus ja kasutaksin DSM-i esimest korda, muudaksid sisesuunised üsna lihtsaks lihtsalt ... noh ... tööle asumise. Kui raamatukoguhoidja oli DSM-is projekteerimissüsteemi konstrueerimisel sõnatu ja kirjeldav, on mul tõesti kõik vajalik, mida ma pean organisatsiooni juhiste kohaselt kujundama.

Aitasin InVisionil luua näidisdisaini süsteemi Render, et saaksite näha, kui kena see nende veebivaates näeb. Laadige alla eskiisfail ja pistikprogramm Craft ning saate alustada oma raamatukogu kokkupanekut DSM-i tööriistaga, kasutades lähtepunktina renderdamissüsteemi.

Klõpsake ülaosas, et vaadata valmis disainisüsteemi InVisionil!

Kui ma ei ehita projekteerimissüsteeme, töötan UX Power Toolsis eskiisiriistade kallal, et muuta teid paremaks ja tõhusamaks disaineriks.

Järgige UX-i tööriistu Twitteris
Jälgi mind Twitteris
Öelge LinkedInis
Õppige mõnda asja minu agentuuri ajaveebist