Lær mer om pikseltetthet i mobilgrensesnittdesign. Tilbake til det grunnleggende: Nedbryting av de forskjellige teknologiene som brukes til skjermer

Det finnes et bredt utvalg av skjermer, men vi ønsker å gi deg noen anbefalinger som kan hjelpe deg å velge riktig skjerm. Kvalitet overført bilde avhenger av skjermoppløsning, pikseltetthet, skjermtype og jevn størrelse. Det er mange faktorer som avgjør om en skjerm er bra eller ikke. Så, det vil nok være nyttig for mange å lese hvilken skjerm som bør velges for en smarttelefon eller nettbrett.

Skjermoppløsning og pikseltetthet:

Når du leser informasjon om en bestemt enhet, er det første du ser om skjermen størrelsen og oppløsningen på skjermen, samt antall piksler per tomme, dvs. pikseltetthet. På grunn av stor mengde Android-enheter, og derfor deres prisklasse, har en lang rekke forskjellige skjermoppløsninger, så vi kan kun se på de mest populære.

Når en spesifikk skjermoppløsning er gitt, inkluderer den vanligvis bredde og høyde. Her er noen av de mest populære skjermoppløsningene:

  • 240 x 320. Denne tillatelsen display brukes oftest i enheter med svært små skjermer, eller i budsjetttelefoner (som holder på å dø ut).
  • 320 x 480. Denne oppløsningen oppnås også oftest av telefoner med små skjermer, vanligvis opptil fire tommer.
  • 480 x 800 (WVGA). For bare noen få år siden var dette oppløsningen som ble brukt i avanserte enheter som Samsung Galaxy S2. Nå er denne oppløsningen typisk for smarttelefoner i middels og budsjettklassen som har en skjerm på mindre enn fem tommer.
  • 960 x 540 (qHD). Tidligere ble denne oppløsningen brukt i avanserte enheter. Og nå har middelklassetelefoner det.
  • 1280 x 720 (HD/720p). I dag er denne skjermoppløsningen typisk for avanserte smarttelefoner. Noen ganger møtes de budsjetttelefoner og nettbrett med samme oppløsning.
  • 1920 x 1080 (Full HD/1080p). Vanligvis brukes så høy oppløsning når du lager moderne TV-er. I år har smarttelefoner/nettbrett med Full HD-skjermer begynt å dukke opp stadig oftere. Imidlertid kan Full HD-skjermen for øyeblikket kun finnes på kraftige smarttelefoner og nettbrett.
  • 2560 x 1600 (WQXGA). Som du sikkert forstår, er dette en skjerm med superhøy oppløsning. Bare de kraftigste enhetene kan støtte det. For eksempel, Nexus-nettbrett 10 fikk akkurat denne skjermoppløsningen.

Så det har nå blitt klart at smarttelefoner er mer Lav kvalitet sett en tilsvarende lav skjermoppløsning, og større skjermer kjennetegnes av en høy skjermoppløsning, selvfølgelig, og prisen i dette tilfellet vil ikke være liten.

Når det kommer til pikseltetthet, er det viktig når det kommer til generell skjermskarphet. For eksempel når du surfer på nettet eller leser e-bøker, seerkomfort avhenger nøyaktig av pikseltettheten, som varierer avhengig av skjermoppløsningen og størrelsen. Hvis skjermen er stor og oppløsningen er veldig lav, vil pikseltettheten være lav.

I dag anses en pikseltetthet på 300ppi som utmerket fordi det er usannsynlig at brukeren vil legge merke til noen feil i bildet eller se en enkelt piksel. Pikseltettheter under 200ppi er typiske for enheter med lav effekt, og skjermkvaliteten er tilsvarende lavere. Derfor er det verdt å velge smarttelefoner og nettbrett med en pikseltetthet i området fra 200 til 300ppi og høyere.

Hva er en LCD-skjerm?

LCD står for flytende krystallskjerm og er den mest populære skjermtypen for mobile enheter. Den er så etterspurt på grunn av den gode bildekvaliteten den leverer og det relativt lave strømforbruket.

TFT-skjermer:

Og dette er den mest populære typen LCD-skjerm, som står for Thin Film Transistor, dvs. tynnfilm transistor. Den inneholder en aktiv matrise, som faktisk styrer transistoren. Og transistoren er på sin side ansvarlig for å "slå på og av" hver piksel. Dette forbedrer reaksjonstiden og gir større bildekontrast. Dessuten kan andre typer LCD-skjermer ikke gjøre dette, men er dyrere og bruker betydelig mer energi.

IPS-skjermer:

Noen avanserte smarttelefoner og nettbrett bruker IPS-skjermer, som er en type TFT-skjerm. IPS-skjermen korrigerer alle manglene som LCD-skjermer har - den er i stand til å gjengi klarere og mer uttrykksfulle farger, samtidig som den gir en bred visningsvinkel. Dette er flott for de brukerne som liker å se filmer i store grupper - uansett hvor en person sitter, vil bildet forbli lyst og klart.

Super LCD-skjermer:

Til tross for at skaperen av de første Super-teknologiene LCD-skjermer er et Samsung-selskap, brukes disse skjermene oftest av HTC. Denne teknologien kan eliminere gjenskinn, mens en slik skjerm bruker en liten mengde batteristrøm, og når den er utendørs, trenger ikke brukeren å anstrenge øynene for å se bildet på skjermen. Super LCD-skjermen gir overlegen utendørs synlighet enn konvensjonelle LCD-skjermer.

Den siste versjonen av Super LCD-skjermen, kalt LCD3, bruker enda mindre strøm enn alle tidligere versjoner. Denne typen visning er allerede mottatt HTC-smarttelefoner Butterfly, HTC Droid DNA, HTC One.

Hva er en OLED-skjerm?

Forkortelsen OLED står for Organic Light-Emitting Diode, og selve OLED-skjermen består av en organisk polymer. Så snart energi er tilgjengelig, lyser polymeren og følgelig slås skjermen på. En OLED-skjerm har mange fordeler fremfor LCD-skjermer fordi den er tynnere, lysere, bruker mindre strøm og har brede visningsvinkler. Dette øker kontrasten og responstiden.

Den mest populære typen OLED-skjermer er AMOLED-skjermer. AMOLED kan dechiffreres som Active Matrix Organic Light-Emitting Diode. Disse skjermene bruker mye mindre strøm enn standard skjermer OLED.

Den største produsenten av AMOLED-skjermer er selvsagt det sørkoreanske selskapet Samsung, som også selger Super AMOLED-skjermer. De fleste smarttelefoner og nettbrett bruker Super AMOLED-skjermer, men ganske mange moderne enheter fungerer på LCD-skjermer.

Samsung installerer noen ganger PenTile-matriser på Forskjellige typer AMOLED-skjermer. Denne bruker to underpiksler, som hver bruker RGBG (Red-Green-Blue-Green)-teknologi for vakker fargegjengivelse, i stedet for standard RGB (Red-Green-Blue)-modellen. Noen kritiserer PenTile-sensoren og sier at den ikke gir skjermen skarpheten den trenger, men de fleste brukere er enige om at den høyere pikseltettheten betyr at det ikke er uskarphet. PenTile-matrise brukes til å øke levetiden til skjermen.

AMOLED vs LCD-skjermer: hvilken er bedre å velge?

Begge disse teknologiene har sine fordeler og ulemper. AMOLED-skjermer er kjent høy kontrast, dypere, mer naturlig sort, men LCD-skjermer har en tendens til å produsere mer realistiske farger. Mens AMOLED-skjermer er lysere, kan LCD-skjermer sees i direkte sollys, og bildet vil bli klarere.

AMOLED-skjermer anses som mer energieffektive, mens LCD-skjermer bruker mindre batteri mens de surfer på nettet. I tillegg er en av de positive aspektene ved AMOLED-skjermer brede visningsvinkler, men LCD-skjermer lar deg lage et ganske høykvalitetsbilde selv ved lav oppløsning, siden de er basert på RGB-teknologi i stedet for PenTile RGBG.

Selvfølgelig, hvis du ønsker å kjøpe budsjett smarttelefon, da vil du neppe finne mange enheter med AMOLED-skjerm. Brukere som leter etter en mellomtonetelefon vil møte den samme situasjonen. Vel, det er enklest å velge en smarttelefon/nettbrett blant avanserte enheter, fordi de har skjermer av høyeste kvalitet og bruker de mest avanserte teknologiene.

