Pametniji stolovi sa skicom + Paddy

Ažuriranje: Paddy više nije podržan u Sketch-u, stoga ovaj vodič više neće raditi. Hvala svima na čitanju i dijeljenju. Nadam se da će Sketch uskoro implementirati slične značajke!

Prikazi tablica često su zlo u dizajnu proizvoda i sustavima dizajna, ali koristeći savjete i neke korisne dodatke, možemo izgraditi predložak koji će vam u budućnosti donijeti mnogo teškog podizanja.

Nedavno sam predstavio novi dodatak Paddy u moj Sketch tijek rada i uzbuđen sam što pronalazim sve više načina za izradu pametnijih simbola i komponenti. Ako niste upoznati sa Paddyjem, potražite ga ovdje i pročitajte njihovu dokumentaciju. Morat ćete preuzeti i instalirati Paddy da biste slijedili uz ovaj vodič.

Ovdje je poveznica do datoteke Sketch stvorene iz udžbenika, ako vam je potrebna referenca (ili samo želite preskočiti do kraja).

1. Izgradnja vašeg ćelijskog simbola

Umetanje simbola ćelije + struktura sloja.

Ćelija je najmanja komponenta koju ćete integrirati u tablicu, stoga je važno započeti s njom. Koristit ćemo Paddyjeve atribute prilagođenog nazivanja sloja da bismo stvorili pametniju ćeliju koja automatski mijenja veličinu.

1 - Prvi koraci
Napravite pravokutni oblik čija je visina jednaka planiranoj visini retka i širini od oko 120 px i imenovajte cellBackground. Sada dodajte novi oblik teksta u pravokutnik i preimenujte ovaj sloj u cellText.

Grupirajte ta dva sloja zajedno i imenovajte tablicu / ćeliju / standard. Ova struktura imenovanja pomaže vam u organiziranju popisa simbola i omogućuje vam da se forkirate i stvorite različite nestandardne ćelijske simbole i elemente tablice.

Promijenite veličinu cellText sloja u 12px (ili po izboru jastuka) s lijeve i desne strane cellBackground-a. Pored toga, postavite veličine veličine CellText veličine za podešavanje veličine lijevo, desno i gornji rub. To prisiljava vašu ćeliju da zadrži fiksnu širinu stupca unutar tablice i omogućuje prebacivanje teksta u drugi redak.

Na kraju, izradite novi simbol odabirom grupe i odlaskom na Sloj> Stvori simbol. Dvaput kliknite simbol da biste prešli na stranicu za uređivanje simbola da biste nastavili sa sljedećim korakom.

2 - Postavljanje vrijednosti "Paddy" padding-a
Oblik pozadinske ćelije pomoću Paddyja će održavati određene rubove teksta. Odaberite sloj cellText i pomaknite se do dodataka> Paddy> Imply Padding za odabir Primijetit ćete da će niz vrijednosti biti dodan vašem cellBackground. Ovisno o vašem padu cellText sa svake strane, možete dobiti 2-4 vrijednosti između kvadratnih zagrada ([]). Oni slijede tradicionalni redoslijed podmetanja CSS-a [gore desno dolje lijevo]. Dodatne podatke o tim atributima potražite u Paddyjevoj dokumentaciji.

Zanemarite lijevu i desnu padding

Sada želimo urediti te unaprijed zadane vrijednosti paddinga. Lijevu i desnu vrijednost paddinga želimo zamijeniti s x. To govori Paddyju da ignorira padding za te rubove, što zaustavlja našu ćeliju da automatski promijeni veličinu kada u tablici definiramo širinu stupca.

Minimalna visina stanice

Također ćemo priložiti minimalnu vrijednost visine sloju cellBackground koja je jednaka visini vaše ćelije. To ćemo učiniti dodavanjem dodavanja; h> = YOURCELLHEIGHT nakon vaših vrijednosti paddinga u nazivu sloja cellBackground.

