5 keskeistä tapaa käyttää suunnittelurajoitteita

Muista hyvä tekniikan suunnittelun aikakausi, jolloin jouduit luomaan rajapintoja - korkeintaan - PC: lle ja Macille? En minäkään. Tuo maailmankaikkeus näyttää valovuoden päässä nykypäivän näytöstä riippuvaisessa maailmassa.

Suunnittelijoiden työpaikat ovat kasvaneet räjähdysmäisesti matkapuhelinten ja tablet-laitteiden käyttöönoton myötä. Suunnittelet loputtomiin sopeutumisiin ja konteksteihin, joka on loputon Sisyfean tehtävä.

Tunnemme kipuasi Figmassa, minkä vuoksi rakensimme työkalumme tehokkaalla rajoitusominaisuudella. Sen avulla voit kiinnittää suunnittelun elementit vanhemman kehyksen eri puolille. Jos asetat rajoituksesi oikein, kuvasi sopii mihin tahansa näytön kokoon.

Löydät ne täältä oikeanpuoleisesta ominaisuuspaneelista, kun valitset kehyksen:

Erilaiset rajoitusvaihtoehdot

Rajoitukset ovat uskomattomia, mutta niihin tottuminen vie hieman. Figmassa annamme sinun kiinnittää esineitä vasemmalle, oikealle, ylhäälle, alalle, keskelle, mittakaavalle, vasemmalle ja oikealle tai ylhäältä ja alhaalta. Voit leikkiä kehyksen yksinkertaisella painikkeella nähdäksesi kuinka esineet reagoivat erityyppisiin rajoituksiin.

Kuinka erilaisilla rajoituksilla varustettu painike reagoi, kun kehyksen kokoa muutetaan

Tarvitsetko apua niiden käytännön selvittämisessä? Keräsimme viisi tapaa, jolla rajoitukset voivat tehdä elämästäsi paljon helpompaa aloittelijatasolta keskitason asteeseen.

1) Napin nappula nurkassa

Monissa mobiililaitteissa on toimintapainikkeet, jotka sijaitsevat aina samassa paikassa. Esimerkiksi Googlen materiaalisuunnitteluohjeissa suositaan oikean alaosan painiketta (tunnetaan myös nimellä FAB), joka rohkaisee käyttäjää ryhtymään toimiin.

Rajoituksilla voit asettaa painikkeen sen yläkehyksen ala- ja oikeaan kulmaan. Tämä varmistaa, että painike ei kellu näytön ympärillä, kun näytön koko kasvaa - se pysyy tarkalleen missä haluat.

2) Komponenttien taikuus + rajoitukset

Voit tehdä hauskaa suunnittelutaikua käyttämällä Figman komponenttiominaisuutta ristikkojen yhteydessä. Komponenttien (joita muut sovellukset kutsuvat symboleiksi) avulla voit muuttaa mallin osia toistuviksi, peilattuiksi esiintymiksi. Kun teet muutoksia alkuperäiseen, muutokset heijastuvat muualla, jossa olet käyttänyt kyseistä komponenttia. (Voit lukea lisää komponenteista täältä.)

Lisää nyt rajoituksia tähän: Kun olet rajoittanut suunnittelun tärkeimmät osat kehyksen sivuille, muuta kehys komponentiksi. Kopioi kehys useita näyttökokoja varten. Nyt, kun muutat alkuperäisen määritteitä, kuten väriä tai tekstin kokoa, näet ne heti heijastuneina näytön eri kokoihin.

3) Rajoitusten taikuus + ruudukot

Okei, solki sisään, koska olemme tulossa hieman edistyneempiä. Figmassa voit käyttää rajoituksia objektien napsauttamiseen ruudukkoon. Tämä on erityisen kätevää esimerkiksi sovelluksen alareunassa olevalle navigointipalkille.

Jos haluat tehdä joustavan navigointipalkin Figmassa, luo kehys, joka toimii puhelimen näytöllä, ja aseta sitten navigointipalkin kehys ruudun alaosaan.

Aseta navigointipalkin rajoitukset vasemmalle ja oikealle ja alaosaan. Kun navigointipalkkikehys on edelleen valittuna, valitse oikeanpuoleisesta ominaisuuspaneelista asetteluruudukko ja aseta tyypiksi “venytys”.

Aseta sitten esine - kuten pyöreä painike - jokaisen ruudukkosarakkeen sisään. Aseta jokaisen painikkeen rajoitukset keskitettäväksi. Kun näytön koko muuttuu, painikkeet mukautuvat vastaavasti. Katso vielä tämä viesti, jos haluat vielä syvemmälle sukeltaa verkkoihin.

4) Pöytäsolut

Rajoitteiden avulla voit tehdä joustavia uudelleenkäytettäviä taulukkosolu malleja. Suunnittelijat tarvitsevat usein taulukkosoluja esittämään luetteloita henkilöistä tai tiedoista, ja rajoitusten lisääminen perussolulle helpottaa sopeutumista. Esimerkiksi ryhmittelin tekstin ja avataarin yhteen (painamalla ohjainta g) ja rajoitin sen kehyksen vasempaan keskustaa. Sitten ryhmittelin tekstin ja pyöristetyt kulmat yhdessä nappiin ja rajoitin sen kehyksen oikeaan keskikohtaan.

Kuten näette, komponentti reagoi nyt toivotulla tavalla, kun jokainen tieto halaa kehyksen sitä puolta, johon se kuuluu, kehyksen koosta riippumatta.

5) Hauskoja kuvia

Viimein kuvittelimme, että heittäisimme hauskaan esimerkkiin rajoista vain potkuja varten. Voit asettaa vaaka- tai pystysuuntaisia ​​rajoituksia kuviin tai piirroksiin lisätäksesi vähän huumoria. Voit muuttaa hot-dogista itsestään slinky-version tai muuttaa hot-dogista näyttävän koiran vielä yhdeksi. Leikkimme sen kanssa suunnittelijamme viimeisinä syntymäpäivinä Figmassa.

Suuret kiitokset Chris Hamamotolle, Johan Pragille ja Rasmus Anderssonille avusta ja kuvista tästä viestistä.