Arbejder effektivt med farver i Xcode

Hej med dig!

Det er et stykke tid, siden jeg delte At få de rigtige farver i din iOS-app, en blogpost, som jeg skrev for at hjælpe iOS-devs med at forhindre det farverige mareridt, der sker nu og da. Denne blogpost var sej og fik flere besøg, end jeg havde forventet, men de oplysninger, jeg udsatte i det øjeblik, var hverken komplette eller bestemt præcise, og de blev også forældede meget hurtigt. Min undskyldning for at have taget for lang tid på at skrive om det igen.

I dag bringer jeg denne opdatering for at hjælpe iOS-samfundet endnu en gang, fordi jeg fandt ud af, at der ikke er meget artikler derude, der involverer al den nødvendige information, som man har brug for, for ikke at mislykkes, når man arbejder med farver i Xcode .

Efter masser af forskning, informationsindsamling, eksperimenter, indsigt og konklusioner, føler jeg mig klar til at dykke ned i farververdenen igen. Så her går vi ...

Hvordan indstiller jeg den rigtige farve?

Første ting først. Der er to måder at indstille en farve til en UI-komponent i Xcode:

  • Interface Builder
  • programmeringsmæssigt

Uanset hvilken du bruger, er pointen, at du skal sørge for at få den samme nøjagtige farve i begge tilfælde, endnu mere, hvis du overvejer, at det er meget sandsynligt, at du bliver nødt til at bruge begge metoder på et tidspunkt i dit projekt. . Konsistens er nøglen.

Det viser sig, at når du opretter en farve programmatisk ved at kalde UIColor (rød: grøn: blå: alfa :), opretter Xcode en farve ved hjælp af sRGB IEC 61966-2-1 farverummet (mere om farverumme senere). I det tilfælde skal du sikre dig, at den oprettes med samme farverum også, når du indstiller en farve gennem Interface Builder, så farven er nøjagtig den samme.

Dette er, givet denne kode ...

lad myCustomColor = UIColor (rød: 38 / 255.0, grøn: 49 / 255.0, blå: 197 / 255.0, alpha: 1.0) // sRGB

... du skal sørge for, at du indstiller de samme RGBA-værdier, og at du bruger det samme farverum, når du er i Interface Builder ...

Du kan hurtigt bekræfte, at farverne er de samme ved at udføre dette enkle eksperiment:

  1. Sæt en visning i en visning
  2. Indstil den ydre visnings farve programmatisk
  3. Indstil den indre visnings farve via Interface Builder, brug de samme RGBA-værdier, og vælg sRGB-farverummet
  4. Build & Run, og tjek resultatet
Hvis du bruger UIColor (rød: grøn: blå: alpha :) i din kode, og du vælger sRGB, når du er i Interface Builder, bruger de samme RGBA-værdier, vil farverne matche.

Godt klaret! Dette er halvdelen af ​​processen med at være konsistent, og det kan have allerede løst dine problemer. For at garantere, at farverne i din app matcher det UI-design, du skal følge, skal du dog også sørge for, at den farve, du har valgt, er den, du skal bruge, og dette er den sværeste del , som jeg vil dække i det næste afsnit.

Hvordan vælger jeg den rigtige farve?

Udtrækning af RGBA-komponenter i en farve kan være en besværlig opgave, og det kan være mest på grund af manglende forståelse for, hvordan farverum fungerer. Lang historie kort, jeg vil forsøge at opsummere denne komplekse verden bedst muligt.

For at repræsentere en farve kræves to komponenter:

  1. Værdier
  2. Et farverum, hvor farven er repræsenteret ← Dette er hvad de fleste ikke kender

På værdierne er der flere modeller, der viser dem:

  • RGBA (rød, grøn, blå, alfa) ← den, vi mest bruger i Xcode
  • HSV (Nuance, Mætning, Værdi)
  • HSL (Nuance, Mætning, Lethed)
  • Og mere…

Disse forskellige modeller er bare klokker og fløjter til at arbejde mere komfortabelt, når du opretter farver gennem UI-skydere eller smarte hjul, og jeg kommer ikke ind på detaljer her, da du møder dig selv ved at kopiere RGBA-værdier omkring 99,99% af tiden. Det betyder ikke noget, om du bruger 0–255 heltalemeddelelse, 0–1 flydende punktnotation eller Hex-notation; det er det samme, så længe du gør matematik godt.

Lad os nu tale om farverum, hvor det bliver komplekst ...

