Adobe XD: n komponenttijärjestelmä antaa suunnittelijoille tehokkaiden ominaisuuksien avulla mahdollisuuden prototyyppittää digitaalisia tuotteita. Se ei kuitenkaan ole omituinen ja vaatii erityistä hoitoa. Älykkäiden pikavalintojen ja parhaiden käytäntöjen noudattaminen antaa suunnittelijoille mahdollisuuden virtaviivaistaa XD-prototyyppien työnkulkuja.
Virallisen julkisen julkaisunsa jälkeen loppuvuodesta 2017 Adobe XD on edistynyt merkittävästi tullakseen erittäin kilpailukykyiseksi langankehyksen ja prototyyppien valmistustyökaluksi UX-suunnittelijat . Erityisesti sen uusi komponenttijärjestelmä laajentaa vuorovaikutustyyppiä, jonka kanssa suunnittelijat voivat kokeilla. Silti komponentit eivät ole ilman omituisuuksia ja haittoja. Kun työskentelet XD-komponenttien kanssa, on hyödyllistä ottaa käyttöön joukko työnkulun käytäntöjä, jotta vältetään kiireinen työ ja valjastetaan järjestelmän kaikki mahdollisuudet.
XD-komponentit ovat uudelleenkäytettäviä elementtien, kuten tekstin, muotojen tai viivojen, ryhmittelyjä. Komponentilla on pääkomponentti, joka toimii vanhempana ja 'esiintyminä' tai lapsina, jotka on sijoitettu taululle. Kun vaihdat Pääkomponentti , muutokset etenevät kaikkiin sen esiintymiin.
Korvaamalla XD: n edellisen 'symbolijärjestelmän', jolla oli samanlainen tarkoitus, komponentit tarjoavat keskeisen erottimen . Heillä voi olla useita toteaa jotka reagoivat XD: n prototyyppitilassa määriteltyihin eri tuloihin. Esimerkiksi painikkeella voi olla oletusarvo, mutta se voi muuttaa ulkonäköä, kun se on hiiren osoittimessa tai napsautettuna. Se voi toistaa ääntä napsautettaessa tai jopa muuttaa sen ulkonäköä puheen tunnistamisen tulojen mukaan.
Komponenttijärjestelmä on aikaa säästävä, mutta vaatii erityistä hoitoa. Huolellinen lähestymistapa ja huolellisesti valmisteltu työnkulku ovat tarpeen järjestelmän tehon hyödyntämiseksi.
Suunnittelijat, jotka tuntevat Adobe XD: n riittävän hyvin, hyötyvät eniten seuraavista vinkeistä ja ehdotuksista. Saadaksesi etumatkan, lataa Adobe XD Design Kit Googlen materiaalisuunnittelun kotisivulta. Paketti sisältää Adobe XD -komponenttisarjan, jota voidaan kokeilla ja purkaa.
Kun luot a komponentti tilojen kanssa ensimmäistä kertaa, suunnittelijat tulisi ymmärtää, miten komponentin mahdolliset muutokset voivat vaikuttaa muihin esiintymiin. Tarkastellaan seuraavaksi avattavaa valikkoa, jossa on useita tiloja:
Kun muokkaat oletustila pudotusvalikosta nämä muutokset eivät levitä hiiren osoittamaan tai napsautettuun tilaan . Kaikkien esiintymien hiiren osoittaman tai napsautetun tilan päivittämiseksi on tehtävä muutokset pääkomponentin oletustilaan.
Vaikka voi olla houkuttelevaa hypätä sisään ja aloittaa iterointi Pääkomponentit , toisinaan odottamattomia ongelmia johtuu eroista vanhempien ja lasten osien käyttäytymisessä.
Hyvä käytäntö on harkita ja ennakoida kaikki tarvittavat pääkomponentin oletustilassa ennen lisäämällä muita tiloja tai instantisoimalla komponentti - jopa niin pitkälle kuin eri tilojen asettaminen vierekkäin.
Suunnittelijoiden on myös pidettävä mielessä, että he voivat lisätä ja muuttaa elementtejä pääkomponentin oletusarvoisissa tiloissa tai alatapauksissa ilman vaikuttaa oletustilaan, mutta päinvastoin ei ole totta.
Suositus Adobelle : Anna komponenttitiloille lukitustoiminto, jotta suunnittelijat voivat pitää ei-oletustilat ehjinä ja estää pääkomponentin oletustilan muutoksia.
Komponentin luominen (napsauta hiiren kakkospainikkeella elementtiä ja valitse sitten valikosta 'Tee komponentti' tai paina Cmd-K Macissa / Ctrl-K PC: ssä) lisää komponentin vasemman sivupalkin Omaisuus-paneeliin. XD antaa komponentille oletusnimen 'Component XX' (jossa 'XX' on luku). Se ei ole kovin kuvaileva, joten olisi parasta antaa sille ainutlaatuinen, etsittävä nimi.
Miksi se tehdään? Kun komponenttiluettelo täyttyy, siitä tulee hankala, jos kaikki komponentit alkavat samalla oletusnimellä ja merkityksettömällä numerolla. Vaikka 'ruutunäkymä' -vaihtoehto auttaa, siinä ei ole tekstitarroja, mikä tekee visuaalisen tunnistamisen hitaasta ja haastavasta. Pienillä pikkukuvilla varustettu 'luettelonäkymä' vaikeuttaa myös sellaisten komponenttien välisten erojen tunnistamista, joiden nimet ovat salaamattomia. Komponentit voivat ja eksyvät. Niiden tekeminen haettaviksi nimeämällä ne säästävät aikaa myöhemmin.
Suositus Adobelle : Kun luot komponenttia, valitse se automaattisesti ja kohdista käyttäjä Resurssit-> Komponentit-paneeliin uudelleennimeäksesi sen tai tuodaksesi esiin ponnahdusikkunan. Olisi myös hyödyllistä, että tämän ominaisuuden voi vaihtaa Asetuksissa.
Kun luot komponenttia, pääkomponentti on helppo sijoittaa taululle vahingossa. Vaikka XD tarjoaa työkaluja pääkomponenttien löytämiseen (joko etsimällä Omaisuus-paneelista tai napsauttamalla hiiren kakkospainikkeella ja valitsemalla alikäyttöasteesta 'Muokkaa pääkomponenttia'), on liian helppoa tehdä tahattomia muutoksia pääkomponenttiin uskoen sen olevan ilmentymä. Se voi johtaa moniin ei-toivottuihin muutoksiin useissa piirtoalustoissa.
Vaikka piirrostaulussa on vain muutama komponentti-esiintymä, asiat voivat nopeasti päästä käsistä, kun piirilevy on kloonattu. Tahaton muutos pääkomponenttiin voi lisätä puhdistusaikaa, joka olisi voitu välttää.
Parasta on tapana siirtää pääosat pois suunnittelutauluista heti luomisen jälkeen . Ihanteellinen tapa tehdä tämä olisi sijoittaa pääkomponentit pahville XD-tiedostoon tai selkeästi merkittyihin, omistettuihin tauluihin. Se tekee asioista myöhemmin tehokkaampia.
Suositus Adobelle : Harkitse kehotetta, kun teet muutoksia pääkomponenttiin, jotta suunnittelijoita varoitetaan, että muutokset saattavat levitä alempiin instansseihin.
On helppo kokeilla ideoita taululla ja päästä osiin ryhmittelemään / purkamaan komponentteja ja muuttamaan komponenttitilojen ominaisuuksia. Vasemman sivupalkin minimoimiseksi saattaisi olla voimakas houkutus saada enemmän työtilaa. On kuitenkin hyvät mahdollisuudet, että komponenttitilat ja -siirtymät eivät toimi odotetulla tavalla iteraation tuulessa. Tämä voi johtua siitä, että alielementtien (kuten muotojen, vektorien tai tekstin) organisointi ja ryhmittely on siirtynyt pois siitä, mitä niiden oli oltava, jotta siirtymät toimisivat oikein.
Tasonäkymä tarjoaa 100% läpinäkyvyyden hierarkiaan ja elementtien nimeämiseen, ja sen ilmatiivis organisaatio on elintärkeää. XD: n tehokas käyttö Itse animoitu tilojen välillä siirtyminen vaatii elementtejä sama nimi ja asema komponentin tasohierarkiassa. Muussa tapauksessa siirtyminen oletusarvoisesti haalistuu miellyttävän automaattisen animaation sijaan.
Toisinaan voi olla toivottavaa estää ominaisuus interpoloinnista, kun automaattinen animaatio siirtyy. Tämän saavuttamiseksi suunnittelijat voivat nimetä elementin eri komponenttitilassa tai piirtoalustalla nimipohjaisen linkin rikkomiseksi.
Kummassakin tapauksessa, Tasot-näkymää voidaan käyttää vianmääritykseen odottamattomien ongelmien ilmetessä . Sen pitäisi olla ensimmäinen vaihe prototyyppiongelmien virheenkorjauksessa, olipa kyse siirtymästä komponenttitilojen tai taulukkojen välillä.
Itse animoitu on erinomainen lisä XD: hen, mutta siihen liittyy rajoituksia ja omaleimaisuutta. Yksi näistä oivalluksista käy ilmi, kun elementin väriä vaihdetaan kahden komponenttitilan tai taulun välillä Auto-Animate-toiminnolla. Kahden värin sujuvan interpolaation sijaan se muuttuu äkillisesti testattaessa.
Nykyinen kiertotapa on hieman hankala, ja sillä on seurauksia siitä, miten pääkomponenttitilat tulisi järjestää. Siihen kuuluu kahden erivärisen objektin lisääminen yhden sijasta ja sitten kahden objektin alfien haalistuminen molemmissa tiloissa sujuvan siirtymisen aikaansaamiseksi. Oletushäivytyssiirto voi toimia, mutta jos muodot ja koot interpoloidaan Auto-Animate-toiminnolla, haalistuminen ei välttämättä riitä.
Repeat Grid on toinen erinomainen ajansäästöominaisuus XD: ssä Tämän avulla on helppo järjestää ja ylläpitää samanlaisia elementtejä. Komponenttien tapaan toistuvilla ruudukoilla on hierarkkinen suhde, jossa ruudukon vasemmassa yläkulmassa ensimmäinen elementti on 'vanhempi', joka määrittelee 'lapsi' -elementtien ominaisuudet. (Tähän on poikkeuksia: bittikartat voivat olla yksilöllisiä alielementille, samoin kuin tekstimerkkijonot, mutta eivät tekstin ominaisuuksia.)
Kuitenkin, kun käytetään komponentteja sisällä Toista ruudukot, asiat muuttuvat.
Kun työskentelet toistuvien verkkojen kanssa normaalisti, vanhempaan tehdyt muutokset etenevät lapsilleen välittömästi. Kuitenkin, Pääkomponenttimuutokset etenevät lapsille Repeat-ruudukossa vain, jos paikallisia omaisuuden ohituksia ei ole . Toisin sanoen komponentin ominaisuuden muuttaminen ruudukossa 'lukitsee' sen pääkomponentista etenevistä muutoksista.
Jos haluat levittää muutoksia vanhemmalta, joka on myös komponentti toistuvassa ruudukossa, muuta ruudukon kokoa vain vanhemmalle. Tämä poistaa sen lapset. Vedä sitten kahvat takaisin haluttuihin mittoihin päivittääksesi lapset.
Kun suunnittelijat voivat kiertää komponenttien ja toista ruudukot, niiden yhdistäminen voi olla tehokasta.
Kun taulutaajuuksien välillä käytetään siirtymiä käyttämällä aikaperusteisia viiveitä (jotka eivät perustu tuloon), on luonnollista olettaa, että sama on käytettävissä komponenttitilojen välillä. Valitettavasti näin ei ole. Kaikkien komponenttipohjaisten tilamuutosten on perustuttava käyttäjän syötteisiin tai vuorovaikutuksiin prototyyppitilassa, ei aikaan.
Suositus Adobelle: Lisää komponentteihin aikaperusteinen siirtymävaihtoehto, jotta niiden tilat voivat animoida käyttäjän syötteestä riippumatta.
Tämä viimeinen vinkki on enemmän reunatapa XD-suunnittelijat ei ehkä kohtaavat usein, mutta pitäisi olla tietoinen .
Oletetaan skenaario, jossa pääkomponentti tarvitsee muunnelman, joka silti säilyttää ominaisuuksien perivien lasten 'yksi monelle' -laadun, mutta ei vaikuta olemassa oleviin lapsikomponentteihin. Uuden pääkomponenttihierarkian luomiseksi instansoitu komponentti on ryhmiteltävä ja rakennettava uudelleen alusta alkaen. Komponenttien ryhmittelyn purkaminen menettää myös kaikki prototyyppitilassa määritetyt tilat ja siirtymisominaisuudet. Tässä on kiertotapa:
Suositus Adobelle: Kun napsautat pääkomponenttia hiiren kakkospainikkeella Omaisuus-paneelissa, anna kaksoisvalikkovaihtoehto.
Adobe XD on tehnyt viime vuosina merkittäviä parannuksia toiminnallisuudessa ja hyödyllisyydessä. Se on kasvanut arvokkaaksi, kilpailukykyiseksi vaihtoehdoksi Sketchille ja muille vakiintuneille prototyyppityökaluille. Perustuen siihen, kuinka työkalu on kehittynyt debyyttinsä jälkeen, matkalla on todennäköisesti paljon enemmän parannuksia.
Erityisesti Adobe XD -komponenttijärjestelmällä on erinomaiset mahdollisuudet parantaa ja laajentaa suunnittelijoiden mahdollisia vuorovaikutustyyppejä.
Tässä on joitain tärkeimpiä mielessä pidettäviä takeita:
Adobe XD -komponenttien kanssa työskentelyn omaleimaisuus huomioiden samalla kurinalainen työnkulku, maksimoi suunnittelun tuottavuuden. Se välttää tarpeetonta puhdistusta ja huoltoa ja antaa XD-suunnittelijoille tehokkuusedun digitaalisten tuotteiden prototyyppien suunnittelussa.
Kerro meille mitä mieltä olet! Jätä ajatuksesi, kommenttisi ja palautteesi alla.
• • •
Adobe XD -komponentti voidaan luoda kolmella tavalla. Valitse objekti tai objektiryhmä ja napsauta sitten hiiren kakkospainikkeella ja valitse ponnahdusvalikosta 'Tee komponentti'; 2) napsauta + (plus) -kuvaketta Kiinteistötarkastajan komponentti-osiossa; 3) Napsauta + (plus) -painiketta Omaisuus-paneelin Komponentit-osiossa.
Useat XD-komponentit voidaan yhdistää ryhmäksi, jotta niitä voidaan käsitellä yhtenä yksikkönä. Valitse ryhmiteltävät komponentit, napsauta hiiren kakkospainikkeella ja valitse ponnahdusvalikosta Ryhmä. Irrota ilmentymä pääkomponentista napsauttamalla sitä hiiren kakkospainikkeella ja valitsemalla ponnahdusvalikosta Poista ryhmä.
Adobe XD -komponentit ovat uudelleenkäytettäviä elementtiryhmiä, kuten tekstiä, kuvia, muotoja tai viivoja. Komponentilla on 'Pääkomponentti', joka toimii vanhempana ja sijoittaa 'esiintymiä' tai lapsia. Pääkomponenttia vaihdettaessa muutokset etenevät kaikkiin sen esiintymiin.
XD: n käyttö kannattaa oppia, koska se on tehokas suunnittelutyökalu, ja nykyään monet suunnittelutiimit ottavat sen käyttöön. Debyyttinsä jälkeen se on edistynyt hyvin kohti kilpailukykyistä langankehyksen ja prototyyppityökalua. Yksi sen eduista on, että Macien lisäksi se toimii myös Windowsissa.