Hvorfor din app ser bedre ud i skitse

Undersøgelse af gengivelsesforskelle mellem Sketch og iOS

Find forskellen

Kan du se forskellene mellem disse to billeder?

Hvis du ser hårdt nok ud, vil du muligvis bemærke et par subtile forskelle:

Billedet til højre:

  1. Har en større skygge.
  2. Har en mørkere gradient.
  3. Har ordet "ind" på den øverste linje i afsnittet.

Billedet til venstre er et skærmbillede fra Sketch, og billedet til højre er en gengivelse på iOS. Disse forskelle opstår, når grafikken gengives. De har nøjagtigt samme skrifttype, linjeafstand, skyggeradius, farver og gradientegenskaber - alle konstanterne er identiske.

Som du kan se, kan nogle aspekter af det originale design gå tabt under konverteringen fra designfilen til reel kode. Vi vil udforske nogle af disse detaljer, så du kan vide, hvad du skal se efter, og hvordan du løser dem.

Hvorfor vi bryder os

Design er kritisk for en vellykket mobilapp. Især på iOS er brugerne vant til apps, der fungerer godt og ser godt ud.

Hvis du er en mobil-app-designer eller -udvikler, ved du, hvor vigtige små detaljer er for slutbrugeroplevelsen. Software i høj kvalitet kan kun komme fra mennesker, der er dybt interesserede i deres håndværk.

Der er mange grunde til, at apps måske ikke ser så godt ud som deres originale design. Vi vil undersøge en af ​​de mere subtile grunde - forskelle i gengivelse mellem Sketch og iOS.

Tabt i oversættelsen

Visse typer brugergrænsefladeelementer har mærkbare forskelle mellem Sketch og iOS. Vi vil udforske følgende elementer:

  1. Typografi
  2. Skygger
  3. farveforløb

1. Typografi

Typografi kan implementeres på forskellige måder, men til denne test skal jeg bruge etiketter (“Tekst” -element i Sketch, UILabel i iOS).

Lad os se på nogle af forskellene:

Den største forskel i eksemplet ovenfor er placeringen af ​​linjeskift. Den tredje tekstgruppering, der begynder med “Denne tekst er SF Semibold” bryder efter ordet “25” i designet, men efter ordet “peger” i appen. Samme problem opstår med tekstafsnittet - linjeskiftene er inkonsekvente.

En anden mindre forskel er, at føringen (linjeafstand) og sporing (karakterafstand) er lidt større i Sketch.

Det er lettere at se disse forskelle, når de er direkte overlagt:

Hvad med andre skrifttyper? Ved at udskifte San Francisco med Lato (en meget brugt gratis skrifttype) får vi følgende resultater:

Meget bedre!

Der er stadig nogle forskelle i føring og sporing, men disse er generelt små. Vær dog forsigtig - hvis teksten skal tilpasses andre elementer som baggrundsbilleder, kan disse små forskydninger ses.

Sådan rettes

Nogle af disse problemer er relateret til standard iOS-skrifttypen: San Francisco. Når iOS gengiver systemtypen, inkluderer den automatisk sporing baseret på punktstørrelsen. Denne automatisk anvendte sporingstabel er tilgængelig på Apples websted. Der er et Sketch-plugin kaldet “SF Font Fixer”, som afspejler disse værdier i Sketch. Jeg kan varmt anbefale det, hvis dit design bruger San Francisco.

(Side note: Husk altid at få tekstboksen til at vikle tæt rundt om teksten i Sketch. Dette kan gøres ved at vælge teksten og skifte mellem "Fast" og "Auto" justering og derefter nulstille bredden på tekstboksen. Hvis der er eventuel ekstra afstand, kan dette let føre til, at forkerte værdier indtastes i layoutet.)

2. Skygger

I modsætning til typografi, der har universelle layoutregler, er skyggerne mindre veldefinerede.

Som vi kan se på billedet ovenfor, er skygger i iOS større som standard. I eksemplerne ovenfor gør dette mest forskel på rektanglernes øverste kanter.

