Este importantă densitatea mare de pixeli pe afișajul unui smartphone? Ce este ppi sau cât de importantă este densitatea pixelilor
În industria high-tech, un nou hobby câștigă amploare - plasarea cât mai multor pixeli pe unitate de suprafață a ecranului. În rest, am ratat foarte mult competițiile tehnologice după ce cursa pentru megaherți și megapixeli a devenit un lucru din trecut.
Apple a început o nouă cursă, așa cum se obișnuiește în ultimul deceniu. Primul smartphone iPhone 4 cu ecran de înaltă definiție a fost introdus în iunie 2010 de însuși Steve Jobs. A fost un display destul de mic de 3,5 inchi conform standardelor actuale, dar a primit o rezoluție hardware de 960x640 pixeli. Lățimea unui pixel pe un astfel de ecran era de numai 78 de microni, iar densitatea pixelilor a fost de 326 pixeli pe inch (128 pixeli pe cm). Pentru comparație: densitatea pixelilor pe ecranul unui smartphone obișnuit este de aproximativ 160 ppi, iar pe monitoarele computerelor este mai mică de o sută.
Noul ecran a fost numit solemn Retina display - din cuvântul englezesc care înseamnă „retina ochiului”, pentru care a fost oferită o explicație frumoasă: unele studii au arătat că o persoană nu este capabilă să distingă punctele individuale cu ochiul liber la o densitate. peste 300 ppi la o distanță de 10-12 inci, atunci există aproximativ 25-30 cm Telefoanele mobile sunt de obicei ținute la această distanță de ochi, așa că a fost aleasă această valoare, puțin mai mult de 300 ppi.
Desigur, au existat imediat cei care au vrut să conteste rezultatele acestor studii anonime. Astfel, celebrul popularizator american al științei și astronomul Philip Plate a spus că, dacă aveți o vedere acută, puteți distinge cu ușurință pixelii individuali pe un astfel de ecran chiar și de la 30 cm, dar pentru o persoană obișnuită aceste puncte nu vor fi observate.
Între timp, expertul în calitatea imaginii și președintele DisplayMate Technologies Raymond Soneira a remarcat că rezoluția reală a afișajului Retina este semnificativ mai mică decât rezoluția retinei. Cert este că rezoluția depinde în mare măsură de unghiul în care privim obiectul. Pentru o persoană cu vedere perfectă, rezoluția ochiului este de aproximativ 0,6 minute arc, adică 0,01 grade. Aceasta înseamnă că două obiecte separate, aflate la mai mult de 5.730 de picioare sau 1,75 km, vor fi percepute ca un punct. Pe baza acestui fapt, Soneira a concluzionat că, dacă privim un smartphone la o distanță de 30 cm, atunci rezoluția ochiului nostru ajunge la 477 ppi, iar dacă mărim la 20 cm, atunci toate 716 ppi. Pentru a obține 318 ppi, trebuie să luați telefonul la o distanță de 45 cm.
Soneira nu a ținut cont de un singur lucru: în realitate, nu există atât de mulți oameni cu vedere perfectă, iar rezoluția retinei unei persoane obișnuite cu vedere normală este de aproximativ 1 minut de arc. După ce am făcut corectarea corespunzătoare, vom obține râvnitul 300 ppi - o valoare care poate fi obținută prin calcule simple și deloc prin unele cercetări mitice despre care a vorbit Jobs.
Deoarece rezoluția ochilor depinde de distanța la care observăm obiectul, pentru a obține efectul unei imagini „fără pixeli” pe ecranele diferitelor dispozitive, sunt necesare diferite densități de puncte. Prin urmare, ecranul Retina de 9,7 inchi al tabletei iPad are o densitate mai mică de 264 ppi (105 pixeli pe cm), iar ecranele de 15 și 13 inchi ale laptopurilor MacBook Pro au 220 ppi (87 pixeli pe cm) și 227 ppi (89 pixeli pe cm ).
Jobs a avut dreptate în privința principalului lucru: pentru a nu mai distinge pixelii de pe ecranul gadgetului cel mai aproape de ochi - un smartphone, este suficientă o densitate de puțin peste 300 ppi. Dar declanșatorul fusese deja apăsat și o mulțime de companii s-au implicat într-o cursă care nici măcar nu avea sens teoretic să crească densitatea pixelilor ecranului. Principalul lucru este să depășești Apple, dar dacă există sau nu vreun sens în acest lucru este de o importanță secundară.
Drept urmare, am primit deja o mulțime de produse curioase, când te uiți la ele nu știi dacă să plângi sau să râzi. Japanese Sharp a fost unul dintre primii care a lansat un smartphone cu ecran Full HD de cinci inchi pentru piețele străine: cu o rezoluție de 1920x1080, densitatea pixelilor afișajului SH930W este de 440 ppi. HTC J Butterfly are un ecran cu caracteristici similare (sau poate pur și simplu exact același). Cifrele sunt impresionante, dar, în primul rând, nu este clar de ce un dispozitiv de buzunar are nevoie de rezoluție Full HD pe un ecran de cinci inchi și, în al doilea rând, vă poate răni ochii privind cele mai mici detalii chiar și pe dispozitive mai puțin high-tech.
Rezoluția ecranului de zece inchi al noii tablete Google Nexus 10 este și mai mare: 2560x1600 pixeli. Adică la fel ca un monitor desktop cu o diagonală de 27-30 inci. Densitatea pixelilor este de 300 de pixeli pe inch. Înseamnă asta că Google sugerează să privești afișajul acestei tablete de la o distanță de 25-30 de inci? Ați încercat vreodată să vă uitați la un televizor de 50 de inchi de la un metru și jumătate distanță? Sentimentul este cam același.
Apogeul nebuniei este un prototip al unui ecran de 9,6 inchi dezvoltat de compania japoneză Ortus Technology. Rezoluția sa este de 3840x2160 pixeli, ceea ce corespunde exact standardului promițător de televiziune Ultra HD, sau 4K, care prevede afișarea de patru ori mai mulți pixeli decât Full HD obișnuit. Densitatea pixelilor acestui ecran este de 485 pixeli.
Redundanța a devenit deja un scop în sine: nimeni nu are nevoie de ecrane, pixelii pe care pot fi văzuți doar la microscop: nu sunt deja vizibili - atunci când sunt folosiți în mod tradițional de oameni sănătoși și sănătoși. Între timp, ecranele cu densitate crescută de pixeli provoacă o mulțime de probleme asociate atât cu hardware-ul, cât și cu software-ul gadgeturilor în care sunt instalate.
În primul rând, ecranele cu rezoluții mai mari și densități mai mari de pixeli consumă mult mai multă energie decât ecranele de dimensiuni similare, cu rezoluție mai mică. Și asta numai atunci când se afișează o imagine statică! Suportul pentru rezoluții ultra-înalte înăsprește foarte mult cerințele pentru subsistemul grafic și, în general, pentru resursele de calcul ale dispozitivului. Aceasta înseamnă nu numai o platformă mult mai scumpă, ci și o creștere bruscă a consumului de energie. Smartphone-urile moderne, chiar și cu ecrane obișnuite, cu greu pot rezista o zi de lucru fără reîncărcare, dar ce se va întâmpla dacă consumul lor de energie crește nici măcar de o dată și jumătate, ci de cel puțin zeci de procente?
Problema software-ului este direct legată de principala cerință pentru un dispozitiv electronic - ușurința în utilizare. Și dacă, așa cum arată practica, gadget-urile care rulează Android pot face față cu ușurință la scalarea interfeței de utilizator și a aplicațiilor la rezoluții mai mari, atunci dispozitivele Windows, destul de ciudat, au probleme mari cu acest lucru.
De exemplu, tableta Samsung Slate 7, echipată cu un ecran de 11,6 inchi cu o rezoluție de 1366x768 pixeli și o densitate de pixeli destul de modestă de 135 ppi, nu poate configura în mod optim interfața cu utilizatorul care rulează Windows 7: fie elementele sale arată prea mici, fie marginile ferestrelor sunt ascunse în afara ecranului. Și aceasta este interfața standard a sistemului de operare! Ce putem spune despre aplicațiile de la terți, ai căror dezvoltatori nu se gândesc în mod special la scalarea pentru diferite rezoluții: multe dintre ele sunt proiectate pentru 96 ppi, și nici un pixel în plus! Și chiar și în Windows 8, unde, așa cum s-a lăudat Microsoft, problema cu interfața a fost practic rezolvată, este încă la fel de relevantă ca și problema aplicațiilor terță parte, ale căror ferestre trebuie examinate cu lupa.
Într-un fel sau altul, startul a fost dat și asistăm la o altă cursă pentru numere frumoase, al cărei sens nu este mai mult decât în zborul cu Macarale Siberiene. Nu putem decât să sperăm că companiile implicate în acest eveniment dubios vor veni cu unele dezvoltări cu adevărat utile și descoperiri tehnologice. În caz contrar, riscăm din nou să obținem camere inutile de 20 de megapixeli cu optica din plastic tulbure.
Nu știu totul, așa că dacă credeți că greșesc undeva, sau trebuie să clarificați ceva sau aveți sugestii sau întrebări pentru a îmbunătăți acest ghid, trimiteți un e-mail (în engleză) la adresa [email protected]. Mă poți găsi și pe mine Stare de nervozitate, sau Facebook.
Ce sunt DPI și PPI
DPI sau (Dots Per Inch) este o măsură a densității spațiale a punctelor utilizate inițial în imprimare. Acesta este numărul de picături de cerneală pe care imprimanta dvs. poate încăpea într-un inch. Un DPI mai mic are ca rezultat o imagine mai puțin detaliată.Acest concept este aplicat ecranelor computerelor numite PPI (pixeli per inch). Același principiu: numărarea numărului de pixeli pe care ecranul poate afișa pe inch. Numele DPI este folosit și în ecrane.
Calculatoarele Windows au un PPI implicit de 96. Mac folosește 72, deși această valoare nu a fost exactă din anii 80. PC-urile obișnuite, non-retina (de asemenea, Mac-urile) vor avea între 72 PPI minim și aproximativ 120 maxim. Proiectarea cu un PPI între 72 și 120 vă va asigura că munca dvs. are aproximativ același raport de aspect peste tot.
Iată un exemplu de aplicație: Un ecran Mac Cinema de 27 inchi are 109 PPI, ceea ce înseamnă că afișează 109 pixeli pe ecran. Lățimea cu cadru este de 25,7 inchi (65 cm). Lățimea ecranului real este de aproximativ 23,5 inchi, deci 23,5 * 109 ~ 2560, ceea ce face ca rezoluția fizică a ecranului să fie de 2560x1440px. *Știu că 23,5 * 109 nu este exact egal cu 2560. Este de fapt +23,486238532 inci. Ar fi mai precis decât pixelii pe centimetru, dar înțelegi ideea mea.
Impact asupra designului dvs
Să presupunem că desenați un pătrat albastru de 109 * 109 px pe ecranul specificat mai sus. Acest pătrat va avea o dimensiune fizică a ecranului de 1*1 inch. Dar dacă utilizatorul dvs. are un ecran de 72 PPI, pătratul albastru va arăta fizic mai mare, deoarece la 72 PPI ecranul va avea nevoie de aproximativ un inch și jumătate pentru a afișa pătratul albastru de 109 pixeli. Vezi mai jos o simulare a efectului.
Tine minte: Lăsând deoparte diferențele de culoare și rezoluție, rețineți că toată lumea vă va vedea designul diferit. Ar trebui să urmăriți cel mai bun compromis și să construiți pentru cel mai mare procent de utilizatori. Nu presupuneți că utilizatorul are același ecran ca și dvs.
Rezoluția ecranului (și rezoluția nativă)
Rezoluția ecranului poate avea un impact enorm asupra modului în care un utilizator vă percepe designul. Din fericire, deoarece monitoarele LCD au înlocuit CRT-urile, utilizatorii tind să aibă acum rezoluții native ale ecranului cu o dimensiune bună a ecranului și raportul PPI.Rezoluția determină numărul de pixeli afișați pe ecran (de exemplu: 2560 * 1440px pentru un ecran Cinema de 27 inchi) 2560 lățime, 1440 înălțime. Acum, desigur, când știi ce înseamnă PPI, îți dai seama că nu poate fi o unitate de măsură a dimensiunii fizice. Poți avea un ecran de 2560x1440 de dimensiunea peretelui tău și altul de dimensiunea capului tău.
Monitoarele LCD moderne au o rezoluție implicită, aka nativă, care va gestiona numărul exact de pixeli pe care ecranul este capabil să-i afișeze. Monitoarele CRT mai vechi sunt puțin diferite, dar din moment ce pot fi considerate moarte, să nu intrăm în detalii (și să nu afectăm înțelegerea mea parțială a televizoarelor vechi bune).
Să luăm ecranul nostru Cinema de 27 inch, care poate afișa 109 PPI la o rezoluție nativă de 2560 * 1440 px. Dacă reduceți rezoluția, elementele vor apărea mai mari. La urma urmei, aveți doar 23,5 inci orizontale de umplut cu practic mai puțini pixeli.
Am spus virtual, pentru că în acest caz va fi așa. Ecranul are o rezoluție nativă de 2560 * 1440 px. Dacă rezoluția este redusă, pixelii sunt încă afișați la 109 PPI. Pentru a umple acel spațiu și întregul ecran, sistemul de operare va întinde totul, GPU/CPU va lua toți pixelii și îi va calcula cu un nou raport.
Dacă doriți să faceți o rezoluție de 1280 * 720 (jumătate din lățime, jumătate din înălțimea celui precedent) pe 27 de inci, atunci GPU-ul dvs. va trebui să simuleze de două ori dimensiunea pixelilor pentru a umple ecranul. Care va fi rezultatul? Deci - estompați. În timp ce împărțirea cu două rapoarte de aspect va arăta destul de bine din cauza divizorului simplu, dacă doriți 1/3 sau 3/4 din raportul de aspect, veți ajunge cu numere cu zecimale și NU POȚI împărți pixelul. Vezi exemplul de mai jos.
Notă: stânga: redarea unei ferestre OSX la rezoluție nativă (1400*900px): dreapta: redarea unei ferestre OSX la o rezoluție inferioară simulată (1024*640px retina).
Să ne uităm la un alt exemplu de mai jos. Să luăm o linie de 1 pixel pe un ecran cu rezoluție nativă. Acum să facem rezoluția cu 50% mai mică. Pentru a umple ecranul, procesorul va trebui să genereze 150% din imagine înmulțind totul cu 1,5, 1 * 1,5 = 1,5, dar nu poți înjumătăți pixelii. Ceea ce va face este aceasta: va umple pixelii din jur cu o fracțiune de culoare, creând o neclaritate.
Notă: în stânga este o linie de 1 pixel grosime la orice rezoluție implicită, în dreapta este o linie de 1 pixel gros la o rezoluție cu 150% mai mică.
Deci, dacă aveți un Retina Macbook Pro și doriți să schimbați rezoluția, acesta va afișa fereastra de mai jos, anunțându-vă (în captura de ecran de mai jos) cum va „arăta” acea rezoluție 1280*800px. Utilizează experiența utilizatorului cu privire la rezoluția ecranului pentru a exprima relația de dimensiune.
Aceasta este o vedere foarte subiectivă deoarece folosește rezoluția pixelilor ca unitate de dimensiune fizică, dar este adevărat, cel puțin din punctul lor de vedere.
Tine minte: Dacă doriți să vă vedeți întotdeauna designul (sau orice design) pixelul perfect, nu utilizați niciodată o rezoluție non-nativă pentru ecran. Da, poate te simți mai confortabil cu un raport mai mic, dar când vine vorba de pixeli, vrei să fii cât mai precis posibil. Din păcate, unii oameni folosesc rezoluția ca o modalitate de a vedea mai bine ce se întâmplă pe ecran (în special pe desktop) atunci când ar trebui să folosească setările de accesibilitate. Acest lucru va face în continuare designul tău să arate rău, dar din acest punct de vedere, utilizatorii caută o lizibilitate îmbunătățită, nu strălucire.
Ce este 4k
Poate că ați auzit multe despre termenul 4K în ultima vreme (cel puțin când am scris despre el la începutul lui 2014), 4k este un subiect destul de trendy. Pentru a înțelege ce este, să înțelegem mai întâi ce înseamnă „HD”.
Fii atent, aceasta este o simplificare excesivă. Voi vorbi doar despre cele mai comune rezoluții. Există diferite categorii de HD. Termenul HD se aplică oricărei rezoluții începând de la 1280x720px sau 720p pentru linii orizontale de 720 pixeli. Unii pot numi și această rezoluție SD (definiție standard).
Termenul Full HD se aplică ecranelor de 1920x1080px. Majoritatea televizoarelor și telefoanelor de ultimă generație (Galaxy SIV, HTC One, Sony Xperia Z, Nexus5) folosesc această rezoluție.
4K începe de la 3840x2160 pixeli. Se mai numește și Quad HD și poate fi numit UHD din Ultra HD. Mai simplu spus, pe un ecran 4K puteți împacheta 4 1080p, în ceea ce privește numărul de pixeli. O altă 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
Sistemele de operare moderne nu scala 4K, ceea ce înseamnă că, dacă conectați un afișaj 4K la un Chromebook sau MacBook, acesta va lua activele cu cel mai mare DPI, în acest caz 200% sau @2x (de două ori mai mare) și le vor afișa la raport normal. Acest lucru va face ca totul să arate bine, dar mic.
Exemplu ipotetic: dacă conectați un ecran de 12" 4K la un computer cu un ecran de 12" de înaltă rezoluție (2x), totul va arăta la jumătate din dimensiune.
Tine minte:
Monitorizați Hertz
Aici luăm o mică pauză de la PPI și rezoluția ecranului. Poate ați văzut că lângă setările de rezoluție a ecranului există o valoare pentru Hz-ul monitorului. Nu are nimic de-a face cu PPI, dar în cazul în care vă întrebați, Hertz - sau rata de reîmprospătare a unui monitor - este o unitate de viteză la care monitorul dvs. va afișa o imagine fixă sau un cadru pe secundă de timp. Un monitor de 60 Hz va putea afișa 60 de cadre pe secundă. Monitor 120 Hz - 120 de cadre pe secundă etc.
În contextul unei interfețe cu utilizatorul, valoarea Hertz (Hz) va determina cât de netedă și de detaliată va apărea animația dvs. Majoritatea ecranelor rulează la 60 Hz. Vă rugăm să rețineți că numărul de cadre afișate pe secundă depinde și de puterea de procesare și grafică a dispozitivului. Conectarea unui ecran de 120 Hz la un Atari 2600 ar fi complet inutilă.
Pentru o mai bună înțelegere, aruncați o privire la exemplul de mai jos. T-Rex merge de la punctul A la punctul B cu pași la fel de egali și rapidi pe un ecran de 60 Hz și 120 Hz. Un ecran de 60fps poate afișa 9 cadre în timpul unei animații, în timp ce un ecran de 120fps poate afișa în mod logic de două ori mai multe cadre în aceeași perioadă de timp. Animațiile vor arăta mai fluide pe un ecran de 120 Hz.
Tine minte: Unii oameni pot spune că ochiul uman nu poate vedea mai mult de 60 de cadre pe secundă. Nu este corect. Nu asculta și pleacă râzând isteric.
Ce este un display retină
Apple a introdus termenul de afișare „Retina” pentru lansarea smartphone-urilor iPhone 4. Acesta se numește Retina (tradus ca retina) deoarece PPI-ul dispozitivului era atât de mare încât ar fi probabil imposibil ca retina unei persoane să vadă pixeli individuali pe ecran. .Această afirmație este valabilă pentru dimensiunile ecranului din gama de dispozitive în care este utilizat, dar în timp ce ecranele sunt din ce în ce mai bune, ochii noștri sunt acum suficient de antrenați pentru a percepe pixelii - în special pentru elementele UI rotunjite.
Din punct de vedere tehnic, ele 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 și 163PPI.
iPhone 4/S avea o diagonală de 3,5 inci și o rezoluție de 960 * 640px și 326ppi.
BOOM! Exact de două ori. Multiplicator simplu. Deci, în loc să fie mai mici, elementele de pe ecran par de două ori mai clare vizual, deoarece au de două ori mai mulți pixeli și exact aceleași dimensiuni fizice. Un pixel normal este egal cu 4 pixeli retinei.
Luați în considerare exemplul de mai jos pentru aplicarea directă într-un design complex.
Notă imagine: Este dificil să simulezi o calitate diferită a imaginii de la două dispozitive la un al treilea dispozitiv, adică cel la care te uiți acum. Calitatea imaginii va arăta de două ori mai bună și mai clară pentru un player de muzică retina, chiar și ocupând același spațiu fizic. Dacă doriți să verificați singur, am folosit unul dintre programele mele gratuite, puteți descărca codul sursă.
Termenul de afișaj „Retina” este deținut de Apple, așa că alte companii vor folosi „HI-DPI” sau „Super power pixel maximum sp33d display” (sunt pe cale să-l fac pe acesta din urmă) sau nimic din toate acestea. Tot ce trebuie să faci este să citești specificațiile dispozitivului și să afli care sunt DPI-ul și dimensiunea ecranului (ce distractiv).
Tine minte: Produsele Apple sunt o modalitate excelentă de a vă familiariza cu conversiile DPI și de a înțelege diferențele dintre rezoluție, PPI și raportul de dimensiune fizică, deoarece trebuie să vă faceți griji doar pentru un multiplicator.
Ce este un multiplicator
Când vine vorba de conversia designului dvs. pentru toate IPP posibile, multiplicatorul va fi salvatorul dvs. matematic. Dacă cunoașteți multiplicatorul, nu mai trebuie să vă faceți griji cu privire la caracteristicile detaliate ale dispozitivului.Să luăm exemplul nostru de iPhone 3G și 4. Ai de două ori mai mulți pixeli în aceeași dimensiune fizică. Prin urmare, multiplicatorul dvs. este 2. Aceasta înseamnă că pentru a vă face elementele grafice compatibile cu rezoluția 4G, trebuie pur și simplu să înmulțiți dimensiunea elementelor dvs. grafice cu 2 - și atât.
Să presupunem că creați un buton de 44*44px, care este ținta tactilă recomandată pentru iOS (voi vorbi despre asta mai târziu). Să-i numim numele tipic de buton „JIM”.
Pentru a face JIM bine pe iPhone 4, trebuie să creați o versiune care este de două ori mai mare. Ceea ce facem mai jos.
Notă: stânga - 2px colțuri rotunjite 16px dimensiunea fontului, dreapta 4px colțuri rotunjite 32px dimensiunea fontului.
Destul de simplu. JIM are acum o versiune de Jim.png pentru PPI normal (IPhone 3) și o versiune [email protected] pentru 200% PPI (iPhone 4).
Acum întrebi: „Dar stai! Sunt sigur că există și alți multiplicatori decât doi. Da, există și aici devine un coșmar. Bine, poate nu este un coșmar, dar sunt sigur că preferați să vă petreceți ziua călcându-vă șosetele decât să vă ocupați de multiplii multipli. Din fericire, nu este atât de înfricoșător pe cât crezi, vom ajunge la asta mai târziu.
Să vorbim mai întâi despre unități, pentru că acum veți avea nevoie de o altă unitate decât pixelul pentru a vă descrie design-urile multi-DPI. Atunci e timpul pentru DP și PT.
Tine minte: Pentru fiecare design la care lucrați trebuie să cunoașteți multiplicatorul. Multiplicatorii țin împreună această lume a haosului de dimensiuni ale ecranului și PPI și o fac ușor de înțeles pentru oameni.
Ce sunt DP, PT și SP
DP sau PT este o unitate de măsură folosită pentru a descrie layout-urile dvs., creată pentru mai multe dispozitive și DPI.DP sau DiP înseamnă Pixel independent de dispozitiv și PT înseamnă Point. PT folosește Apple; DP este folosit în Android, dar în esență sunt aceleași. Pe scurt, ele determină dimensiunea indiferent de multiplicatorul dispozitivului. Acest lucru este foarte util atunci când discutăm probleme tehnice. sarcini între subiecte la fel de diverse ca proiectantul şi inginerul.
Să luăm exemplul nostru anterior de buton, „JIM”.
Jim are o lățime de 44 de pixeli pentru ecranele obișnuite, fără retină, și de 88 de pixeli pentru ecranele cu retină. Să fim tehnici și să adăugăm căptușeală de 20 de pixeli în jurul lui Jim pentru că îi place spațiul alb. Apoi indentarea va fi de 40px pentru retină. Dar nu are sens să țină cont de pixelii retinei atunci când proiectezi pe un ecran non-retină.
Vom proceda astfel: vom lua ca bază 100% raportul de aspect al unui ecran obișnuit non-retina.
În acest caz, JIM-ul va avea dimensiunea de 44*44DP sau PT și o umplutură de 20DP sau PT. Îți poți oferi tehnologia. job în orice PPI, JIM va fi în continuare 44 * 44dp sau pt.
Android și IOS adaptează această dimensiune la ecran și convertesc cu multiplicatorul corect. Acesta este motivul pentru care cred că este mai ușor să proiectați întotdeauna cu PPI implicit pentru ecranul dvs.
SP este utilizat separat de DP și PT, dar funcționează la fel. SP înseamnă pixeli independenți de scară și este folosit pentru a determina dimensiunile fonturilor. SP depinde de setările de font ale utilizatorilor de dispozitive Android. Pentru un proiectant, definiția SP este aceeași cu definiția DP pentru orice altceva. Luați ca bază ceea ce poate fi citit la scară 1x (16SP, de exemplu, este o dimensiune mare a fontului pentru citire).
Tine minte: când compilați tehnic sarcină, utilizați întotdeauna valori independente de rezoluție/scală. Mereu. Cu cât dimensiunea/rezoluția ecranului diferă mai mult, cu atât acest lucru este mai semnificativ.
Setarea PPI
Acum că știți ce sunt PPI, retina și multiplicatorul, este important să spun ceva despre care nu am fost întrebat prea mult și care este confuz: „Ce se întâmplă dacă schimb configurația PPI în editorul meu grafic?”Dacă ți-ai pus această întrebare, înseamnă că ești oarecum familiarizat cu editorii de imagini. Acum este foarte important să înțeleg ceva care mi-a luat ceva timp să înțeleg: Pentru tot ceea ce nu poate fi imprimat, se folosesc dimensiunile pixelilor, indiferent de configurația PPI inițială.
Setările PPI din programe sunt o moștenire a tipăririi. Dacă proiectați doar pentru web, PPI nu va avea niciun efect asupra dimensiunii bitmap-ului dvs. Acesta este motivul pentru care folosim multiplicatori mai degrabă decât valori specifice PPI. Pânza și grafica dvs. vor fi întotdeauna convertite în pixeli de către software folosind multiplicatorul corespunzător.
De exemplu. Puteți încerca singuri acest lucru într-un program care vă permite să reglați PPI, de exemplu Photoshop. Am desenat un pătrat de 80*80px și un text de 16pt în Photoshop cu o configurație de 72ppi. Al doilea este același cu configurația 144PPI.
După cum puteți vedea, textul a devenit destul de mare, de două ori mai mare, în timp ce pătratul rămâne același. Motivul pentru aceasta este că programul (Photoshop în acest caz) scalează (cum ar trebui) valorile pt pe baza valorii PPI, rezultând dublarea dimensiunii de redare a textului la setări duble PPI. Pe de altă parte, ceea ce a fost definit de pixeli - pătratul albastru - rămâne exact aceeași dimensiune. Un pixel este un pixel și va rămâne un pixel indiferent de setările PPI. Ele diferă unele de altele doar prin PPI-ul ecranului care le afișează.
Este important să rețineți că atunci când proiectați pentru digital, PPI va afecta doar modul în care vă percepeți designul și fluxul de lucru și grafica pt, cum ar fi fontul. Dacă includeți fișiere sursă cu diferite setări PPI în munca dvs., programul va redimensiona orice imagine transferată între diferitele fișiere în funcție de raportul PPI al fișierului de primire. Aceasta va deveni o problemă pentru tine.
Soluţie? Utilizați un PPI (pentru design 1x, de preferință în intervalul 72-120) și rămâneți la el. Eu personal folosesc 72 ppi pentru că este setarea implicită în Photoshop și majoritatea colegilor mei fac același lucru.
Tine minte:
Gestionarea PPI în iOS
Este timpul să ne scufundăm în designul specific platformei. Să aruncăm o privire asupra dispozitivelor iOS de la începutul anului 2014. În ceea ce privește dimensiunile ecranului și DPI, cu iOS există 2 tipuri de dispozitive mobile și 2 tipuri de ecrane de laptop/desktop. În categoria mobile, au desigur iPhone și iPad.În categoria de telefoane aveți vechiul 3GS (încă acceptat de iOS6) și mai sus. Doar iPhone 3GS nu este cu retina. iPhone 5 și versiunile superioare utilizează un ecran mai înalt, cu același DPI ca și iPhone 4 și 4s. Vezi fișa cheat de mai jos:
Notă: 1) 1x multiplicator, 2) 2x multiplicator, 3) 2x multiplicator.
În septembrie 2014, Apple a introdus 2 noi categorii de iPhone: iPhone 6 și iPhone 6 Plus. iPhone 6 este mai mare decât iPhone 5 (cu 0,7 inci), dar cu același PPI. Pe de altă parte, iPhone 6 introduce un multiplicator complet nou pentru iOS, @3x datorită dimensiunii sale, 5,5 inci.
Trebuie să știți ceva special despre modul în care iPhone 6 Plus își gestionează afișajul față de toate celelalte iPhone-uri.
Reduce dimensiunea imaginilor.
De exemplu, atunci când proiectați pentru iPhone 6, proiectați pe o pânză de 1334*750px, iar telefonul redă și 1334*750 pixeli fizici. În cazul iPhone 6 Plus, telefonul are o rezoluție mai mică decât redarea imaginii, așa că trebuie să proiectați pentru o rezoluție de 2208*1242px, iar telefonul va reduce dimensiunea la 1920*1080px. Vezi poza de mai jos:
Rezoluția fizică este cu 13% mai mică decât rezoluția redată. Acest lucru creează câteva erori precum jumătate de pixeli, ceea ce face detaliile foarte fine neclare. Deși rezoluția este atât de mare încât se va observa doar dacă te uiți foarte aproape. Deci, proiectați pe o pânză de 2208*1242px și aveți grijă cu elemente de design foarte mici, cum ar fi super separatoare. Vezi mai jos o simulare a ceea ce se întâmplă:
Un ghid pentru sistemul de operare Chrome nu a fost încă lansat, dar nici Pixel (cu ecran tactil) nu este de mare folos. Cu toate acestea, deoarece toate aplicațiile Chrome OS sunt bazate pe web, aș sugera oricum proiectarea pentru ecrane tactile. Recomandarea mea ar fi să urmați ghidul Android în scopuri tactile.
Web, dispozitive hibride și viitor
Veți fi clar ce decizie să luați dacă dezvoltați pentru mobil. Fă-l pentru ecrane tactile. Dacă dezvoltați pentru computere desktop, alegeți cele non-touch. Sună simplu, dar ignoră o nouă tendință în creștere - dispozitivele hibride.Un dispozitiv hibrid este un dispozitiv care se presupune că oferă atât comenzi tactile, cât și non-touch. Chromebook Pixel, Surface Pro și Lenovo Yoga sunt exemple bune.
Ce să faci în acest caz? Ei bine, nu există un răspuns ușor, dar voi merge mai departe și voi da unul: alege comenzile tactile. Aici va merge tehnologia.
Dacă proiectați pentru web sau ceva de genul acesta, gândiți-vă la comenzile tactile.
Tine minte:
Software de grafică
Software-ul nu vă va face un designer, dar alegerea software-ului potrivit pentru sarcina în cauză vă poate îmbunătăți considerabil productivitatea și vă poate ușura munca. Know-how-ul software nu ar trebui să fie singura ta abilitate, dar învățarea și stăpânirea instrumentului potrivit va contribui în mare măsură la punerea în practică a ideilor tale.Când vine vorba de gestionarea modificărilor DPI în designul interfeței, toate programele funcționează diferit. Unii sunt mai buni decât alții în anumite sarcini. Iată cele mai comune:
Photoshop
Mama instrumentelor de proiectare a interfeței. Probabil cel mai folosit instrument astăzi. Există un număr nesfârșit de resurse, tutoriale, articole pentru acesta. Photoshop a existat aproape din zorii designului de interfață.După cum sugerează și numele, primul obiectiv al programului nu a fost în designul interfeței, ci în retușarea fotografiilor sau a imaginilor raster. A evoluat pe parcursul unui an și odată cu nașterea designului de interfață, designerii și-au schimbat scopul. Acest lucru a fost parțial pentru că erau obișnuiți cu asta și pentru că era singurul program care era capabil să facă lucrurile așa cum era necesar.
Photoshop este până astăzi maestrul editării imaginilor raster și este încă cel mai folosit program de proiectare a interfeței cu utilizatorul. Moștenirea sa de zeci de ani face din Photoshop un program dificil de predat. Folosind Photoshop ca un cuțit uriaș elvețian, puteți face orice, dar nu întotdeauna în cel mai eficient mod.
Deoarece se bazează în mod nativ pe o imagine raster, este dependentă de DPI, opusul căruia Illustrator și Sketch sunt descrise mai jos.
Ilustrator
Editor de vectori, fratele Photoshop. După cum indică și numele, se adresează ilustratorilor, dar poate fi folosit și ca instrument de proiectare a interfeței.Illustrator este potrivit pentru designul de imprimare, astfel încât interfața, gestionarea culorilor, scara, riglele și unitățile de măsură pot fi dezamăgitoare și necesită câteva modificări pentru a fi utilizat cu ușurință doar pentru designul interfeței. La fel ca Photoshop, este un instrument incredibil de puternic, cu o curbă de învățare abruptă.
Diferă de Photoshop prin faptul că este independent DPI datorită bazei sale pe forme vectoriale. Spre deosebire de imaginile raster, graficele realizate cu forme vectoriale se bazează pe formule matematice și vor fi recalculate în software fără pierderi de calitate.
Înțelegerea diferenței dintre imaginile raster și vectoriale este cheia pentru crearea de designuri vizuale scalabile și elemente grafice.
Dacă doriți să începeți să utilizați Illustrator pentru design web/frontend, vă recomand să citiți
Când cumpărăm smartphone-uri, monitoare și alte echipamente care au un ecran, auzim adesea despre ppi, dar puțini dintre noi pot spune exact ce este și ce afectează.
Dar, de fapt, această caracteristică este una dintre principalele la alegere.
Vă vom spune care este sensul real al acestui concept (la urma urmei, puteți găsi multe mituri despre această problemă pe Internet). Merge!
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 ecranul unui monitor, smartphone, tabletă sau alt dispozitiv.
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 inchi 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 formulei (2).
Notă: De fapt, avem 73,4 pixeli, dar nu poate exista un număr non-întreg de pixeli, sunt folosite doar valori întregi.
Exact în același mod, puteți calcula valorile reale ale numărului de pixeli pe inch în orice dispozitiv.
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 smartphone sau tabletă. 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 acest concept are și dezavantaje. Î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 capacitatea bateriei!
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 IPS, LCD și altele.
Să presupunem că venim în magazin și vedem, de exemplu, două dispozitive excelente - Samsung Galaxy J7 și Xiaomi Redmi Note 3. 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ă pe Samsung. Ș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 de smartphone-uri, pentru a asigura funcționarea pe termen lung a dispozitivului cu o imagine clară (ppi mare și/sau tehnologie bună), 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 decât cea a telefoanelor
4Reț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 De asemenea, este important să luați în considerare acoperirea. Î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 relevant în principal pentru alegerea monitoarelor pentru computere și laptopuri. 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 este afișat mai sus, cu atât imaginea va fi mai clară și mai plăcută. Atunci când alegeți smartphone-uri, tablete, monitoare PC, laptopuri și alte echipamente care au afișaj, 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.
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 nu joacă un rol în utilizarea de zi cu zi. Ș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 cele mai importante?
Să ne întoarcem cu șapte ani 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 pentru utilizare practică. 300 dpi - densitatea fotografiilor din reviste lucioase. Și nimeni nu s-a plâns vreodată de calitatea lor.
Și acum despre prezent. Densitatea maximă a ecranului într-un smartphone disponibil pe piață este de 806 pixeli pe inch. Vorbim despre Sony Xperia Z5 Premium, al cărui display de 5,5 inci poate găzdui o imagine completă 4K (2.160 pe 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 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 sale.
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ă de culori largă, dar nu oferă o acuratețe mare a culorii.
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 o paletă largă de culori, face ca imaginea să fie prea strălucitoare și plină de desene animate.
În schimb, avem nevoie de ecrane care 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.
Acest videoclip animat acoperă majoritatea subiectelor din articol, dar dacă sunteți interesat de mai multe detalii pedante, asigurați-vă că citiți întreaga postare.
Densitatea pixelilor se referă la numărul de pixeli care se încadrează într-o anumită dimensiune fizică (de obicei un inch). Pe primul Mac erau 72 de pixeli pe inch - numărul pare mare, dar de fapt aceștia erau pixeli uriași, pe care nu orice grafică îi poate gestiona încă.
Tehnologia ecranelor a avansat foarte mult de atunci, iar acum chiar și cele mai simple ecrane de computer au o rezoluție undeva între 115 și 160 de pixeli pe inch (ppi). Dar un nou capitol din această poveste a început în 2010, când Apple a introdus iPhone-ul cu display Retina, un ecran super-sharp care a dublat numărul de pixeli pe inch. Rezultatul acestei lansări este o grafică mai clară decât am văzut-o vreodată.
Vedeți diferența în pictograma plic de e-mail, precum și claritatea textului? Pentru a menține aceeași dimensiune fizică a interfeței cu utilizatorul, dimensiunile pixelilor au fost dublate. Butonul, care anterior ocupa 44 px, acum ocupă 88 px. Pentru compatibilitatea între diferite dispozitive, designerii ar trebui să producă grafice (cum ar fi pictogramele) în „1x” și în noul format „2x”. Dar apoi mai e o problemă: nu mai poți spune „Hei, acest buton trebuie să aibă 44 de pixeli”, pentru că trebuie să aibă și 88 de pixeli pe alt dispozitiv. Anterior, nu exista o unitate de măsură independentă de pixeli. Soluția a fost „puncte” sau „pt”. 1 punct corespunde cu 1 pixel pe ecrane până la generarea retinei și 2 pixeli pe un ecran retină 2x. Punctele vă permit să spuneți „hei, acest buton ar trebui să aibă o înălțime de 44 de puncte”, iar apoi orice dispozitiv poate adapta acea dimensiune la raportul său de densitate a pixelilor... cum ar fi 1x sau 2x. Sau 3x în cazul iPhone 6 Plus.
PT și DP
Desigur, toate acestea nu sunt relevante doar pentru dispozitivele Apple, în zilele noastre fiecare sistem de operare - fie că este vorba de versiuni desktop sau mobile - acceptă ecrane ppi/dpi ridicate. Google a venit cu această idee propria unitate de măsură pentru Android, independentă de pixeli. Nu se numește „punct”, se numește „DIP” – pixel independent de densitate, prescurtat ca „dp”. Acesta nu este echivalentul iOS al punctelor, dar ideea este similară. Acestea sunt unități de măsură universale care pot fi convertite în pixeli folosind factorul de scară al dispozitivului (2x, 3x etc.).
S-ar putea să vă întrebați despre dimensiunea fizică a punctului. De fapt, designerilor de UI nu prea le pasă de acest lucru, deoarece nu avem niciun control asupra proprietăților hardware ale ecranelor diferitelor dispozitive. Designerii trebuie doar să știe ce densități de pixeli a adoptat producătorul pentru dispozitivele lor și să aibă grijă de pregătirea designurilor la 1x, 2x, 3x și alte rapoarte necesare. Dar dacă ești cu adevărat curios, Apple nu are o conversie permanentă între inci și puncte. Cu alte cuvinte, nu există o densitate unică de pixeli care să reprezinte 1 punct - depinde de dispozitivul specific (consultați secțiunea „Percepția scării” de mai jos). Pe iOS, punctul variază de la 132 dpi la 163 dpi. Pe Android, DIP este întotdeauna 160 ppi.
Haos controlat
Acum pregătește-te să mergi în realitate. În primele zile ale dispozitivelor mobile de înaltă rezoluție, densitățile pixelilor erau pur și simplu de 1x sau 2x. Dar acum totul a luat-o razna - există o mulțime de densități de pixeli pe care designul trebuie să le suporte. Android are un exemplu grozav: la momentul scrierii acestui articol, diferiți producători acceptă șase densități diferite de pixeli. Aceasta înseamnă că o pictogramă care are aceeași dimensiune pe toate ecranele ar trebui să fie realizată în 6 variante diferite. Pentru Apple, două sau trei surse diferite sunt relevante.
Design în vector. Design în 1x.
Există câteva lecții practice pe care ar trebui să le iei din toate acestea. Pentru început, ar trebui să vă creați desenele în vector. Acest lucru permite interfețelor, pictogramelor și altor elemente grafice să se scaleze la orice dimensiune necesară.
A doua lecție: trebuie să desenăm totul pe o scară 1x. Cu alte cuvinte, proiectați folosind puncte pentru toate dimensiunile, apoi scalați la diferite densități mai mari de pixeli atunci când exportați... în loc să proiectați la rezoluțiile finite de pixeli ale dispozitivelor specifice (2x, 3x etc.) și să aveți o mulțime de probleme la export . Deoarece scalarea graficelor de 2x cu 150% pentru a genera o versiune de 3x provoacă contururi neclare, aceasta nu este cea mai bună opțiune. Dar scalarea grafică 1x la 200% și 300% vă permite să mențineți claritatea vizuală.
Aspectele pentru dimensiunile standard de iPhone ar trebui să fie 375x667, nu 750x1334, care este exact rezoluția în care va fi afișat. Majoritatea instrumentelor de proiectare nu fac diferența între puncte și pixeli (Flinto este o excepție de la această tendință), astfel încât designerii pot pretinde că punctele sunt pixeli și apoi pur și simplu exportă elementele la dimensiuni de 2x și 3x.
Falsează până reușești!
Acest lucru este puțin mai complicat, dar merită menționat: uneori dispozitivele mint. Ei pretind că factorul lor de conversie pixel-la-punct este unul, de exemplu, 3x, dar, de fapt, este de 2,61x, iar sursa în sine este scalată de 3x doar pentru comoditate. Asta face iPhone Plus acum. Comprimă o interfață realizată la 1242x2208 la o rezoluție a ecranului de 1080x1920 (cipul grafic al telefonului implementează această scalare în timp real).
Design pentru iPhone Plus ca și cum ar fi de fapt 3x. Telefonul în sine îl va scala la 87%. Deoarece grafica este doar puțin redusă (87%), rezultatul arată încă decent - o linie groasă de 1px pe un ecran de aproape 3x arată încă incredibil de clară. Și există șanse, deși nu am nicio informație din interior, ca Apple să introducă un adevărat iPhone Plus 3x în viitor, deoarece capabilitățile hardware necesare ar putea fi disponibile pentru un produs produs în cantități atât de uriașe. Versiunea actuală a iPhone Plus este pur și simplu acolo până când acest lucru devine posibil.
(Bruce Wong a scris despre ecranul iPhone 6 Plus).
Este acceptabilă această abordare de scalare fără numere întregi? Totul este testat în practică. Este rezultatul unei astfel de scalari destul de invizibil? Multe dispozitive Android recurg și la scalare pentru a se potrivi cu raportul pixel-punct mai standard, dar, din păcate, unele dintre ele nu o fac foarte bine. Scalarea unui astfel de plan nu este de dorit, deoarece tot ceea ce doriți să fie clar și perfect în pixeli la o scară va deveni neclar din cauza interpolării (de exemplu, o linie de 1 px devine 1,15 pixeli). Chiar dacă nu ești un fanatic al pixelilor perfecti ca mine, nu are rost să negi că elementele de design trebuie să fie perfect pixeli pentru a apărea la fel de clare așa cum s-a dorit.
Din păcate, pe măsură ce densitățile pixelilor ajung la 4x și mai mult, estomparea cauzată de scalarea non-intreger devine mult mai puțin subtilă, așa că prevăd că producătorii de dispozitive vor folosi din ce în ce mai mult această abordare în timp. Nu putem decât să sperăm că deficiențele de performanță îi vor reține!
Percepția scalei prin ochii tăi
Să lăsăm toată densitatea de pixeli deoparte pentru un minut și să ne gândim la întrebarea: un buton ar trebui să aibă aceeași dimensiune fizică pe dispozitive diferite? Desigur, folosim doar un buton ca exemplu, dar am putea lua în considerare o pictogramă, un text și o bară de instrumente. Aceste elemente ar trebui să aibă aceeași dimensiune pe toate dispozitivele? Raspunsul depinde:
- Din acuratețe metoda de introducere(senzor sau cursor)
- Din dimensiuni fizice ecran
- Din distante la ecran
Ultimii doi factori merg mână în mână; Deoarece o tabletă are un ecran mai mare decât un telefon, o ținem mult mai departe de noi. Și apoi mai sunt laptopul, desktopul, televizorul... distanța crește odată cu dimensiunea ecranului.
Butonul de pe ecranul televizorului va avea dimensiunea telefonului - pentru că trebuie să fie așa pentru distanța respectivă.
Iată un exemplu mai puțin dramatic și foarte adevărat: pictogramele aplicațiilor de pe o tabletă ar trebui să fie mai mari decât cele de pe un telefon, iar acest lucru se realizează în două moduri: folosind o densitate mai mică a pixelilor sau modificarea dimensiunilor butoanelor (adică dimensiunea punctelor).
Densitate mai mică de pixeli
Ecranele mai mari pe care le folosim la distanță au de obicei o densitate mai mică a pixelilor. Un televizor poate avea o rezoluție de 40 de pixeli pe inch! Pentru vizionarea obișnuită la televizor, acest lucru este destul de acceptabil. Ecranul retină al iPad-ului are o rezoluție de aproximativ 264 ppi, în timp ce ecranul retina al iPhone-ului are o rezoluție de 326 ppi. Deoarece pixelii de pe iPad sunt mai mari (ecranul este mai puțin dens), întreaga interfață devine puțin mai mare. Acest lucru se datorează distanței suplimentare dintre ochii utilizatorului și ecranul iPad-ului.
Marimi diferite
Dar uneori, utilizarea unei densități mai mici de pixeli nu este suficientă... elementele individuale de design trebuie să fie și mai mari. Acest lucru s-a întâmplat cu pictogramele de pe iPad. Pe iPhone au 60x60 pixeli, dar ecranul mai mare al iPad-ului oferă mai mult spațiu, așa că pictogramele 76x76 sunt mai practice.
Schimbarea dimensiunilor pentru diferite dispozitive adaugă mai multă muncă designerilor. Acesta este unul dintre mai multe scenarii în care dispozitivele Apple necesită dimensiuni mai mari decât dispozitivele Android! Din fericire, acesta nu este un caz tipic pentru pictogramele aplicațiilor.
Inspectie sanitara?
Tocmai am discutat despre o mulțime de dificultăți cu care trebuie să le facem față. Din fericire, proiectarea interfeței se referă doar la utilizarea unităților independente de densitate (cum ar fi pt sau dp). Lucrurile devin mai complicate cu pictogramele aplicațiilor, dar există șabloane pentru a ajuta în acest sens. Iată o listă de resurse pe acest subiect:
Resurse importante
Google Device Metrics: listă impresionantă de specificații pentru dispozitive de toate tipurile (Android, iOS, Mac, Windows etc.). Aflați dimensiunile ecranului, densitatea pixelilor și chiar distanța aproximativă la care se află ecranul față de ochii utilizatorului. ScreenSiz.es este o resursă similară.
: Aceste șabloane de design (disponibile pentru toți marii editori de design) sunt foarte utile, atât din punct de vedere practic, cât și pentru referință la cele mai recente specificații pentru Android, iOS, macOS, tvOS, watchOS, Windows, Windows Phone etc.
Un ghid al designerului pentru DPI și PPI: un ghid cuprinzător de Sebastian Gabriel care acoperă și mai multe detalii și tehnici practice pentru designerii Android și iOS.
