Parempia verkkojärjestelmiä käyttöliittymien suunnittelutyökaluissa.

Suunnittelijoiden on kyettävä tutkimaan verkkojen seurauksia visuaalisesti - ei vain koodina.

Tämän artikkelin ensimmäisessä osassa ”Onko ruudukkojärjestelmät edelleen merkityksellisiä digitaalisessa tuotesuunnittelussa?” Tarkastelin verkkojärjestelmien historiaa ja niiden käytännön etuja. Lyhyesti: ruudukot ovat edelleen hyödyllisiä käyttöliittymäsuunnittelussa, mutta näyttö on paljon monimutkaisempi kuin tulostettu sivu, koska sekä tulostusmateriaali että sisältö ovat hyvin vaihtelevia.

Joten mikä on vialla käyttöliittymien suunnittelutyökalujen ruuduissa?

Ohjelmistokehittäjillä on työkaluja näytön ulkoasun monimutkaisuuden hallintaan: rajoitusjärjestelmät, kuten iOS: n AutoLayout ja Androidin ConstraintLayout, Flexbox, ja jopa verkkokohtaiset kehykset, kuten tuleva CSS-ruudukko. Asettelupäätökset on kuitenkin tehtävä suunnittelijoilla, eikä niitä pidä siirtää kehittäjille. He ovat kriittisiä rajapinnan muodolle ja toiminnalle. Suunnittelijoiden on kyettävä tutkimaan verkon asettelupäätösten vaikutuksia visuaalisesti, ei vain koodina.

75% rajapintojen suunnittelijoista käyttää ensisijaisesti Photoshopia, Illustratoria tai Sketchiä. Jokainen näistä työkaluista luotiin sivun metaforaan, ei ruutuun. Ei ole yllättävää, että näiden työkalujen ruudukkojen käsittelytavat perustuvat myös painatusperinteeseen. Digitaalisten tuotteiden suunnittelijoille tämä johtaa suuriin kipupisteisiin jokapäiväisessä käytössä.

Reagointikykyä

Voit luoda ruudukon asettamalla yleensä parametrit, kuten kokonaisleveyden, sarakkeiden lukumäärän ja leveyden, kourujen ja reunusten:

Luonnoksen ja Photoshopin ruudukko-ohjaimet

Tämä luo ristikkotelineen, joka on piirretty ohjauslinjoina kuvataulun päälle. Elementit voidaan sitten napsauttaa manuaalisesti seuraaviin ohjauslinjoihin:

Tämä toimii hyvin tulostamiseen. Suunnittelija tietää, että heidän julkaisussaan käytetään esimerkiksi A4-kokoista paperia. Mutta mitä tapahtuu digitaalisessa tilanteessa, kun joudut simuloimaan eri kokoista laitetta? Taidekartonan mittojen muuttaminen tarkoittaa, että ristikko on joko liian suuri tai liian pieni:

Yleisin tämän ongelman kiertotapa on luoda useita tauluja, jotka kukin vastaavat ainutlaatuista laitekategoriaa, kuten älypuhelimet, tabletit ja työpöydät. Yksittäiset ruudukot voidaan sitten luoda erikseen jokaiselle laitteelle / piirustuslevylle:

Reagoivan simulointi: ruudukkojen luominen muutamalle eri kokoiselle laitekokolle voi auttaa, mutta yksityiskohdat katoavat silti.