3 - Ispitivanje simbola
Sada kada ste kreirali simbol ćelije, umetnite je u jednu od vaših ploča umjetničkih ploča i testirajte poništavanje simbola kako biste bili sigurni da Paddy ispravno radi. Možda ćete trebati omogućiti automatsko ažuriranje u postavkama Paddyjevih dodataka.

Omogući automatsko ažuriranje!

Unutar novo postavljenog simbola ćelije pokušajte umetnuti dugačak niz teksta. Trebali biste vidjeti da simbol automatski raste u visinu kako bi se omogućilo zamatanje teksta. Sada promijenite veličinu ćelije kako bi stao tekst u jedan redak. Prilično prikladno, zar ne?

Ispitivanje naše novo dizajnirane ćelije

2. Spajanje stanica u red tablice

Struktura sloja reda tablice

Sada kada smo stvorili naš nepregledni ćelijski simbol, iskoristimo ih za izradu našeg prvog reda tablice. Koristit ćemo Paddyjeve značajke "Razmak i distribucija" kako bismo zadržali naše stanice čvrsto. Ova značajka omogućuje vam dodavanje svojstava razmaka i distribucije roditeljskoj grupi i njihova podešavanja utječu na njegovu djecu. To možete učiniti i na vodoravnoj i na okomitoj osi, ali zasad ćemo biti fokusirani na vodoravnoj osi kako bismo ravnomjerno raspoređivali stavke u ćeliji kroz naš red tablice.

1 - Postavljanje podataka

Umetnite nekoliko (pokušajte najmanje četiri) ćelijskih simbola u umetničku ploču i unesite neke podatke s lutkastim tekstom. Slobodno učinite ćelije promjenjive u širini, ovisno o podacima koje želite koristiti. U našem slučaju stvorit ću osnovnu tablicu s popisom korisničkih podataka, uključujući: ime, naziv posla, e-poštu i telefonski broj. Ovo je također dobra prilika da preimenujete svoje slojeve kako bi se pozvali na podatke koje posjeduju.

2 - Dodavanje "Paddy" parametara

Jednom kada svoje ćelije smjestite u red, iz njih stvorite grupu i nazovite je tableRow [0h t]. [0h] u nazivu grupe odnosi se na Paddyjevo svojstvo horizontalne distribucije. 0 znači da će svaka ćelija imati 0px obloge između svake, a h se odnosi na smjer za distribuciju djece (ćelija). Igrajte se s tom vrijednošću i pogledajte što reproducira. Jednostavno se odnosi na poravnavanje stanica. To govori svakoj ćeliji da se poravna prema vrhu grupe.

Parametri retka tablice

Možda nećete odmah primijetiti veliku korist od ovog entiteta Paddy, ali pokušajte ukloniti ćeliju naslova posla iz tableRow. Što se događa? Isto možete učiniti kada dodajete nove ćelije. Pokušajte duplicirati polje e-pošte? Stanica bi trebala biti ispunjena linijom s ostatkom stanica i prilagoditi razmak okolne ćelije da odgovara. Ako pokušate povući ćeliju s mjesta, što se događa? Baš super. Sve kratke kodove i druga svojstva razmaka, distribucije i poravnanja možete potražiti u dokumentaciji Paddy.

Pored toga, kako bismo podržali dinamičko mijenjanje veličine visine retka, trebali bismo stvoriti pravokutnik koji odgovara vašoj boji pozadine stanice i postaviti naziv sloja na tableRowBackground [0]. Obavezno smjestite to u svoje nedavno stvorene tableRow grupe. Također preporučujem zaključavanje novog oblika, kako ga ne biste nenamjerno odabrali. Pogledajte gornju sliku zaslona za strukturu.

3. Stvorite naslove tablica

Sličan izgled našem simbolu ćelije

Sada kada je izgrađen prvi red punih tablica, sada možemo krenuti na stvaranje ispravnih naslova za svaki od tih stupaca. Ovo bi trebao biti vrlo poznat postupak do prvih koraka.

