Kilde: Material.io

Opret et adaptivt sketssymbol til materialedesigns skitserede tekstfelt

I Hjælp Designere til at holde sig til et Design System med Sketch viste jeg et adaptivt symbol til Material Designs skitserede tekstfelt, som jeg oprettede. Symbolet tilpasser sig længden af ​​den tilsidesatte tekst for etiketten og indtastningen.

Ved slutningen af ​​denne tutorial vil du have oprettet en tilpasset og ændret størrelse, som er skitseret, indtastningsfelt.
Denne artikel er som svar på dem, der spørger, hvordan jeg lavede dette symbol. I stedet for kun at forklare, hvordan man fremstiller det, forsøger jeg at forklare, hvorfor det fungerer; trin for trin.
⬇Hent Sketch-filen

Googles teknik versus denne teknik

Google frigav sin fantastiske Sketch Theme Editor-plugin til oprettelse af dine egne tema-materialesymboler. Dog er nytten begrænset af, hvordan den er lavet.

Googles symbol fra sin Sketch Theme-editor tilpasser sig ikke den tilsidesatte tekst.

På dette tidspunkt er al tekst symboler. Dette forhindrer tilstødende elementer i at bevæge sig, når tekstens længde ændres. Resultatet er kun fire tegn, der kan indtastes i etiketten, og markøren bevæger sig heller ikke med den tilsidesatte tekst. En form ved hjælp af den foruddefinerede overfladefarve placeres over den øverste kant, så den ser ud som et udskæring til etiketten. Dette fungerer kun, hvis baggrunden bruger den samme overfladefarve som den overlejrende form; ellers er det synligt.

I modsætning hertil viser teknikken, der er beskrevet i denne artikel, hvordan man opretter det samme symbol, men kan virkelig tilpasses til at tilsidesætte tekst og har en faktisk udskæring af etiketten, så den kan placeres på enhver baggrund. Disse teknikker kan anvendes til at skabe et væld af tilpasningsbare symboler.

Trin 1: Introduktion

  1. Opret et symbol med dimensionerne 328x56
  2. Giv det en meningsfuld etiket, som Outline Text Field Active

Trin 2: Opret randen

Kanten er ikke en lukket form. For at opnå dette, trækker vi en form fra denne i et fremtidig trin. Så standardgrænseindstillingen fungerer ikke her. Vi bruger en anden teknik.

Materialedesign bruger 4px kantradius til inputfelter og en 2px kant til den aktive tilstand. To former trækkes fra for at oprette grænsen. For at holde kanttykkelsen jævn, når du ændrer størrelse, vil den indre form blive fastgjort til alle sider.

Tilføj det ydre rektangel

  • Etiketnavn: Border
  • Bredde: 328; Højde: 56
  • Farve: # 6200EE (eller hvilket som helst)
  • Radius: 4

Tilføj det indre rektangel

  • Etiketnavn: Overfladeudskæring
  • Bredde: 324; Højde: 52
  • Radius: 2
  • X: 2; Y: 2
  • Pin: alle sider

Træk former

Træk overfladeudskæring fra kantlinjen udgør en form. Omdøb til overfladeudskæring.

Kanttykkelse og radius ændres ikke, når du ændrer størrelse.

Test dine fremskridt

Du skal være i stand til at ændre størrelsen på symbolet, uden at kanttykkelsen eller hjørneradius ændres. Hvis de gør det, skal du sikre dig, at overfladen til udskæring er fastgjort på alle sider.

Trin 3: Tilføj etiketudskæringen

For at lave den tilpasselige etiket og øverste kant, skal der oprettes en udskæring øverst. Det skal altid være 11px fra siderne, uanset symbolets dimensioner. En maske bruges til at opnå dette og har en fast højde og fastgøres, så den tilpasser sig symbolets dimensioner.

Efter teknikken i trin 2 skal du oprette et rektangel med følgende specifikationer og trække det fra kantformen:

  • Etiketnavn: Etiketudskæring
  • Bredde: 306; Højde: 2
  • X: 11; Y: 0
  • Fast højde
  • Pin: Venstre, Top, Højre

Test dine fremskridt

Du skal være i stand til at ændre størrelsen på formen, og topmasken skal forblive på plads.