Farverum

Hvad er der alligevel et farverum? Skal jeg endda pleje? Svaret er ja, i det mindste lidt.

Et farverum er en komponent, der definerer, hvilket farveområde der kan repræsenteres gennem de notationer, vi har nævnt ovenfor.

Det menneskelige øje kan se masser af farver. Faktisk kan det se måde flere farver end hvad de fleste skærme faktisk kan udsætte. Dette skyldes, at hardwaren, som skærme bruger, på en eller anden måde er begrænset, og som følge heraf fungerer de med begrænsede farverum (i det mindste mere begrænset end hvad det menneskelige øje kan se).

Forskellige skærme repræsenterer farver gennem forskellige farverum afhængigt af enhedens hardware.

  • Alle iPhones før iPhone 7 repræsenterer kun farver inden for sRGB IEC 61966–2–1 farverummet (sRGB for kort)
  • Mens nyere Apple-enheder, såsom iPhone X, bruger et større farverum, der dækker et bredere farveudvalg, Display-P3-standarden (eller bare P3 for kort)

Hvis du klikker her, ser du et billede, der indeholder et logo, som du kun vil skelne, hvis dit display fungerer med et P3-farverum (ellers ser du et kedeligt rektangel fyldt med kun en rødlig farve).

Nu hvor du forstår, hvad farverum er, lad os undersøge de problemer, de bærer ...

Hvordan farverum passer ind i RGBA-værdier

