Kulissien takana :)

Mukautuvat tekstielementit luonnos

Makea!

Päivitys: Eilen Sketch-tiimi ilmoitti, että yksi heidän halutuimmista ominaisuuksista on saatavana sovelluksen beetaversiossa.
He kutsuvat sitä “Älykkääksi asetteluksi” ja se näyttää A M A Z I N G.
Se tarkoittaa myös, että tämän viestin menetelmä vanhenee (viimeinkin!).

Muutamia esimerkkejä verkosta mahdollisuuksien suhteen:
twitter.com/mds/status/1167145339457069062
twitter.com/svorklab/status/1167350673857482752
twitter.com/gaddafirusli/status/1167157688867835904

Mene ja katso se> www.sketch.com/beta

Tämä viesti ajateltiin ensimmäisen kerran 19. elokuuta 2016, mutta ei koskaan nähnyt päivänvaloa (laiskuuden / viivyttelyn takia / sinä nimit sen). Ajan myötä huomasin, että ihmiset puhuvat (ja jopa kirjoittavat Medium-viestejä) käyttäytymisestä, josta puhun. Joten päätin lopettaa luonnoksen muokkaamisen ja julkaista sen. Yay minulle …

Kaikki alkoi yksinkertaisella kysymyksellä ...

Ei vähän aikaa sitten kohtasin pienen, mutta tylsän ongelman, joka on minua sitkeästi häirinnut. Suunnittelin hallintapaneelin käyttöliittymän yhdelle asiakkaalleni, ja se oli melko yleinen käyttöliittymäkomponentti; Se osoitti tietyn käyttäjän tietoja, esimerkiksi elementtejä: avatar-kuva, julkaisupäivä ja aikaleima. Se näytti noin:

Sekoittaessani ui: ta, muuttaessani komponentin pituutta useaan otteeseen, mietin, onko olemassa helpompaa tapaa muuttaa koko komponentin sisältöä, pehmustetta ja pituutta tarvitsematta muuttaa jokaista elementtiä uudestaan ​​ja uudestaan.

Kokoominaisuus auttoi vähän, kun minun piti muuttaa rivin pituutta. Tästä hämmästyttävästä ominaisuudesta on monia opetusohjelmia ja viestejä, kuten tämä tai tämä, jota suosittelen lukemaan, jos et vielä ole.

Halusin todella saavuttaa dynaamiset tekstielementit, jotka työntävät toisiaan, kun niiden koko muuttuu. Joten esimerkiksi jos käytän Craft by InVision -apuohjelmaa (tai mitä tahansa muuta tietoa täydentävää laajennusta), käyttäjänimi-elementti työntää päiväyselementin sen viereen ja niin edelleen, kuten oikeassa toimivassa tuotteessa.

Keskustellessamme samanlaisesta aiheesta Eran Lahavin (kollegani, joka on myös mahtava suunnittelija ) kanssa, olin päättäväisempi kuin koskaan löytää ratkaisu ongelmaan. Muistin, että luin artikkelin mahdollisuudesta luoda dynaamisia taulukoita uudella koon muuttamisominaisuudella (otettu käyttöön versiossa 39). Tapa, jolla Reony Tonneyck sen teki, oli piilotettujen graafisten elementtien avulla, joita käytettiin pöydän sisällön pehmustamiseen. Tämä antoi minulle idean laittaa piilotettu graafinen elementti kahden tekstiobjektin väliin. Ja arvaa mitä?

Se vittu toimi!
Joten olen oikeasti seurannut Reonyn menetelmää luoda dynaaminen rivi, mutta kun lähetin tiedoston Eranille, hän kertoi minulle, että se toimi minkä tahansa elementtien valitseman koon muuttamisvaihtoehdon kanssa.

Se yllättyi minusta, koska olin varma, että tämä käyttäytyminen liittyy koon muuttamiseen. Kaivanneensa vähän virallisessa luonnosdokumentaatiossa, sain selville, että kyse on käyttäytymisestä, joka linkki symbolien ohitusominaisuuteen:

Ja se on alkuperäinen viesti tästä ominaisuudesta:

Asia on, että he käyttivät grafiikkaobjektia tekstiobjektin vieressä, eivät kahta tekstiobjektia vierekkäin. Ja kun yritin tätä menetelmää vain tekstiobjekteilla, se ei toiminut ...

Joukon testien jälkeen, jotka Eran ja minä teimme, olemme melko varmoja, että käytettäessä symboleja useiden tekstiobjektien kanssa vierekkäin graafisten esineiden kanssa niiden välillä, grafiikkakäyttäytyminen on kuin “vartija”, joka estää tekstiobjekteja koskemasta jokaista muut (katso päivitys alla).

Päivittää:
Vaikuttaa siltä, ​​että tämä ominaisuus toimii edelleen versiossa 44. Ymmärsin myös, että kun etäisyys kahden vierekkäin olevan tekstielementin välillä on pienempi tai yhtä suuri kuin 20 kuvapistettä, automaattinen koon muuttaminen toimii. Jos etäisyys on yli 20 kuvapistettä, asiat alkavat hajoa. Ei ole "huoltajia" :)

Eranin kokeilut

Nyt ohitusten ongelma on, että todellisen sisällön laajennukset (kuten Craft) eivät aina toimi. Lukuun ottamatta yhtä (sikäli kuin tiedän - kiitos Erania): Sketch Data Populator, jonka on tehnyt arvokas design-studio. Laajennusta käytettäessä se vaikuttaa ohitusosaan alkuperäisen symbolisisällön sijasta, ja se ratkaisee täydellisesti ohitustilanteen ongelman.

MUOKKAA: Ilmeisesti Craft-laajennus tukee tekstin ohittamista, joten pahoittelen virhettä (kun aloin kirjoittaa tätä viestiä elokuussa, Craft ei tukenut tekstin ohitusta, joten virhe)

johtopäätös

Tämä ominaisuus on ylivoimaisesti yksi intuitiivisimmista, joita olen tavannut Sketchissä, mutta hei, se on silti parempi kuin Illustrator.
Yhteenvetona voidaan todeta, että yksi tärkeä asia, joka sinun tulisi harkita ennen tämän menetelmän käyttöä, on se, että jos yrität muuttaa pääkomponentin leveyttä tai korkeutta, kaikki helvetti irtoaa sinusta.
Tiedän, että Anima Appin mahtavat kaverit pyrkivät parantamaan laajennustaan ​​toimimaan samalla tavalla, ja se saa komponentin täysin reagoivaksi (vaikka kokeillessani menetelmääni heidän plugineillaan tänään, 30. tammikuuta, Sketch kaatui).

Toivon, että tämä viesti auttoi, se on ensimmäinen minun koskaan, ja kesti hetken, kun pukuin ja kirjoitin sen. Mahtavaa päivää .