Mobiilisuunnittelu

Tuottava XD-prototyyppien luominen - Adobe XD -komponenttien opetusohjelma

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.

Mitä ovat Adobe XD -komponentit?

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.

Prototyyppejä tehdessään suunnittelija voi säästää aikaa työskennellessään Adobe XD -komponenttitilojen kanssa.

Komponenttien lisääminen laajentaa Adobe XD: n prototyyppimahdollisuuksia.

Adobe XD: n tuntemus on suositeltavaa

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.

Vinkki 1 - Harkitse kaikkia osavaltioita ennen komponentin luomista

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:

Oletustila : valikko on tiivistetty
Leijuva tila : ääriviivan väri voi muuttua, kun kohdistin on sen päällä
Laajennettu napsautettu tila : pudotusvalikkovaihtoehdot näytetään

Adobe XD -komponenttien opetusohjelma, komponenttitilojen käsittely.

Komponenttitilojen luominen, nimeäminen ja valinta sivupalkissa.

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.

Komponentit voidaan tarkastaa yksityiskohtaisesti Omaisuus-paneelissa.

Vinkki 2 - Nimeä luomisen komponentit

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.

Adobe XD -komponentit voidaan nimetä uudelleen ja järjestää Omaisuus-paneelissa.

XD-komponentit voidaan järjestää ja nimetä uudelleen Resurssit-paneelissa.

Vinkki 3 - Pidä pääosat järjestyksessä

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.

XD: n käyttö: Tasojen huolellinen nimeäminen on elintärkeää, koska Auto-Animate-siirtymien käyttäminen riippuu siitä voimakkaasti.

Tasojen nimeäminen huolellisesti on elintärkeää, koska Auto-Animate-siirtymien käyttö on voimakkaasti riippuvainen siitä.

Vinkki 4 - Pysy järjestyksessä Tasot-paneelin avulla

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ä.

Adobe XD: n Tasot-paneeli.

Vinkki # 5 - Interpoloi värit alfahäivytyksellä

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ä.

Värien välinen häivytys automaattisella animaatiolla voidaan saavuttaa ristihäivyttämällä molempien tilojen kahden objektin alfat.

Kuinka hämärtää värit oikein XD: n automaattisen animaation avulla.

Vinkki # 6 - Hyödynnä komponentteja toistoruudukossa

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.

Toistoruudukon yhdistäminen Adobe XD -komponenttien kanssa.

Paikallinen väriominaisuus on lukittu toissijaisen ruudukon lapsiilmentymäkomponentissa, mutta ei kokoa.

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.

XD-komponentin lasten päivittäminen toistoruudukossa.

Paikallinen väriominaisuus on lukittu toissijaisen ruudukon lapsiilmentymäkomponentissa, mutta ei kokoa.

Kun suunnittelijat voivat kiertää komponenttien ja toista ruudukot, niiden yhdistäminen voi olla tehokasta.

Vinkki 7 - Oletetaan, että aikaperusteisia komponenttitilan siirtymiä ei ole (toistaiseksi)

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.

Aikaperusteiset siirtymät ovat olemassa vain piirtoalustojen välillä, ei Adobe XD -komponenttitilojen välillä.

Aikaperusteiset siirtymät ovat olemassa vain piirtoalustojen välillä, ei komponenttitilojen välillä.

Vinkki # 8 - Ole perusteellinen kloonattaessa pääkomponenttihierarkioita

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:

Kloonaa komponentin esiintymä komponentin jokaiselle tilalle.
Aseta kunkin esiintymän tila eri tilaan.
Käy läpi ja poista kunkin komponenttiryhmän ryhmä.
Aloita haluamiesi muutosten ja muutosten tekeminen kullekin komponenttimerkinnälle.
Luo uusi pääkomponentti uudelleen.
Mene prototyyppitilaan ja luo uudelleen aiemmin määritetyt vuorovaikutukset ja siirtymätyypit.

Suositus Adobelle: Kun napsautat pääkomponenttia hiiren kakkospainikkeella Omaisuus-paneelissa, anna kaksoisvalikkovaihtoehto.

Kaksoisvaihtoehto olisi hyödyllinen, kun napsautat hiiren kakkospainikkeella Adobe XD -komponenttia Varat-sivupalkissa.

Kun napsautat komponenttia hiiren kakkospainikkeella, Kopio-vaihtoehto olisi hyödyllinen.

Prototyyppien tekeminen Adobe XD -komponenteilla: Takeaways for Success

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:

Ymmärrä, miten muutokset etenevät pääkomponenttien ja lapsi-ilmentymien välillä.
Ole tietoinen siitä, miten komponentit ovat vuorovaikutuksessa Adobe XD: n muiden ominaisuuksien, kuten Auto-Animate ja Repeat Grid, kanssa.
Pyri ottamaan käyttöön yhdenmukaiset työnkulun käytännöt ajan säästämiseksi, kuten komponenttien nimeäminen ja erillisen pääkomponenttialusta-alueen ylläpitäminen XD-tiedostossa.

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.

• • •

Lue lisää ApeeScape Design Blogista:

Perustietojen ymmärtäminen

Kuinka luon komponentin Adobe XD: ssä?

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.

Kuinka komponentit ryhmitellään Adobe XD: ssä?

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ä.

Mitä komponentteja Adobe XD: ssä on?

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.

Onko Adobe XD oppimisen arvoinen?

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.