Tämä on kuitenkin melko kurja simulointi tulostusmediasta, koska se edustaa vain kolme mahdollista potentiaalista laitteen resoluutiota. (Yllä olevassa esimerkissä kyse on iPhone 7: stä, iPadista ja 13 ": n MacBook Prosta.) Ovatko ruudukkopäätökset edelleen ääniä Google Pixelissä tai iMac 5K: ssä? Entä vaakasuunnassa tai jaetussa näkymässä?

Kun työskentelet vain muutamalla kiinteällä verkkokonfiguraatiolla, on helppo ohittaa ongelmat työskennellessäsi. Joko kehittäjä löytää ne käyttöönoton aikana - mikä vaatii paljon ärsyttäviä edestakaisin - tai rikkoutuneet asettelut joutuvat lopputuotteeseesi.

Muutosten edistäminen

Vaikuttavassa graafisen suunnittelun ruudukkojärjestelmässä Josef Müller-Brockmann kehottaa määrittelemään ruudukot projektin alussa ennen sivun asettelua. Itse asiassa Müller-Brockmann ehdottaa tietävän kaikki projektin muuttujat ennen ruudukon määrittämistä:

Ennen kuin työ voidaan aloittaa, […] muotoa, tekstiä ja kuvia, kirjasintyyppiä, tulostustapaa ja paperin laatua koskevat kysymykset on selvitettävä.

Näillä muuttujilla voi tietenkin olla vaikutus verkkojärjestelmään. Esimerkiksi: etäisyyden lukeminen vaikuttaa kirjasinkokopäätöksiin ja kirjasinkoko vaikuttaa sarakkeen leveyteen ja rivikorkeuteen. Painettuina nämä muuttujat ovat tunnettavia eivätkä yleensä muutu. Kirjasta ei tule yhtäkkiä sanomalehteä.

Joten ei ole yllättävää, että vanhoja painettuja visuaalisen suunnittelun työkaluja ei koskaan suunniteltu käsittelemään tällaisia ​​muutoksia. Muutamien leveysyksiköiden vähentäminen kouruista tai lisääminen vielä muutamaan sarakkeeseen tarkoittaa, että joudut kohdistamaan kaikki elementit manuaalisesti uuteen ruudukkoriviin:

Käyttöliittymäsuunnittelijoille ristikkomuutokset ovat usein välttämättömiä. Jokaista lähtö- ja sisältomuuttujaa ei ole mahdollista ottaa huomioon ennen visuaalisen suunnittelun aloittamista.

Lisäksi kun tulostusprojektit ovat valmistuneet lehdistössä käymisen jälkeen, ohjelmistorajapinnat eivät koskaan ole ”valmiita”. Niitä toistetaan jatkuvasti ja parannetaan jatkuvasti.

Kuten yllä osoitettiin, yksinkertainen muutos ruudukkoon tarkoittaa kuitenkin mallin kaikkien elementtien kohdistamista manuaalisesti. Kerrottuna satoilla näytöillä, ruudukonmuutos voi tarkoittaa tunteja (tai päiviä) kurjaa pikselin työntämistä.

kokeilu

Rakentaessasi uutta ristikkoa, Müller-Brockmann tekisi pieniä käsin luonnoksia mahdollisista kokoonpanoista. Prosessin tekniset vaikeudet olivat ilmeisiä jopa hänelle:

”Ruudukkoa luonnosteltaessa on varmistettava, että luonnos vastaa mahdollisimman tarkasti lopullisen painetun muodon osuuksia. […] Vain tällä tavalla on vähitellen mahdollista saavuttaa kyky tuottaa jopa pienillä luonnoksilla realistiset typografiset kuviot, ts. Jotka voidaan siirtää lopulliseen muotoon ilman vaikeuksia. ”
 - Josef Müller-Brockmann, graafisen suunnittelun ruudukkojärjestelmät, s. 94, 49
Jotkut Joseph Müller-Brockmannin luonnoksista Grid Systemsistä graafisessa suunnittelussa.

Tämä oli tietysti ainoa keino Müller-Brockmannille halvalla kokeilla mahdollisia verkkoasetteluja: hänellä ei ollut pääsyä tietokoneeseen vuonna 1981. On kuitenkin melko hämmentävää, että lähes 40 vuotta myöhemmin tietokonepohjaiset suunnittelutyökalut olivat edelleen älä helpota tällaista kokeilua.

Suuren osan ajasta haluat nopeasti jakaa jotkut elementit käytettävissä olevaan tilaan joko tasaisesti tai suhteessa. Tämä on ruudukko kuten mikä tahansa muu, mutta määrittelemällä ruudukkotelineet tätä varten tuntuu ennenaikaiselta asettelujen varhaisessa tutkintaprosessissa.

Aika purkaa laskin. Laske sisätilan leveys, vähennä kourujen lukumäärä kerrottuna niiden leveydellä ja jaa loput sitten elementtien lukumäärällä. Piirrä elementti tuloksella, kopioi se jokaiselle sarakkeelle ja jaa ne kaikki tasaisesti:

Tämä on riittävän yksinkertaista, mutta manuaalisesti tällaisten laskelmien tekeminen ei pysy ajatuksen nopeudella. Kun aloitat kysyä, kuten “tuleeko se liian pieneksi, jos laitan 8 kuvaa tähän riviin 6 sijaan?”, Matematiikan tekeminen joka kerta on työlästä ja estää nopeaa kokeilua.

Miltä paremmat ruudukkotyökalut näyttävät?

Kaikki nämä kipupisteet johtavat yhteen johtopäätökseen: UI / UX-suunnittelijat tarvitsevat parempia tapoja työskennellä ristikkojen kanssa visuaalisen suunnittelun aikana. Kevin Lynagh ja minä olemme työskennelleet joihinkin ratkaisuihin UI-suunnittelutyökalumme Subformissa. Katsotaanpa periaatteita (ja esimerkkejä), jotka olemme keksineet tähän mennessä. (Kaikki nämä demot tallennettiin suoraan alamuodosta.)

Ristikkojen tulisi olla luonteeltaan reagoivia.

Jotta ruudukkojärjestelmät toimivat useiden eri laitteiden välillä, sinun pitäisi pystyä määrittämään arvot joustavina prosentteina ja suhteina, ei vain tarkkojen pikseleiden muodossa.

Nämä arvot antavat sinun rakentaa yksinkertaisen reagoivan ruudukon nopeasti, tekemättä mitään aritmeettista. Voit asettaa vain määrän sarakkeita ja määrätä jokaisen sarakkeen venymään. Sarakkeet jakavat sitten käytettävissä olevan tilan tasaisesti taidesuunnan leveyden perusteella:

Joustavat sarakkeet voidaan sekoittaa kiinteisiin sarakkeisiin, kouruihin ja marginaaleihin. Yllä olevan esimerkin kourujen säätö on 12 kuvapistettä, joten niiden leveys pysyy kiinteänä, kun nivellevyn koko muuttuu.

Joustava pylväs voi myös hyväksyä mittasuhteet. Tämä avaa mielenkiintoisia mahdollisuuksia epäyhtenäisille ruuduille, kuten täsmentää, että yhden sarakkeen tulee olla aina kolme kertaa leveämpi kuin muiden:

Tällä tavalla työskentelemällä on paljon helpompaa ymmärtää, kuinka ruudukko toimii eri kokoisilla ja suuntaisilla alueilla - ja tarttua kaikkiin reunatapauksiin, ennen kuin ne siirretään kehitystiimille.

Unohda oppaat ja napsautukset - elementeillä tulisi olla muodollinen suhde verkkoon.

Nykyisissä työkaluissa ruudukko on vain kokoelma ohjauslinjoja, jotka ovat päällekkäin taulun kanssa. Elementit voidaan kohdistaa napsautuksella näihin oppaisiin, mutta se on kaikki. Elementit eivät tiedä mitään niiden suuremmasta suhteesta verkkoon.

Asia on, ruudukko on elementtien välinen suhde. Ohjauslinjat ovat visuaalinen hakkerointi näiden suhteiden luomiseen manuaalisesti. On paljon parempi rakentaa nämä suhteet suoraan.

Esimerkiksi, sinun pitäisi pystyä sijoittamaan elementti käyttämällä sääntöä, kuten ”aloita sarakkeessa 2, sitten kaareuta 4 saraketta”. Tämä voidaan tehdä epäsuorasti suoran manipulaation kautta tai nimenomaisesti käyttämällä lyhennettä, kuten 2 / span 4. Nyt kun ruudukko muuttuu, elementtien koko muuttuu automaattisesti ja ne säilyttävät kohdistuksensa:

Tämä avaa myös uusia mahdollisuuksia itse ristikon suoraan käsittelyyn, kuten kourujen ja pylväiden koon muuttaminen:

Ristikkojen tulisi mahdollistaa nopea kokeilu.

Mahdollisuus määrittää ruudukot epävirallisesti työskennellessään - ilman laskinta - on myös erittäin tarpeellinen ominaisuus. Haluat ehkä lisätä kuvatauluun joitain elementtejä, jotka jakavat käytettävissä olevan tilan automaattisesti, ja lisätä niiden väliin tasaisen kokoiset kourut:

Suunnittelutyökalun avulla nämä laskelmat lennossa - sen sijaan, että tekisit huolellisesti matematiikkaa käsin - tekevät kokeilusta nopean ja visuaalisen. Kysymykset, kuten ”kuinka monen valokuvan pitäisi näkyä peräkkäin älypuhelimella?”, Voidaan helposti kokeilla sekunneissa sen sijaan, että olisi tehty paljon vaivaa, työlästä pikselin työntämistä:

Kaksiulotteisia ristikoita ei pidä unohtaa.

Pylväsristikot kattavat paljon käyttötapauksia, mutta monet asettelut vaativat sekä sarakkeita että rivejä, kuten Müller-Brockmannin modulaarinen ruudukko. Sinun pitäisi pystyä kuvaamaan molempien ulottuvuuksien elementit: ”Vaakatasossa tämän elementin pitäisi alkaa sarakkeesta 3 ja ulottaa sarakkeet 2. Pystysuoraan sen pitäisi alkaa riviltä 1 ja päättyä riville 2. ”

Kuten yksiulotteisissa ruuduissa, ruudukon koon muuttaminen kumpaankin suuntaan toistaa sisällön automaattisesti. Alusmuoto voi myös laskea ruudukon muutokset, kuten kourujen lisääminen, reaaliajassa:

Minkä tahansa pitäisi pystyä sisältämään ruudukko.

Olemassa olevat työkalut sallivat ruudukon määrittämisen vain koko taulun, mutta se on mielivaltainen raja. Ristikot ovat hyödyllisiä ratkaisemaan monia suunnitteluongelmia, ei vain näytön tason asettelua.

Minkä tahansa suorakaiteen muotoisen elementin pitäisi voida sisältää ruudukko. Esimerkiksi taulukko saattaa tarvita erillisen ruudukkorakenteen siitä näytöstä, jossa se asuu:

Mahdollisuus käyttää useita ruudukkoja ja pesätä niitä avaa suunnittelijalle myös paljon luovaa ilmaisullisuutta. (Karl Gerstner teki hienoa työtä Capital-lehden useilla päällekkäisillä ruuduilla vuonna 1962.)

johtopäätös

Subformia rakentaessamme Kevin ja minä tutkimme jatkuvasti, kuinka voimme luoda työkalun, joka ylläpitää visuaalisen suunnittelun välitöntä ja ilmaisullista, mutta lisää dynaamisen laskentatehon.

Mediassa ajattelemattomalle ajaksi Bret Victor ehdottaa, että monimutkaisten järjestelmien ajattelemiseksi tarvitaan uusia esityksiä - esityksiä, jotka ovat tehokkaampia kuin paperimateriaali. Kehittämämme esitykset ruudukkoon perustuvaan asetteluun ovat toivottavasti askel oikeaan suuntaan.

Ja ehkä he ovat jopa jotain, jonka Joseph Müller-Brockmann saattaa tunnistaa: suunnittelutyökalut matemaattisen ajattelun "selkeästi ymmärrettävälle, objektiiviselle, toiminnalliselle ja esteettiselle laadulle".

Jos olet kiinnostunut oppimaan lisää Subforista, käyttöliittymäsuunnittelutyökalumme, tutustu verkkosivustoon. Ja muista rekisteröidä saadaksesi varhaisen pääsyn ja saadaksesi satunnaisia ​​päivityksiä, kuten tämä artikkeli. ️