Generelt avhenger valget av en enhet med en bestemt skjerm av dine ønsker - hvis du vil at skjermen skal gjengi naturlige svarte farger og skape høy kontrast, så velg AMOLED-skjermer. Hvis du ønsker å få mer naturlige farger og det er viktig for deg at bildet er godt synlig selv når direkte sollys treffer skjermen, så velg flytende krystallskjermer.

Fant du en feil? Velg den og trykk Ctrl+Enter

Når du kjøper en datamaskin, skjer det ofte at skjermen velges ut fra restprinsippet - hvor mye penger som er til overs ved kjøp av systemenheten. Dette gir en viss mening. Ytelsen til datamaskinen påvirkes ikke av skjermens egenskaper. Men du bør forstå at en billig skjerm med lav maksimal oppløsning, uskarpt bilde og dårlig fargegjengivelse kan oppheve fordelene med et topp-end skjermkort. Et flimrende bakgrunnsbelysning vil føre til rask tretthet og kan påvirke synet negativt. Så sparing på en skjerm kan slå tilbake, spesielt hvis du planlegger å bruke datamaskinen ofte og mye. Derfor er det bedre å ta valget av en skjerm ansvarlig, velge den i samsvar med oppgavene.


Den viktigste innflytelsen på prisen på en skjerm er dens diagonale størrelse. Men selv blant skjermer av samme størrelse kan prisene variere med en størrelsesorden avhengig av andre egenskaper. Det skal forstås at mange skjermegenskaper er viktige for noen brukere og helt uinteressante for andre. Å vite hvilke egenskaper som kreves for å utføre spesifikke oppgaver, kan du lage riktig valg, velge en god skjerm til den beste prisen.

Avhengig av formålet er det vanlig å skille fire grupper fra billig til dyre modeller lignende størrelser: kontor, multimedia, gaming og profesjonell.


Kontorskjermer er laget for å fungere med kontorprogrammer. Kravene til slike skjermer er minimale og er rettet mot å redusere tretthet under langvarig arbeid: tilstrekkelig lysstyrke, kontrast og høykvalitets bakgrunnsbelysning.


For multimediamonitorer kommer egenskaper som gir et imponerende "bilde" frem. God fargegjengivelse, stor diagonal og Ultrawide-format gjør at disse skjermene skiller seg ut fra resten.


Spillskjermer betyr skjermer med høy maksimal oppløsning, høy frekvens oppdateringer og lave responstider. Her kan fargegjengivelsen ofres for høykvalitets gjengivelse av dynamiske scener. Spillskjermer er vanligvis widescreen. Ultrabrede og buede skjermer markedsføres også ofte som spillskjermer.


Skjermer profesjonelle designere, må fotografer og kunstnere sørge for maksimal fargedybde og høykvalitets fargegjengivelse. En høy maksimal oppløsning, en liten pikselstørrelse (dette vil sikre bildets klarhet) og avanserte kalibreringsinnstillinger er også ønskelig.

Overvåk egenskaper.


Størrelse (diagonal) monitor er dens hovedkarakteristikk, som først og fremst bestemmer prisen og attraktiviteten for brukeren. Størrelsen måles diagonalt. Jo bredere skjermen er når det gjelder sideforhold, desto mindre er det synlige området ved samme diagonal.
Skjermdiagonalen varierer fra 18 tommer til 55 og oppover. Generelt, jo større diagonal, jo bedre: mer informasjon får plass på skjermen, en større effekt av tilstedeværelse i spill og når du ser på videoer.
Dessverre, når diagonalen øker, øker prisen eksponentielt. Derfor i I det siste Arbeidsstasjoner med to eller flere skjermer blir stadig mer populære: mange moderne skjermkort lar deg koble til flere skjermer, noe som lar deg øke skrivebordsområdet betydelig til en minimal kostnad.


Maksimal oppløsning.
Skjermoppløsning er antall piksler – prikker som utgjør bildet i bredde og høyde. Jo høyere maksimal oppløsning, jo skarpere blir bildet og jo mer informasjon som oppfattes av øyet plasseres på skjermen.

Det bør huskes at den maksimale oppløsningen for hver skjerm er optimal - ved denne oppløsningen tilsvarer hver piksel ett flytende krystallelement. Du bør ikke arbeide med skjermen med en oppløsning som er lavere enn maksimum - dette vil enten redusere det synlige området (det dannes en svart ramme), eller hver piksel vil bestå av flere LCD-elementer, og det kan vise seg at noen piksler blir større enn andre (bildet vil begynne å bli merkbart forvrengt) .

Maksimal oppløsning skal passe med størrelsen på skjermen: hvis det ikke er nok, blir bildene kornete, men hvis oppløsningen er for høy, blir tekst og objekter for små. For å finne ut om maksimal oppløsning tilsvarer størrelsen, bruk verdien ppi - pikseltetthet. PPI (Pixels Per Inc - "pixels per inch") er lik antall piksler per tomme på skjermen. Tekst og objekter til moderne operativsystemer er konfigurert for skjermer med 96 ppi, derfor, for å opprettholde klarheten til tekst og små elementer, er det ønskelig at ppi på skjermen er minst 90-100. Hvis skjermens DPI er mye mindre enn 90 (75 eller mindre), vil bildene virke kornete. Dette er ikke så viktig for å se på videoer og noen spill, men for arbeid vil en slik skjerm ikke lenger være komfortabel.

Maksimal skjermoppløsning må støttes av skjermkortet.
Når du bytter ut skjermen med en større, bør du også huske at å øke oppløsningen også øker belastningen på skjermkortet.


Aspektforhold (format) refererer til forholdet mellom skjermbredde og høyde. Gamle skjermer hadde et forhold på 5:4 og 4:3, disse er fortsatt på salg i dag og brukes vanligvis til kontoroppgaver– det er mest praktisk å jobbe med dokumenter i "papir"-formater. De fleste moderne skjermer har et sideforhold på 16:9 (bredformat). Dette formatet dekker best en persons synsfelt. Skjermer i ultrabredformat (21:9, Ultrawide) anbefales for spilling og videoer. Selv om kantene på skjermen på slike skjermer faller ut av fokus, er de synlige i perifert syn, noe som øker effekten av tilstedeværelse. på ultrabrede skjermer er fargeforvrengning i kantene av skjermen mer merkbar, spesielt hvis skjermen er rett foran ansiktet ditt et lite stykke. Buet skjerm lar deg redusere fargeforvrengning i kantene, i tillegg forsterker en slik skjerm effekten av tilstedeværelse ytterligere.

Teknologi og type matriseproduksjon.
Matrisen er bunnen av skjermen - en pakke med gjennomsiktige plater, mellom lagene som det er flytende krystaller. I dag er det tre typer LCD-matriser:


1. TN (TN+film)– den enkleste teknologien for produksjon av LCD-matriser. Fordelene er kort responstid (den korteste blant moderne matriser) og lave kostnader. Men det er også mange ulemper: liten visningsvinkel, dårlig kontrast og fargegjengivelse. Høyeste hastighet respons gjorde TN-matriser populære blant eSport-spillere, men for profesjonelt arbeid Slike matriser er ikke egnet for grafikk og videovisning.


2. IPS (SFT)/PLS er fri for ulempene med TN: de gir full dekning av sRGB-fargerommet, og derfor bedre fargegjengivelse. De har høy kontrast og gode visningsvinkler: opptil 180º. IPS brukes oftest i profesjonelle skjermer, men relativt nylig begynte de å invadere det rimelige segmentet, og vant en god del av markedet fra TN.

Ulempene med IPS er den relativt høye prisen, stor tid respons og glødeeffekten som er karakteristisk for denne typen - gløden i hjørnene på skjermen, spesielt merkbar i en vinkel og i et mørkt bilde.
I dag forener IPS en hel familie av teknologier som er litt forskjellige i egenskaper.De vanligste teknologiene er:
- AD-PLS – forbedret PLS-matrise (analog med IPS fra Samsung). Den skiller seg fra vanlig PLS i sin kortere responstid;
- AH-IPS - bedre fargegjengivelse og lysstyrke, redusert energiforbruk;
- AHVA – AU Optronics-teknologi som gir høy visningsvinkel
- E-IPS - økt piksellysoverføring tillater bruk av mindre kraftige bakgrunnsbelysningslamper, noe som reduserer prisen og reduserer energiforbruket.
- IPS-ADS – økt visningsvinkel og redusert bildeforvrengning på grunn av det elektriske feltet som genereres av elektrodene i kantene av skjermen.


