Du har sannsynligvis hørt uttrykket 'piksel-perfekt design' utallige ganger uten å tenke på hva det betyr, eller hva det skal bety. I løpet av de siste månedene er det en sjanse for at du har hørt om tilbakegangen til det piksel-perfekte designkonseptet, men det er et lite problem med disse påstandene, spesielt når det gjelder iOS UI-design.

Definisjonen av piksel-perfekt layout er nemlig ikke satt i stein som de fleste iOS UI-retningslinjer. Folk tolker det på forskjellige måter, derav problemet: Pixel-perfeksjon kan virke uakseptabelt for noen, men andre vil fortsette å bruke prinsippet i årene som kommer, om enn under et annet navn. Det er først og fremst et nomenklaturproblem.

Hva er piksel-perfekt UI-design?

Siden det ikke er noen klar definisjon av pikselperfeksjon, er min forståelse av begrepet piksel perfekt design at alt er gjort for å maksimere skarpheten og troskapen. Når designen er implementert, ser den identisk ut på hvilken som helst iPhone-skjerm uten gjenstander eller problemer av noe slag.

Å lage et piksel-perfekt iOS App UI betyr at du lager et design med piksler i tankene og implementerer nøyaktig samme design på skjermen, ned til hver piksel i det refererte designet, samtidig som du sørger for at den tilpasser seg responsivt til andre enheter.

Men hvorfor Pixel-Perfect Design?

UI-designerne de går ut av deres måte å lage grensesnitt som er enkle å oppfatte og samhandle med. Den profesjonelle plikten til utvikleren er å respektere designerenes arbeid og implementere grensesnittet nøyaktig slik det ble levert.

Med apper som ikke er perfekte piksler, vil brukere sannsynligvis ikke oppleve noen større problemer som hindrer dem i å bruke og nyte appen, men piksel perfekte apper ser definitivt skarpere, renere og mer konsistent ut.

På grunn av den svært konkurransedyktige naturen til Apple App Store er alle detaljer som forbedrer det generelle utseendet og brukeropplevelsen velkomne. Det kan bidra til å skille søknaden din og gjøre den mer synlig og derfor mer lønnsom.

Denne raske iOS UI-designveiledningen vil lede deg gjennom prosessen fra grunnleggende designfase til implementering, fra et designer- og utviklerperspektiv.

Opprette et UI-design for iOS

La oss starte. Pixel perfekte apper starter åpenbart som pikselperfekt design, og vi vet alle hvor de kommer fra i disse dager.

Viktige iOS-designverktøy

Jeg tror jeg har rett i å si det Skisse har blitt de facto-standarden for web- og mobile UI / UX-designere. Samtidig som Adobe XD er et lovende alternativ , henger etter Sketch når det gjelder popularitet.

Deretter velger vi størrelsen på tegnebrettet. I dag har vi iOS-enheter med forskjellige skjermstørrelser og proporsjoner og vi må velge en størrelse for å lage vårt design. Takket være Auto Layout vil den enkelt tilpasse seg andre skjermstørrelser. Om nødvendig kan du lage forskjellige designvarianter for forskjellige Størrelse klasser .

Det eneste virkelige spørsmålet her er: Hvordan skal designeren dele informasjon om tilpasning av oppsett for forskjellige skjermer med utvikleren?

Heldigvis er det ikke nødvendig å skrive ned spesifikasjonene for hver enkelt, siden Automatisk design plugin for skisse vil ta seg av det. Designeren trenger rett og slett å stille inn ønsket automatisk layout, eksportere til forskjellige skjermstørrelser med ett klikk, og utvikleren vil forstå hvordan man legger layoutbegrensninger og sørger for at alt ser bra ut, enten det er på en iPhone X eller en gammel iPhone 5..

Merk: Siden versjon 44 har Sketch-teamet forbedret størrelsen på kontrollene dramatisk, noe som gir brukerne mer kraft og kontroll over hvordan lag skal oppføre seg når foreldrene endrer størrelsen på dem.

Sette opp designet ditt

