Tila suunnittelujärjestelmissä

Perusteista laajennettuihin käsitteisiin avaruuden soveltamiseen tarkoituksella

Olen jo kauan viitannut värejä, tyyppejä ja kuvakkeita järjestelmän visuaalisen kielen "isoksi 3". Kaikki käyttöliittymäkomponentit - painikkeista ylöspäin - on rakennettu niiden kanssa. Mutta jätin jotain pois. Avaruus, viimeinen rajamme.

Space Rivals väri

Avaruus on kaikkialla. CSS käyttää ominaisuuksia, kuten pehmustetta, reunusta ja absoluuttisen sijainnin vasemman, oikean, ylä- ja alaosan, objektien erottamiseen. Viidessä kirjastossa (Bootstrap, Salesforce Lightning, Foundation, edellinen projekti ja nykyinen projekti) vertailin näiden tilaominaisuuksien esiintymistä suhteessa omaisuusryhmiin väri, koko, tyyppi, asettelu ja enemmän.

Avaruuskilpailijoiden väri käyttötiheydessä kirjaston tyylisäännöissä

Poistettujen tehosteiden (nollattomat arvot, kuten: 0, ja varatut termit, kuten läpinäkyvä tai automaattinen) jälkeen, kun CSS tarjoaa jo meille päätöksentekojärjestelmän, avaruussäännöt näyttivät enemmän kuin mikään muu kuin väri. Mikään muu - ei tyyppi, koko, asettelu - ei ollut edes lähellä. Kirjastoihimme on rakennettu niin paljon alueellista monimutkaisuutta, puhumattakaan tuotteistamme!

Tila jakaa meidät

Space edustaa ”Suunnittelin tällä tavalla, sinä rakennat niin” -kuilua suunnittelun ja dev: n välillä. Olemme kauan valitettavasti punaisten vuorattujen silmälasien päälle sadetta. Se ei koskaan tunnu sen arvoiselta. Ne kuitenkin jatkuvat, tuotteemme viimeistelty materiaali: HTML: n laatikkomalli ei tiedä siitä.

Kustannukset ovat valtavat: merkinnät, kääntäminen, keskustelu ja visuaalinen hankaaminen laadunvarmistuksen aikana. Kaikki tuo työ ... jotain, joka ei vieläkään ole tarpeeksi hyvä. Siten avaruus on myös tunnepitoinen.

Avaruuskäsitteet ovat primitiivisiä

Voisimme kutoa tarkoituksellisempia alueellisia käsitteitä suunnittelun, koodin ja keskustelun avulla. Mutta me emme. Käytämme vain T-paitakokoja ja kutsumme sitä päiväksi. Voimme tehdä paremmin. Voimme korvata punaisella vuoratulla, punaisella kasvolla olevan raivon upottaakseen, puristamaan, venyttää ja pinoamaan tietämme kohti tulevaisuuden alueellista selkeyttä.

Tätä silmällä pitäen tässä on perusteet, laajennettu sanasto ja lisäkokemuksia, jotka minulla on ollut levittäessään tilaa järjestelmätöihin.

Avaruusperusteet

Ruudukko ≠ Tila. Ruudukko on avaruutta käyttävä komponentti.

Ristikot ovat runsaasti pylväksiä, kouruja, ulkoreunoja ja reagoivia vivahteita koskevilla alueellisilla päätöksillä. Joukkueet käsittelevät ruudukkoja aikaisin, jotta käyttäjät voivat helposti tehdä sivun. Valitettavasti tilanne on usein, kun paikallinen keskustelu pysähtyy.

Verkkosopimukset marginaalille (sininen) ja kouru (lime vihreä)

Ruudukko ei ole täydellinen tilajärjestelmä. Ruudukko on komponentti, joka käyttää tilaa, kuten kaikki muut komponentit. Ruudukko tuntuu erilaiselta. Se on näkymätön, tulee aikaisin ja vain tilaa. Mutta avaruudessa on enemmän kuin verkkoa.

Takeaway: Esitä tilakonferenssi ruudukolla, mutta älä lopu siihen. Kohdista ruudukon marginaalit, kourujen ja sarakkeiden arvot syvempien tilakonseptien kanssa, jotka on kudottu kokonaisen komponenttikirjaston läpi.

Aseta mieleenpainuva perusmäärä ja odotukset

