Bron: Material.io

Maak een adaptief schets-symbool voor het omlijnde tekstveld van het materiaalontwerp

In het helpen van ontwerpers om zich aan een ontwerpsysteem te houden met Sketch, liet ik een adaptief symbool zien voor het geschetste tekstveld van Material Design dat ik had gemaakt. Het symbool past zich aan de lengte van de vervangende tekst voor het label en de invoer aan.

Aan het einde van deze zelfstudie hebt u een aanpasbaar en aanpasbaar omlijnd invoervak ​​gemaakt.
Dit artikel is een reactie op degenen die vragen hoe ik dit symbool heb gemaakt. In plaats van alleen uit te leggen hoe het te maken, probeer ik uit te leggen waarom het werkt; stap voor stap.
⬇ Download het schetsbestand

Google's techniek versus deze techniek

Google heeft zijn geweldige Sketch Theme Editor-plug-in vrijgegeven voor het maken van uw eigen materiaalsymbolen. Het nut is echter beperkt door de manier waarop het is gemaakt.

Het symbool van Google uit de Sketch Theme-editor past zich niet aan de vervangende tekst aan.

Op het moment van schrijven is alle tekst een symbool. Dit voorkomt dat aangrenzende elementen worden verplaatst als de tekstlengte wordt gewijzigd. Het resultaat is dat er slechts vier tekens in het label kunnen worden ingevoerd en de cursor beweegt ook niet met de vervangende tekst. Een vorm, met behulp van de vooraf gedefinieerde oppervlaktekleur, wordt boven de bovenste rand geplaatst om het eruit te laten zien als een uitsparing voor het label. Dit werkt alleen als de achtergrond dezelfde oppervlaktekleur gebruikt als de overlappende vorm; anders is het zichtbaar.

De techniek die in dit artikel wordt beschreven, daarentegen, laat zien hoe u hetzelfde symbool kunt maken, maar dat het echt kan worden aangepast om tekst te vervangen en heeft een daadwerkelijke uitsnede van het label, waardoor het op elke achtergrond kan worden geplaatst. Deze technieken kunnen worden toegepast om een ​​groot aantal aanpasbare symbolen te maken.

Stap 1: Aan de slag

  1. Maak een a-symbool met de afmetingen 328x56
  2. Geef het een betekenisvol label, zoals Outline Text Field Active

Stap 2: Maak de rand

De rand is geen gesloten vorm. Om dit te bereiken, zullen we hier in een toekomstige stap een vorm van aftrekken. Dus de standaardrandoptie werkt hier niet. We zullen een andere techniek gebruiken.

Materiaalontwerp gebruikt 4px randradius voor invoervelden en een 2px rand voor de actieve status. Twee vormen worden afgetrokken om de rand te maken. Om de randdikte consistent te houden bij het wijzigen van het formaat, wordt de binnenvorm aan alle kanten vastgemaakt.

Voeg de buitenste rechthoek toe

  • Labelnaam: rand
  • Breedte: 328; Hoogte: 56
  • Kleur: # 6200EE (of een andere)
  • Straal: 4

Voeg de binnenste rechthoek toe

  • Naam label: oppervlakte uitsparing
  • Breedte: 324; Hoogte: 52
  • Radius: 2
  • X: 2; Y: 2
  • Pin: alle kanten

Vormen aftrekken

Trek de oppervlakknipsel van de randlaag af en maak één vorm. Hernoemen naar Surface-uitsparing.

Randdikte en straal veranderen niet bij het wijzigen van het formaat.

Test je voortgang

U moet het formaat van het symbool kunnen wijzigen zonder dat de randdikte of hoekradius verandert. Als dit het geval is, moet u ervoor zorgen dat de oppervlaktelaag aan alle kanten is vastgemaakt.

Stap 3: Voeg de labeluitsparing toe

Om het aanpasbare label en de bovenrand te maken, moet een uitsparing bovenaan worden gemaakt. Het moet altijd 11 px vanaf de zijkanten zijn, ongeacht de afmetingen van het symbool. Om dit te bereiken wordt een masker gebruikt dat een vaste hoogte heeft en wordt vastgemaakt zodat het zich aanpast aan de afmetingen van het symbool.

Volg de techniek in stap 2, maak een rechthoek met de volgende specificaties en trek deze af van de randvorm:

  • Labelnaam: labeluitsparing
  • Breedte: 306; Hoogte: 2
  • X: 11; Y: 0
  • Vaste hoogte
  • Pin: Links, Boven, Rechts

Test je voortgang

U moet het formaat van de vorm kunnen wijzigen en het bovenste masker moet op zijn plaats blijven.

