Grilă flexibilă responsive în schiță folosind grupuri AutoLayout și Stack

Îmbunătățirea sistemelor de proiectare pentru structură, modularitate și scară

Instrumente precum FlexBox în CSS, UIStackView în iOS și FlexboxLayout în Android au oferit dezvoltatorilor fluxurile de lucru necesare pentru a gestiona multitudinea de vederi adaptive și responsive care există astăzi.

Cu toate acestea, pentru designeri, procesul de proiectare a machetei în unele dintre instrumentele noastre de proiectare preferate a fost întotdeauna mai manual, mai static, mai obositor și, în general, mai puțin precis din punct de vedere matematic. Dar, datorită muncii uimitoare a oamenilor de la Anima, este posibil să avem în curând structura și flexibilitatea de care avem nevoie pentru a rezolva mai bine acest gol.

Cu noua caracteristică Stacks, care este inclusă în ultimul plugin Auto-Layout, avem acum un flux de lucru care adaptează mai bine ieșirea UI și ne permite să obținem mai multă consistență și întreținere în sistemele noastre de proiectare. (Renunțare la răspundere - Acest concept este încă într-un stadiu incipient. Nu orice tip de aspect va beneficia de acest sistem, astfel încât să se amestece și să se potrivească după cum credeți de cuviință).

Demo

În videoclipul de mai jos, am pregătit o structură a grilei flexibile doveditoare a conceptului pentru a arăta caracterul extraordinar al Stack-urilor. Este o planșă de artă care reflectă structura unei pagini web de bază.

În timp ce este încă în fazele de explorare timpurii, următoarea funcționalitate este coaptă în șablon:

  • Desktop pentru mobil în câteva clicuri.
  • Plăcile sunt redimensionabile, iar alinierea / distribuția rețelei nu se rupe
  • Grilă structurată de:
  • Corp
     - Antet
     - Principal
     - - secțiuni
     - - - grupuri de rânduri (are un strat de dimensiune a cutiei de frați)
     - - - - rânduri
     - - - - - coloane
     - - - - - - module
     - - - - - - - - componente (simboluri cuibare cu logică internă)
     - Subsol
  • Utilizați simboluri imbricate, definite printr-o combinație de proprietăți de redimensionare Sketch, fixare automată Autout și grupuri de stivă pentru a crea un sistem modular de componente schimbabile.
  • Aspectul se adaptează la lățimea artboard-ului (conținutul are o lățime maximă de 1200px, iar mobilul are jgheaburi încorporate).
  • Varietatea distribuțiilor coloanelor și prăbușirea / modificarea ușoară a jgheaburilor.
  • și
    cresc și se micșorează independent de
    .
  • Schimbările de înălțime la împingeți
    în jos pe tabloul de artă, păstrând marjele și captuselele intacte așa cum ar fi o pagină web.
  • Înălțimea de poate fi ajustată pentru a afecta înălțimea coloanelor copilului
  • Alinierea coloanelor (sus, mijloc, jos, întindere) poate fi definită la nivelul rândului.
  • Adăugarea unei noi coloane (sau ștergerea unuia) din rând ajustează automat lățimea coloanelor fratelui pentru a se potrivi corespunzător.
  • Adăugarea unui nou modul copil în coloană va face ca acea coloană să crească vertical (modulele conțin orice număr de tipuri de conținut, cum ar fi imagini, text, liste, tabele, grupuri și simboluri)
  • Alinierea modulelor (stânga, centru, dreapta, întindere) poate fi definită la nivelul coloanei.
  • Componente pentru schimbul simbolului pentru a înlocui conținutul sau fixați straturi noi la componenta existentă.
  • Plăcuța pentru desktop a fost configurată pentru a utiliza o grilă de bază de 8pt.

Sketch File

Aici este. Simte-te liber să-l îmbunătățești în orice fel și anunță-mă.
* IMPORTANT * - Fișierul NU va funcționa decât dacă aveți cea mai recentă versiune a Layout-ului automat cu suport pentru stive (.0.2.0 din această scriere).

https://cl.ly/2v2I373P2E1f

Câteva gânduri finale

Sper că a fost util pentru unii oameni. Știu că voi explora mai profund posibilitățile Autolayout și Stacks. În ceea ce privește această versiune, am observat câteva aspecte mici cu rotunjirea matematicii, dar sper să fie rezolvate la timp. Printre unele dintre solicitările pe care le-am sugerat dezvoltatorilor, cred că acestea ar putea fi valoroase.

  • Posibilitatea de a adăuga un fundal la un grup stivuit (rândul părinte al coloanelor), fără a afecta logica stivei. În HTML / CSS, acest lucru ar fi făcut pur și simplu la nivelul sau „div”, dar Sketch nu permite o modalitate de a face asta de acum.
    Există o abordare pentru a face acest lucru acum, care implică gruparea unui strat de fundal cu un grup stivuit și fixarea bgului în partea de sus / stânga / 100% lățime și înălțime, iar în timp ce fundalul crește pentru a se potrivi conținutului, acesta nu se micșorează atunci când conținutul este eliminat. Cred că micșorarea este deja pe lista TO-DO a echipei.
  • Introducerea punctelor de întrerupere în tabloul de artă și schimbarea simbolurilor pe baza planșei de artă (schimbarea unui nav de 4 elemente cu o pictogramă hamburger atunci când artboard <400px, sau mai bine, utilizând o abordare de interogare a containerului.
  • Cu punctele de întrerupere menționate, capacitatea de a comuta între grupurile stivuite orizontal și vertical, astfel încât coloanele se stivuiesc una peste alta atunci când nu există spațiu suficient. Și pentru coloanele de înfășurat, dacă este specificat.
  • Posibilitatea de a specifica lățimea procentuală pe coloană.
    (Actualizare - O versiune a acestei idei tocmai a fost implementată în plugin prin utilizarea funcției Greutăți)
  • Deși acest lucru nu ar cădea neapărat în echipa Anima, Sketch ar trebui să introducă, de asemenea, suport pentru variabile, în special acum cu proprietăți precum distanțare, înălțimi minime și maxime și alte valori care ar trebui să fie menținute consecvente pe mai multe straturi. Aceste variabile ar putea fi utilizate în continuare pentru a face o mapare a culorilor și pentru a ajuta la procesul Sass Handoff.

Ei bine, asta este tot ce am! Am vrut din nou să strige echipa Anima încă o dată. Sunt incredibil de talentați, receptivi și primitori, așa că vă rugăm să vă asigurați că își vor susține munca grea! Alăturați-vă paginii lor de Facebook.

Dacă aveți întrebări sau comentarii (drăguțe!), Nu ezitați să postați mai jos sau să vă adresați pe Twitter.