Det høres bra ut, men vi har ikke valgt størrelsen vi vil bruke til å lage vårt design ennå. I henhold David Smiths iOS-statistikk 57% av alle iPhone-brukere er avhengige av 4,7-tommers skjermer, introdusert i iPhone 6 / 6s og senere brukt i iPhone 7 og til og med den nylig utgitte iPhone 8.

Jeg er sikker på at du allerede er kjent med Apples 4,7-tommers skjermer, men i tilfelle du ikke er en tallperson, snakker vi 750x1334 piksler med 326 piksler per tomme (PPI). Dette er standard Retina-skjerm, og i koden vil vi ha halv oppløsning. Derfor foreslår jeg at du begynner med 375x667 piksler.

Deretter må vi sørge for at vårt iOS UI-design maksimerer skarpheten. For å nå dette målet, må du aktivere pikselmontering :

Her er et eksempel på et enkelt rektangel med og uten piksel snapping:

Bruker Runde: Full piksler når du redigerer vektorobjekter:

Dette er åpenbart bare det grunnleggende, og for å se nærmere på piksel-perfekte iOS UI-elementer i Sketch, bør du sjekk den offisielle opplæringen .

Bruk gjerne komplekse vektoranimasjoner, fordi en utvikler lett kan leke med lottie bibliotek . Du kan spille Adobe After Effects-animasjoner på en mobil enhet uten å oppleve noen skaleringsartefakter. Bare gi JSON-filen til utvikleren, og du er ferdig.

Bruk sRGB-fargeprofilen så mye som mulig. Hvis sRGB ikke er tilstrekkelig på skjermer med bred spekter, må du oppgi farger eller grafikk (en sRGB og en med en innebygd fargeprofil). Detaljert informasjon om fargeprofiler er tilgjengelig på Apples HID-retningslinjer hvis du trenger det.

Egendefinert kode for perfekte Pixel-resultater

Flott! Vi vet nå nok til å lage et perfekt pixeloppsett. Hvordan deler vi det med utvikleren? Tydeligvis må vi komme til verktøykassen vår.

Velge riktig verktøy

Det er utrolig nyttige verktøy for å dele designerens arbeid med utviklere: Zeplin . Bare bruk den, og utvikleren vil ha nesten all informasjonen de trenger for å sikre at brukergrensesnittdesignet ditt fungerer: grafiske ressurser, skrifter og farger som brukes i designet, tekst og mye mer. Omtrent det eneste designeren kan trenge å oppgi på dette tidspunktet, er fontfilene, i tilfelle de bruker skrifter som ikke er inkludert i iOS.

Et annet kult verktøy er PaintCode , som kan generere kode fra vektorbilder. PaintCode bruker SVG-baner og fargedata til å generere Swift- eller ObjC-klasser. Med PaintCode kan du bruke uttrykk, variabler osv. for å lage passive / aktive tilstander for knappene dine, opp / ned-tilstander, dynamisk tekst, variabel animasjon og mye mer.

Åpenbart må du stole på Xcode og noen standard iOS-utviklingsverktøy, men vi kommer til det senere.

Dette er ekstremt nyttig hvis du bare dynamisk må oppdatere en bestemt del av et designelement, for eksempel endre grunnfargen på en gradientbakgrunn i chat-ikonet. Og som en ekstra bonus, vil appen din gå ned i vekt.

Ok, utvikleren har endelig alt de trenger, så hvordan implementerer vi perfekt pixel perfekt layout (beklager ordspillet)?

Konfigurasjon og synkronisering av verktøyene dine

Med Zeplin bør du få nesten alt du trenger, forutsatt at designeren setter opp alt riktig. Hvis noe blir oversett eller uklart, tilbyr Zeplin en effektiv tilbakemeldingsfunksjon, slik at designeren og utvikleren raskt kan identifisere og løse potensielle problemer. Selv om alt er gjort riktig, kan kommentarene brukes til kommentarer og små forbedringer.

Imidlertid, som vi alle vet, går ikke ting alltid etter planen, så noen ganger må utvikleren velge en farge, selv om designeren ga fargepaletten som ble brukt i applikasjonen.