3. V.A. når det gjelder egenskaper og kostnad ligger de mellom TN- og IPS-typer. De har god fargegjengivelse, bedre kontrast enn IPS, gjennomsnittlig visningsvinkler og responstid.
Det er også flere teknologier for å produsere matriser av denne typen:
MVA(PVA) – forbedret fargegjengivelse, dyp svart farge.
AMVA, AMVA+ - videre utvikling MVA-teknologi, med forbedret fargegjengivelse og redusert responstid.
WVA+ - utvikling av MVA-teknologi fra HP, som gir en bred visningsvinkel - opptil 178º
Pixel responstid.
På grunn av designfunksjonene til LCD-matriser, skjer fargeendringen til hver piksel når et kontrollsignal påføres den ganske sakte (i henhold til standarder for elektroniske enheter) og måles i millisekunder. De første LCD-matrisene hadde en responstid på opptil hundrevis av millisekunder; de var ikke egnet for visning av dynamiske scener i det hele tatt, og til og med et langt spor forble bak musepekeren når de beveget seg. Moderne LCD-matriser har kortere responstid, men hvis denne indikatoren er mer enn 15 ms, kan bildet være "uskarpt" når du spiller av svært dynamiske scener. Derfor er denne parameteren viktig for fans av dynamiske spill og spesielt eSport-spillere. Hvor viktig?

For eksempel kan vi vurdere tilfellet når et lite "objekt" krysser hele skjermen på 0,1 sekunder. La oss si at bildefrekvensen i spillet er 30 FPS, så vil objektet motta 3 bilder under flyturen, hver vil forbli på skjermen i 33 ms. Hvis responstiden er mer enn 16 ms, vil det i noen tid være to objekter på skjermen samtidig (den ene "forsvinner" fra forrige ramme, den andre er "tegnet"). Så for vanlige spillere betyr dette kanskje ikke noe, men for eSport-spillere blir responstiden nesten hovedkjennetegn Observere.

Overvåk lysstyrke, målt i cd/m2, bestemmer lysstrømmen som sendes ut av en helt hvit skjerm ved 100 % bakgrunnslysstyrke. Denne indikatoren kan være viktig hvis skjermen er installert i et godt opplyst rom, i et rom med store panoramavinduer, eller utendørs - i dette tilfellet vil en høyere lysstyrke være nødvendig - fra 300 cd/m2. I andre tilfeller vil en lysstyrke på 200-300 cd/m2 være tilstrekkelig.

Skjermkontrast bestemmes av forholdet mellom lysstyrken til svarte og hvite farger som vises av skjermen. De fleste moderne skjermer har et kontrastforhold på 1000:1 og dette er nok for både arbeid og spill. Også i egenskapene er det indikatorer for dynamisk kontrast, beskrevet som forskjellen mellom hvit ved maksimal lysstyrke og svart på minimum, men det er ingen enkelt metode for å måle dynamisk kontrast, så du bør ikke stole på denne indikatoren.


Innsynsvinkel
På grunn av utformingen av LCD-matrisen, kan rene farger og maksimal lysstyrke bare sees når du ser på skjermen i en vinkel på 90º. Hvis du ser på skjermen fra siden, reduseres lysstyrken på pikslene. For å gjøre vondt verre, reduseres lysstyrken til piksler med forskjellige farger ujevnt, slik at farger begynner å forvrenges når de ses fra siden. En smal visningsvinkel var opprinnelig en av de verste ulempene ved LCD-skjermer, så skjermprodusenter utviklet (og utvikler) stadig nye teknologier for å øke visningsvinklene. Til dags dato har de klart å oppnå merkbare resultater - visningsvinklene til moderne matriser har blitt brakt til det maksimale mulig.

Men ikke alt er så perfekt - en visningsvinkel på for eksempel 176º betyr bare at innenfor 176º-vinkelen vil ikke skjermkontrasten falle under 1:10. Endringen i kontrast vil fortsatt være ganske merkbar og kan forårsake ubehag selv om betrakteren er innenfor synsvinkelen. Dessuten, forskjellige skjermer(med de samme synsvinklene) sett fra siden kan kvalitativt variere. Hvis forholdene for bruk av skjermen tyder på at du ofte må se på den fra siden (for eksempel en skjerm på veggen, en multimediaskjerm, en ekstra skjerm), bør du ikke bare bli veiledet av den oppgitte visningen vinkel, siden betraktningsvinkelen ikke sier noe om dynamikken til kontrastendringer innenfor denne vinkelen. Denne indikatoren er ikke angitt av produsenter, så den eneste måten å evaluere den på er å se på skjermen "live".

IPS-matriser ser best ut når de ses fra siden - endringer i kontrast som er synlig for øyet begynner i de fleste modeller først når de avviker fra vinkelrett med 45-50 grader, noe som gir en 90-100º synsvinkel uten merkbar reduksjon i kontrast. Det verste er TN: til tross for de oppgitte synsvinklene på mer enn 170º, blir endringer i kontrasten noen ganger merkbare når man avviker fra perpendikulæren med så mye som 20º.

Maksimal oppdateringsfrekvens
Skjermoppdateringsfrekvensen viser hvor raskt bildet på skjermen oppdateres. De fleste moderne skjermer har en oppdateringsfrekvens på 60 Hz, og dette er nok til komfortabelt arbeid. Det er en utdatert tro på at denne frekvensen ikke er nok. PC-brukere som brukte CRT-skjermer husker at det var ubehagelig å jobbe med dem ved 60 Hz – skjermen flimret merkbart. Men utformingen av LCD-skjermer er fundamentalt forskjellig fra utformingen av CRT-skjermer. LCD-skjermer flimrer ikke med noen oppdateringsfrekvens (eller rettere sagt, noen ganger flimrer de, men dette har ingenting med oppdateringsfrekvensen å gjøre). Tregheten til menneskelig syn er i gjennomsnitt 27,5 ms, med et minimum på 20 ms, og en oppdateringsfrekvens på 50 Hz er tilstrekkelig for jevn bevegelse på skjermen. Noen spillmonitorer støtter frekvenser opp til 240 Hz, med påstanden om at dette vil sikre maksimal jevnhet og detalj av bevegelser. For at denne uttalelsen skal gi mening, må skjermkortet ikke bare støtte denne frekvensen, men også gi riktig FPS. For høye oppløsninger vil et sjeldent skjermkort kunne produsere de samme 240 FPS selv på eldre spill.


Brukerstøtte dynamisk oppdatering skjermen kan være mer nyttig for å jevne ut bevegelser i spill. Essensen av dynamisk oppdatering er å "justere" skjermens oppdateringsfrekvens til FPS levert av skjermkortet for å unngå en situasjon der øyeblikket skjermen blir oppdatert faller på det tidspunktet neste bilde av spillet vises og bare halvparten av den nye rammen tegnes på skjermen. Selv om dette bildet bare varer en ubetydelig tid, kan effekten være merkbar i scener med plutselige endringer i lysstyrken. AMDs FreeSync og Nvidias G-Sync-teknologier forhindrer slike situasjoner. Forskjellene mellom teknologiene for brukeren er uttrykt i minimum støttet FPS: for G-Sync er det 30 FPS, og for FreeSync er det 9.


Skjermbelegg kan være blank eller matt (antirefleks). Den blanke overflaten, som rent glass, reflekterer lyskilder, og i sterk rombelysning gjenstander rundt monitoren og operatøren selv. Det er trodd at blanke skjermer gir mer mettede farger, men det er behagelig å jobbe med dem kun i justert belysning. Matte overflater er fri for slike ulemper - refleksjoner av gjenstander er ikke synlige på dem, og til og med gjenskinn fra sterke lyskilder holdes på et minimum.
Fargeskala viser hvor fullstendig skjermen kan vise alle fargene fra et bestemt fargerom. Farge rom sRGB– standardfargerommet som de fleste husholdningsfoto- og videoenheter fungerer i. Hvis skjermen ikke gir full sRGB-dekning, kan den miste noen farger som andre enheter viser med full sRGB-dekning. Den gjennomsnittlige brukeren vil sannsynligvis ikke legge merke til dette, men designere og fotografer bør ikke velge denne modellen.

Farge rom Adobe RGB litt bredere enn standard på grunn av rike nyanser av blått, grønt og gult. De fleste forbrukerenheter vil ikke være i stand til å reprodusere disse tilleggsfargene, men mange faller inn i CMYK-området og kan skrives ut. Derfor trengs skjermer med full Adobe RGB-dekning av profesjonelle skrivere og de fotografene som jobber for trykte publikasjoner.