1 - Stvorite novi simbol zaglavlja

Prvo što ćemo učiniti je vratiti se na stranicu s simbolima i umnožavati simbol svoje stanice u odnosu na ranije. Preimenujte novu tablicu simbola / naslov / standard.

Tablica / naslov održava istu strukturu kao i duplicirani simbol ćelije. Jedina razlika bit će stil tekstualnog sloja unutar simbola. Odvojite vrijeme da stilizirate tekst zaglavlja koliko god odaberete, ali pokušajte održati istu širinu simbola kao i vaša ćelija kako biste kasnije lakše mijenjali simbol.

Ovo možete koristiti i kao priliku za razlikovanje komponente zaglavlja podešavanjem boje pozadine, dodavanjem donjeg poteza (unutarnje sjene) ili uklanjanjem pozadinskog punjenja u cijelosti. Odlučio sam se za ovo posljednje.

Sada ćemo se vratiti našoj primarnoj ploči u kojoj ćemo stvoriti naslov naslova tablice.

Postupak za dodavanje naslova tablica

2 - Dodavanje redaka naslova tablica

Najlakši način za to je stvoriti kopiju našeg postojećeg tableRow i premjestiti ga izravno iznad našeg prvog reda ćelija.

Sada odaberite sve postojeće simbole ćelije u novo dupliciranom retku i zamijenite njihov simbol našom novom ćelijom zaglavlja. Savjet - Ako držite Cmd + Shift, omogućuje vam više odabira dok također klikate kroz mape najviše razine.

Nakon toga možete ažurirati sav tekst teksta naslova da bi odgovarao njihovim odgovarajućim podacima stupca. Također biste trebali ažurirati naziv sloja da biste odražavali ove promjene.

4. Izgradite naš završni stol

Tabela s više redova koja se održava s Paddyjem

Posljednje što ćemo učiniti jest korištenje Paddyjevih značajki razmaka i distribucije koje smo ranije naučili za izradu potpuno fleksibilne tablice s više redova.

Započnite odabirom tableRow s naslovima, kao i s jednim tableteRow i grupirajte ih zajedno. Navedite tablicu ove grupe [0v l]. Ovo govori Paddyju da poravna vertikalno (v) svu djecu u grupi s 0px paddinga između svakog djeteta, a isto tako drži da se svako dijete uskladi s lijevom stranom.

Sada jednostavno odaberite tableRow i pritisnite bilo koji broj puta Cmd + D da biste ih duplicirali. Možda ćete trebati pritisnuti tipku Esc ili Enter da biste bili sigurni da ste izabrali odabir retka i Paddy automatski ažurirao izgled.

Voila! Trebali biste vidjeti da se svaki od tih stvorenih redaka popunjava izravno ispod originala i održava strogo poravnanje i razmak lijevo.

Sada slobodno eksperimentirajte s ovom tablicom kopiranjem retka u red, podešavanjem vertikalnog razmaka na sloju tablice, brisanjem retka, mijenjanjem veličine tablice i još mnogo toga. Ispod je nekoliko GIF-ova tablice koji se koriste kako bi se prikazali razni načini na koji Paddy pomaže našem stolu da reagira na različite radnje.

Odgovarajuća visina ćelije + omot tekstaOdgovarajuća širina stupcaUmnožavanje redaka u redovimaBrisanje retka u retkuRedoslijed redoslijeda retkaDinamična vertikalna obloga u redovima tablice

Nadam se da je ovaj udžbenik bio koristan za učenje više o Paddyju i načinima na koji on može poboljšati tijek dizajna proizvoda. U komentarima podijelite svoja razmišljanja, ideje i poboljšanja. Ogromni rekviziti za @davidwilliames za stvaranje Paddyja (između ostalih sjajnih dodataka). Podijelite svoju podršku njegovom radu u obliku ili putem PayPala.