For å gjøre dette riktig, må du synkronisere verktøyene dine:

• Sett skjermfargeprofilen din til sRGB: gå til Systemvalg - Viser - Farge og velg sRGB IEC61966-2.1 .

• I Digital fargemåler , eller et annet fargevalgverktøy, velg å vise i sRGB .

• Kontroller at fargeprofilen i Xcode-fargepaletten er satt til Enhet RGB.

Merk: _ Bilder kan ha en innebygd fargeprofil. Hvis dette er tilfellet, må du tilpasse verktøyene dine til denne profilen hvis du vil ha riktig farge fra dette bildet. Heldigvis bør dette være et unntak, og du bør ikke oppleve slike saker for ofte.

Husk i Xcode 9 Bevar vektordata når nødvendig. Selv om det vil øke størrelsen på appen, vil dette også tillate deg å bruke bildet til hvilken som helst skjermstørrelse. Imidlertid, på iOS 10 og tidligere versjoner av Apples mobile operativsystem, blir bilder _ ikke forstørret_ ved hjelp av tilleggsvektordataene.

I stedet vil eldre versjoner av operativsystemet bruke eldre skaleringsmekanismer og gi deg et uskarpt bilde når de skaleres utover originalstørrelsen. Du kan se den offisielle Apple-dokumentasjonen for mer informasjon om akkurat dette emnet .

Til slutt må utvikleren sørge for at størrelsene og avstandene samsvarer med den opprinnelige designen så tett som mulig. Hvis det er tvilsom informasjon i Zeplin, kan du måle avstandene mellom de forskjellige komponentene i iOS UI med variasjoner i skjermlinjene. En av dem er xScope , en linjal på skjermen med mange praktiske funksjoner.

Gjør iOS UI-designet ditt levende

Når det gjelder implementering av iOS UI-design, er det noen få måter å velge mellom: Storyboard, XIB og tilpasset kode .

• Storyboard - Se skjermene og navigasjonen mellom dem, men det er ingen muligheter for å arve en layout fra en kontroller til en annen.

• XIB-er - Vis en skjerm eller en del, lett å arve. Før Xcode 9 var det ikke noe alternativ å bruke topp / bunn layoutguider, mens vi i Xcode 9 kan bruke Trygt område .

• Kode - Det klart mest fleksible alternativet, men gir ikke øyeblikkelig visning.

For storyboards må du dele oppsettet ditt i strømmer, for eksempel LoginFlow.storyboard, SettingsFlow.storyboard eller NewsFeedFlow.storyboard. På den måten vil du holde storyboards lette.

Grupper brukergrensesnittelementer i blokker. Dette forenkler støtte for alle begrensninger. Ikke vær lat og sett de navngitte visningene i orden slik de vises på skjermen fra topp til bunn. Merk at bunnen vises over toppen. Dette vil hjelpe deg med å finne forskjellige visninger raskere.

Se følgende eksempel for grupperte og ikke-grupperte elementer:

Hvis du har flere objekter justert mot venstre / høyre, må du ikke justere dem mot forskyvningskanten. Den beste tilnærmingen er å justere med forrige element eller implementere en spesiell visning ffset med bredderestriksjon. Hvis du trenger å endre forskyvningen på et tidspunkt i fremtiden, vil dette gjøre det litt enklere.

For å bruke farger i IB, kan du lage en palett nederst på Xcode Color Picker.

Merk: Hvis den minste iOS-versjonen av appen din er 11, kan du bruke alternativet 'Navngitte farger' i varekatalogen.

Å ende

Det er. Nå må vi bare sende resultatet til kvalitetskontrollteamet, verifisere at alt er i orden og voilà! Vår perfekte pixel-app er klar.

Målet med denne artikkelen var å gi et enkelt, lineært eksempel på piksel perfekt iOS UI-design, og få de beste resultatene på kortest mulig tid. Samarbeid mellom UI-designere og utviklere er ikke alltid så enkelt og friksjonsfritt, men det er et problem for en annen artikkel.