Touch-skjerm i dag oppfattes det ikke lenger som en kuriositet, men det er ikke noe spesielt poeng i å kjøpe en skjerm med berøringsskjerm - nøyaktigheten av markørposisjonering med en finger er mye lavere enn med en mus, pluss fingeravtrykk på overflaten av skjermen. ikke farge det i det hele tatt. Berøringsskjermer brukes vanligvis kun til datamaskiner for spesielle formål - for eksempel installert i offentlige områder for å informere besøkende eller for besøkende å jobbe med spesialisert programvare, igjen på offentlige steder.


Noen ganger krever forholdene for bruk av en skjerm muligheten til å endre posisjonen innenfor et bredt område - roter den på et stativ, hev og senk den, og endre tilt. Du kan kjøpe en separat brakett, eller du kan velge en skjerm med tilhørende stativ - høydejustering, tilt og dreining, med en 90º sving - portrettmodus, som er praktisk når du arbeider med smale og lange sider.

Hvis muligheten for stativ ikke er nok, og du må feste skjermen til en brakett, så er de fleste skjermer utstyrt med VESA-feste, du trenger bare å velge passende størrelse for braketten.

Viktige egenskaper ved skjermer er tilstedeværelsen av visse kontakter. Det kan bli videokontakter:


- VGA(D-SUB, DB15) – en utdatert kontakt for overføring av et analogt RGB-signal. For øyeblikket er støtte for VGA-standarden avviklet; på moderne skjermer er denne kontakten installert for kompatibilitet med eldre skjermkort. Bør brukes som siste utvei - dersom det ikke er mulighet for tilkobling via digital standard. Maksimal oppløsning når den kobles til via denne kontakten vil være 2048x1536 piksler ved en frekvens på 85 Hz.


- DVI(DVI-D) er en mer moderne kontakt som brukes til å overføre videoinformasjon i digital form. Maksimal tillatt oppløsning ved tilkobling via denne kontakten er 2560×1600 ved 60 Hz in Dobbel lenke. Hvis skjermoppløsningen er større enn 1920x1080, må skjermkortet være utstyrt med en DVI-D Dual Link-kontakt for å koble den til via denne kontakten.


- HDMI– den vanligste kontakten i dag for overføring av høyoppløselig digital videodata. Den siste utgaven av HDMI støtter oppløsninger på opptil 10K ved 120 Hz, til tross for at slike skjermer ennå ikke finnes i masseproduksjon.


- Displayport(mini Displayport) – en analog av HDMI, designet spesielt for data utstyr. Den siste utgaven støtter en maksimal oppløsning på 8K (7680 × 4320) ved 60 Hz.


- Lyn- Apple-grensesnitt. Thunderbolt versjon 1 og 2 bruker sin egen kontakt (også kalt Thunderbolt), Thunderbolt versjon 3 bruker en kontakt USB Type-C. Thunderbolt versjon 2 støtter oppløsninger på opptil 4K (3840 × 2160), versjon 3 - opptil 5K (5120 × 2880). Finnes noen ganger i utstyr fra andre merker.

Skjermen kan også ha ekstra kontakter:
- 3.5 hodetelefonkontakt: HDMI- og Displayport-grensesnitt tillater lydoverføring, så hodetelefoner kan ikke kobles til en datamaskin, men til en skjerm.

USB – noen produsenter bygger den inn i skjermen USB-hub


Innebygd akustisk system kan spare plass på skrivebordet og bli kvitt unødvendige ledninger– lydoverføring til den skjer også via HDMI eller Displayport. Egnet for enkel stemmeskuespill for lite krevende brukere.

Overvåk alternativer

La oss starte med selve budsjettsegmentet. Hvis du er en upretensiøs bruker, så kjøp den rimeligste 18-21" skjermen, som er ganske egnet for å jobbe med kontorprogrammer.

Kvaliteten på matrisen og synsvinklene til slike modeller vil ikke være så bra, men i det minste kompenseres alt dette av tilgjengelighet.

Mest beste alternativet for hjemmet er dette 23-25-tommers modeller med FullHD-oppløsning. Ikke for stor og ikke for liten - den ultimate balansen mellom klarhet og kostnad.

Ikke krevende for PC-ens grafikkort, slik tilfellet er med 2K- eller 4K-modeller, er pikselstørrelsen akseptabel. Bildet, fontene og ikonene vil ikke være så små. Velg type matrise, design, sett med koblinger osv. avhengig av dine personlige preferanser og lommebok. Hvis du trenger maksimal bildekvalitet, vil det være IPS, VA og andre typer matriser enn TN. TN-er i seg selv er noe billigere og oftest raskere, dvs. bedre egnet for dynamisk innhold og spill.

For esteter eller elskere av designløsninger tilbys skjermer med "rammeløse" hus. Dette påvirker ikke funksjonaliteten, men slike elegante skjermer ser ganske fine ut på bordet.

For bare et par år siden virket en pikseltetthet på 500 ppi utrolig. Dessuten, for bare et år siden var smarttelefoner med QHD-skjerm svært sjeldne. Tiden står imidlertid ikke stille, og enheter med en oppløsning på 1440 x 2560 piksler fyller gradvis markedet. Så la oss se hvilken smarttelefon en bruker kan velge hvis han foretrekker skjermer av høy kvalitet.

La oss først finne ut hvorfor skjermer med høy pikseltetthet er så bra. Som våre kolleger fra telefonarena, jo høyere tetthet, jo mer synlige små fonter eller andre små objekter er på skjermen. Også hvis du er så heldig å ha en smarttelefon med stort beløp innebygd minne kan du se filmer i maksimal oppløsning uten å forvrenge kvaliteten.


Ultraklare skjermer har imidlertid også sine ulemper på grunn av det høye strømforbruket. Det er også verdt å merke seg at ved slike oppløsninger kan ikke hver person skille individuelle piksler på skjermen. Men hvis du fortsatt bestemmer deg for å kjøpe deg en smarttelefon med QHD-oppløsning, kan vi tilby deg flere enheter av denne klassen.

Prime

Selv om den første versjonen Samsung smarttelefon Galaxy S5 hadde en skjerm med en oppløsning på 1920 x 1080 piksler, etter en tid og installerte i tillegg til en kraftigere prosessor en 5,1-tommers QHD-skjerm. Dermed var pikseltettheten 576 ppi. I tillegg til en skjerm av høy kvalitet har smarttelefonen en Snapdragon 805-prosessor med Adreno 420-grafikk, og 3 gigabyte RAM.

LG G3

Et annet koreansk selskap LG installerte også en skjerm med en oppløsning på 2560 x 1440 piksler. Skjermdiagonalen i G3 er imidlertid litt større enn i Galaxy S5 Prime og er på 5,5 tommer, noe som betyr at pikseltettheten har nådd 538 ppi. Dermed tar G3 andreplassen på vår ranking.

Smarttelefonen deler andreplassen med LG G3. Find 7 har også en 5,5-tommers diagonal matrise med en oppløsning på 2560 x 1440 piksler. I tillegg er enheten fra Kina utstyrt med en Snapdragon 801-prosessor og et 13 megapikslers kamera.

Den siste i vår i dag listen går en av de nyeste smarttelefonene fra Samsung. Vi snakker om, som fikk en skjerm med QHD-oppløsning og en diagonal på 5,7 tommer. Pikseltettheten var dermed 515 ppi. I tillegg til en stor skjerm av høy kvalitet, har Galaxy Note 4 en kraftig Snapdragon 805-prosessor, et 16 megapikslers kamera og en multifunksjonell S-Pen-penn.


I denne listen sammenlignet vi selvfølgelig pikseltetthetene til flere flaggskipenheter, men til tross for dette har hver av smarttelefonene vi har vurdert en skjerm av høy kvalitet som vil tilfredsstille de fleste brukere.

Jeg vet ikke alt, så hvis du tror jeg tar feil et sted, eller du trenger å avklare noe, eller du har forslag eller spørsmål for å forbedre denne veiledningen, send en e-post (på engelsk) til [e-postbeskyttet]. Du kan også finne meg Twitter, eller Facebook.

Hva er DPI og PPI

DPI eller (Dots Per Inch) er et mål på den romlige tettheten til prikker som opprinnelig ble brukt i utskrift. Dette er antallet blekkdråper skriveren kan passe inn i én tomme. En lavere DPI resulterer i et mindre detaljert bilde.