Lad os antage, at vi bruger RGBA-notationen til at skrive en farve ned. Med denne notation og en dybde på 8 bit pr. Kanal kan du repræsentere op til 255 x 255 x 255 farver = 16.581.375 (de berømte 16 millioner farver) og endnu mere, når du kombinerer dem med alfa-komponenten (x 255 igen) får du op til mere end 4 milliarder (også kendt som ægte farve). Det er den mængde farver, du kan repræsentere ved hjælp af denne notation, og bemærk, at denne værdi er fast. Det betyder ikke noget, om du vælger et større eller mindre farverum til at arbejde med: Du kan ikke repræsentere mere end dette antal farver i RGBA. Forestil dig dette som at have et fast antal på 4.228.250.625 slots: Enhver farve, du vil repræsentere, skal falde ind i et af disse slots. Bemærk dette: Du får ikke nødvendigvis et større antal farver ved at bruge et større farverum, fordi der er en grænse for, hvor mange farver du kan skrive ned. Hvad der dog ændrer sig, er, at når man arbejder på et større farverum, er variationen mellem to på hinanden følgende værdier (for eksempel: A0A0A0 og # A0A0A1) mere synlig for øjet. Dette sker, fordi mere faktiske farver skal bruges i samme mængde faste slots, når du bruger et større farverum. Desuden repræsenterer værdierne på ekstremerne i et større farverum mere levende farver (f.eks. # FF0000 i P3 er en meget mere levende rød end # FF00000 i sRGB). Det er på grund af disse observerbare ændringer, at du sandsynligvis får hovedpine, når du ikke får den nøjagtige farve, du ønsker: Måske får du bare deres RGBA-værdier fra et farverum og genererer dem i Xcode ved hjælp af et andet farverum. Hvis farverummet er uoverensstemmende, får du forkerte farver i din app, på trods af at du har gentaget de samme RGBA-værdier.

Nu hvor du ved, at farverum betyder noget, skal du sørge for, at du vælger farver fra det rigtige farverum. Dette er, hvis du bruger sRGB til at repræsentere en farve i din app, skal du vælge farver fra et sRGB-farverum og bare gentage de samme RGBA-værdier i Xcode. Dette lyder meget enklere end det virkelig er. Spørgsmålet på millioner dollars er, hvordan vælger du en farve fra en sRGB-plads?

At få de rigtige RGBA-værdier

Photoshop

Hvis du beskærer dine aktiver med det samme fra en PSD-fil, så er det et stykke kage: Du åbner det bare i Photoshop og bruger pipetteværktøjet til at få RGB-værdier. På denne måde får du RGB-værdier med en fuld alfa-komponent (A = 1). Hvis du vil være mere grundig, kan du tjekke de enkelte lagkomponenter (f.eks. Et farveoverlay) og tage de nøjagtige RGB- og Alpha-værdier (transparenter kan muligvis spille en vigtig rolle i din apps design). Men vær opmærksom: PSD-filen skal åbnes ved hjælp af sRGB-farverummet som dets arbejdsområde. Du kan tjekke det ved at gå til Rediger> Farveindstillinger. Hvis det ikke bruger sRGB, bliver du nødt til at konvertere filen til den profil, og det anbefales meget, at du advarer designerne om at bruge sRGB-profiler, når du opretter aktiver til mobile apps.

Jeg må indrømme, at jeg plejede at ignorere disse alarmer ...

Der er dog en anden mulighed. Du kan hente farven fra en anden profil, f.eks. Adobe RGB (som er større end sRGB), og generere farverne i Xcode ved altid at bruge Adobe RGB-farverummet, begge via Interface Builder (ved at vælge det fra rullemenuen ) og via kode (ved at bruge en anden funktion til at generere farven, bortset fra den konventionelle UIColor (rød: grøn: blå: alfa :), som jeg nævnte ovenfor - du kan tjekke den officielle dokumentation for, hvordan du gør det). SRGB er dog den standard, som de fleste applikationer bruger (f.eks. Webnavigatorer, Sketch, Zeplin osv., For ikke at nævne selve Xcode), det er derfor, jeg anbefaler stærkt at holde sig til denne.

Andre design-apps

Hvis du får dine aktiver fra værktøjer som Sketch eller Zeplin, kan du få RGBA-værdier direkte derfra uden selv at have brug for et pipetteværktøj. Disse værdier er repræsenteret i sRGB-farverummet.

Digital farvemåler

En anden enklere tilgang til at udtrække RGB-værdier er at bruge et pipetteværktøj fra din Mac. Der er den oprindelige Digital Color Meter-app, der kan gøre det. Problemet med denne er, at hvis din iOS-app skal bruge et større farverum, end det, som din skærm fungerer med (for eksempel: du bruger P3 til din app, men din Mac-skærm er begrænset til sRGB), pipetten vil ikke fange de P3-farver, som dit sRGB-display ikke kan repræsentere. For at bevise det kan du tjekke dette billede og bruge Digital Color Meter til at udtrække dets RGB-værdier, mens du arbejder i en sRGB-skærm. Du får altid de samme RGB-værdier på tværs af hele billedet. På den anden side, hvis du åbner det i Photoshop (ved hjælp af P3 som arbejdsfarverum) og bruger pipetteværktøjet, vil du indse, at der er to forskellige farver i billedet, selvom du ikke vil være i stand til at skelne dem gennem din sRGB-skærm. Jeg har opdaget dette gennem masser af forsøg-og-lignende-lignende eksperimenter. Et andet problem med Digital Color Meter er, at du skal sikre dig, at billedet åbnes med en app, der tager højde for dets indlejrede farveprofil. Preview-app fungerer godt til dette formål. Et andet eksperiment fik mig til at indse, at det at vælge en farve fra et billede, der blev åbnet i Preview vs. at vælge den samme farve lige fra Finders karrusel-forhåndsvisning (som ikke indlejrer profilen), førte til forskellige RGB-værdier.

Hvad med billedaktiver?

Udover at vælge individuelle farver korrekt, skal du også sørge for at vælge filer korrekt, når du arbejder med hele billeder. Som det fremgår af den officielle dokumentation,

Anvend farveprofiler på dine billeder. Standardfarverummet på iOS er Standard RGB (sRGB). For at sikre, at farverne matches korrekt med dette farverum, skal du sørge for, at dine billeder inkluderer indlejrede farveprofiler.

For at vide, hvilken farveprofil der er integreret i et specifikt billede, skal du højreklikke på filen og tjekke den ud under Hent info. For at integrere billedet i en anden farveprofil kan du bruge værktøjer som Photoshop.

Bør jeg ikke arbejde med P3?

Nu undrer du dig måske, hvis de nyeste enheder kan vise P3, hvorfor skulle jeg holde mig til sRGB? Sandheden er, at hvis du arbejder på en computer, der har en sRGB-skærm, men du har brug for at dække P3-farver, har du det svært. I øjeblikket, næsten i slutningen af ​​2017, arbejder de fleste designere stadig med sRGB-skærme. Dette er, de vil ikke være i stand til at få det bedste ud af deres aktiver, hvis de arbejder med et større farverum, end hvad de faktisk kan se på deres skærme.

Apple anbefaler kun at bruge P3-farverummet i bestemte situationer, f.eks. Til UI-komponenter, der kan forbedre brugeroplevelsen ved at skille sig ud gennem mere intense farver, eller for hele billeder, der skal være mere levende. Denne WWDC-session har en stor indsigt i, hvornår du skal bruge P3.

Overgangen er ikke gennemført endnu, og igen er sRGB stadig standarden i dag, så det er det valg, du skal tage for i de fleste tilfælde.

TL; DR

Som du måske har bemærket, at arbejde med farver kan se ud som en meget ligetil ting, men det er det slet ikke.

Ikke desto mindre er det bare et spørgsmål om konsistens. Mine forslag til at holde denne proces så enkel som muligt er:

  1. Lad UI-designerne vide, at du vil arbejde med sRGB-farverummet. Foreslå dem at bruge sRGB-farveprofilen til mobile apps. Sørg for, at de PSD-filer, du bruger til at beskære billeder, har sRGB som arbejdsplads, og at de PNG-billeder, du bruger i dit aktivakatalog, har sRGB-farveprofilen indlejret.
  2. Brug UIColor (rød: grøn: blå: alpha :) til at oprette farver programmatisk.
  3. Sørg for, at sRGB-indstillingen er valgt i Interface Builder's dropdown-menu for farvevælger, hver gang du indstiller en farve på denne måde.
  4. Arbejd effektivt: Hold dig til en kilde til sandhed.

Bonusspor: Sandhedens ene kilde

Jeg har i årevis undret mig over, hvordan det var muligt, at der ikke havde været en måde at henvise til den samme ting, når jeg fik en farve fra koden vs. fra Interface Builder. Hvordan er jeg nødt til at skrive disse RGBA-værdier to gange for den samme farve? Jeg mener, én gang i min kode og en anden gang i Interface Builder's farvevælger. Ikke kun dette er en åbenlys smerte i nakken, men det fører også til problemer på grund af brud på DRY-princippet.

Gode ​​nyheder, fra Xcode 9 kan du oprette en farve, der kun angiver den ved hjælp af farveaktiver.

Du kan få din brugerdefinerede farve enten fra Interface Builder eller fra koden, idet der i begge tilfælde henvises til den samme ting.

Jeg blev blæst, da jeg så dette værktøj for første gang, da det ikke kun forhindrer dig i at skrive ting to gange, men også organiserer din apps farver på en sådan måde, at det er meget praktisk for alle at bruge. Helt ærligt skulle jeg ikke have været så overrasket, da denne form for hjælp skulle have eksisteret fra længe, ​​længe siden.

Dårlige nyheder, dette værktøj er kun kompatibelt fra iOS 11. Så hvis din app skal understøtte ældre iOS-versioner, skal du skrive denne type kode:

lad kalk: UIColor
hvis #tilgængelig (iOS 11.0, *) {
    kalk = UIColor (navngivet: "kalk")!
} andet {
    kalk = UIColor (rød: 222 / 255.0, grøn: 254 / 255.0, blå: 50 / 255.0, alpha: 1.0)
}