Joukkueet asettavat ikimuistoisen, jopa maagisen perusnumeron kaikkien muiden alueellisten arvojen maadoittamiseksi. Jotkut joukkueet mieluummin pohja 10, koska lasketaan (muuten kymmenen sormemme takia). Olen jopa nähnyt, että joukkue käyttää alustaa 6 - hyödyllisillä kertoimilla 2 ja 3 - tehdäkseen tien uber-joustavalle joukolle 3s, 4s, 6s, 8s, 9s, 12s, 15s, 16s, 18s, 21s, 24s, 32s ja enemmän. Lopeta hulluus!

Joukko välivaihtoehtoja, jotka perustuvat kuuteen, mutta toimittavat kaikki 3: n ja 2: n kerrannaiset. Todella? Kaikki nämä vaihtoehdot?

Suurin osa työskennellyistä järjestelmistä käyttää 16. Se on hyvä oletusfonttikoko. Se on tekijä kaikissa näytön tarkkuuksissa (320, 768, 1024). Ja se tarjoaa mieleenpainuvia kerrannaisia ​​suurempia (32, 64,…) ja tekijöitä vähemmän (8, 4, 2) kuin mihin se alkaa.

Joukko rajoitettuja alueellisia vaihtoehtoja, jotka perustuvat 16: een

Takeaway: Maadoita paikkatietojärjestelmän alueesi ikimuistoisella perustunnuksella ja rajoita sen käytön odotuksia.

Asteikkovaihtoehdot epälineaarisesti

Vakiintuneella tukikohdalla joukkueet voivat silti siirtyä satunnaisiin vaiheisiin (12, 14, 18, 22, 24, 28, 30, 32,…). Tämän estämiseksi toiset käyttävät lineaarista asteikkoa (4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44,…), joissa jokainen askel on kiinteä lisäys. Minulle kumpaakin tulosta käytetään ennustamattomasti, koska se tarjoaa liian monia valintoja liian lähellä toisiaan. Milloin käytän 24 tai 28? En tiedä.

Lineaarinen eteneminen 4: stä 32: een. Tarvitsetko kaikkia näitä vaihtoehtoja?

Vaihtoehto on epälineaarinen. Vaihtoehtoihin sisältyy kultainen suhde, modulaarinen asteikko tai vastaava geometrinen eteneminen, joka voisi tuplata jokaisen vaiheen. Alustasta lähtien siirrymme molempiin suuntiin asteikolla pienempiin (16, 8, 4, 2) ja isompiin (16, 32, 64, ja… siitä).

Geometrinen eteneminen, kaksinkertaistamalla jokainen askel. % s edustavat suhteellista käyttöä kirjastossamme.

Poistuminen: Harkitse geometrista etenemistä tai jotain vastaavaa epälineaarista. Saatat kohdata satunnaisia ​​jännitteitä 24: n lisäämiseksi väliltä 16–32. Kokemukseni mukaan tällaiset hetket ovat kuitenkin harvinaisia ​​ja oikeuttavat harvoin yksinkertaisen järjestelmän rikkoutumisen.

Nimeä jokainen vaihe ikimuistoisen, tarkan uudelleenkäytön kannalta

Rakastan Gmailin pienikokoista, viihtyisää ja mukavaa avaruusvaihtoa. Joten kun rakensimme avaruusjärjestelmäämme, ehdotin, että käytämme näitä merkintöjä työssämme. Heti joukkuetoverinsa haastoi minut: ”Mitä me kutsumme muihin vaiheisiin?” Spartalainen, pikkuinen ja ylellinen vaihtoehtoini eivät läpäisseet kokoonpanoa.

Kuvaileva etiketti jokaiselle pysäkille? Ole varovainen.

Joten teimme sen, mitä teemme aina: käytä t-paitakokoa. Medium vastaa oletusarvoa ja S, XS, L, XL ja tarvittaessa XXS ja XXL ovat muita vaihtoehtoja. Se mitä useimmat kirjastot (Bootstrap, Lightning jne.) Tekevät.

Takeaway: Nimeä avaruusvaihtoehdot yksinkertaisesti käyttämällä asteikkoa kuten t-paitakokoa luodaksesi kielen, jonka ihmiset muistavat ja soveltavat tarkasti. Jos yrität kuvaavia tarroja, valmistaudu joukkuetovereiden vastaamaan "Pieni, keskikoko, iso, kiitos".

Olen tarkistanut monia kirjastoja ja keskustellut monien suunnittelijoiden kanssa. Perusnumeroiden ja nimetyn asteikon yksinkertaiset järjestelyt ovat siinä, missä keskustelut yleensä päättyvät. Vaikka nämä harvat vaihtoehdot ovat yksinkertaisia, tilan käyttäminen tuntui silti niin ... satunnaiselta. Tarvitsin lisää.