Dette konseptet brukes på dataskjermer kalt PPI (piksler per tomme). Samme prinsipp: telle antall piksler skjermen kan vise per tomme. Navnet DPI brukes også i skjermer.

Windows-datamaskiner har en standard PPI på 96. Mac bruker 72, selv om denne verdien ikke har vært nøyaktig siden 80-tallet. Vanlige PC-er uten netthinne (også Mac-er) vil ha mellom 72 PPI minimum og rundt 120 maksimum. Design med en PPI mellom 72 og 120 vil sikre at arbeidet ditt har omtrent samme sideforhold overalt.

Her er et brukt eksempel: en 27-tommers Mac Cinema-skjerm har 109 PPI, som betyr at den viser 109 piksler per skjermtommer. Bredde med ramme er 25,7 tommer (65 cm). Bredden på den faktiske skjermen er omtrent 23,5 tommer, så 23,5 * 109 ~ 2560, noe som gjør den fysiske skjermoppløsningen 2560x1440px. *Jeg vet at 23,5 * 109 ikke er nøyaktig lik 2560. Det er faktisk +23,486238532 tommer. Det ville vært mer presist enn piksler per centimeter, men du skjønner poenget mitt.

Innvirkning på designet ditt

La oss si at du tegner en blå firkant på 109 * 109 px på skjermen spesifisert ovenfor. Denne firkanten vil ha en fysisk skjermstørrelse på 1*1 tommer. Men hvis brukeren din har en 72 PPI-skjerm, vil den blå firkanten se fysisk større ut siden ved 72 PPI vil skjermen trenge omtrent en og en halv tomme for å vise din 109px blå firkant. Se nedenfor for en simulering av effekten.

Huske: Farge- og oppløsningsforskjeller til side, husk at alle vil se designet ditt annerledes. Du bør sikte på det beste kompromisset og bygge for den største prosentandelen av brukerne. Ikke anta at brukeren har samme skjerm som deg.

Skjermoppløsning (og opprinnelig oppløsning)

Skjermoppløsning kan ha stor innvirkning på hvordan en bruker oppfatter designet ditt. Heldigvis, siden LCD-skjermer har erstattet CRT-er, har brukere nå vanligvis opprinnelige skjermoppløsninger med mye for pengene skjermstørrelse til PPI.

Oppløsning bestemmer antall piksler som vises på skjermen (for eksempel: 2560 * 1440 px for en 27-tommers kinoskjerm) 2560 bredde, 1440 høyde. Nå, selvfølgelig, når du vet hva PPI står for, innser du at det ikke kan være en måleenhet for fysisk størrelse. Du kan ha en 2560x1440 skjerm på størrelse med veggen din og en annen på størrelse med hodet.

Moderne LCD-skjermer har en standardoppløsning, som også er den opprinnelige som vil behandle eksakt antall piksler som skjermen er i stand til å vise. Eldre CRT-skjermer er litt annerledes, men siden de kan betraktes som døde, la oss ikke gå i detalj (og ikke påvirke min delvise forståelse av gode gamle TV-er).

La oss ta vår 27-tommers Cinema-skjerm, som kan vise 109 PPI ved opprinnelig oppløsning 2560 * 1440 piksler. Hvis du reduserer oppløsningen, vil elementene virke større. Tross alt har du bare 23,5 horisontale tommer å fylle med praktisk talt færre piksler.

Jeg sa praktisk talt, for i dette tilfellet vil det være slik. Skjermen har en oppløsning på 2560 * 1440 px. Hvis oppløsningen reduseres, vises pikslene fortsatt ved 109 PPI. For å fylle den plassen og hele skjermen, vil operativsystemet ditt strekke alt, din GPU/CPU vil ta alle pikslene og beregne dem med et nytt forhold.

Hvis du vil lage en oppløsning på 1280 * 720 (halve bredden, halve høyden av den forrige) på 27 tommer, må GPUen din simulere to ganger pikselstørrelsen for å fylle skjermen. Hva blir resultatet? Så - uskarphet. Selv om å dele med to sideforhold vil se ganske bra ut på grunn av den enkle divisoren, hvis du vil ha 1/3 eller 3/4 av sideforholdet, vil du ende opp med tall med desimaler og du KAN IKKE dele pikselen. Se eksempel nedenfor.

Merk: venstre: gjengivelse av et OSX-vindu i naturlig oppløsning (1400*900px): høyre: gjengivelse av et OSX-vindu i en simulert lavere oppløsning (1024*640px netthinnen).

La oss se på et annet eksempel nedenfor. La oss ta en linje på 1 piksel på en skjerm med naturlig oppløsning. La oss nå gjøre oppløsningen 50 % mindre. For å fylle skjermen må CPU generere 150 % av bildet ved å multiplisere alt med 1,5, 1 * 1,5 = 1,5, men du kan ikke halvere pikslene. Det den vil gjøre er at den fyller de omkringliggende pikslene med en brøkdel av fargen, og skaper en uskarphet.

Merk: til venstre er en 1 piksel tykk linje ved en hvilken som helst standardoppløsning, til høyre er en 1 piksel tykk linje med 150 % lavere oppløsning.

Så hvis du har en Retina Macbook Pro og ønsker å endre oppløsningen, vil den vise vinduet nedenfor som forteller deg (i skjermbildet nedenfor) hvordan den oppløsningen vil "se ut" 1280*800px. Den bruker brukerens opplevelse av skjermoppløsning for å uttrykke størrelsesforholdet.

Dette er et veldig subjektivt syn fordi det bruker pikseloppløsning som en enhet av fysisk størrelse, men det er sant, i det minste fra deres synspunkt.

Huske: Hvis du alltid vil se designpikselen din (eller et hvilket som helst design) perfekt, bruk aldri en ikke-native oppløsning for skjermen. Ja, du kan være mer komfortabel med et lavere forhold, men når det kommer til piksler, vil du være så presis som mulig. Dessverre bruker noen mennesker oppløsning som en måte å bedre se hva som skjer på skjermen (spesielt på skrivebordet) når de skal bruke tilgjengelighetsinnstillinger. Dette vil fortsatt få designet ditt til å se dårlig ut, men fra dette synspunktet ser brukerne etter forbedret lesbarhet, ikke glans.

Hva er 4k


Du har kanskje hørt mye om begrepet 4K i det siste (i hvert fall da jeg skrev om det tidlig i 2014), 4k er et ganske trendy tema. For å forstå hva det er, la oss først forstå hva "HD" betyr.

Vær forsiktig, dette er en grov overforenkling. Jeg vil bare snakke om de vanligste oppløsningene. Det finnes forskjellige kategorier av HD. Begrepet HD gjelder for enhver oppløsning fra 1280x720px eller 720p for horisontale linjer ved 720 piksler. Noen kan også kalle denne oppløsningen SD (standarddefinisjon).

Begrepet Full HD gjelder for 1920x1080px-skjermer. De fleste avanserte TV-er og telefoner (Galaxy SIV, HTC One, Sony Xperia Z, Nexus5) bruker denne oppløsningen.

4K starter på 3840x2160 piksler. Den kalles også Quad HD og kan kalles UHD fra Ultra HD. Enkelt sagt, på en 4K-skjerm kan du pakke 4 1080p, når det gjelder antall piksler. En annen 4K-oppløsning er 4096x2160. Den er litt større og brukes til projektorer og profesjonelle kameraer.

Hva skjer hvis jeg kobler en 4K-skjerm til datamaskinen min


Moderne operativsystemer skalerer ikke 4K, noe som betyr at hvis du kobler en 4K-skjerm til en Chromebook eller MacBook, vil den ta aktivaene med den høyeste DPI, i dette tilfellet 200 % eller @2x (dobbelt så stor) og vise dem på normalt forhold. Dette vil få alt til å se bra ut, men lite.

Hypotetisk eksempel: Hvis du kobler en 12" 4K-skjerm til en datamaskin med en 12" skjerm med høy oppløsning (2x), vil alt se halvparten av størrelsen ut.

Huske:

  • 4k er 4 ganger Full HD;
  • Hvis operativsystemet du bruker fungerer med 4K, men ikke skalerer det opp, betyr det at det ikke er visse grafikkelementer i 4K ennå;
  • Til dags dato bruker ingen telefoner eller nettbrett 4K.

Overvåk Hertz


