Cu mult timp în urmă, am lucrat în industria producției de monitoare LCD și televizoare. Și într-o zi am participat la o conversație cu ingineri de la companii de top care dezvoltau circuite de control al afișajului. Ne-au acuzat pe toți cei care am proiectat și creat ecrane de „ingineria nasului pe sticlă” (N.O.G.E.).
În opinia lor, ne-am concentrat pe îmbunătățiri care pot fi observate doar îngropându-ți nasul în ecran. Am crescut indicatorii care utilizarea de zi cu zi nu juca un rol. Și aveau perfectă dreptate.
Astăzi, industria de telefonie mobilă face același lucru. Fiți atenți la ceea ce se numesc principalele caracteristici ale ecranului într-o tabletă și smartphone. În general, acesta este doar numărul de pixeli și, poate, o anumită tehnologie de afișare (IPS, OLED sau altele). Dar sunt acestea cu adevărat singurele detalii la care trebuie să fii atent? Și, în general, sunt ele cele mai importante?
Să ne întoarcem cu șapte ani înapoi la momentul în care a fost introdus iPhone 4 cu -display. Apple a ales acest nume deoarece acest ecran avea o densitate de 326 de pixeli pe inch, ceea ce corespundea rezoluției ochiului uman (retina).
Probabil că nu aveți nevoie de o densitate mai mare pentru că nu veți putea face diferența.
Unii experți, inclusiv Dr. Ray Soneira de la DisplayMate Technologies, au contestat această afirmație. Dar chiar și criticii au fost de acord că această cifră s-a apropiat foarte mult de limita care are sens aplicație practică. 300 dpi - densitatea fotografiilor din reviste lucioase. Și nimeni nu s-a plâns vreodată de calitatea lor.
Și acum despre prezent. Densitate maximă Dimensiunea ecranului unui smartphone disponibil comercial este de 806 pixeli pe inch. Este vorba despre Sony Xperia Z5 Premium, al cărui ecran de 5,5 inchi deține o imagine completă 4K (2.160 x 3.840 pixeli). Există mai multe telefoane cu o rezoluție de aproximativ 1.440 pe 2.960 de pixeli și dimensiuni ale ecranului cuprinse între 5,5 și 6 inci, a căror densitate depășește 550 ppi.
Chiar și Apple, care a fost primul care ne-a asigurat că 326 de pixeli pe inch ar fi suficient, a crescut această cifră la 458 pe ecranul Super Retina al iPhone X.
Termenul tehnic pentru toate acestea este nebunie.
Fără îndoială, puteți observa diferențe mici până la nivelul de densitate de 500 ppi. Cu condiția să aveți o vedere perfectă și să țineți telefonul la cel mult 30 cm de ochi. Dar la fel, dacă astăzi este posibil să se creeze astfel de produse, asta nu înseamnă că trebuie create. De asemenea, nu înseamnă că aceste afișaje au performanțe mai bune decât altele în general.
Este nevoie de mai multă putere de calcul și energie pentru a menține toți acești pixeli în funcțiune. Cu cât sunt mai multe puncte pe ecran, cu atât este mai puțin spațiu pentru „zona deschisă” – partea care emite lumină – în fiecare. Astfel, luminozitatea și eficiența energetică a luminii de fundal - sau ambele - au de suferit.
La ce parametri ar trebui să fiți atenți?
Astăzi, afișajele nu mai suferă de probleme precum distorsiunea și pierderea liniarității. Nu am mai văzut unul de când producătorii au încetat să mai folosească ecrane CRT în urmă cu peste un deceniu. Așadar, afișajele noastre moderne nu sunt perfecte? Răspunsul este, desigur, că nu. Pot enumera cel puțin trei proprietăți de afișare care necesită îmbunătățiri mult mai mari decât numărul de pixeli.
Calitatea imaginii în condiții de lumină puternică
Prima este calitatea imaginii în lumina soarelui. Poate fi îmbunătățit prin creșterea luminozității și a contrastului vizibil de utilizator. Pentru ca noi să ne simțim confortabil privind un afișaj emisiv (emițător de lumină), acesta trebuie să afișeze o culoare albă la fel de strălucitoare ca împrejurimile.
Pe lângă luminozitate (care irosește energie), ecranul trebuie să ofere suficient contrast pentru a funcționa în condiții bine iluminate. Caracteristicile afișajelor OLED indică de obicei un raport de contrast de 100.000: 1 sau chiar 1.000.000: 1. Dar și asta este o prostie. Obțineți astfel de numere doar într-o cameră complet întunecată între culorile afișajului alb și negru.
În condiții de funcționare reale, contrastul este redus de lumina ambientală. Și aceasta este o problemă pentru afișajele moderne. Este rar ca un ecran să poată furniza un raport mai mare de 50:1 într-o cameră obișnuită, iar în condiții de iluminare mai puternică raportul este și mai mic. Ne-ar plăcea să vedem o tehnologie de afișare reflectorizantă plină de culoare, dar încă nu există nimic pe piață.
Precizia culorii
Următoarea proprietate care ar trebui să ne intereseze este acuratețea culorilor. Dar nu-l confunda cu indicatorii paletei de culori. Valoarea acestuia din urmă determină gama de culori pe care afișajul este capabil să o afișeze. Ecranele OLED și acum QLED impun o paletă largă de culori, dar nu oferă o acuratețe mare a culorilor.
O paletă largă de culori ar fi ideală dacă ar exista un material sursă al cărui potențial ar putea dezvălui. Dar un afișaj tipic cu un larg paleta de culori Pur și simplu face imaginea prea strălucitoare și plină de desene animate.
În schimb, avem nevoie de ecrane care să reproducă cu acuratețe culorile din paleta creatorului de conținut (sRGB sau Rec. 709). Precizia transmisiei este exprimată prin metrica ΔE*, care arată diferența dintre două culori. Dacă valoarea sa ajunge la 1, eroarea devine vizibilă. Arată-mi un parametru de afișare care garantează o diferență mică în calculul ΔE* în mai multe teste și apoi vom avea ceva.
Redând un ton
Precizia culorii și calitatea generală a imaginii depind în mare măsură de reproducerea tonului, o proprietate cunoscută mai bine sub numele de gama adecvată. Majoritatea erorilor de culoare de pe ecranele LCD și OLED se datorează reproducerii incorecte a tonurilor în cadrul celor trei culori primare.
Concluzie
Nu mai numărați pixelii. În schimb, să cerem îmbunătățiri ale acelor funcții care pot îmbunătăți de fapt calitatea imaginii. Există multe mai multe moduri de a face un ecran bun decât doar măsurarea numărului de puncte.
10.09.2012
Apple nu a încercat niciodată să fie la modă. Ea a creat mereu aceste tendințe și au urmat-o atât cumpărătorii, cât și concurenții. O tendință interesantă, din punctul meu de vedere, din ultimii doi ani a fost valoarea ppi (Pixel Per Inch) - numărul de puncte pe inch al afișajului. Indicatorul care informează despre claritatea imaginii a devenit o manie.
Numărul de pixeli pe inch este într-adevăr un indicator foarte important, care indică cât de clară va fi imaginea de pe afișaj. Cu cât această valoare este mai mare, cu atât pixelii vor fi mai puțin vizibili cu ochiul liber și, în consecință, cu atât treptele pe liniile înclinate ale imaginii vor fi mai puțin vizibile. În termeni absoluti, cu cât sunt mai multe puncte pe inch, cu atât mai bine. Deși, nu va fi posibilă creșterea infinită a densității pixelilor prin reducerea dimensiunii acestora - există limitări tehnologice, dar sunt încă foarte departe. O întrebare complet diferită: avem nevoie de afișaje cu un ppi atât de mare?
Înainte de a trage concluzii și de a evalua viitorul, să ne întoarcem în timp și să vedem ce afișarea densității pixelilor aveau din trecut. Pe atunci nimeni nu a acordat atenție acestui parametru, așa că este de două ori interesant.
Să renunțăm la afișajele CRT și să începem cu primele LCD-uri. Dimensiunea tipică a primelor modele a fost de 15 inchi, iar rezoluția a fost de 1024 pe 768. Densitatea în acest caz ar fi de aproximativ 85 de puncte pe inch. Apoi au apărut modele de 17 și 19 inchi cu o rezoluție de 1280 x 1024; ppi-ul lor s-a dovedit a fi de 96 și 86 de pixeli. Panourile rare de 22 de inci din acea vreme se lăudau cu o rezoluție de 1600 pe 1200 și o densitate de 91 de pixeli pe inch.
După cum puteți vedea, toate diagonalele au avut o densitate similară, care a fost considerată suficientă. În același timp, cred că nimeni nu va argumenta că pixelii din astfel de afișaje sunt vizibili, iar „scările” de pe fonturi sunt foarte vizibile. Dar nimănui nu i-a păsat de acest lucru, cu excepția dezvoltatorilor de plăci video, care, în lupta împotriva scărilor notorii, timp de mulți ani au dezvoltat și îmbunătățit tehnologii anti-aliasing care au făcut posibilă mascarea acestui efect.
Monitoarele moderne de acasă au o densitate de pixeli puțin mai mare - și totul datorită modului Full HD. De exemplu, un monitor de 21,5 inchi cu o rezoluție de 1920 x 1080 este 102 ppi. Un ecran Laptop ASUS cu o diagonală de 11,1 inci și o rezoluție de 1366 pe 768, densitatea este de 141 pixeli pe inch. Cel mai probabil este imposibil să găsești soluții mai mult sau mai puțin accesibile într-un număr de monitoare pentru computere sau laptopuri cu o densitate mai mare de pixeli.
Toate soluțiile de acasă variază de la 100 la 140 ppi. La televizor situația este și mai gravă. De exemplu, densitatea de pixeli a unui televizor de 32 de inchi cu rezoluție Full HD este de 69 de pixeli pe inch, în timp ce un televizor de 40 de inci cu aceeași rezoluție are doar 55 de pixeli. Și despre diagonale mariși e înfricoșător să vorbești. De exemplu, un panou de 55 de inchi va avea o densitate de 40 ppi.
Dar datorită Apple, telefoanele și tabletele au devenit lideri în densitatea pixelilor. Primul iPhone, ca și concurenții săi, nu a fost cel mai clar în conformitate cu standardele actuale, având o diagonală de 3,5 inci cu o rezoluție de 320 pe 480 pixeli și ca urmare o densitate de 165 ppi. Puțin mai târziu, fără prea mult zgomot, a apărut primul Smartphone Sony Ericsson Xperia X1, care avea un display de 3 inchi cu o rezoluție de 480 pe 800 pixeli și, în consecință, o densitate de 311 ppi. Dar Sony nu a reușit să „livreze” cumpărătorului o astfel de înaltă definiție, dar Apple a observat ideea, a luat inițiativa și a lansat iPhone 4 cu un afișaj de înaltă definiție, care se caracterizează printr-o rezoluție de 640 x 960 cu un diagonala de 3,5 inci. Cei de 330 dpi ai acestui model de telefon, sub denumirea strălucitoare de marketing Retina Display, au câștigat instantaneu dragostea clienților. Din acest moment, toată lumea a devenit interesată de valoarea ppi. Apple însuși, pe valul succesului, a adaptat noul la Retina generația iPad, a cărui rezoluție de afișare era de 2048 x 1536 cu o diagonală de 9,7 inchi. Valoarea sa ppi este de 264 dpi, care, deși mai mică decât cea a iPhone-ului din actuala generație, este de două ori mai mare decât cea a iPad-ului 2 și vizibil mai mare decât cea a majorității concurenților, ale căror ecrane cu dimensiuni similare diagonalei aveau o rezoluție de nu mai mult. peste 1280 pe 800.
Cu toate acestea, spre meritul concurenților lor, ei au ajuns rapid din urmă cu decalajul, crescând semnificativ rezoluția afișajelor dispozitivelor lor. În special Samsung Galaxy Nexus are o rezoluție de 1280 x 720 pe ecranul său de 4,65 inci, cu o densitate de pixeli de 316 ppi. Un ecran Tableta ASUS Transformer Pad Infinity are o rezoluție de 1920 pe 1200 cu o diagonală de 10,1 inci, ceea ce oferă 224 ppi. Dar cel mai interesant este că nu s-au oprit aici...
Nebunia pentru compresia pixelilor și crearea de afișaje cu valori PPI și mai mari a ajuns la aproape toți producătorii. Aceasta nu mai este nici măcar o muncă de îmbunătățire a performanței, ci o competiție. LG anunță un ecran de 5 inchi cu rezoluție Full HD și un ppi de 440 de pixeli. Toshiba răspunde cu un display de 6,1 inci cu o rezoluție de 2560 pe 1600 pixeli, ceea ce corespunde unei densități de 495 ppi. Ei bine, liderul de până acum este consorțiul Japan Display, care a anunțat recent un display de 2,3 inci cu o rezoluție de 1280 pe 800 pixeli. Densitatea sa este de 651 ppi. Uimitor! Dar sunt necesare afișaje cu densități atât de mari de pixeli?
Pe de o parte, acest lucru cu siguranță nu înrăutățește afișajele - la urma urmei, nu puteți strica terciul cu ulei. Pe de altă parte, rezoluțiile uriașe ale diagonalelor mici au dezavantaje. Principalul dezavantaj al tuturor poate fi considerat o creștere semnificativă a încărcării plăcilor grafice. Pentru computerele desktop acest lucru nu este foarte critic - plăcile video cu un consum mare de energie sunt norma pe această piață. Și creșterea rezoluției vă va permite să abandonați modul greu cu anti-aliasing, deoarece „scările” cu care este proiectat să lupte vor deveni aproape invizibile. Dar pentru dispozitive mobile o creștere semnificativă a numărului de pixeli provoacă un impact uriaș asupra timpului durata de viata a bateriei. Nu numai că placa video lucrează din greu pentru a reda o astfel de imagine, ceea ce necesită o cheltuială semnificativă de energie, dar display-ul în sine devine mai consumator de energie pe măsură ce numărul de pixeli crește. Deci aici trebuie să mențineți paritatea între dorințele și capacitățile dezvoltatorului.
Dar nu este doar atât – de ce complicați producția și faceți produse mai scumpe dacă pur și simplu nu este necesară cea mai mare densitate de pixeli în unele dispozitive. De exemplu, un televizor de 32 de inchi instalat la o distanță mai mare de trei metri nu permite discernării diferențelor de claritate a imaginii la rezoluții HD și FullHD, în timp ce densitatea pixelilor din acestea diferă considerabil - 49 ppi, respectiv 69 ppi . Motivul este că de la o asemenea distanță, nu putem vedea puncte individuale - ochiul nostru pur și simplu nu le poate distinge fizic. Ce se întâmplă dacă facem un televizor de aceeași diagonală cu viitoarea rezoluție 4Kx2K? Cu o rezoluție de 3840 pe 2160, obținem o densitate de 138 ppi, care este la nivelul display-urilor moderne pentru laptopuri și computere desktop. Va fi foarte convenabil să lucrezi cu un astfel de monitor de la o distanță de 70-100 de centimetri, dar nimeni nu se uită la televizor de la o asemenea distanță! Și o persoană care stă la trei metri de dispozitiv nu va vedea din nou diferența dintre un televizor cu 4Kx2K și FullHD.
Concluzia din aceasta este destul de simplă - o creștere inutilă a numărului de pixeli pe inch nu va îmbunătăți deloc experiența obiectivă a afișajelor. Echilibrul important aici este distanța de vizualizare/densitatea pixelilor. Ca punct de plecare, putem lua în mod condiționat raportul care este acceptat în imprimare - 300 de puncte pe inch. Această densitate ne permite să nu observăm pixelarea în fotografiile din reviste. Cu toate acestea, vopseaua se întinde puțin atunci când este aplicată pe hârtie, ceea ce îmbunătățește percepția. Prin urmare, densitatea optimă de pixeli pentru afișaje ar trebui să fie de 330 dpi. Și asta dacă așezi dispozitivul la aceeași distanță cu un ziar sau o revistă. Merită menționat aici că nu vom vorbi despre rezoluțiile și densitățile minime cerute, ci, dimpotrivă, despre cele care sunt necesare pentru a obține o imagine ideală, asemănătoare ca claritate cu aceeași fotografie tipărită într-o revistă lucioasă, sau despre imagine pe ecranul celui mai recent iPhone.
Adică, 330 dpi este optim pentru smartphone-uri, tablete, cărți electronice. Să luăm asta ca punct de plecare - distanța de vizualizare este de 50 de centimetri, iar densitatea este de 330 de pixeli pe inch. Cu această abordare, rezoluția optimă pentru o tabletă de 10,1 inchi va fi de 2800 pe 1800 de pixeli. După cum puteți vedea, iPad-ul este încă scurt. Dar printre smartphone-uri există deja o astfel de soluție - iPhone 4 și 4S, densitatea lor este exact de 330 dpi.
Monitoarele si televizoarele nu mai au nevoie de o asemenea densitate, din cauza faptului ca sunt privite de la o distanta mai mare. După calcule simple, obținem rezultatul optim pentru monitoarele de acasă, care în medie sunt situate la o distanță de un metru. Având în vedere că dublarea distanței de vizualizare necesită jumătate din densitate - ppi optim pentru ei va fi de 165 de puncte pe inch. Adică, o rezoluție de 4Kx2K (care este de 3840 pe 2160 pixeli) va fi optimă pentru monitoarele de 27 inci. Iar acum familiarul FullHD arată optim doar pe ecranele de 13,3 inchi. Ei bine, o rezoluție de 2800 x 1800 pixeli va fi potrivită pentru monitoarele de 20 de inci.
În ceea ce privește televizoarele, merită să luați în considerare faptul că acestea sunt vizualizate de la o distanță de 2,5 metri - aceasta este de cinci ori mai mult decât atunci când utilizați smartphone-uri și tablete, ca urmare - densitatea pixelilor de acolo poate fi de cinci ori mai mică, păstrând în același timp aceeași imagine. claritate. Adică, o densitate de 66 dpi este suficientă pentru aceste dispozitive. Acum calculăm rapoartele ideale ale rezoluțiilor și diagonalelor. 1366 pe 768 pixeli plictisitoare vor arăta decent doar pe ecranele de 23 de inchi. Modern FullHD vă va încânta cu o claritate cristalină pe televizoarele de 32 de inchi. Aceeași claritate, dar la o rezoluție de 4Kx2K, poate fi obținută pe ecrane cu o diagonală de până la 65 de inchi!
PPI, sau densitatea pixelilor (prescurtare de la pixeli pe inch) este numărul de pixeli care se potrivesc într-un inch al ecranului unui dispozitiv: smartphone, tabletă, laptop. Cu cât mai mulți pixeli pot încadra într-un inch, cu atât dimensiunea unui pixel este mai mică și cu atât sunt mai puțin vizibili cu ochiul liber. Cu cât se potrivesc mai mulți pixeli pe un inch al ecranului (cu cât numărul ppi este mai mare), cu atât claritatea și realismul imaginii sunt în mod corespunzător mai mari.
Pixelul în sine este o unitate de măsură pentru înălțimea și lățimea unei imagini. Un pixel poate fi reprezentat ca un pătrat mic pictat cu o singură culoare.
Primul ecran computer Mac avea o densitate de pixeli de 72 ppi. Numărul pare mare, dar pixelii erau de fapt uriași și calitatea imaginii era slabă. Acest lucru se datorează faptului că ecranul în sine era mare.
Smartphone-urile moderne au parcurs un drum lung și sunt echipate cu afișaje cu o densitate mult mai mare de pixeli. Chiar și dispozitivele simple de buget au ecrane cu și mai sus și modele emblematice această cifră ajunge la 458 ppi (), 522 ppi) și 642 dpi (). Smartphone-ul are o densitate record de pixeli - cu o rezoluție a ecranului de 3840x2160 pixeli.
De ce este importantă densitatea pixelilor?
PPI este unul dintre cei mai importanți indicatori ai calității ecranului! Dacă cumpărați un smartphone cu o dimensiune a ecranului de, să zicem, 6 inchi. Iar rezoluția lui este de doar 720x1280... Atunci ecranul unui astfel de telefon va fi granulat din cauza faptului că vor fi mai puține puncte într-un inch (2,54 cm) și vor fi mai mari. Din această cauză, calitatea imaginii va diferi în mai rău. Producătorul, în cursa pentru dimensiunea ecranului, nu s-a obosit să-l facă de înaltă calitate.
Prin urmare, atunci când alegeți un smartphone, priviți nu numai la el, ci asigurați-vă că vă uitați la PPI.
De ce un ecran bun de smartphone ar trebui să aibă o densitate de pixeli mai mare de 300 dpi?
Ochiul uman este capabil să distingă pixeli individuali la o valoare de 300-350 ppi. Se crede că, dacă densitatea pixelilor este mai mare, omul obișnuit nu va mai putea să-i vadă cu ochiul liber. Unii oameni cu vedere perfectă pot distinge pixelii până la un nivel de densitate de 600 ppi. Dar acest lucru este rar.
Se pare că prea mulți pixeli nu sunt întotdeauna un lucru bun. În primul rând, pentru că consumul de energie este în creștere. Pentru că procesorul smartphone-ului trebuie să proceseze mai multe informații. În al doilea rând, de ce aveți nevoie de mulți pixeli dacă tot nu puteți face diferența dintre un ecran de 350 dpi și un ecran de 500 dpi? Acesta este pur și simplu un strat de marketing pentru care plătiți în plus.
Dacă doriți un smartphone cu un ecran de înaltă calitate și cea mai clară imagine posibilă, alegeți modele cu o densitate de pixeli de aproximativ și puțin mai mare de 300-350 ppi.
decât pp i este diferit de dpi și de ce nu ar trebui să-l confundați
D pi (prescurtare pentru puncte pe inch) este rezoluția dispozitivului de imprimare. Dpi - în termeni simpli, este o valoare care arată cât de mic poate fi desenat un punct de un dispozitiv de imprimare. Termenul d pi este folosit în tipărire.
Ppi este rezoluția unui fișier imagine, exprimată în pixeli pe inch. Mărind imaginea de pe ecran, puteți vedea pătratele - chiar pixelii din care constă.
Pentru utilizatorul mediu nu există nicio diferență între dpi și ppi. Ambele sunt unități de măsură care sunt utilizate pentru a determina rezoluția unei imagini afișate pe un ecran sau imprimată pe hârtie (dpi).
Cum să calculați singur densitatea pixelilor ecranului
Pentru a face acest lucru, trebuie să cunoașteți diagonala ecranului în inchi și rezoluția sa în pixeli în lățime și înălțime. Apoi, trebuie să luați rădăcina pătrată a sumei pătratelor numărului de pixeli în lățime și înălțime și apoi împărțiți rezultatul la diagonala ecranului în inci. Formula va fi astfel:
Continut:
Pagina teoretică și calcule
Conceptul în cauză reprezintă pixeli pe inch, adică numărul de pixeli pe inch. De asemenea, se pronunță pee-pee-ay.
Înseamnă literalmente câți pixeli încap într-un inch din imagine pe care o vedem pe o tabletă sau altă tehnologie.
Acest concept este numit și unitatea de măsură a rezoluției. Această valoare este calculată folosind două formule simple:
Unde:
- dp– rezoluție diagonală;
- di– dimensiunea diagonalei, inci;
- Wp- latime;
- HP- înălțime.
A doua formulă este concepută pentru a calcula rezoluția diagonală și se bazează pe utilizarea celebrei teoreme lui Pitagora.
Orez. 1. Lățimea, înălțimea și dimensiunea diagonalei monitorului
Pentru a arăta cum sunt folosite toate aceste formule, să luăm, de exemplu, un monitor cu diagonala de 20 de inci cu o rezoluție de 1280x720 (HD).
Astfel, Wp va fi egal cu 1280, Hp – 720 și Di – 20. Datorită prezenței acestor date, putem calcula pi-pi-ai. Mai întâi folosim formula (2).
Acum să aplicăm aceste date la formula (2).
Notă: De fapt, avem 73,4 pixeli, dar nu poate exista un număr non-întreg de pixeli, sunt folosite doar valori întregi.
Pentru a înțelege cât de mult este aceasta în centimetri, o valoare mai comună pentru zona noastră, trebuie să împărțiți numărul rezultat la 2,54 (sunt exact atât de mulți centimetri într-un inch).
Deci, în exemplul nostru este 73/2.54=28 pixeli. în centimetru.
În exemplul nostru este 73 și 25,4/73 = 0,3. Adică dimensiunea fiecărui pixel este de 0,3x0,3 mm.
Este bine sau rău?
Să ne dăm seama împreună.
Este importantă această cantitate?
Pee-pee-ay, pe baza celor de mai sus, afectează claritatea imaginii pe care utilizatorul o primește pe ecranul său.
Cu cât valoarea indicatorului este mai mare, cu atât imaginea pe care o va primi utilizatorul este mai clară.
De fapt, cu cât această valoare este mai mare, cu atât o persoană va vedea mai puține „pătrate”.
Adică, fiecare pixel va fi mic, nu mare, iar acest lucru va face posibil să nu-i acordăm deloc atenție. Valoarea caracteristicii poate fi văzută clar în Figura 2
Orez. 2. Diferența dintre indicatori este din ce în ce mai mare
Desigur, nimeni nu vrea să aibă o poză ca cea din stânga pe a lor.
Prin urmare, atunci când alegeți un astfel de echipament, este foarte important să acordați atenție acestei caracteristici.
Acest lucru este valabil mai ales atunci când cumpărați de pe Internet și nu aveți ocazia să evaluați imaginea cu proprii ochi și să înțelegeți cât de clară este.
Găsirea unui indicator în caracteristicile aceluiași smartphone este de obicei ușoară. Este de obicei conținut în secțiunea „Afișare”. Un exemplu poate fi văzut în Figura 3.
Orez. 3. Indicator în caracteristicile smartphone-ului
Important! Pe Internet puteți găsi adesea informații că ppi este mai important decât, de exemplu, rezoluția sau diagonala și unele dintre aceste caracteristici ar trebui să joace un rol mai important atunci când alegeți. Acest lucru nu este deloc adevărat. După cum putem vedea mai sus, toate aceste trei concepte sunt indisolubil legate.
Avantaje și dezavantaje
Numărul de pixeli pe inch are un efect pozitiv asupra clarității imaginii și, în consecință, asupra calității acesteia.
Va fi mult mai plăcut pentru utilizator să se uite la o imagine cu un indicator mai mare.
În Figura 2, fotografia din stânga are 30 ppi, iar fotografia din dreapta are 300. Mai jos este un alt exemplu similar.
Dar acolo este acest concept si contra. În special, vorbim despre autonomia dispozitivului.
Totul este destul de simplu - dacă imaginea este clară, un smartphone, tabletă sau alt dispozitiv cu ecran nu va putea funcționa mult timp fără reîncărcare.
Puteți chiar să faceți o regulă simplă: cu cât este mai pi-pi-ay, cu atât durata de viață a bateriei este mai scurtă.
Desigur, pentru un PC aceasta nu este o problemă, deoarece acolo monitorul este întotdeauna conectat, dar pentru unele telefoane aceasta poate deveni o mare problemă.
Prin urmare, atunci când alegeți un dispozitiv, asigurați-vă că acordați atenție nu numai numărului de pixeli. pe inch, și, de asemenea, pe inch!
Astfel, am trecut fără probleme la subiectul ales.
Despre alegerea afișajelor
Există mai multe reguli care vă vor ajuta să alegeți corect afișajul, ținând cont de pixeli, sună astfel:
1 Asigurați-vă că acordați atenție tipului de afișare. Prioritatea ar trebui să fie AMOLED, chiar mai bine SuperAMOLED sau OLED. Astfel de dispozitive vor fi întotdeauna mai bune decât.
Să presupunem că venim la magazin și vedem, de exemplu, două dispozitive excelente - și. Prețul lor este aproape același, al doilea dispozitiv, de altfel, este mai puternic.
Specificațiile indică faptul că Xiaomi are 400 ppi (din anumite motive, unii scriu 400,53, dar, așa cum am spus mai sus, nu poate exista un număr non-întreg de pixeli).
Samsung are 267 PPI și rezoluția este în mod corespunzător mai mică (1280x720 față de 1920x1080). Diagonala este aceeași - 5,5 inci.
Dar din anumite motive, imaginea este mai clară. Și totul datorită utilizării tehnologiei proprietare SuperAMOLED+. Puteți vedea acest lucru personal dacă acordați atenție figurii 5.
2 Încercați să găsiți o oportunitate de a vă uita personal la toate mostrele pe care le-ați ales. Puteți să vă uitați mai întâi la opțiunile lor pe Internet, apoi să mergeți la un magazin de electronice și să vedeți cum afișează de fapt imagini. O viziune personală în acest caz este pur și simplu de neînlocuit.
3 Acordați atenție bateriei. Dacă vorbim despre smartphone-uri, atunci să ne asigurăm muncă îndelungată dispozitiv cu o imagine clară (ppi mare și/sau tehnologie bună), atunci capacitatea bateriei ar trebui să fie de aproximativ 3000 mAh.
Pentru tablete ar trebui să fie și mai mare, deoarece diagonala lor este mai mare,
4 Rețineți: cu cât diagonala este mai mică și densitatea pixelilor este mai mare (numărul de pixeli pe inch), cu atât imaginea este mai clară. Nu vă înșelați - nu veți putea obține o imagine foarte clară cu un afișaj uriaș și o valoare pi-ay mică. Este important să mențineți un mijloc de aur aici.
5 Acoperirea este, de asemenea, important de luat în considerare. În acest fel, ecranele mate vor produce o imagine mai puțin clară și saturată, dar vor fi mai blânde cu privirea.
Dar afișajele lucioase îți vor afecta în mod negativ vederea, dar imaginea de pe ele va fi mult mai frumoasă. În acest caz, valoarea lor ppi poate fi aceeași.
Acest lucru este în mare parte relevant. Dacă lucrezi la computer cu normă întreagă sau chiar mai mult, este mai bine să optezi pentru opțiunea mat.
Toate acestea vă vor permite să alegeți cel mai potrivit afișaj pentru dvs.
Rezultate
ppi sau pi-pi-ai este densitatea pixelilor sau numărul de pixeli pe inch al unei imagini. Pentru a converti cifra în centimetri, trebuie să o împărțiți la 2,54.
Nu poate exista o cantitate care nu este întreagă, ci doar un întreg.
Cu cât o arătați mai sus, cu atât imaginea va fi mai clară și mai plăcută.
Atunci când alegeți alte echipamente care conține, este foarte important să acordați atenție acestui indicator.
Dar nu este fundamental. De asemenea, este important să ne uităm la tehnologie și la acoperirea ecranului.
De asemenea, asigurați-vă că vă uitați la capacitatea bateriei și mențineți un mediu fericit între numărul de pixeli. și dimensiunea ecranului.
Această lectură lungă este concepută pentru designerii avansați care doresc să învețe mai multe despre designul cross-DPI și cross-platform de la elementele de bază.
Fără matematică complicată sau grafice imposibil de citit, doar explicații simple împărțite în secțiuni scurte pentru o mai bună înțelegere și o aplicare rapidă în procesul de proiectare.
Ce sunt DPI și PPI
DPI sau Dots Per Inch este o măsurătoare a densității punctelor utilizată inițial în imprimare. Acesta este numărul de puncte de cerneală pe care imprimanta dvs. poate încăpea într-un inch. Cu cât este mai mic DPI, cu atât imprimarea este mai puțin detaliată.
Acest concept se aplică și ecranelor de computer numite PPI sau Pixels Per Inch. Principiul este același: valoarea numără numărul de pixeli pe care ecranul tău este capabil să-i afișeze pe 1 inch. Termenul DPI este, de asemenea, folosit pentru a descrie caracteristicile ecranului.
Calculatoarele Windows au PPI=96 în mod implicit. Mac folosește PPI=72. Aceste valori s-au datorat faptului că ecranele produse la acea vreme afișau 72 de „puncte” sau pixeli pe inch. Acesta a fost cazul în anii 80, iar acum dispozitivele de pe Windows, Mac și alte platforme au multe variații în rezoluția ecranului PPI.
Rezoluție, pixeli și dimensiune fizică
A întreba pe cineva care este dimensiunea unui pixel este o modalitate excelentă de a confunda persoana cu complexitatea întrebării. Un pixel nu are dimensiune, nici semnificație fizică sau semnificație în afara reprezentării sale matematice. Aceasta face parte din legătura dintre dimensiunea fizică a ecranului, exprimat în inci și rezolutia ecranului, exprimat în pixeli pe inch și dimensiunea pixelului ecranului, exprimat în pixeli. ÎN schiță generală arata cam asa:
Ecranele desktop obișnuite non-retina (inclusiv Mac) vor avea un PPI între 72 și 120. Proiectarea cu un PPI între 72 și 120 asigură că munca dvs. va avea aproximativ aceleași proporții în dimensiune.
Iată un exemplu:
Mac Cinema Display 27" are un PPI de 109, ceea ce înseamnă că afișează 109 pixeli pe inch de suprafață a ecranului. Lățimea teșită este de 25,7 inchi (65 cm). Lățimea ecranului în sine este de aproximativ 23,5 inchi, deci 23,5*109~2560, ceea ce formează rezoluția nativă a ecranului de 2560x1440px.
*Știu că 23,5*109 nu este de fapt egal cu 2560. Ar fi de fapt 23,486238532 inci. Un rezultat mai precis va fi obținut prin numărarea pixelilor pe centimetru, dar sperăm că veți înțelege ideea.
Impact asupra designului dvs
Să presupunem că ai desenat un pătrat albastru de 109*109px pe ecran despre care tocmai am vorbit.
Acest pătrat va avea o dimensiune fizică de 1*1 inch. Dar dacă ecranul utilizatorului are un PPI de 72, pătratul tău albastru va fi mai mare ca dimensiune fizică. Deoarece PPI = 72, va fi nevoie de aproximativ un inch și jumătate de spațiu pe ecran pentru a afișa un pătrat cu o latură de 109 pixeli. Urmăriți o simulare a acestui efect mai jos:
Indiferent de diferențele de culoare și rezoluție, amintiți-vă că toată lumea vă va vedea designul diferit. Scopul tău ar trebui să fie să găsești cel mai bun compromis care să acopere cel mai mare procent de utilizatori. Nu vă așteptați ca fiecare utilizator să aibă același ecran ca și dvs.
Rezoluția ecranului (și rezoluția nativă)
Rezoluția ecranului poate avea un impact semnificativ asupra modului în care un utilizator vă percepe designul. Deoarece monitoarele CRT au fost înlocuite cu LCD-uri, utilizatorii au acum o rezoluție nativă care garantează un raport bun între dimensiune și PPI.
Rezoluția determină numărul de pixeli afișați pe ecran (de exemplu, 2560 * 1440px pentru un ecran de cinema de 27 inchi) - 2560 în lățime și 1440 în înălțime. Desigur, acum că știi ce înseamnă PPI, îți dai seama că nu poate fi o unitate de măsură a dimensiunii fizice. O imagine cu această rezoluție poate fi întinsă fie pe întregul perete, fie pe un ecran foarte mic.
Astăzi, monitoarele LCD vin cu o rezoluție prestabilită sau nativă care reflectă numărul de pixeli pe care ecranul poate afișa. A fost puțin diferit de vechile monitoare CRT, dar din moment ce sunt de domeniul trecutului, nu vom intra în detalii (în acest fel îmi pot ascunde și lipsa parțială de cunoștințe în domeniul televizoarelor vechi bune).
Să luăm ecranul nostru cinema de 27 inchi, care poate afișa 190 PPI la rezoluție nativă la 2560*1440px. Dacă reduceți rezoluția, elementele vor fi mai mari. Dar, de fapt, veți avea 23,5 inchi pe orizontală pentru a umple cu pixeli, deși cu mai puțini dintre ei.
Am spus „de fapt” pentru că în acest caz va fi așa. Ecranul are o rezoluție nativă de 2560*1440px. Dacă rezoluția este redusă, pixelii vor rămâne pe loc, afișând 109PPI. Pentru a umple golul dintre aceste opțiuni, sistemul de operare va începe pur și simplu să extindă totul. GPU-ul dvs. va lua fiecare pixel și va calcula un nou raport de aspect pentru a-l afișa.
Dacă setați rezoluția la 1280*720 (jumătate din lățimea anterioară, jumătate din înălțime), GPU-ul dvs. va simula un pixel de două ori mai mare decât înainte pentru a umple ecranul. Care va fi rezultatul? Ei bine, grafica poate deveni neclară. În timp ce jumătatea proporției va arăta mai mult sau mai puțin bine, deoarece este un simplu divizor, atunci dacă setați proporția la ⅓ sau ¾, veți ajunge la valori fracționale și NU POȚI împărți pixelul. Iată un exemplu:
Uită-te la exemplul de mai jos. Luați o linie groasă de 1 pixel pe un ecran cu rezoluție nativă. Acum aplicați o rezoluție cu 150% mai mică. Pentru a umple ecranul cu grafică, procesorul va trebui să genereze grafică la 150%, înmulțind totul cu 1,5. 1*1,5=1,5, dar nu avem jumătate de pixeli. Ca rezultat, pixelii exteriori vor fi umpluți cu o nuanță de culoare fracționată, ceea ce va crea un efect neclar.
Deci, dacă aveți un Retina Macbook Pro și trebuie să măsurați rezoluția, vi se va prezenta fereastra prezentată mai jos, care vă anunță că rezoluția selectată va „arăta ca” 1280*800px. Acesta este modul în care sistemul exprimă proporțiile de dimensiune prin rezoluția utilizatorului.
Aceasta este o idee foarte subiectivă pentru că folosește rezoluția pixelilor ca măsură a dimensiunii fizice, dar nu este o minciună, cel puțin din punctul lor de vedere.
Concluzie: Dacă doriți să vă vedeți întotdeauna designul la o calitate perfectă a pixelilor, nu utilizați niciodată o altă rezoluție decât cea nativă. Da, poate te simți mai confortabil cu un raport de aspect mai mic, dar când vine vorba de pixeli, este indicat să fii cât mai precis. Din păcate, unii oameni folosesc rezoluția ca o modalitate de a vedea mai bine ce este pe ecran (în special un ecran de computer). Designul dvs. poate arăta rău și aici, dar aici utilizatorilor le pasă mai mult de lizibilitate decât de autenticitatea designului.
Ce este rezoluția 4K?
Probabil că ai auzit mult termenul 4K în ultima vreme, acest subiect este în tendințe în prezent. Pentru a înțelege ce este, să ne uităm mai întâi la ce înseamnă „HD”. Amintiți-vă că aceasta este o versiune super simplificată a explicației. Voi explica doar utilizarea celor mai comune permisiuni ca exemplu. Există diferite categorii HD.
Termenul HD se aplică oricărei rezoluții începând de la 1280x720px sau 720p cu 720 de linii orizontale. Unii pot numi această rezoluție SD, după definiția standard.
Termenul full HD se aplică ecranelor de 1920x1080px. Majoritatea televizoarelor folosesc această rezoluție, ca toți ceilalți cantitate mare telefoane avansate de ultimă generație (Galaxy SIV, HTC unul, Sony Xperia Z, Nexus5).
Rezoluția 4K începe de la 3840x2160 pixeli. Se mai numește și Quad HD, UHD de la Ultra HD. În linii mari, puteți încadra 4 x 1080p într-un afișaj 4K pe baza numărului de pixeli.
A doua rezoluție 4K este 4096x2160. Este puțin mai mare și este folosit pentru proiectoare și camere profesionale.
Ce se întâmplă dacă conectez un ecran 4K la computer
Modern OS Nu scala 4K, ceea ce înseamnă că dacă conectați un ecran 4K la un Chromebook sau Macbook, acesta va folosi cea mai mare sursă DPI, în acest caz 200% sau @2x, și o va afișa în raport de aspect normal. Totul va arăta bine, dar destul de mic.
Exemplu ipotetic: dacă conectați un ecran 4K de 12 inchi la un computer de înaltă rezoluție (2x) de 12 inchi, totul va apărea la jumătate din dimensiune.
Concluzie:
- 4K este de 4 ori mai mare decât Full HD.
- Dacă sistemul de operare acceptă 4K, dar nu se scalează, atunci nu există o sursă specială 4K.
- Pe acest moment fără telefoane sau tablete cu rezoluție 4k.
Monitorizați rata de flicker
Să luăm o pauză de la PPI și rezoluțiile ecranului pentru un timp. Probabil ați văzut că setările ecranului arată și o valoare în Hertz (Hz). Acest lucru nu are nimic de-a face cu PPI, dar în cazul în care vă întrebați, rata de pâlpâire a monitorului sau rata de reîmprospătare a imaginii este o unitate de măsură pentru viteza cu care monitorul dvs. va afișa o imagine sau un cadru fix, pe secundă. Un monitor de 60 Hz va putea afișa 60 de cadre pe secundă (60 fps). Monitor cu o frecvență de 120Hz - 120fps etc.
In contextul interfața cu utilizatorul, rata de pâlpâire a monitorului dvs. va determina cât de netedă și de detaliată va arăta animația dvs. Majoritatea ecranelor au o frecvență de 60 Hz. Rețineți că numărul de cadre afișate pe secundă depinde și de puterea procesorului și a graficii dispozitivului. Nu are rost să adaptezi un ecran de 120 Hz la Atari 2600.
Pentru o mai bună înțelegere, priviți exemplul de mai jos. T. rex merge din punctul A în punctul B într-un ritm rapid și precis constant pe ambele ecrane - 60 Hz și 120 Hz. Un ecran de 60 de fps este capabil să afișeze 9 cadre în timpul calculării, iar un ecran de 120 Hz poate afișa în mod logic de două ori mai multe cadre în aceeași unitate de timp. Animațiile vor fi mult mai fluide pe un ecran de 120 Hz.
Concluzie: Unii susțin că ochiul uman nu poate detecta frecvențe peste 60 fps. Este gresit. Nu asculta oameni așa deștepți, râde-le în față cât mai evident posibil.
Ce este un ecran de retină
Numele „Retina display” a fost introdus de Apple odată cu lansarea iPhone 4. Ecranul a fost numit Retina deoarece PPI-ul dispozitivului era atât de mare încât retina ochiului uman (în engleză retina) nu ar trebui să distingă pixelii de pe ecranele.
Acest lucru este valabil pentru unele dimensiuni de ecran, dar pe măsură ce ecranele continuă să se îmbunătățească, ochii noștri sunt acum suficient de antrenați pentru a vedea pixelii, în special pe elementele curbe ale UI.
Din punct de vedere tehnic, aceste ecrane afișează de două ori mai mulți pixeli în înălțime și lățime în aceeași dimensiune fizică.
iPhone 3G/S avea o diagonală de 3,5 inci și o rezoluție de 480*320px, ceea ce corespunde cu 163PPI.
Phone 4/S a avut și o diagonală de 3,5 inci și o rezoluție de 960*640px, ceea ce corespunde cu 326PPI.
WOW! Exact de două ori. Multiplicator simplu. Deci, în loc să fie mai mici, elementele de pe ecran sunt de două ori mai ascuțite pentru că au de două ori mai mulți pixeli și au aceeași dimensiune fizică. 1 pixel normal = 4 pixeli retinei, de patru ori mai mulți pixeli.
Utilizați exemplul de mai jos pentru scopul propus atunci când dezvoltați proiecte complexe.
Notă: este destul de dificil să simulați o calitate diferită a imaginii de la două dispozitive pe un al treilea, de exemplu. la care te uiți acum. Player muzical pe retină, chiar și ocupând același spațiu fizic, va arăta de două ori mai clar și de calitate mai bună pe un iPhone 4. Dacă doriți să îl verificați, utilizați unul dintre exemple gratuite pentru demonstrație.
Numele „Retina” aparține Apple, așa că alte companii folosesc în schimb „HI-DPI” sau nu folosesc deloc un nume.
Concluzie: Produsele Apple sunt o modalitate excelentă de a vă familiariza cu conversia DPI pentru a înțelege diferențele dintre rezoluție, PPI și raportul la dimensiunea fizică, deoarece trebuie să utilizați doar un multiplicator.
Ce este un multiplicator?
Multiplicatorul este salvatorul tău matematic atunci când vine vorba de conversia design-urilor în diferite rezoluții PPI. Odată ce cunoașteți multiplicatorul, nu trebuie să vă faceți griji cu privire la specificațiile detaliate ale dispozitivului.
Să o luăm pentru Exemplu de iPhone 3G și 4. Ai de 4 ori mai mulți pixeli (2x lățime și 2x înălțime) în aceeași dimensiune fizică. Prin urmare, multiplicatorul dvs. este 2. Aceasta înseamnă că pentru a vă face sursele compatibile cu rezoluția 4G, trebuie doar să înmulțiți dimensiunea surselor cu 2 și atât.
Să presupunem că creați un buton care are 44*44px, care este dimensiunea recomandată pentru butoanele tactile în iOS (vom reveni la asta mai târziu în această postare). Să-i spunem un buton tipic numit „Jim”.
Pentru ca Jim să arate bine pe iPhone 4, va trebui să creați o versiune de două ori mai mare. Asta facem noi aici:
Este destul de simplu. Există acum o versiune de Jim.png pentru PPI normal (iPhone 3) și o versiune [email protected] pentru 200% PPI (iPhone 4.)
Acum spui: „Sunt destul de sigur că există alți factori decât doi”. Așa este și de aici începe coșmarul. Poate că nu este un coșmar, dar sunt sigur că ai prefera să petreci toată ziua călcând șosete în loc să lucrezi cu acești nenumărați multiplicatori. Slavă Domnului, acest lucru nu este atât de înfricoșător pe cât pare la prima vedere. Vom reveni la asta mai târziu.
Să vorbim mai întâi despre unități, pentru că veți avea nevoie de unitate, nu de pixel, pentru a specifica modele multi-DPI. Și aici intervin DP și PT.
Concluzie: Multiplicatorul este ceva ce trebuie să știți pentru orice design la care lucrați. Întreaga lume a haosului se bazează pe multiplicatori, făcând toate aceste dimensiuni de ecran, PPI și alte dimensiuni ușor de înțeles pentru oameni.
Ce sunt DP, PT și SP?
DP sau PT este o unitate de măsură care poate fi utilizată pentru a descrie aspectele de proiectare pentru multe dispozitive, la multe DPI.
DP sau DiP este o abreviere pentru Pixel independent de dispozitiv, iar PT înseamnă Point. PT se referă la Apple, DP se referă la Android, dar înseamnă aproximativ același lucru.
Pe scurt, aceste unități determină dimensiunea indiferent de multiplicatorul dispozitivului. Acest lucru este foarte util atunci când trebuie să discutați despre specificații cu diferiți participanți la fluxul de lucru, cum ar fi proiectantul și inginerul. Să revenim la exemplul butonul-Jim.
Lățimea lui Jim este de 44 de pixeli pe ecranele normale fără retină și de 88 de pixeli ecrane de retină. Să adăugăm o umplutură de 20 de pixeli în jurul butonului pentru că lui Jim îi place spatiu liber. Apoi, pentru retină, umplutura va fi de 40px. Dar numărarea pixelilor retinei nu are deloc sens atunci când proiectați pentru ecrane non-retină.
Așa că vom lua doar proporția normală 100% non-retină ca bază pentru tot.
În acest caz, dimensiunea lui Jim va fi 44*44DP sau PT, iar umplutura va fi 20DP sau PT. Puteți da specificații în orice PPI, Jim va fi întotdeauna 44*44dp sau pt.
Android și iOS adaptează această dimensiune la ecran și convertesc cu multiplicatorul corect. Acesta este motivul pentru care mi se pare mai ușor să proiectezi întotdeauna în PPI nativ al ecranului tău.
SP este un termen separat de DP și PT, dar funcționează pe același principiu. SP este o abreviere pentru pixel independent de scară. SP va fi afectat de setările de font ale utilizatorului dispozitiv Android. Ca designer, o misiune SP mi se pare o misiune DP pentru altceva. bazați-l pe ceea ce poate fi citit la scară 1x (16sp este o dimensiune mare a fontului, de exemplu).
Concluzie: Utilizați întotdeauna valorile independente de rezoluție și scară pentru umplutură. Mereu. Cu cât dimensiunile și rezoluțiile ecranului devin mai variate, cu atât acest lucru devine mai important.
Configurația PPI
Acum că știi ce sunt PPI, retina și multiplicatorul, este important să vorbim despre „Ce se întâmplă dacă schimb setările PPI în editorul meu de design?”
Dacă ți-ai pus această întrebare, înseamnă că știi puțin despre software pentru designeri. Iată ceva care mi-a luat puțin timp să-mi dau seama și este un punct important:
Tot conținutul care nu este tipărit utilizează dimensiuni de pixeli, indiferent de configurația PPI setată inițial.
Configurarea PPI în software este apanajul tipăririi. Dacă proiectați pentru web, PPI nu va afecta în niciun fel dimensiunea rasterului.
Acesta este motivul pentru care folosim multiplicatori mai degrabă decât valorile PPI directe. Pânza și grafica dvs. vor fi întotdeauna convertite în pixeli de către program folosind multiplicatorul corespunzător.
Iată un exemplu. Puteți încerca să faceți și dvs. același lucru într-un program care acceptă setările PPI, cum ar fi Photoshop. Am desenat un dreptunghi de 80*80px și un text de 16 pt în Photoshop cu setări de 72PPI. Al doilea este același, dar cu setări la 144PPI.
După cum puteți vedea, textul a devenit puțin mai mare, de două ori mai mare pentru a fi precis, în timp ce pătratul nu s-a schimbat. Motivul este că programul (Photoshop în acest caz) scalează valorile pt (cum ar trebui) pe baza valorii PPI, rezultând o dimensiune de două ori mai mare atunci când redarea textului la o configurație PPI dublă. Pe de altă parte, ceea ce a fost definit în pixeli, i.e. pătratul albastru rămâne de aceeași dimensiune. Un pixel este un pixel și va rămâne un pixel, indiferent de ce PPI ai setat. Numai PPI-ul ecranului care îl afișează îl va schimba.
Este important să rețineți că atunci când proiectați pentru dispozitive digitale PPI va afecta doar modul în care percepeți designul, precum și procesul de creare a acestuia și grafica pt, cum ar fi fonturile. Dacă includeți surse cu sensuri diferite PPI, programul va redimensiona toate fișierele în funcție de proporția PPI a fișierului rezultat. Aceasta poate fi o problemă pentru dvs.
Soluţie? Utilizați un PPI (de preferință în intervalul 72-120 pentru modele 1x). Personal, folosesc 72PPI pentru că este setarea implicită în Photoshop și majoritatea colegilor mei folosesc același lucru.
Concluzie:
- Setările PPI nu au niciun efect asupra exportului web.
- Setările PPI vor afecta numai graficele generate din măsurători independente de PPI, cum ar fi PT.
- Pixel este o unitate de măsură pentru orice grafică digitală.
- Fiți atent la multiplicatori și de ce proiectați în loc să vă concentrați pe PPI.
- Utilizați setări PPI realiste atunci când proiectați digital. Utilizați ceva care vă oferă o idee clară despre afișarea finală a dispozitivului (72-120ppi pentru 1x web/desktop, de exemplu).
- Utilizați aceeași valoare PPI pentru toate fișierele.
Această problemă este tratată mai detaliat într-o postare pe StackExchange.
Cum să faci față PPI pe iOS
Este timpul să ne aprofundăm în designul specific platformei.
Să ne amintim ce dispozitive iOS a apărut la începutul anului 2014.
Când vine vorba de dimensiunea ecranului și DPI, iOS are 2 tipuri de dispozitive mobile și 2 tipuri de ecrane pentru tablete și desktop-uri.
În ramura mobilă au iPhone și, bineînțeles, iPad.
În categoria de telefoane se află vechiul 3GS (încă suportat de iOS6) și mai sus. Doar iPhone 3GS este non-retina. iPhone 5 și versiunile superioare utilizează un ecran mai lung cu același DPI ca și iPhone 4 și 4s. Iată o foaie de cheat pentru tine:
În septembrie 2014 a fost anunțată Apple Keynote 2014, acum aveți 2 noi categorii de iPhone: iPhone 6 și iPhone 6 Plus.
iPhone 6 este puțin mai mare decât 5 (cu 0,7 inchi), dar PPI este același. iPhone 6 Plus, pe de altă parte, introduce un multiplicator complet nou pentru iOS - @3x, datorită dimensiunii sale de 5,5″.
Există ceva special în modul în care iPhone 6 Plus își gestionează ecranul în comparație cu alte modele de iPhone: Reduce grafica.
Când creați un design pentru iPhone 6, de exemplu, veți desena pe o pânză de 1334*750px, iar telefonul va randa 1334*750 pixeli fizici. În cazul iPhone 6 Plus, telefonul are o rezoluție mai mică decât imaginea, așa că va trebui să realizați designul la o rezoluție de 2208 * 1242px, iar telefonul îl va reduce deja la dimensiunea ideală. Consultați ilustrația de mai jos:
Rezoluția fizică este cu 15% mai mică decât rezoluția de randare, vor apărea unele erori precum jumătate de pixeli, care pot face ca cele mai fine detalii să fie puțin neclare. Rezoluția este atât de mare încât aceste imperfecțiuni vor fi aproape invizibile, dacă nu te uiți prea atent. Așadar, desenați pe o pânză de 2208*1242px și amintiți-vă posibilele erori pentru detalii foarte mici, cum ar fi separatoarele. Uită-te la simulare:
Concluzie, reguli Android:
- Android are 7 DPI-uri diferite, trebuie să vă faceți griji pentru 4 dintre ele: mdpi,hdpi,xhdpi,xxhdpi plus unul dacă doriți să creați o versiune viitoare, în XXXHDPI
- MDPI este DPI de bază la un multiplicator 1x
- Android folosește dp în loc de pt pentru specificații, dar sunt în esență același lucru
- Pixeli rotunji obținuți din factori zecimali.
- Livrați sursele în format .png.
- A face exerciţii fizice sistem unificat nume pentru fișierele sursă împreună cu persoana responsabilă pentru implementarea acestora.
PPI pe Mac și Chrome OS
Mac (OSX) și sistemul de operare Chrome se comportă destul de similar în ceea ce privește PPI. Ambele sisteme de operare acceptă PPI standard (100%) și rezoluții mai mari, inclusiv retina (200%). Ca și în cazul modelelor iPhone și iPad, acesta utilizează doar un multiplicator de 2x.
Chiar dacă majoritatea utilizatorilor dvs., atât Mac, cât și Chrome OS, vor fi pe dispozitive cu rezoluție joasă, vă recomand cu căldură să pregătiți și versiuni de înaltă rezoluție ale ecranelor. Surse pentru viitor versiuni Chrome Sistemul de operare include fișiere de înaltă rezoluție. Crede-mă, nu va fi o pierdere de timp.
În prezent, există doar trei laptop-uri care utilizează acest PPI - MacBook Pro 13″, 15″ și Chromebook Pixel. În plus, Chromebook Pixe este și ecran tactil.
Surse necesare, exemplu Chrome
Un exemplu perfect al acestei asemănări este codul sursă al butonului din bara de instrumente Chrome. Folosim aceleași butoane pe ambele platforme. Chiar dacă codul este diferit, grafica este identică. Priviți meniul Chrome și butoanele de marcare:
Concluzie:
- Chrome OS și OSX folosesc un multiplicator, 2.
- Doar ecranul de înaltă rezoluție Chrome OS acceptă și comenzi tactile.
Surse extensibile
Nu contează dacă este desktop sau aplicatie mobila vă dezvoltați, aproape întotdeauna aveți nevoie de active extensibile. Această sursă permite codului să se redimensioneze la dimensiunea dorită fără a pierde calitatea la randare.
Nu este același lucru cu activele repetabile, care funcționează diferit, deși uneori arată același rezultat.
Uită-te la exemplul de mai jos. Bara de instrumente pe iOS este generată dintr-o sursă super-subțire care se repetă de-a lungul axei X pe întreg ecranul.
Acum să vedem cum diferite platforme folosesc surse extensibile.
Surse extensibile pe iOS
iOS ușurează munca designerului, deoarece întinderea este definită în cod. Tot ce trebuie să faci este să oferi imaginea de bazăși, dacă nu implementați singur designul în cod, dați-i specificații pentru întindere orizontală, verticală sau ambele. Iată un exemplu de buton Chrome standard în iOS.
Surse extensibile pe Android
Android utilizează astfel de surse diferit de iOS. Sursa în sine este înconjurată de 4 linii. Acestea trebuie să fie specificate în felie/imagine ca parte a graficului, afișând literalmente vizual specificațiile sursei în sursa însăși.
Aceste 4 linii definesc două lucruri: zona de zoom și zona de umplere. Dacă acești doi parametri sunt specificați, codul va putea pur și simplu să extindă sursa și să plaseze conținutul în locația specificată. Priviți exemplul de mai jos - o versiune pentru Android a butonului standard Chrome pe care l-ați mai văzut.
După cum puteți vedea, imaginea cu 9 petice este un set de 4 dungi goale #000000. Ar trebui să aibă o lățime de 1px pentru orice DPI; Aceasta este o indicație de cod. Zona de întindere nu include colturi rotunjite pentru că nu este ceva ce se poate repeta (altfel va arăta groaznic). În acest caz, am adăugat umplutură de 10 dp în jurul butonului. Acesta este ceva ce nu va trebui specificat în specificații.
Utilizarea 9-patch necesită adăugarea .9 la numele fișierului, în același mod în care adăugați @2x pentru surse iOS. Un alt exemplu cu butonul nostru:
Nu uitați să fiți atenți la dimensiunea sursei. Dacă am făcut-o destul de mare în scopuri demonstrative, este important să optimizați greutatea sursei prin reducerea dimensiunii acesteia la minimum, așa cum se arată mai jos. Am lăsat colțurile așa cum erau, dar am redus zona de întindere și conținut la minimum.
Asigurați-vă că marcajele cu 9 petice nu se suprapun pe designul dvs., astfel încât sursa să fie tăiată corect. .9 ar trebui să fie cât mai aproape de original, fără a-l suprapune, încercați să nu introduceți indentarea. Exemplul anterior avea margini inline din cauza umbrei.
9-patch nu înlocuiește exportul sursă pentru fiecare DPI. Acest lucru trebuie făcut pentru fiecare versiune a codului sursă.
În cele din urmă, .9 poate conține mai multe zone extensibile (sus și stânga). Nu l-am folosit prea des, dacă vreodată, în munca mea, dar merită menționat.
Concluzie:Întrebați întotdeauna persoana care implementează designul dvs. care este cea mai bună soluție de utilizat, în special pentru desktop. Cu cât aveți mai multe imagini, cu atât aplicația va fi mai grea și vă va fi mai greu să actualizați sursa dacă sunt necesare modificări. 9-patch trebuie folosit numai cu numele corecte și organizarea corectă a surselor.
Surse vectoriale
Pe măsură ce varietatea de ecrane care utilizează intervale mai mari DPI continuă să crească, este mai mult decât demn de luat în considerare trecerea la surse vectoriale în loc de cele raster.
Cea mai des folosită și răspândită formă de sursă vectorială este formatul .svg. Este un fișier bazat pe .xml care poate fi citit și editabil de majoritatea programelor, inclusiv de browsere web, deoarece a fost creat inițial pentru web. Un alt format acceptă vectori precum .ai (Adobe Illustrator), .eps sau chiar .pdf.
Principalul avantaj al imaginilor vectoriale este scalabilitatea lor. Nu este nevoie să creați hărți de bit pentru toate variațiile PPI, vectorul va fi scalat automat pe baza multiplicatorului de ecran.
Svg conține informații XML despre cum să desenați grafice. Software-ul/OS/browserul interpretează apoi aceste comenzi pentru a reda sursa la dimensiunea selectată.
Utilizarea acestui format are beneficii uimitoare:
- Reduceți dimensiunea aplicației
- Reducerea totală a utilizării rasterului
- Mai ușor de schimbat culorile în mod programat
- Scalare automată și nedistructivă
Deși există câteva dezavantaje:
- Libertate vizuală mai mică, nu foarte convenabil pentru grafică complexă, în special umbre complexe, degrade și alte efecte
- Poate avea un impact negativ asupra aplicației sau site-ului din cauza resurselor de procesare necesare.
- Fără control asupra pixelilor datorită scalării automate.
Odată cu evoluția designului interfeței către stiluri mai „plate”, utilizarea mai puțină a umbrelor, a gradienților, .vector devine din ce în ce mai util și mai folosit. În ciuda acestui fapt, trebuie să utilizați sursele vectoriale cu precauție.
După cum sa menționat deja în dezavantaje, .svg poate afecta foarte mult performanța produsului. Formatul funcționează excelent pe web; pentru iOS și Android, sunt de preferat soluții vectoriale separate. iOS folosește .pdf, Android - VectorDrawable.
Specificațiile sistemului de operare Chrome cu privire la această chestiune nu au fost încă lansate. Deși, având în vedere că totul Aplicații Chrome Sistemele de operare sunt aplicații web, aș sugera să faceți oricum design tactil. Sfatul meu: utilizați standardele tactile Android.
Web, dispozitive hibride și viitor
Dacă creați modele pentru dispozitive mobile, va fi clar în ce direcție trebuie să mergeți - cu siguranță controlul tactil. Dacă proiectați pentru desktop, faceți-l să nu fie tactil. Sună simplu, dar ignoră cea mai recentă tendință cu popularitate în creștere - dispozitivele hibride.
Dispozitivul hibrid poate fi controlat fie tactil, fie non-touch. Chromebook Pixel, Surface ProȘi Lenovo Yoga - bun pentru asta exemple.
Ce să faci în acest caz? Nu există un răspuns simplu la această întrebare, dar voi încerca să vă sfătuiesc să alegeți comenzile tactile. Aceasta este direcția în care se dezvoltă tehnologia.
Dacă proiectați pentru web, gândiți-vă control tactil anticipat.
Concluzie:
- Indiferent ce ai face pentru viitor, gândește-te la proiectele tale în ceea ce privește dispozitivele mobile și comenzile tactile.
- Utilizați standardele zonei tactile pentru fiecare sistem de operare. Acest lucru va ajuta la îmbunătățirea designului și la obținerea coerenței. Dimensiuni standard ale zonelor tactile mai mult datÎn scop de referință, nu este necesar să le respectați cu strictețe. Tu controlezi procesul și iei singur decizii.
Software de proiectare a interfeței
Software-ul nu definește abilitățile unui designer, dar alegerea instrumentului potrivit pentru o anumită sarcină poate îmbunătăți considerabil productivitatea și simplifica procesul de proiectare în sine. Know-how-ul software nu ar trebui să fie singura ta abilitate, dar învățarea și stăpânirea instrumentelor potrivite va oferi o bază excelentă pentru a-ți transforma ideile în realitate.
Software-ul diferit are abordări diferite pentru a lucra cu variații DPI în proiectarea interfeței. Unele dintre programe sunt deosebit de bune pentru anumite scopuri. Iată cele mai populare soluții:
Photoshop
Mama tuturor instrumentelor de design. Posibil cea mai populară alegere pentru designul interfeței astăzi. Există nenumărate resurse, tutoriale și articole dedicate Photoshop. Acest „bătrân” a fost la originile dezvoltării industriei de design de interfețe.
Inițial, programul a fost creat pentru procesarea graficelor raster și a fotografiilor, așa cum se poate vedea chiar și din nume. De-a lungul anilor, a evoluat, iar designerii au început să-l folosească pentru proiectarea interfeței. Acest lucru a fost parțial dictat de obicei, dar și de faptul că era aproape singurul instrument capabil să ofere calitatea cerută.
Photoshop este de departe liderul în editarea raster și, de asemenea, ocupă primul loc în popularitate pentru designul de interfețe. Datorită existenței sale de zeci de ani, programul a devenit plin de funcționalități, motiv pentru care nu este atât de ușor de stăpânit. Este exact cazul când aproape totul se poate face în el, dar nu întotdeauna în cel mai optim mod.
Deoarece a fost creat inițial pentru grafica raster, Photoshop este independent de DPI, spre deosebire de Illustrator și Sketch, descrise mai jos.
Ilustrator
Acesta este fratele vector al lui Photoshop. După cum spune și numele, a fost creat pentru ilustratori, dar este folosit activ și în proiectarea interfeței.
Illustrator este bine adaptat modelelor de tipărire, la fel ca și interfața sa, lucrul cu culori, scară, rigle și unități de măsură poate fi confuz la început, va dura puțin timp și modificări minore pentru a se adapta la designul interfeței. La fel ca Photoshop, este incredibil Unealtă puternică cu o curbă de învățare foarte abruptă.
Spre deosebire de Photoshop, Illustrator este independent de DPI datorită vectorizării sale. Spre deosebire de imagini raster, Grafică vectorială se bazează pe formule matematice și poate fi scalat programatic fără pierderea calității.
Înțelegerea diferenței dintre imaginile raster și cele vectoriale este esențială pentru a crea modele și elemente scalabile.
Schița 3.0
Schiță – relativ instrument nou comparativ cu Photoshop și Illustrator. Apărut cu doar 4 ani în urmă, acest program a făcut mult zgomot (într-un mod bun) în industria designului de interfețe. Motivul este că Sketch a fost conceput inițial cu un singur scop - designul interfeței. Sketch se poziționează ca un instrument perfect adaptat publicului său de nișă - designerii de interfețe.
Sketch este potrivit pentru prototipuri brute, precum și pentru design vizual mai complex. Este complet bazat pe vectori, precum Illustrator, cu o interfață minimalistă și foarte bine gândită. Combinația de panouri de artă cu ușurința de utilizare și flexibilitatea sistemului de generare sursă face ca Sketch să fie cel mai bun solutie rapida pentru design multi-DPI și multi-platformă. Lansările recente îl fac o alternativă foarte demnă la Photoshop.
Dezavantajul este că Sketch este dezvoltat de o echipă mai mică și încă nu este la fel de popular ca Photoshop. În plus, are un set destul de slab de capabilități pentru procesarea raster. În acest sens, Photoshop este mult mai bun. Și în sfârșit, fiind încă destul de tânăr, nu are așa ceva o sumă imensă resurse, tutoriale și o comunitate grozavă precum Photoshop. Dar trebuie remarcat faptul că comunitatea este foarte activă și motivată pentru dezvoltare.
Din experiență personală, sunt utilizator Photoshop de la vârsta de 8 ani, dar recent am trecut la Sketch 3.0 pentru majoritatea sarcinilor de proiectare. Acesta nu este o dovadă a calității; cred că Photoshop este încă un instrument grozav. Schița se potrivește mai bine nevoilor mele.
Figma
Nou pentru sfârșitul anului 2015, Figma este un instrument de proiectare vectorială bazat pe browser (funcționează în principal prin Chrome). Este ca o versiune bazată pe cloud a Sketch, cu capabilități de colaborare în echipă și integrare Slack. O realizare impresionantă a ingineriei în încercarea de a realiza instrumentul de proiectare al viitorului.
Cel mai mare avantaj al Figma este multiplataforma (funcționează oriunde rulează Chrome) și capacitatea sa de a colabora și edita cu mai multe persoane în același timp. Cu toate acestea, dacă dvs. sau compania dvs. nu sunteți obișnuiți în mod deosebit să lucrați în servicii web, alegerea poate fi nereușită, deoarece nu există o versiune locală a programului.
Concluzie: Nu există instrumente ideale, dar există acelea cu care vă simțiți confortabil să lucrați. Dacă aveți suficient timp și bani, testați toate programele enumerate pentru a vă forma propria părere.