Avaruuden sanaston laajentaminen

Tarkastellessamme nousevaa työtämme ei ole paljon selviä aikomuksia avaruuden soveltamiseksi. Tarkistetaan esimerkiksi suosikkikomponenttini: kortti.

Etukäteen kehittäjänä kuvittelin kaikkia elementtirasioita, jotka sopivat elementteihin.

Kortti tarjoaa hyödyllisen kuvan monista käyttämistämme alueellisista konsepteista: sisällön upottaminen reunasta, sisällön muodon muuttaminen, esineiden etäisyyden lisääminen ja esineiden pinoaminen komponentin sisällä ja niiden välillä.

Nämä käsitteet - upotetut, upotetut neliöt, upotetut venytys-, pino-, rivi- ja ruudukot - kattavat suurimman osan kirjaston CSS: n tilaa koskevista säännöistä: pehmustus, reunus, vasen, oikea, ylä ja ala. Nämä käsitteet parantavat myös sitä, kuinka kukin atomi on itsenäinen, parantaen koostumusta.

Konsepti 1: (neliön) alku

Sisäosa tarjoaa sisennyksiä sisällöstä kaikilla neljällä sivulla, kuten kehystettyn ​​valokuvan matto seinällä. Sen käyttö on laajalle levinnyttä, monien komponenttien välillä, erikokoisina, olipa kyseessä sitten 3-Ylös-moduuli ja estoviestien väliaine, erityisen pienet pillerit vai tilavat alatunnisteet ja mastot.

Oletusasetus on myös hyödyllinen aloituskohta mobiililaitteiden ensimmäiselle suunnittelulle, joka laajenee suureksi asiaankuuluvan näyttökentän leveydellä, kuten 768px.

Konsepti 2: Squish-sisustus

Hierretty sisustus vähentää tilan ylä- ja alaosaa, tässä tapauksessa 50%. Vaikka neliö on vähemmän yleinen kuin sen neliömäinen vastine, ruisku tapahtui usein elementeissä (kuten painike) ja solumaisissa säiliöissä, kuten datataulukko tai luettelotieto.

Hioitettu lisäys painikkeissa, datataulukon soluissa ja luetteloryhmäkohteissa

Konsepti 3: Stretch-alusta

Painikkeella tai pillerin painalluksella havaitsimme itsemme pystysuoraan venyttämään tekstilaatikoiden, tekstiä ja muiden lomakeelementtien sisäkkäisiä osia.

Konsepti 4: Pino

Kaikella kunnioituksella vaakatasossa vieritettävään käyttöliittymään ylivoimainen enemmistö vierittää pystysuunnassa. Ja se tarkoittaa yhtä asiaa: pinoamme asiat. Pinoamme viestin tietopöydän otsikkoon. Pinotamme moduulit kiskoihin. Pinoamme kopion, pillerit ja työkalurivit, kaikki korttiin, kukin ruudukkoon. Helvetti, ääretön vieritys tarkoittaa ääretöntä pinoa! Pinoamme, pinoamme, pinoamme.

Konsepti 5: Inline

Järjestämme myös esineitä riviin kääreinä, koska ne virtaavat kuten teksti vasemmalta tai oikealta. Tällaiset esineet - pillerit, tunnisteet, leivänmurut ja muut - voivat olla itsenäisiä tai pinota ja sekoittaa muita esineitä.

Konsepti 6: Ruudukko

Säästätkö ruudukon viimeksi? Kun välimatka vakiintuu, huomaamme, että tarkistamme ristikkomaiset reunat ja kourut, sovittamalla nämä tilat taianomaiseen lähtöpisteeseemme ja muuhun käyttöön.

Joten, kuten korttikomponentissa, tyyliltään pehmuste ja marginaali voivat näyttää tällaiselta:

Sisäkkäiden, pinojen ja rivien (tai geneeristen välikappaleiden) nimellinen käyttö kortille

Mitä opimme

Avaruuskonseptien käyttö vaatii meitä sopeutumaan uuteen. Ryhmässäni kesti päivän, kun kevyt skeptisyys antoi uuden mallin omaksumisen.

Opeta avaruusjärjestelmä visuaalisesti

Suurin osa yhteistyökumppaneista ei näe tilaa, mikä on ensisijainen syy siihen, että sitä käytetään niin mielivaltaisesti. Mutta nyt meillä on järjestelmä: rajoitettu määrä konsepteja, joista jokaisessa on rajoitettu valikoima vaihtoehtoja.