Stap 4: label en bovenrand toevoegen

We kunnen nu het aanpasbare label en de rand toevoegen in de uitsparing die we in de vorige stap hebben gemaakt. Naarmate de tekst langer wordt, wordt de bovenste rand verplaatst.

Hoe aanpasbare tekst werkt

Voordat we verder gaan, moeten we begrijpen hoe aanpasbare tekst werkt in Sketch. Terwijl tekst in een vervangingsmenu wordt ingevoerd, wordt het aangrenzende element ingedrukt om de afstand tussen de twee gelijk te houden. Dit gebeurt alleen als de tekstuitlijning is ingesteld op automatisch en de hoogte van de aangrenzende vorm gelijk is aan of minder is dan de hoogte van het tekstelement. Bekijk Adaptive Text Elements voor meer informatie.

De cirkel beweegt omdat de hoogte kleiner is dan de teksthoogte.De cirkel beweegt niet omdat de hoogte meer is dan de teksthoogte.

Voeg de tekstlaag toe voor het label

Als u aangrenzende elementen wilt pushen, kan de tekstlaag geen vaste breedte hebben. Door het label en de bovenrand vast te zetten, blijven ze op hun plaats, zelfs wanneer het formaat van het symbool wordt gewijzigd. De uitlijning van het label moet worden ingesteld op automatisch om de bovenrand te duwen.

  • Labelnaam: label
  • X: 16; Y: -9
  • Pin: links en boven
  • Kleur: # 6200EE (of een andere)

Voeg de bovenste rand toe

De bovenste rand is gescheiden van de rest van de vorm, zodat de tekst deze kan verplaatsen. De breedte van de bovenrand reageert op de breedte van het label. De dimensie van de bovenrand moet reageren op de breedte van het symbool en op dezelfde afstand van de vervangende tekst en de rand van het symbool. Aangezien dit momenteel niet mogelijk is in Sketch, gaan we het vervalsen.

Net als het tekstveld moet de bovenste rand bovenaan het symbool blijven wanneer het formaat wordt gewijzigd. Het moet ook reageren op de lengte van de vervangende tekst voor Label. Omdat we niet weten tot welke lengte dit symbool wordt aangepast, gaan we de bovenrand een belachelijke lengte geven en de extra lengte verbergen in de volgende stap.

  • Laagnaam: Bovenrand
  • X: 56; Y: 0
  • Pin: Top
  • Vaste hoogte
  • Kleur: # 6200EE (of een andere)

Test je voortgang

De afstand tussen het label en de bovenrand moet consistent zijn wanneer tekst wordt ingevoerd in het vervangingsmenu.

Tekst duwt de bovenrand.

Stap 5: Verberg de bovenrandoverloop

Een masker wordt gebruikt om de extra lengte van de bovenrand te verbergen. Het omvat het label en de bovenrand. Het masker heeft dezelfde breedte als de labeluitsparing uit stap 3 en dezelfde hoogte als de labellaag.

het masker verbergt extra lengte van de bovenrand.
  • Voeg een nieuwe rechthoek toe onder de bovenste randlaag
  • Label: masker met bovenrand
  • X: 11; Y: -9
  • Pin: Links, Boven, Rechts
  • Vaste hoogte
  • Vulkleur: geen
  • Randkleur: geen

Stap 6: voeg invoertekst en adaptieve cursor toe

De cursor moet ook worden verplaatst als de vervangende tekst wordt ingevoerd voor het invoerveld.

Voeg een invoertekstlaag toe

Voeg een tekstlaag toe als de laatste laag in het symbool.

  • Label: Invoertekst
  • X: 16; Y: 16
  • Pin: links, boven en rechts
  • Uitlijning: Auto, links

Voeg de cursor toe

Voeg een rechthoek toe als de laatste laag in het symbool.

  • Breedte: 1; Hoogte: 17
  • X: 85; Y: 20
  • Pin: Top
  • Vaste breedte; Vaste hoogte

Je hebt het gehaald!

Gefeliciteerd, als je zover bent gekomen, zou je symbool er hieronder uit moeten zien. U hebt een geavanceerd symbool gemaakt dat zich aanpast om tekst te negeren en waarvan het formaat kan worden gewijzigd.

Uw symbool zou er zo uit moeten zien.

Deze technieken kunnen worden gebruikt voor het maken van zeer robuuste symbolen, zelfs met rechts uitgelijnde tekst. Omdat de rand een vorm is, kan deze zelfs als masker worden gebruikt om de optie om de randkleur te wijzigen toe te staan.

⬇︎ Download het schetsbestand.

Misschien vind je mijn gerelateerde artikelen ook leuk: