10 ting at huske på at arbejde med Sketch & Zeplin. Udviklere vil takke dig!

Efter at have vejet fordele og ulemper ved Sketch & Zeplin, før du begyndte at bruge dem, så det ud til, at der var meget mere fordele end ulemper, men du har stadig den samme arbejdsbyrde og vanskeligheder med at kommunikere med udviklingsholdet. Du undrer dig selv, om udviklere ikke ved, hvordan de bruger et så simpelt værktøj som Zeplin.

Du har lige uploadet alle dine designs til Zeplin, og pludselig modtager du en besked fra en af ​​udviklerne, der beder dig om at eksportere alle dine ikoner og billeder og sende dem i en zip-fil. Og du spekulerer på, hvorfor downloader de dem ikke direkte fra Zeplin? De fortalte dig at uploade et skærmbillede til Zeplin, fordi de ikke kan se margenerne mellem elementerne ... og du tror, ​​hvad formål tjener dette værktøj?

Hvis en af ​​disse ting sker med dig, er denne artikel noget for dig. Dette er de 10 ting, der hjælper dig med at få mest muligt ud af din tid og finde et lykkeligt medium med udviklere.

1. Størrelse af tegnebræt

iOS

  • @ 1X: 375 x 667 px

Android

  • mdpi: 360 x 640 px

Web

På hvilke enheder vises dit produkt? Definer breakpoints og husk medieforespørgsler, som udviklere vil bruge. Tal med din udvikler, hvis du ikke ved, hvad det er.

  • 1920 x 1080 px
  • 1200 x 900 px
  • 1024 x 768 px
  • 320 x 480 px

2. Hvordan breakpoints fungerer i lydhør layout

Upload et kunstværk til Zeplin med det lydhør design (i henhold til de punkter, du allerede har angivet), med andre ord, del hvordan dit design ser ud i forskellige skærmopløsninger og enheder.

Du synes, det er klart, at designet vil være horisontalt i centrum ved højere opløsninger, f.eks. 1920 x 1080 pixels, men udviklere er ikke sindslæsere.

Deling af det lydhøre design

3. Rasterbillede størrelse

Tildel rasterbillederne til den maksimale størrelse for at undgå tab af kvalitet, når designet vises på skærme med højere opløsninger. Hvis du f.eks. Arbejder på en app til iOS, skal du indstille størrelsen på billederne til @ 3x. Hvis du ikke gør dette, får du en meddelelse fra udvikleren som følgende:

Send mig de store billeder, fordi de ser pixelerede ud, når jeg ser designet på en iPhone 7.

4. Gør eksportbar ikongruppen, men også de individuelle objekter separat

Udviklere kan være interesseret i at eksportere et eller flere af elementerne i dit ikon eller det fulde ikon. Så gør alle varer, der kan eksporteres separat og som gruppe. Senere i Zeplin vil dev-teamet kunne eksportere individuelle aktiver såvel som den fulde gruppe.

5. Gør eksporterbare billeder, ikke teksten

Forestil dig et banner, der indeholder et billede, en tekst og et filter, og filteret kan ikke bygges med CSS. Derefter skal udviklere være i stand til at eksportere:

  1. Kun billedet
  2. Kun filteret
  3. Billede + filter

6. Liniehøjde

Linjehøjden på kropsteksten skal være 6px mere end den aktuelle skriftstørrelse, undtagelse kan være titler eller overlaytekster, hvor du vil have indflydelse på brugeren ved at give grafik til et element mulighed.

Kontroller derefter linjehøjderne for de forskellige tekstfelter. Husk, at udvikleren vælger en tekstboks og kopierer og indsætter liniehøjden. Indstil den samme linjehøjde i alle tekstfelterne for at spare sammenhæng langs dit design.

7. Tekstboksens bredde

Indstil bredden på en enkelt linjetekst til 'auto'. Dette giver dit dev-team mulighed for at se margen mellem teksten og andre elementer i grænsefladen eller grænserne for skærmdesignet.

8. Fjern området omkring ikonet

Nogle af ikonerne, som du importerer i Sketch, har et omgivende område, hvilket er godt at eksportere aktivet, men det er svært for udvikleren, når han prøver at kontrollere margenen mellem objekter i Zeplin. Fjern dette rum for at give udviklere mulighed for at kontrollere margenen mellem ikonet og det næste element i grænsefladen.

9. Knaptilstande

Du har lavet dit design i Sketch, og du har uploadet skærmbillederne til Zeplin. Nu kommer udviklerens spørgsmål.

Hvilket er adfærden ved ikonet, teksten, knappen, hvad der sker, når brugeren svæver, klikker…

Opret et nyt kunstværk med alle tilstande til de forskellige komponenter, du bruger i grænsefladen. Du kan navngive det 'Specs'.

10. Sådan organiseres designskærmbillederne i Zeplin

Zeplin giver dig mulighed for at organisere skærmene efter tags. Du kan sortere dine skærmdesign efter indhold (for eksempel sektionerne på dit websted) eller funktionaliteter.

Sorter skærmene efter brugerstrømmen i hver af tags (sektion eller funktionalitet). På den måde er den første skærm i Zeplin den første skærm på dit websted eller din app.

Hvad mere?

Spild ikke din tid på at skabe en styleguide, du kan tilføje farver og typografier direkte fra Zeplin (Styleguide-fanen).

PD: Glem ikke at invitere udviklingsteamet til dit Zeplins projekt!

Håber dette hjælper, lad mig det vide, hvis du har spørgsmål!

Deltag i min Skillshare-klasse om, hvordan man bygger prototyper i inVision ved hjælp af Sketch & Craft-plugin for flere tip: https://skl.sh/2Y4hj6l