Fleksibilna fleksibilna mreža u skici pomoću automatskog postavljanja i grupa sloga

Poboljšanje dizajnerskih sustava za strukturu, modularnost i opseg

Alati poput FlexBox u CSS-u, UIStackView u iOS-u i FlexboxLayout u Androidu već su davali programerima potrebne radne tijekove kako bi se bavili mnoštvom prilagodljivih i responzivnih pogleda koji postoje danas.

Za dizajnere, međutim, postupak oblikovanja izgleda u nekim od naših omiljenih alata za dizajn uvijek je bio ručniji, statičniji, zamorniji i općenito manje matematički precizan. Ali zahvaljujući neverovatnom radu ljudi iz Anime, možda ćemo uskoro imati strukturu i fleksibilnost koja nam je potrebna kako bismo taj jaz bolje premostili.

S novom značajkom Stacks koja je u paketu s najnovijim dodatkom za automatsko postavljanje, sada imamo tijek rada koji bolje prilagođava izlazu sučelja i omogućava nam postizanje više dosljednosti i održavanja u svim našim dizajnerskim sustavima. (Izjava o odricanju odgovornosti - Ovaj koncept je još u ranoj fazi. Neće svaka vrsta izgleda imati koristi od ovog sustava, pa se miješajte i uskladite kako smatrate prikladnim).

Demonstracija

U videozapisu u nastavku sastavio sam test rešetka fleksibilnog rešetka kako bih pokazao fenomenalne gomile. To je umjetnička ploča koja zrcali strukturu osnovne web stranice.

Sljedeća funkcionalnost nalazi se u predlošku, dok je još u ranim istraživačkim fazama:

  • Desktop za mobilne u nekoliko klikova.
  • Ploče matične ploče mogu se mijenjati i poravnavanje / distribucija mreže se ne može slomiti
  • Mreža strukturirana po:
  • Tijelo
     - Zaglavlje
     - Glavni
     - - odjeljke
     - - - skupine redova (ima sloj veličine klizača)
     - - - - redovi
     - - - - - stupci
     - - - - - - moduli
     - - - - - - - komponente (ugniježđeni simboli s unutarnjom logikom)
     - Podnožje |
  • Upotrijebite ugniježđene simbole definirane kombinacijom svojstava Sketch Resize, automatskog podešavanja isticanja i skupina stog za stvaranje modularnog sustava zamjenjivih komponenata.
  • Izgled se prilagođava širini ploče (sadržaj ima maksimalnu širinu od 1200 px, a mobilni uređaji imaju ugrađene oluke).
  • Razne distribucije stupaca i lako urušavanje / izmjena oluka.
  • i
    rastu i smanjuju se neovisno o
    .
  • Promjene visine u
    gurnu
    dolje u ploču s umetcima, a margine i obloge ostaju netaknuti poput web stranice.
  • Visina može se prilagoditi tako da utječe na visinu podređenih stupaca
  • Poravnavanje stupaca (vrh, sredina, dno, protezanje) može se definirati na razini retka.
  • Dodavanje novog stupca (ili brisanje njega) iz retka automatski prilagođava širinu stupaca braće i sestara.
  • Ako dodate novi podređeni modul u stupac, stupac će vertikalno rasti (moduli sadrže bilo koji broj vrsta sadržaja, kao što su slike, tekst, popisi, tablice, grupe i simboli)
  • Poravnavanje modula (lijevo, središte, desno, protezanje) može se definirati na razini stupca.
  • simbol zamijeni komponente da zamijene sadržaj ili prikvače nove slojeve na postojeću komponentu.
  • Ploča radne površine postavljena je za upotrebu osnovne mreže od 8pt.

Datoteka skice

Evo ga. Slobodno ga poboljšajte na bilo koji način i javite mi.
* VAŽNO * - Datoteka NIJE radila ako nemate najnovije izdanje automatskog izgleda s podrškom za stokove (.0.2.0 od ovog pisanja).

https://cl.ly/2v2I373P2E1f

Neke završne misli

Nadam se da je nekima bilo korisno. Znam da ću dublje istražiti mogućnosti automatskog postavljanja i slaganja. Od ove verzije primijetio sam nekoliko malih poteškoća sa zaokruživanjem matematike, ali nadam se da će se one vremenom riješiti. Među nekim od zahtjeva koje sam predložio vragovima, mislim da bi mogli biti korisni.

  • Mogućnost dodavanja pozadine grupiranom slogu (nadređeni red stupaca) bez utjecaja na logiku snopa. U HTML / CSS-u to bi se jednostavno moglo učiniti na razini ili "div", ali Sketch do sad ne dopušta način da se to učini.
    Postoji pristup upravo ovom poslu koji uključuje grupiranje pozadinskog sloja sa složenom grupom i učvršćivanje bg-a na vrh / lijevo / 100% širinu i visinu, a dok pozadina raste kako bi se prilagodio sadržaju, ne smanjuje se kada sadržaj se uklanja. Vjerujem da se smanjivanje već nalazi na popisu TO-DO ekipa.
  • Uvođenje prekretnih točaka u ploču s umjetničkim pločama i izmjena simbola na temelju umetničke ploče (zamjena 4-stavke navigacijske ikone hamburgera kad artboard <400px ili još bolje, pomoću pristupa kontejnerskim upitima.
  • Pomoću rečenih prijelomnih točaka mogućnost prebacivanja između vodoravnih i vertikalnih složenih grupa, tako da se stupci međusobno složljuju kad nema dovoljno prostora. I za stupce za umotavanje ako su navedeni.
  • Mogućnost određivanja postotne širine po stupcu.
    (Ažuriranje - Verzija ove ideje upravo je implementirana u dodatak korištenjem značajke Utezi)
  • Iako to ne bi nužno trebalo pasti na Anima tim, Sketch bi također trebao uvesti podršku za varijable, posebno sada sa svojstvima kao što su razmak, min i maks. Visina, te druge vrijednosti koje bi trebale biti konzistentne u nekoliko slojeva. Ove bi se varijable mogle dalje koristiti za mapiranje boja i pomoć u procesu prenosa Sass-a.

Pa, to je sve što imam! Samo sam još jednom želio povikati ekipi na Animi. Nevjerojatno su talentirani, susretljivi i pozivajući, zato budite sigurni da podržavaju njihov naporan rad! Pridružite se njihovoj Facebook stranici.

Ako imate bilo kakvih pitanja ili (lijepih!) Komentara, slobodno objavite u nastavku ili kontaktirajte na Twitteru.