Denne header blev oprettet ved hjælp af Uber-tabel “Master Cells” med symboloverskridelser.

En hacky - men alligevel nyttig måde at opbygge komplekse datatabeller i Sketch

Hvis du arbejder som designer af enhver art, er det sandsynligt, at du bliver nødt til at gengive datatabeller på et tidspunkt i din karriere. Datatabeller er indbegrebet af gentagne arbejde. Blanke stater. Hover siger. Betinget formatering. Celler med en rød bundkant. Så. Mange. Stater.

Det er også sandsynligt, at du sandsynligvis bruger Sketch til dit designværk. Sketch's Symbol-system og panelet Tilsidesættelse giver designere mulighed for at opbygge skalerbare designsystemer. Generelt fungerer det godt. Men der mangler stadig et par afgørende ting. Det kan bemærkes, at du ikke kan tilsidesætte nogen indstillinger, som kantbredder og farver, der er knyttet til en grundlæggende form indeholdt i et symbol.

Designet Über Table prøver at løse dette problem. Sådan gør du.

Jeg har opdelt et bord i en atomstruktur.

Lad os kanalisere Brad Frost lidt og tænke over delene af et bord.

  1. Organisme. Selve datatabellen. Ovenstående er ret enkel.
  2. Molekyler. En enkelt celle. I Über Table-systemet kaldes dette "Master Cell". Dette symbol kan bruges så mange gange som nødvendigt og har omhyggeligt konfigureret Ændring af størrelsesindstillinger for at sikre, at det er uendeligt skalerbart.
  3. Atomer. Delene af en tabelcelle: øverste, højre, nederste, venstre kant og cellens baggrundsfarve. Disse er beregnet til at repræsentere de forskellige komponenter i grænsekassemodellen. Der er symboler for hvert af disse atomer.

4. Atomiske symboler. Symbolerne er alle omhyggeligt anbragt i Mastercellen. De drager fordel af Sketchs positionsindstillinger for at sikre, at grænser forbliver faste til formens yderste position.

Ændre størrelse på mastercellen - gå til byen, det går ikke i stykker. Jeg håber.

Hvert atomsymbol er lavet til justering via panelet Tilsidesættelse.

Hver atom i cellemolekylet er repræsenteret af et symbol. Farve på øverste, højre, nederste, venstre og BG.

Vil du ændre en farve eller en pixelbredde? Brug panelet Tilsidesættelse. Kan du ikke se, hvad du vil have i panelet? Opret en anden version af pixel eller baggrundsfarve i biblioteket til dit eget projekt.

Over: Vælg kantpikseltykkelser og -farver til mastercellen i overstyringspanelet.

Detalje

5. Den delte biblioteksfil Uber Table indeholder alle de aktiver, du har brug for til at tilpasse dit symbol.

Hver komponent i cellen har en justerbar indstilling, der kortlægger til et symbol i biblioteket.

Trin for trin: Sådan konstrueres en tabel ved hjælp af biblioteket

Vil du oprette din egen tabel ved hjælp af Über-bordbiblioteket?

Trin 1: Konfigurer din celle

Dette indebærer at justere grænserne til den indstilling, du vil have.

Trin 2. Opret din række

Tag din enkelt celle, og dupliker den et par gange vandret for at oprette din række.

Trin 3. Gentag din række lodret

Tag hele rækken, du lige har lavet, og dupliker det også.

Trin 4: Tilpas dine celler

Juster dine celler til at afspejle de tilstande, du har brug for til dit design. Ekstra point, hvis du bruger et plugin som Automate til at give hver celle et unikt Col / Row-navn.

Det er det! Download biblioteket, og prøv det selv.

Download Uber-Table-Library her eller fra Github!

Der er en selvstudie- og eksempeltabel inkluderet i filen.

Hvad er det næste?

Jeg eksperimenterer med en anden version af dette mønster, der udnytter objektets skyggeindstilling for at tegne kant med indstillinger for både 'indenfor' og 'udenfor' skygger. Dette synes (indtil videre) at være mere performant end enkelt pixel-metoden.