Skygger er vanskelige, fordi parametrene mellem Sketch og iOS ikke er de samme. Den største forskel er, at der ikke er noget begreb om "spredning" på en CALayer, selvom dette kan overvindes ved at øge størrelsen på laget, der indeholder skyggen.

Skygger kan variere meget i deres forskel mellem Sketch og iOS. Jeg har set nogle skygger med nøjagtigt de samme parametre se godt ud i Sketch, men være næsten usynlige, når du kører på en rigtig enhed.

Sådan rettes

Skygger er vanskelige og kræver manuel justering for at matche det originale design. Ofte bliver skyggeradius nødt til at være lavere, og opaciteten skal være højere.

// gammel
layer.shadowColor = UIColor.black.cgColor
layer.shadowOpacity = 0,2
layer.shadowOffset = CGSize (bredde: 0, højde: 4)
layer.shadowRadius = 10
// nyt
layer.shadowColor = UIColor.black.cgColor
layer.shadowOpacity = 0.3
layer.shadowOffset = CGSize (bredde: 0, højde: 6)
layer.shadowRadius = 7

De krævede ændringer varierer afhængigt af størrelse, farve og form - her har vi kun brug for et par mindre justeringer.

3. Gradueringer

Gradueringer viser sig også at være besværlige.

Af de tre gradueringer er der kun “orange” (øverst) og “blå” (nederst til højre) forskellige.

Den orange gradient ser mere vandret ud i Sketch, men mere lodret i iOS. Som et resultat er den samlede farve på gradienten mørkere i den endelige app end designet.

Forskellen er mere synlig i den blå gradient - vinklen er mere lodret i iOS. Denne gradient er defineret af tre farver: lyseblå i nederste venstre hjørne, mørkeblå i midten og lyserød i øverste højre hjørne.

Sådan rettes

Start- og slutpunkterne skal muligvis justeres, hvis gradienten er vinklet. Prøv at udligne startpoint og endPoint på din CAGradientLayer lidt for at redegøre for disse forskelle.

// gammel
layer.startPoint = CGPoint (x: 0, y: 1)
layer.endPoint = CGPoint (x: 1, y: 0)
// nyt
layer.startPoint = CGPoint (x: 0,2, y: 1)
layer.endPoint = CGPoint (x: 0,8, y: 0)

Der er ingen magisk formel her * - værdierne skal justeres og itereres, indtil resultaterne visuelt stemmer overens.

* Jirka Třečák sendte et fremragende svar med links, der forklarede, hvordan gradient gengivelsen fungerer. Tjek det, hvis du vil dykke dybt ned i mere kode!

Se selv

Jeg byggede en demo-app for let at se disse forskelle på en reel enhed. Det inkluderer eksemplerne ovenfor sammen med kildekode og original sketch-fil, så du kan finjustere konstanterne til dit hjerte indhold.

Dette er en fantastisk måde at øge bevidstheden i dit team - bare give dem din telefon, så kan de se selv. Berør blot hvor som helst på skærmen for at skifte mellem billederne (svarende til giferne ovenfor).

Hent open source-demo-appen her: https://github.com/nathangitter/sketch-vs-ios

Appen Sketch vs iOS Demo - Prøv det selv!

Takeaways

Antag ikke, at lige værdier indebærer lige resultater. Selv hvis numrene stemmer overens, kan det visuelle udseende muligvis ikke.

I slutningen af ​​dagen er der brug for iteration, efter at ethvert design er implementeret. Godt samarbejde mellem design og engineering er afgørende for et slutprodukt af høj kvalitet.

Nød du historien? Efterlad nogle klapper her på Medium og del det med dit iOS-design / dev-venner. Vil du holde dig opdateret om det nyeste inden for mobilappdesign / dev? Følg mig på Twitter her: https://twitter.com/nathangitter

Tak til Rick Messer og David Okun for revision af udkast til dette indlæg.