Her tar vi en liten pause fra PPI og skjermoppløsning. Du har kanskje sett at ved siden av skjermoppløsningsinnstillingene er det en verdi for skjermens Hz. Det har ingenting med PPI å gjøre, men i tilfelle du lurte, er en skjerms Hertz - eller oppdateringsfrekvens - en hastighetsenhet som skjermen vil vise et fast bilde eller bilde per sekund med. En 60Hz-skjerm vil kunne vise 60 bilder per sekund. Monitor 120 Hz - 120 bilder per sekund, etc.

I sammenheng med et brukergrensesnitt vil Hertz(Hz)-verdien avgjøre hvor jevn og detaljert animasjonen din vil se ut. De fleste skjermer kjører på 60Hz. Vær oppmerksom på at antall bilder som vises per sekund også avhenger av enhetens prosesserings- og grafikkkraft. Å koble en 120Hz-skjerm til en Atari 2600 ville være helt ubrukelig.

For bedre forståelse, ta en titt på eksemplet nedenfor. T-Rex går fra punkt A til punkt B med like like og raske trinn på en 60Hz og 120Hz skjerm. En 60fps-skjerm kan vise 9 bilder i løpet av en animasjon, mens en 120fps-skjerm kan vise logisk dobbelt så mange bilder på samme tid. Animasjoner vil se jevnere ut på en 120Hz-skjerm.

Huske: Noen mennesker kan si at det menneskelige øyet ikke kan se mer enn 60 bilder per sekund. Det er ikke riktig. Ikke lytt og gå bort og le hysterisk.

Hva er en retina-skjerm

Apple introduserte begrepet "Retina"-skjerm for utgivelse iPhone-smarttelefoner 4. Det kalles Retina fordi PPI på enheten var så høy at det sannsynligvis ville være umulig for en menneskelig netthinne å se individuelle piksler på skjermen.

Dette utsagnet gjelder for skjermstørrelsene til utvalget av enheter den brukes i, men mens skjermene blir bedre og bedre, er øynene våre nå trent nok til å oppfatte piksler - spesielt for avrundede elementer brukergrensesnitt.

Teknisk sett viser de dobbelt så mange piksler i høyde og bredde i samme fysiske størrelse.

IPhone 3G/S hadde en diagonal på 3,5 tommer og en oppløsning på 480 * 320px og 163PPI.
iPhone 4/S hadde en diagonal på 3,5 tommer og en oppløsning på 960 * 640px og 326ppi.

BOM! Nøyaktig to ganger. Enkel multiplikator. Så i stedet for å være mindre, ser elementer på skjermen dobbelt så visuelt skarpere ut fordi de har dobbelt så mange piksler og nøyaktig det samme fysiske dimensjoner. En normal piksel er lik 4 retinapiksler.

Tenk på eksemplet nedenfor for direkte bruk i et komplekst design.

Merknad om bildet: vanskelig å imitere annen kvalitet bilder fra to enheter til den tredje enheten, det vil si den du ser på akkurat nå. Bildekvaliteten vil se dobbelt så god og skarpere ut musikkspiller på netthinnen, til og med opptar samme fysiske plass. Hvis du vil sjekke det ut selv, brukte jeg en av mine gratis programmer, kan du laste ned kildekoden.

Begrepet "Retina"-skjerm eies av Apple, så andre selskaper vil bruke "HI-DPI" eller "Super power pixel maximum sp33d display" (jeg er i ferd med å varemerke sistnevnte) eller ingenting av det i det hele tatt. Alt du trenger å gjøre er å lese enhetsspesifikasjonene og finne ut hva DPI og skjermstørrelse er (hvor morsomt).

Huske: Apple-produkter er en fin måte å bli kjent med DPI-konverteringer og forstå forskjellene mellom oppløsning, PPI og fysisk størrelsesforhold, fordi du bare trenger å bekymre deg for én multiplikator.

Hva er en multiplikator

Når det gjelder å konvertere designet for alle mulige PPI-er, vil multiplikatoren være din matematiske redningsmann. Hvis du kjenner multiplikatoren, trenger du ikke lenger å bekymre deg for de detaljerte egenskapene til enheten.

La oss ta vårt eksempel på iPhone 3G og 4. Du har dobbelt så mange piksler i samme fysiske størrelse. Derfor er multiplikatoren din 2. Dette betyr at for å gjøre grafikkelementene dine kompatible med 4G-oppløsning, må du ganske enkelt gange størrelsen på grafikkelementene dine med 2 - og det er det.

La oss si at du lager en 44*44px-knapp, som er det anbefalte iOS-berøringsmålet (jeg skal snakke om dette senere). La oss kalle det det typiske knappennavnet "JIM".

For å gjøre JIM godt på iPhone 4, må du lage en versjon som er dobbelt så stor. Det er det vi gjør nedenfor.

Merk: venstre - 2px avrundede hjørner 16px skriftstørrelse, høyre 4px avrundede hjørner 32px skriftstørrelse.

Ganske simpelt. JIM har nå en versjon av Jim.png for normal PPI (IPhone 3) og en versjon [e-postbeskyttet] for 200 % PPI (iPhone 4).

Nå spør du: «Men vent! Jeg er sikker på at det er andre multiplikatorer enn bare to. Ja, det er det, og det er her det blir et mareritt. Ok, kanskje ikke et mareritt, men jeg er sikker på at du heller vil bruke dagen på å stryke sokkene dine enn å håndtere flere multiplikatorer. Heldigvis er det ikke så skummelt som du tror, ​​vi kommer til det senere.

La oss snakke om enheter først, for nå trenger du en annen enhet enn pikselen for å beskrive multi-DPI-designene dine. Det er da det er tid for DP og PT.

Huske: For hvert design du jobber med må du kjenne multiplikatoren. Multiplikatorer holder denne verdenen av kaos av skjermstørrelser og PPI sammen og gjør den forståelig for mennesker.

Hva er DP, PT og SP

DP eller PT er en måleenhet som brukes til å beskrive layoutene dine, laget for flere enheter og DPIer.
DP eller DiP står for Device Independent Pixel og PT står for Point. PT bruk Apple; DP brukes i Android, men i hovedsak er de de samme. Kort sagt, de bestemmer størrelsen uavhengig av enhetsmultiplikatoren. Dette er veldig nyttig når man diskuterer tekniske problemer. oppgaver mellom så forskjellige fag som designeren og ingeniøren.

La oss ta vårt forrige knappeksempel, "JIM".
Jim er 44px bred for vanlige, ikke-retinaskjermer, og 88px bred for retinaskjermer. La oss bli tekniske og legge til 20px-polstring rundt Jim fordi han liker ledig plass. Da blir fordypningen 40px for netthinnen. Men det er egentlig ikke fornuftig å ta hensyn til netthinnepiksler når du designer på en skjerm uten netthinne.

Vi vil fortsette som følger: vi vil ta utgangspunkt i 100 % sideforholdet til en vanlig skjerm uten netthinne.

I dette tilfellet vil JIM være 44*44DP eller PT i størrelse og 20DP eller PT polstring. Du kan gi din teknologi. jobb i en hvilken som helst PPI, vil JIM fortsatt være 44 * 44dp eller pt.

Android og IOS tilpasser denne størrelsen til skjermen og konverterer med riktig multiplikator. Dette er grunnen til at jeg tror det er lettere å alltid designe med standard PPI for skjermen din.

SP brukes separat fra DP og PT, men fungerer likt. SP står for Scale-independent pixels og brukes til å bestemme skriftstørrelser. SP avhenger av brukernes fontinnstillinger Android-enheter. For en designer er definisjonen av SP den samme som definisjonen av DP for alt annet. Ta som grunnlag det som er lesbart i 1x skala (16SP er for eksempel en flott skriftstørrelse for lesing).

Huske: når du kompilerer teknisk oppgave, bruk alltid oppløsning/skala uavhengige verdier. Alltid. Jo mer skjermstørrelsen/oppløsningen er forskjellig, jo mer betydningsfull er dette.

PPI-innstilling

Nå som du vet hva PPI, netthinnen og multiplikator er, er det viktig å si noe jeg ikke har blitt spurt om mye, og det er forvirrende: "Hva skjer hvis jeg endrer PPI-konfigurasjonen i grafikkredigereren?"

Hvis du stilte deg selv dette spørsmålet, betyr det at du er litt kjent med grafiske redaktører. Nå er det veldig viktig å forstå noe som tok meg litt tid å forstå: For alt som ikke kan skrives ut, brukes pikseldimensjoner, uavhengig av den opprinnelige PPI-konfigurasjonen.