Trin 4: Tilføj etiket og øverste kant

Vi kan nu tilføje den tilpasselige etiket og kant i udskæringen, vi lavede i det forrige trin. Når tekstlængden vokser, skubber den den øverste kant.

Sådan fungerer tilpassbar tekst

Inden vi fortsætter, er vi nødt til at forstå, hvordan tilpassbar tekst fungerer i Sketch. Når tekst indtastes i en menu til tilsidesættelse, skubbes det tilstødende element for at holde afstanden den samme mellem de to. Dette sker kun, hvis tekstjusteringen er indstillet til automatisk, og den tilstødende formhøjde er lig med eller mindre end tekstelementets højde. Se Adaptive Text Elements for flere detaljer.

Cirklen bevæger sig, fordi dens højde er mindre end tekstens højde.Cirklen bevæger sig ikke, fordi den er højere end teksten.

Tilføj tekstlaget til etiketten

For at skubbe til tilstødende elementer kan tekstlaget ikke være en fast bredde. Hvis du fastgør etiketten og den øverste kant, holdes de på plads, også når symbolet ændres til størrelse. Etikettens justering skal indstilles til auto for at skubbe den øverste kant.

  • Etiketnavn: Label
  • X: 16; Y: -9
  • Pin: venstre og øverst
  • Farve: # 6200EE (eller hvilket som helst)

Tilføj den øverste kant

Den øverste kant er lavet adskilt fra resten af ​​formen, så teksten kan flytte den. Den øverste kantbredde svarer på etikettens bredde. Dimensionen af ​​den øverste kant skal være lydhør over for symbolets bredde og hold den samme afstand fra tekstens tilsidesættelse og symbolkanten. Da dette i øjeblikket ikke er muligt i Sketch, vil vi falske det.

Ligesom tekstfeltet skal den øverste ramme forblive øverst på symbolet, når det ændres i størrelse. Det skal også reagere på længden af ​​tilsidesættelsestekst for etiket. Da vi ikke ved den maksimale længde, som dette symbol skal ændres til, vil vi give den øverste kant en latterlig længde og skjule den ekstra længde i det næste trin.

  • Lagnavn: Øverste kant
  • X: 56; Y: 0
  • Pin: Top
  • Fast højde
  • Farve: # 6200EE (eller hvilket som helst)

Test dine fremskridt

Afstanden mellem etiketten og øverste kant skal være konsekvent, når der indtastes tekst i menuen for tilsidesættelse.

Tekst skubber den øverste kant.

Trin 5: Skjul overkanten af ​​øverste kant

En maske bruges til at skjule den øverste kant på den ekstra længde. Det vil omfatte etiketten og topkanten. Masken har samme bredde som etiketudskæringen fra trin 3 og den samme højde som etiketlaget.

masken skjuler yderligere længde på øverste kant.
  • Tilføj et nyt rektangel under det øverste kantlag
  • Etiket: Øverste kantmaske
  • X: 11; Y: -9
  • Pin: Venstre, Top, Højre
  • Fast højde
  • Udfyld farve: ingen
  • Kantfarve: ingen

Trin 6: Tilføj input tekst og adaptiv markør

Markøren skal også bevæge sig, da den tilsidesatte tekst indtastes for inputfeltet.

Tilføj input tekstlag

Tilføj et tekstlag som det sidste lag i symbolet.

  • Label: Input tekst
  • X: 16; Y: 16
  • Pin: Venstre, Top og Højre
  • Justering: Auto, venstre

Tilføj markøren

Tilføj en rektangelform som det sidste lag i symbolet.

  • Bredde: 1; Højde: 17
  • X: 85; Y: 20
  • Pin: Top
  • Fast bredde; Fast højde

Du gjorde det!

Tillykke, hvis du nåede det så langt, skal dit symbol se ud som nedenfor. Du har lavet et avanceret symbol, der tilpasser sig tilsidesættelse af tekst og kan ændres størrelse.

Dit symbol skal se sådan ud.

Disse teknikker kan bruges til at skabe meget robuste symboler, selv med højrejusteret tekst. Da kanten er en form, kan den endda bruges til som en maske for at give mulighed for at ændre kantfarve.

⬇︎Hent Sketch-filen.

Du kan også lide mine relaterede artikler: