Handoffs Guide til Pixel Perfect Design. Del III.

UI-sæt

Et UI-kit er en liste over alle de elementer, du bruger i et projekt. Dette sæt hjælper dig med at holde alt i sin faktiske tilstand og gør vedligeholdelsesprocessen lettere, når du arbejder med et team på store projekter.

I et UI-sæt skal du illustrere dit projekt: farver; typografi; komponenter som knapper, indgange og skydere; og forskellige tilstande som svæver, aktiv og standard. Brug D.R.Y. (“Don’t Repeat Yourself”) -princippet, når du overvejer, om du vil placere et givet element i UI-kittet eller ej. Hvis du har to lignende elementer på tegnebrettet, skal du flytte et til et UI-sæt. I tegnebræt til designere, der ikke bruger UI-sæt, finder du normalt to, tre eller fire forskellige knapper med meget små og irrelevante forskelle. I disse tilfælde implementerer udvikleren sandsynligvis dem alle i stedet for at oprette en samlet version.

Vi anbefaler Craft til at oprette dit projekt UI-bibliotek. For større projekter er det en god ide at have en HTML- og CSS-version af et UI-kit og bruge dem som reference til andre elementer.

CRAFT-plugin (indsamle genanvendelige elementer i projektet)

Eksport

Gør udviklerens liv lettere og øg dine chancer for at opbygge et pixel perfekt design ved hjælp af et af disse værktøjer:

  • Inspektion af invision
  • Zeplin
  • Sympli
  • Skitse mål
Zeplin: moderne instrument til designinspektion

De kan hjælpe dig med at hente farver, skrifttyper, størrelser, aktiver, afstand mellem elementer, CSS-egenskaber og andre ting fra din Sketch eller PSD. Invision og Zeplin giver dig også mulighed for at skrive noter i stedet for at tvinge dig til at oprette yderligere lag, f.eks. Photoshop.

Gammel måde. Oprettelse af kommentarer i Photoshop-lag

Elementstater

For at forhindre misforståelser anbefaler vi, at du bruger specifik terminologi til de forskellige tilstande for dine elementer, ligesom vi gør i CSS. Udviklere vil vide, hvad du taler om uden overdreven forklaring.

  • Standard
  • Hover: Elementets tilstand med en musovergang
  • Aktiv: Elementets tilstand ved tryk på
  • Fokus: Tilstanden for det element, der i øjeblikket er målrettet mod tastaturet, eller aktiveret af musen (dvs. input, tekstområder)
  • Besøgte: Status for de links, der allerede er besøgt
Eksempler på elementstilstande

Linjehøjde

Liniehøjde er en meget vigtig del af dit design og overdragelsesproces. Den vigtigste ting her er at forstå, hvordan en browser gengiver hvert element, og hvordan linjehøjde vil påvirke det. Se på billedet herunder. Dette er et typisk eksempel på en tekstblok gengivet af en browser. Elementets højde er den samme som linjehøjden og højden på forskellige tegn, der ikke er i tråd med elementet som helhed.

En fordel ved at bruge Sketch er, at det gengiver tekstobjekter med den samme logik. Photoshop-elementstørrelser afhænger ikke af linjehøjde.

Bedste praksis dikterer ved hjælp af linjehøjde svarende til skrifttyper. Brug ikke en masse forskellige, tilpassede linjehøjder på tværs af webstedet. Hver skrifttype har en standardværdi på linjehøjde. For eksempel har Roboto 1,4x liniehøjde i skriftstørrelse; Hvis du har en skriftstørrelse på 16px, vil liniehøjden være 22px. Selv hvis du beslutter dig for ikke at bruge standardværdien, kan du prøve at bruge den samme andel på hele websitet. Typiske værdier er 1,3-1,6 for skrifttypestørrelser. Udviklere vil kunne lide dette, fordi de foretrækker at definere den globale linjehøjdeværdi og glemme den og fortsætter med at arbejde med bare skrifttypestørrelser.

Nu lidt om opførsel med floatnumre i forskellige browsere. For eksempel startværdier:

  • Skriftstørrelse: 36px
  • Liniehøjde: 1.4

Chrome, Safari, Opera: Beregn kun heltalværdier og trunker float. 36px * 1,4 = 50,4, og vil blive afkortet til 50px.

Firefox: Beregn med float. 36px * 1,4 = 50,4, og det forbliver 50,4px. Hvis du har to tekstlinjer som i eksemplet nedenfor, vil det være 100,8 px. Den største forskel med Safari og Chrome er, at hvis du vælger en linjehøjde som 1,41, får du 100 px; i Firefox vil det være en størrelse på 101,533px.

Takeaway her er, at Firefox bruger mere nøjagtige liniehøjdeværdier, ligesom 1.33333. Hvis det ikke vedrører dig, skal du holde dig med smukke og rene tal som 1.3.

Skrifttyper

Forsøg først at finde acceptable skrifttyper på Google-skrifttyper. Browsere understøtter forskellige formater af skrifttyper. Dette betyder, at for at bruge visse tilpassede skrifttyper, skal udvikleren forberede dem med specielle tjenester til at konvertere ttf / otf til woff, woff2 eller eot. Under denne proces kan skrifttyper miste kvalitet. Så min anbefaling er kun at bruge tilpassede skrifttyper, hvis du ved, at dine udviklere ikke vil mislykkes i processen. De skal vide, hvordan man arbejder med skrifttyper.

Her er et par ting at huske ved brug af skrifttyper:

  • Brug ikke mere end to skrifttyper. Dette vil påvirke sideindlæsningstider, især hvis skrifttyperne er brugerdefinerede.
  • Brug ikke for mange forskellige størrelser eller stilarter (kursiv / fed / lys / tynd / regelmæssig).
Google-fontbibliotek med gratis-til-brug-skrifttyper

Udviklere og designere

Designere hader undertiden udviklere, fordi de ikke kan realisere deres ideer; udviklere hader undertiden designere, fordi de kræver funktioner, der er teknisk vanskelige at implementere. Disse problemer kan løses med en enkel ting: samtale. Tal med dine udviklere og ikke kun i slutfasen. Diskuter dine ideer, før du begynder at tegne, fordi det ikke vil være for katastrofalt at afvise en idé på et tidligt tidspunkt. Du er mindre tilbøjelige til at blive skuffet over resultatet, hvis du gør det.

Vi mener, at det altid er muligt for udviklere og designere at finde et rimeligt kompromis og arbejde effektivt sammen for at reducere omkostningerne / tiden for deres projekter.

Tryk på knappen ❤, hvis du fandt, at denne artikel var nyttig!

Del 1 - Software, Navngivning, Billedoptimering, Sprites, SVG, Favicon

Del 2 - Net, responsivt design, animationer, prototyper

Har du spørgsmål eller feedback? Opret forbindelse via Pixel Point