PPI-innstillinger i programmer er en arv etter utskrift. Hvis du bare designer for nettet, vil ikke PPI ha noen innvirkning på størrelsen på punktgrafikken. Dette er grunnen til at vi bruker multiplikatorer i stedet for spesifikke PPI-verdier. Lerretet og grafikken din vil alltid bli konvertert til piksler ved hjelp av programvare, ved å bruke riktig multiplikator.

For eksempel. Dette kan du prøve selv i et program som lar deg justere PPI, for eksempel Photoshop. Jeg tegnet en 80*80px kvadrat og 16pt tekst i Photoshop med en 72ppi-konfigurasjon. Den andre er den samme med 144PPI-konfigurasjonen.



Som du ser har teksten blitt ganske stor, dobbelt så stor, mens firkanten forblir den samme. Grunnen til dette er at programmet (Photoshop i dette tilfellet) skalerer (som det skal) pt-verdiene basert på PPI-verdien, noe som resulterer i en dobling av tekstgjengivelsesstørrelsen ved doble PPI-innstillinger. På den annen side forblir det som ble definert av piksler - den blå firkanten - nøyaktig samme størrelse. En piksel er en piksel og vil forbli en piksel uavhengig av PPI-innstillinger. De skiller seg bare fra hverandre i PPI på skjermen som viser dem.

Det er viktig å huske at når du designer for digital teknologi PPI vil bare påvirke hvordan du oppfatter ditt design og din arbeidsflyt og grafikk i pt-størrelse som font. Hvis du inkluderer i arbeidet ditt kildefiler Med ulike innstillinger PPI, vil programmet endre størrelsen på alle overførte bilder mellom ulike filer PPI-relasjonen til mottaksfilen. Dette vil bli et problem for deg.

Løsning? Bruk en PPI (for 1x design, helst i området 72-120) og hold deg til den. Jeg personlig bruker 72 ppi fordi det er standardinnstillingen i Photoshop og de fleste av kollegene mine gjør det samme.

Huske:

  • PPI-innstillinger påvirker ikke eksport til Internett.
  • PPI-innstillinger vil kun påvirke grafikk laget fra PPI-uavhengige målinger som PT
  • Pixel er en måleenhet for alt digitalt.
  • Husk multiplikatorene og det du utvikler, ikke PPI.
  • Bruk realistiske PPI-innstillinger når du designer for digitalt som gir deg en følelse av hvordan det vil se ut på målenheter (f.eks. 72-120ppi for 1x nettsider/stasjonære datamaskiner).
  • Hold PPI-innstillingene de samme for alle filene dine.
  • I tillegg kan du lese om dette i mest interessante innlegget på StackExchange.

Håndtering av PPI i iOS

Det er på tide å dykke ned i plattformspesifikk design. La oss ta en titt på iOS-enheter i begynnelsen av 2014. Når det gjelder skjermstørrelser og DPI, med iOS er det 2 typer mobile enheter og 2 typer bærbare/stasjonære skjermer. I mobilkategorien har de selvsagt iPhone og iPad.

I telefonkategorien har du den gamle 3GS (fortsatt støttet av iOS6) og nyere. Bare iPhone 3GS er ikke med netthinnen. iPhone 5 og nyere bruker en høyere skjerm med samme DPI som iPhone 4 og 4s. Se juksearket nedenfor:

Merk: 1) 1x multiplikator, 2) 2x multiplikator, 3) 2x multiplikator.

I september 2014 introduserte Apple 2 nye iPhone-kategorier: iPhone 6 og iPhone 6 Plus. iPhone 6 er større enn iPhone 5 (med 0,7 tommer), men med samme PPI. På den annen side introduserer iPhone 6 en helt ny multiplikator for iOS, @3x på grunn av størrelsen, 5,5 tommer.

Det er noe spesielt du trenger å vite om hvordan iPhone 6 Plus håndterer skjermen i forhold til alle andre iPhones.

Det reduserer størrelsen på bildene.

For eksempel, når du designer for iPhone 6, designer du på et lerret på 1334*750 piksler, og telefonen gjengir også 1334*750 fysiske piksler. I tilfelle iPhone 6 Plus har telefonen en lavere oppløsning enn bildegjengivelsen, så du må designe for 2208*1242px oppløsning og telefonen vil reduseres til 1920*1080px oppløsning. Se bildet under:

Fysisk oppløsning er 13 % lavere enn gjengitt oppløsning. Dette skaper et par feil som halve piksler, noe som gjør det veldig små deler utydelig. Selv om oppløsningen er så høy at det bare vil merkes hvis du ser veldig nært etter. Så design på et 2208*1242px lerret og vær forsiktig med veldig små designelementer som superskillere. Se nedenfor for en simulering av hva som skjer:

En veiledning for Chrome OS er ikke sluppet ennå, men Pixel (med berøringsskjerm) er heller ikke til stor nytte. Men siden alle Chrome OS-apper er nettbaserte, vil jeg foreslå at du designer for dem uansett. berøringsskjermer. Min anbefaling vil være å følge Android-guiden for berøringsformål.

Web, hybridenheter og fremtiden

Du vil være klar over hvilken avgjørelse du skal ta hvis du utvikler for mobil. Lag den for berøringsskjermer. Hvis du utvikler for stasjonære datamaskiner, velg de som ikke berøres. Det høres enkelt ut, men det ignorerer en ny voksende trend – hybridenheter.

En hybridenhet er en enhet som visstnok gir både berørings- og ikke-berøringskontroller. Chromebook Pixel, Surface Pro og Lenovo Yoga er gode eksempler.

Hva skal man gjøre i dette tilfellet? Vel, det er ikke noe enkelt svar, men jeg går videre og gir ett: velg berøringskontroller. Det er her teknologien vil gå.

Hvis du designer for nettet eller noe sånt, tenk på berøringskontroller.

Huske:

  • For nesten alt du gjør i fremtiden, tenk mobil og berøring.
  • Bruk de anbefalte berøringsmålene for hvert operativsystem. Dette vil bidra til å gjøre designet ditt bedre og hjelpe deg å oppnå konsistens med operativsystemet.
  • Sansemål er veiledende, det betyr ikke at du må følge dem til punkt og prikke. Til syvende og sist kontrollerer du opplevelsen.

Grafikk programvare

Programvare vil ikke gjøre deg til en designer, men å velge riktig programvare for oppgaven kan forbedre produktiviteten betraktelig og gjøre jobben enklere. Programvarekunnskap bør ikke være din eneste ferdighet, men å lære og mestre det riktige verktøyet vil gå en lang vei mot å bringe ideene dine ut i livet.

Når det gjelder håndtering av DPI-endringer i grensesnittdesign, fungerer alle programmer forskjellig. Noen er bedre enn andre til spesifikke oppgaver. Her er de vanligste:

Photoshop

Moren til grensesnittdesignverktøy. Sannsynligvis det mest brukte verktøyet i dag. Det er et uendelig antall ressurser, opplæringsprogrammer, artikler for det. Photoshop har eksistert nesten siden begynnelsen av grensesnittdesign.

Som navnet antyder, var programmets første mål ikke i grensesnittdesign, men i retusjering av fotografier eller rasterbilder. Det utviklet seg i løpet av et år, og med fødselen av grensesnittdesign endret designere formålet. Dette var delvis fordi de var vant til det, og fordi det var det eneste programmet som var i stand til å gjøre ting så godt som nødvendig.

Photoshop er den dag i dag mesteren innen rasterbilderedigering og er fortsatt det mest bruktet. Dens flere tiår lange arv gjør Photoshop til et vanskelig program å lære bort. Ved å bruke Photoshop som en gigantisk sveitsisk hærkniv kan du gjøre hva som helst, men ikke alltid på den mest effektive måten.

Siden det er naturlig basert på et rasterbilde, er det DPI-avhengig, det motsatte av hvilke Illustrator og Sketch er beskrevet nedenfor.

Illustratør

Vektorredaktør, bror til Photoshop. Som navnet indikerer, er den rettet mot illustratører, men den kan også brukes som et grensesnittdesignverktøy.

Illustrator er egnet for utskriftsdesign, så grensesnittet, fargestyringen, skalaen, linjalene og måleenhetene kan være avskyelig, og det krever noen få justeringer for å være enkelt å bruke kun for grensesnittdesign. Som Photoshop er det utrolig kraftig verktøy, med en bratt læringskurve.