Visuaalinen viittaus, kuten cheatsheet, alueellisista käsitteistä

Poistuminen: Opetta paikkatietokonseptisi tiukalla doc-kaaviolla tai huijauskortilla. Tällaiset referenssit nopeuttavat sitä, kuinka ymmärrämme, sovellamme ja ylläpidämme konsepteja suunnittelun ja koodin avulla.

Tarjoa yksinkertaisia ​​auttajia ja seurata käyttöä

Älä ole typerää. Nämä kuusi mallia eivät ratkaise kaikkea. Sopeutimme silti marginaalipohjan täältä ja poistimme sieltä aika ajoin. Joten on perusteltua seurata tarkoituksellisempia avaruusvaihtoehtoja yleisemmillä vaihtoehdoilla (kuten $ space-m).

Takeaway: Tarjoa yleisiä vaihtoehtoja, käytä niitä säästeliäästi ja odota tuoteryhmien käyttävän niitä. Kun he nousevat kritiikkiin tai veto-pyyntöihin, kouluta joukkuetovereita tarkempien käsitteiden, kuten upotuksen tai pinoamisen, suhteen.

Vältä muuttuvia nimiä pehmusteella tai marginaalilla

Kun esität jotain monimutkaisempaa, toiset kannattavat perustellusti jotain tuttua, kuten ”Miksi emme voi käyttää pehmustetta ja marginaalia muuttujien nimissämme?” Tässä tapauksessa pehmusteita käyttävät 2+ avaruuskäsitettä, ja näitä käsitteitä voidaan käyttää vasemmalla ja oikeat ominaisuudet myös. marginaalia käytetään pinottamiseen, ruudukkoon ja välilyöntiin riviin. Entä muut kuin verkkoympäristöt, jotka eivät käytä HTML: ää?

Takeaway: Erota käsitteet kiinteistöjen nimistä. Niitä on paljon yhdestä ja rajoittavat uudelleenkäytön yhdelle alustalle.

Ratkaise törmäyksiä, kuten viivan korkeus, systemaattisesti

Yksinkertaiset upotuspehmuste- ja pinomarginaalin säännöt törmäsivät jo pitkään tunnettuun paikalliseen vastustajaan: viivan korkeuteen. Tämä vuorovaikutus lisää tilaa ennakoimattomasti lisäämällä pikselin yksinkertaisemman inset-oletusarvon 16px ylä- ja alapuolelle.

Olemme kuitenkin seuranneet idean kipinää (@ kevinmpowellin ”Let’s negatiivinen marginaalitila käyttämällä pseudoelementtejä! Mutta kuinka paljon?”) Joidenkin matematiikoiden kanssa (voin käyttää korkeakoulututkintoani!). Tuloksena oli sekoituskaava, jossa yhdistyi tyyppikoko ja viivankorkeus tilan pienentämiseksi törmäävien esineiden ylä- ja alapuolella.

Poistuminen: Älä luopu järjestelmällisestä selkeydestä poikkeusten vuoksi. Yritä ratkaista ne. Jos pystyt ylittämään tällaiset vivahteet, jopa hiukan CSS-huijauksella, voit säilyttää yksinkertaisemman konseptin, johon kaikki voivat tarttua.

Käytä tila-ajatuksia valinnan tiheyteen

Käsitteillä, kuten upotettu, pino ja ruudukko, voit virittää tiheysvalitsimet aplombilla. Tee haku arkistosta, etsi kiinnostavia lisäyksiä ja pinoja ja laajenna tai ohita nämä säännöt näytön tummuuden hienosäätöön.

Vasemmalla, oletusväli. Oikealla, viritys lisäämällä vain upotusta 50%.

Takeaway: Voit virittää tilatiheyden jopa tuskin primitiivisillä vaihtoehdoilla. Ilman niitä tiheyden hallinta on unelma. Niiden avulla voit vähitellen rakentaa kohti tehokasta moottoria löytääksesi, säätääksesi ja virittääksesi tilaa suurella aikomuksella ja vähentämällä riskiä.

Aiotko aloittaa suunnittelujärjestelmän tai joutua sukeltamaan syvemmälle keskustelemaan tuotteista ja pelaajista? EightShapes johtaa järjestelmän suunnittelun työpajoja ja valmentaa asiakkaita suunnittelujärjestelmiin. Puhutaan!