Kuinka Sketch-tiedostoni alkoi: erillinen kuvataulu kaikentyyppisille Yammer-säieille. Oli paljon.

Hehkulamppuhetkeni modulaarisella suunnittelulla

Vähennämme suunnittelun vaihtoa 30 makeasta yhdeksi

Yammerin pystysuuntainen rytmitaulukko, joka välittää tasaisesti kaikki käyttöliittymäelementit ja tekstin perusviivat.

Olen hiljattain aloittanut Yammerin Android-sovelluksen suunnittelun uudistamisen, aloittaen kaikkien Yammer-keskustelujen mukauttamisesta 4xx-pystysuuntaiseen ruudukkoon paremman luettavuuden vuoksi. Koska yksi väärin kohdistettu pikseli voi heittää ruudukon pois, aloitimme vaivalloisella prosessilla ottaa sovelluskuvakaappauksia ja vetää jokainen alkuperäisen mallin päälle vertailun vuoksi. Monien istuntojen jälkeen, jotka olivat suunnitelleet ja koottaneet Victor Alcazarin ja Ozzy Theben, kahden erittäin kärsivällisen Yammerin Android-insinöörin, kanssa, jokainen Yammer-säikeen kimpale näytti täydelliseltä.

Kun kuitenkin yhdistimme palat todellinen lanka, ruudukko heitettiin pois. Kun täydellinen palat olivat päällekkäin, ne eivät olleet niin täydellisiä.

Selvimme pian ongelman: tietyt yhdistelmät vaativat ylimääräistä liikkumavaraa sovittamiseksi ristikkoon. Koska Yammer-säikeessä voi olla satoja permutaatioita - joillekin on liitetty asiakirjoja tai kuvia, toisissa on monentyyppisiä metatietoja - meidän olisi määriteltävä satoja erityisiä reunakokoja. Vaikka jokaisen marginaalin luettelointi ja erityistapaus olisi mahdollista, se hidastaisi sovellusta vakavasti.

Vedin ongelman pääsuunnittelijallemme Manuel Muñoz-Soleralle miettiä sitä. Hänellä oli paljon kokemusta modulaarisen käyttöliittymän suunnittelusta aiemmin - se on yleinen ja hyvin dokumentoitu lähestymistapa CSS-kehyksiin -, mutta johtuen useita vuosia kestäneistä nopeista tuotesyklistä ja siitä johtuvasta koodi- ja suunnitteluvelasta, joka on paistettu mobiili- ja web-sovelluksiin, emme koskaan hänellä oli mahdollisuus toteuttaa modulaarinen lähestymistapa Yammerissa.

Vedämällä kaikki palasemme ympärille jättiläisessä tiedostossa ja muokkaamalla muutamia niistä, keksimme yksinkertaisemman, modulaarisemman lähestymistavan säikeiden suunnitteluun, joka ratkaisi marginaaliongelman.

Tässä olemme mitä teimme.

  1. Ryhmittelimme jokaisen Yammer-säikeen palat samalla tavalla kuin kehittäjämme ryhmittelivät ne koodiin. Auttaaksemme silmiämme, osoitimme jokaiselle oman värin. Tässä vaiheessa aloimme myös viitata paloiksi moduuleiksi, koska pidämme.
  2. Lopetimme reunusten määrittämisen moduulien välillä. Sen sijaan kaikki sovelluksen etäisyydet tulevat pehmusteista moduulien sisällä - erityisesti yläpehmusteista. Pohjan täyttö olisi toiminut myös; vain molemmat. Tärkeintä on valita yksi kahdesta ja pysyä siinä. Tämä piti asiat yksinkertaisempana, kun jouduimme määrittelemään ylä- ja alamarginaalit joissakin erityistapauksissa.
  3. Heitimme kaikki yksittäiset moduulit yhdeksi erittäin pitkäksi taitelautaksi. Se näyttää aika omituiselta, koska tämä ei ole keskustelu, jota koskaan olisi olemassa Yammerissa. Se on kuitenkin ok. Tarvitsemme vain tarkistaaksesi suuntauksen ruudukossamme ja varmistaaksesi, että jokaisen tyyppiset elementit otetaan huomioon.
  4. Kun kaikki asetettiin pystysuoraan, meillä oli silti kolme erityistä yhdistelmää, jotka heittivät asiat pois. Tämä oli meille kunnossa - kolmen kanssa oli paljon helpompi käsitellä kuin satojen. Suunnittelijamme menivät töihin määrittelemällä jokaiselle erityiset ”jos…” -lausekkeet.

Loppujen lopuksi meillä on vain yksi isäntätaulu sen sijaan, että meillä olisi 30 erilaista taulutyyppiä erityyppisille Yammer-keskusteluille. Pystymme vetämään moduulit ympäri ja pinoamaan ne uudelleen, jos haluamme, ja kun käännämme pystysuuntaiset ruudukkoviivat päälle tarkistaaksemme sen, kaikki linjaantuu. Se on täydellinen, se on vain yksi taulu ja se vastaa koodia täydellisesti. Sanomattakin on selvää, että Android-insinööreimme olivat erittäin tyytyväisiä.

On erittäin helppo vetää moduuleja todelliseen malliin ja tietää, että kaikki pysyy ruudukossa:

On kulunut kauan sitten, kun minulla on ollut loppukäsityksiä melko tylsän prosessin ympärillä, jolla luovutan mallini, mutta tämä kytkei sananlaskun lampun päälleni. Ehkä lähestyt jo mobiilisuunnitelmasi modulaarisella tavalla, jolloin tervehdin sinua. Olemme suunnittelutiimi, jolla on monien joukossa kollektiivista vuotta kokemusta, joten se, että emme ole koskaan organisoineet työtämme tällä tavalla, saivat minut haluamaan jakaa hehkulamppuhetkeni kanssasi.

Pyrimme nyt "symbolisoimaan" näitä moduuleja käyttämällä joitain Sketchin uusia symbolitoimintoja laaja-alaisen kirjaston muodostamiseksi pikselitäytetyistä, skaalautuvista käyttöliittymäelementeistä. Pysy kuulolla demosta, se on aika tyylikäs.