...

…Det er slemt.

Ressourcer

Jeg håber, jeg lige har dækket dette emne godt, og jeg gjorde det forståeligt ved hjælp af de rigtige ord. Der er meget mere detaljer at dykke i. Jeg vil med glæde se dine kommentarer og oplevelser!

Her er en liste med nogle af de ressourcer, jeg har brugt under min forskning. De kan også være nyttige for dig:

  • https://www.youtube.com/watch?v=N2T62ZHIu6s
  • https://developer.apple.com/videos/play/wwdc2016/712/
  • https://developer.apple.com/videos/play/wwdc2017/821/
  • https://developer.apple.com/documentation/uikit/uicolor
  • https://developer.apple.com/ios/human-interface-guidelines/visual-design/color/
  • https://petapixel.com/2009/09/17/why-you-should-probably-use-srgb/
  • http://appleinsider.com/articles/16/09/09/apples-wide-color-screen-on-the-iphone-7-will-lead-to-more-faithful-color-reproduction
  • https://apple.stackexchange.com/questions/252159/what-color-space-is-iphones-7-wide-color-display-p3
  • http://martiancraft.com/blog/2017/06/xcode9-assets/#color-assets
  • https://blog.zeplin.io/asset-catalog-colors-on-xcode-9-c4fdccc0381a
  • https://webkit.org/blog-files/color-gamut/
  • http://www.astramael.com/
  • https://en.wikipedia.org/wiki/SRGB
  • https://en.wikipedia.org/wiki/DCI-P3
  • https://en.wikipedia.org/wiki/HSL_and_HSV

Glad farvelægning!