Den skiller seg fra Photoshop ved at den er DPI-uavhengig på grunn av sin basis på vektorformer. I motsetning til rasterbilder, grafikk laget med vektorformer, er basert på matematiske formler og vil bli beregnet på nytt programmatisk uten tap av kvalitet.
Å forstå forskjellen mellom raster- og vektorbilder er nøkkelen til å lage skalerbare visuelle design og grafiske ressurser.

Hvis du vil komme i gang med å bruke Illustrator for web/frontend-design, anbefaler jeg å lese

Designer Peter Nowell skrev om pikseltetthet i design på bloggen sin mobilapplikasjoner- forklarte hva det er og snakket om problemene som designere møter når de designer grensesnitt for forskjellige enheter.

Redaktørene av delen "Grensesnitt" publiserer en oversettelse av materialet laget av Sketchapp-teamet.

Videoen dekker de fleste av emnene i artikkelen, men hvis du er interessert i flere detaljer, fortsett å lese

Pikseltetthet er antall piksler som passer innenfor en bestemt fysisk størrelse (vanligvis en tomme). På den første Mac-datamaskin var 72 piksler per tomme - antallet virker stort, men faktisk var dette enorme piksler, som ikke alle grafikk var egnet for.

Ikoner på Macintosh datamaskin 1984. Designer Susan Kare

Siden den gang har skjermteknologien utviklet seg betydelig – nå har selv de enkleste skjermene en oppløsning på mellom 115 og 160 piksler per tomme (PPI-piksel per tomme). Men et nytt kapittel i denne historien begynte i 2010, da Apple introduserte iPhone med Retina-skjerm – en superskarp skjerm som doblet antall piksler per tomme. Resultatet er grafikk som er skarpere enn noen gang.

Forskjellen er spesielt merkbar i e-postprogramikonet og i teksten

For å opprettholde de samme fysiske dimensjonene til UI-elementer, måtte antallet piksler per tomme økes. Knappen, som tidligere tok opp 44px, tar nå opp 88px.

For kompatibilitet på tvers av enheter må designere produsere grafikk for både vanlige skjermer og Retina-skjermer. Men her oppsto et annet problem: nå kan ikke designeren si at et element skal være for eksempel 44 piksler i høyden, fordi på en annen enhet skal det samme elementet være dobbelt så høyt.

Løsningen ble poeng, eller pt. Ett punkt tilsvarer én piksel på pre-Retina-skjermer og to piksler på Retina-skjermer. Nå, hvis en designer blir fortalt at høyden på et element er 44 piksler, kan han tilpasse denne størrelsen til et hvilket som helst pikseltetthetsforhold - 1x, 2x eller 3x for iPhone 6 Plus.

PT og DP

Selvfølgelig er alt dette relevant ikke bare for Apple-enheter. Alle operativsystemer - stasjonære eller mobile - støtter høye ppi/dpi-skjermer. Google kom med sin egen pikseluavhengige måleenhet for Android, kalt DIP – density independent pixel, forkortet som «dp». Dette tilsvarer ikke iOS, men ideen er lik. Dette er universelle måleenheter som kan konverteres til piksler ved hjelp av enhetens skaleringsfaktor (2x, 3x, og så videre).

Du lurer kanskje på den fysiske størrelsen på varen. Faktisk trenger ikke grensesnittdesignere å tenke på dette, siden de ikke har kontroll over maskinvarefunksjonene til skjermene til forskjellige enheter. Designere må vite hvilke pikseltettheter produsenten har tatt i bruk for enhetene sine, og ta seg av å forberede grensesnitt på 1x, 2x, 3x og så videre.

Apple-enheter har ikke en eneste pikseltetthet som representerer ett punkt – det kommer an på bestemt enhet(Se "Oppfatning av skala" nedenfor). I iOS varierer punktet fra 132 dpi til 163 dpi. På Android er DIP alltid 160 ppi.

Kontrollert kaos

I de tidlige dagene med høyoppløselige mobile enheter var pikseltettheten rett og slett 1x eller 2x. Men nå er alt annerledes – det er mange pikseltettheter som grensesnittet må støtte. Android har et godt eksempel: Når dette skrives, støtter forskjellige produsenter seks forskjellige pikseltettheter. Dette betyr at et ikon som har samme størrelse på alle skjermer, faktisk bør komme i seks forskjellige varianter. For Apple er to eller tre forskjellige kilder relevante.

Vektor design

Det er et par praktiske leksjoner du bør ta med deg fra alt dette. Til å begynne med bør du lage designene dine i vektor. Dette gjør at våre grensesnitt, ikoner og annen grafikk kan skaleres til enhver størrelse som trengs.

Andre leksjon: vi må tegne alt på en 1x skala. Med andre ord, lag et design ved å bruke punkter for alle dimensjoner, og skaler deretter til forskjellige større pikseltettheter når du eksporterer. Skalering av 2x grafikk med 150 % for å lage en 3x-versjon forårsaker uskarpe kanter, så det er ikke det beste alternativet. Men ved å skalere 1x grafikk på 200 % og 300 % kan du opprettholde klarheten.

Oppløsningen til iPhone-appoppsett skal ikke være 750x1334, men 375x667 - dette er nøyaktig oppløsningen applikasjonen vil vises i. De fleste designerverktøy skiller ikke mellom punkter og piksler, så du kan anta at punkter er piksler og deretter bare eksportere kilden i 2x eller 3x størrelse.

Fake det til det er sant

Det er verdt å nevne at noen ganger lyver enheter. De later som om konverteringsfaktoren deres piksel-til-punkt er for eksempel 3x, men faktisk er den 2,61x, og selve kilden er skalert med 3x for enkelhets skyld. Dette er for eksempel hva iPhone Plus gjør. Den komprimerer et grensesnitt laget på 1242x2208 til en skjermoppløsning på 1080x1920.

Design for iPhone Plus som om det var 3x. Selve telefonen skalerer den til 87 %

Siden grafikken bare er litt nedskalert (87%), ser resultatet fortsatt anstendig ut – en 1px tykk linje på en nesten 3x skjerm ser fortsatt utrolig skarp ut. Og det er en sjanse for at Apple vil introdusere en ekte 3x iPhone Plus i fremtiden, siden de nødvendige maskinvarefunksjonene godt kan være tilgjengelige for et produkt produsert i så store mengder.

Er denne ikke-heltallsskaleringsmetoden akseptabel? Alt testes i praksis. Er resultatet av slik skalering ganske usynlig? Mange Android-enheter tyr også til skalering for å passe det mer standard piksel-til-punkt-forholdet, men dessverre gjør noen av dem det ikke så bra.

Denne typen skalering er uønsket fordi alt du ønsker å være skarpt vil bli uskarpt på grunn av interpolering. Dessverre, ettersom pikseltetthetene når 4x og mer, blir uskarphet forårsaket av ikke-heltallsskalering mye mindre subtil, så jeg spår at enhetsprodusenter i økende grad vil bruke denne tilnærmingen over tid. Vi får håpe at ytelsesmangler vil holde dem tilbake.

Oppfatning av skala

Skal knappen ha samme størrelse på forskjellige enheter? Svaret avhenger av
  • nøyaktighet av inndatametode (sensor eller markør);
  • fysiske skjermdimensjoner;
  • avstand til skjermen.
De to siste faktorene går hånd i hånd fordi nettbrett store skjermer sammenlignet med smarttelefoner, og vi holder det lenger unna oss. Det er også bærbare datamaskiner, stasjonære datamaskiner, fjernsyn - avstanden mellom øynene og skjermen øker med størrelsen på sistnevnte.

Knappen på TV-skjermen må være på størrelse med en telefon – for ellers vil den ikke være synlig mens du sitter i sofaen.

Her er et mindre dramatisk og veldig sant eksempel: applikasjonsikoner på et nettbrett bør være større enn de samme ikonene på en telefon. Dette implementeres på to måter: ved å bruke lavere pikseltetthet eller forskjellige ikonstørrelser.

Lav pikseltetthet

Store skjermer som vi ser på på avstand har vanligvis lavere pikseltetthet. En TV kan ha 40 piksler per tomme - og som regel er dette nok. Pikseltettheten til Retina-skjermer på iPad er omtrent 264 ppi; på iPhone - 326 ppi. Fordi pikslene på iPad er større (og mindre tette), blir hele grensesnittet litt større. Dette skyldes den ekstra avstanden mellom brukerens øyne og iPad-skjermen.