Este importantă densitatea mare de pixeli pe afișajul unui smartphone? Ce este densitatea pixelilor și cum să o luați în considerare atunci când proiectați interfețele mobile

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 [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 precisă 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 aplicat: 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 109px. Vezi mai jos pentru 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 acum să aibă 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 inchi, 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 că va umple pixelii din jur cu o fracțiune de culoare, creând o neclaritate.

Notă: în stânga este o linie groasă de 1 pixel la orice rezoluție implicită, în dreapta este o linie groasă de 1 pixel 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:

4k este de 4 ori Full HD;

Dacă sistemul de operare pe care îl utilizați funcționează cu 4K, dar nu îl crește, înseamnă că nu există încă anumite elemente grafice în 4K;

Până în prezent, niciun telefon sau tabletă nu utilizează 4K.

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 retină) deoarece PPI-ul dispozitivului era atât de mare încât probabil că ar fi 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 arată 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ă retină, chiar 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 spunem 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 mai mulți multiplicatori. 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 fontului. 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ă știi 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 ce nu poate fi imprimat, se folosesc dimensiunile pixelilor, indiferent de configurația inițială PPI.

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:

Setările PPI nu afectează exportul pe Internet.

Setările PPI vor afecta numai graficele create din măsurători independente de PPI, cum ar fi PT

Pixel este o unitate de măsură pentru tot ceea ce este digital.

Țineți cont de multiplicatori și de ceea ce dezvoltați, nu de PPI.

Utilizați setări PPI realiste atunci când proiectați pentru digital, care vă oferă o idee despre cum va arăta pe dispozitivele țintă (de exemplu, 72-120ppi pentru 1x site-uri web/desktop-uri).

Păstrați setările PPI aceleași pentru toate fișierele dvs.

În plus, puteți citi despre acest lucru într-o postare interesantă pe StackExchange.

Gestionarea PPI în iOS

Este timpul să ne aprofundă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 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 folosesc un ecran mai înalt, cu același DPI ca și iPhone 4 și 4s. Vezi fișa de 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 va fi vizibilă doar dacă te uiți foarte aproape. Deci, proiectați pe o pânză de 2208*1242px și aveți grijă la elementele 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 înainte și voi da unul: alege comenzile tactile. Aici va merge tehnologia.

Dacă proiectați pentru web sau ceva de genul, gândiți-vă la comenzile tactile.

Tine minte:

Pentru aproape tot ce faceți în viitor, gândiți-vă mobil și atingeți.

Utilizați țintele tactile recomandate pentru fiecare sistem de operare. Acest lucru vă va ajuta să vă îmbunătățiți designul și să obțineți coerență cu sistemul de operare.

Obiectivele senzoriale sunt orientative, nu înseamnă că trebuie să le urmezi la litera. În cele din urmă, tu controlezi experiența.

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 aducerea ideilor tale la viață.

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 proiectarea 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 a fost capabil să facă lucrurile așa cum era necesar.

Photoshop este până în prezent 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 uriaș cuțit 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 tipărire, 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 de 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 cele vectoriale este esențială pentru a crea modele vizuale scalabile și elemente grafice.

Dacă doriți să începeți să utilizați Illustrator pentru design web/frontend, vă recomand să citiți

Designerul Peter Nowell a scris pe blogul său despre densitatea pixelilor în designul aplicațiilor mobile - a explicat despre ce este aceasta și a vorbit despre problemele cu care se confruntă designerii atunci când proiectează interfețe pentru diferite dispozitive.

Editorii secțiunii „Interfețe” publică o traducere a materialului realizat de echipa Sketchapp.

Videoclipul acoperă majoritatea subiectelor din articol, dar dacă sunteți interesat de mai multe detalii, continuați să citiți

Densitatea pixelilor este numărul de pixeli care se încadrează într-o anumită dimensiune fizică (de obicei un inch). Primul Mac avea 72 de pixeli pe inch - un număr care pare mare, dar de fapt aceștia erau pixeli uriași pe care nu i-ar putea gestiona orice placă grafică.

Pictograme pe un computer Macintosh din 1984. Designerul Susan Kare

De atunci, tehnologia ecranelor a avansat semnificativ - acum chiar și cele mai simple afișaje au o rezoluție cuprinsă între 115 și 160 de pixeli pe inch (PPI-pixel per inch). Însă un nou capitol din această poveste a început în 2010, când Apple a introdus iPhone-ul cu un ecran Retina - un ecran foarte clar care a dublat numărul de pixeli pe inch. Rezultatul este o grafică mai clară ca niciodată.

Diferența este vizibilă mai ales în pictograma aplicației de e-mail și în text

Pentru a menține aceleași dimensiuni fizice ale elementelor UI, numărul de pixeli pe inch a trebuit să fie crescut. Butonul, care anterior ocupa 44 px, acum ocupă 88 px.

Pentru compatibilitatea între dispozitive, designerii trebuie să producă elemente grafice atât pentru ecrane obișnuite, cât și pentru ecrane Retina. Dar aici a apărut o altă problemă: acum designerul nu poate spune că un element ar trebui să aibă, de exemplu, 44 de pixeli în înălțime, deoarece pe un alt dispozitiv același element ar trebui să fie de două ori mai înalt.

Soluția a fost puncte, sau pt. Un punct corespunde unui pixel pe ecranele pre-Retina și doi pixeli pe ecranele Retina. Acum, dacă unui designer i se spune că înălțimea unui element este de 44 de pixeli, el poate adapta această dimensiune la orice raport de densitate a pixelilor - 1x, 2x sau 3x în cazul iPhone 6 Plus.

PT și DP

Desigur, toate acestea sunt relevante nu numai pentru dispozitivele Apple. Fiecare sistem de operare - desktop sau mobil - acceptă ecrane ppi/dpi ridicate. Google a venit cu propria sa unitate de măsură independentă de pixeli pentru Android, numită DIP - pixel independent de densitate, prescurtat ca „dp”. Acesta nu este echivalentul iOS, 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 și așa mai departe).

S-ar putea să vă întrebați despre dimensiunea fizică a articolului. De fapt, designerii de interfețe nu trebuie să se gândească la asta, deoarece nu au control asupra caracteristicilor hardware ale ecranelor diferitelor dispozitive. Designerii trebuie să știe ce densități de pixeli a adoptat producătorul pentru dispozitivele lor și să aibă grijă de pregătirea interfețelor la 1x, 2x, 3x și așa mai departe.

Dispozitivele Apple nu au o singură densitate de pixeli care să reprezinte un singur punct – depinde de dispozitivul specific (consultați „Percepția scării” de mai jos). În iOS, punctul variază de la 132 dpi la 163 dpi. Pe Android, DIP este întotdeauna 160 ppi.

Haos controlat

În primele zile ale dispozitivelor mobile de înaltă rezoluție, densitățile pixelilor erau pur și simplu de 1x sau 2x. Dar acum totul este diferit - există o mulțime de densități de pixeli pe care interfața 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 de fapt în șase variante diferite. Pentru Apple, două sau trei surse diferite sunt relevante.

Design vectorial

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, creați un design folosind puncte pentru toate dimensiunile, apoi scalați la diferite densități mai mari de pixeli atunci când exportați. Scalarea grafică de 2x cu 150% pentru a crea o versiune de 3x are ca rezultat margini neclare, deci nu este cea mai bună opțiune. Dar scalarea grafică 1x la 200% și 300% vă permite să mențineți claritatea.

Rezoluția aspectului aplicației iPhone nu ar trebui să fie 750x1334, ci 375x667 - aceasta este exact rezoluția în care va fi afișată aplicația. Majoritatea instrumentelor de proiectare nu fac diferența între puncte și pixeli, așa că puteți presupune că punctele sunt pixeli și apoi pur și simplu exportați sursa la dimensiunea de 2x sau 3x.

Falsează până devine adevărat

Merită menționat că uneori dispozitivele mint. Ei pretind că factorul lor de conversie pixel-la-punct este, de exemplu, de 3x, dar de fapt, este de 2,61x, iar sursa în sine este scalată de 3x pentru comoditate. Acesta este ceea ce face iPhone Plus, de exemplu. Acesta comprimă o interfață realizată la 1242x2208 la o rezoluție a ecranului de 1080x1920.

Design pentru iPhone Plus ca și cum ar fi 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ă șansa ca Apple să introducă un adevărat iPhone Plus de 3x în viitor, deoarece capabilitățile hardware necesare ar putea fi disponibile pentru un produs produs în cantități atât de uriașe.

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.

Acest tip de scalare este nedorit, deoarece orice doriți să fie clar va deveni neclar din cauza interpolării. 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

Butonul ar trebui să aibă aceeași dimensiune pe dispozitive diferite? Răspunsul depinde de

acuratețea metodei de introducere (senzor sau cursor);
dimensiunile ecranului fizic;
distanta fata de ecran.

Ultimii doi factori merg mână în mână deoarece tabletele au ecrane mai mari în comparație cu smartphone-urile și îl ținem mai departe de noi. Există și laptopuri, computere desktop, televizoare - distanța dintre ochi și ecran crește odată cu dimensiunea acestuia din urmă.

Butonul de pe ecranul televizorului trebuie să aibă dimensiunea unui telefon - pentru că altfel nu va fi vizibil în timp ce stai pe canapea.

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 aceleași pictograme de pe un telefon. Acest lucru este implementat în două moduri: folosind o densitate mai mică a pixelilor sau diferite dimensiuni de pictogramă.

Densitate redusă de pixeli

Ecranele mari pe care le privim de la distanță au de obicei o densitate mai mică a pixelilor. Un televizor poate avea 40 de pixeli pe inch - și, de regulă, acest lucru este suficient. Densitatea de pixeli a ecranelor Retina de pe iPad este de aproximativ 264 ppi; pe iPhone - 326 ppi. Deoarece pixelii de pe iPad sunt mai mari (și mai puțin denși), întreaga interfață devine puțin mai mare. Acest lucru se datorează distanței suplimentare dintre ochii utilizatorului și ecranul iPad-ului.

Cunoașterea care este diferența dintre aceste cantități și unde sunt utilizate va fi utilă multora care sunt legate de tipărire. Fie că este vorba despre un designer, scriitor sau alt creator de materiale tipărite.

Ce este ppi

În termeni simpli, orice imagine raster constă din pixeli - puncte dreptunghiulare colorate. Să lămurim asta imagine raster este o imagine a cărei structură reprezintă o grilă de pixeli pe monitorul unui computer. Formate raster populare - PSD, tiff, png, bmp sau jpg- a căror editare este posibilă în mediul de software specializat, cum ar fi Adobe Photoshop. Există, desigur, mult mai multe formate raster decât cele enumerate, dar pentru a înțelege despre ce vorbim, formatele date vor fi destul de suficiente.

Revenind la pixelii care alcătuiesc o imagine raster, putem spune că acesta este un fel de mozaic de puncte colorate. Mai exact, pătrate. Fiecare pătrat poate avea o singură culoare. Dar imaginea poate conține pixeli de diferite culori și nuanțe. Datorită acestui fapt, se realizează curgerea unei culori în alta.

De exemplu, să luăm o bandă de 1000 de astfel de pătrate (pixeli). Va fi un pătrat negru la un capăt și un pătrat alb la celălalt. Între ele vor fi pătrate de diferite nuanțe. Fiecare pătrat, îndepărtându-se de sulf și apropiindu-se de alb, va fi puțin mai ușor decât precedentul. Cu o mărire mare, vom vedea desigur că toate pătratele sunt de diferite nuanțe. Dar odată cu distanța, va apărea iluzia unui flux lin de culoare sau gradient.

Deoarece imaginea are nu numai lungime, ci și lățime, umplând planul, valoarea ppi arată câte pătrate (pixeli) există pe partea unității convenționale de măsură. Unitatea de măsură standard pentru pixeli din imaginile raster este de un inch. Prin urmare, marcajul 100 ppi ne spune că există 100 de pixeli pe inch. La această rezoluție a imaginii grafice vor fi 10.000 de pixeli pe inch pătrat (100x100). Să repetăm că culoarea unui centimetru pătrat poate fi orice. Există o singură culoare pe pixel.

Ce este lpi

Acum, să vorbim despre transferul imaginilor de pe monitorul unui computer pe hârtie. Monitorul vă permite să afișați nu numai culorile pixelilor, ci și să ajustați luminozitatea acestora. Nu același lucru se poate spune despre presele și imprimantele offset. Acest lucru se datorează imposibilității pur tehnice de a ajusta nivelul de vopsea pentru fiecare pixel individual pe astfel de dispozitive. Dispozitivele de imprimare vă permit doar să aplicați cerneală în anumite locuri de pe hârtie sau să nu o aplicați.

Imprimantele au rezolvat problema aplicării unor volume de cerneală în zone specifice cu eleganța lor obișnuită. Pur și simplu ajustează zona suprafeței de vopsit într-un anumit loc de pe hârtie. Cu această abordare, chiar și cu aceeași grosime a stratului de cerneală aplicat, luminozitatea poate fi ajustată prin creșterea sau scăderea punctelor imprimate. Acest proces se numește rasterizare.

Toate mașinile de tipărit offset funcționează pe principiul serigrafiei. Dacă luați o lupă și vă uitați la imprimarea offset, puteți discerne cu ușurință punctele care alcătuiesc imaginea imprimată. Deoarece metoda rasterizării a apărut mult mai devreme decât invenția computerelor, dimensiunea măsurătorilor raster nu are nimic de-a face cu acestea. Inițial, ecranele de contact au fost folosite pentru screening. Aceasta este o placă transparentă cu umbrire fină aplicată.

Valoarea lpi arată numărul de linii de pe placa raster pe inch. Această valoare corespunde numărului de puncte pe inch din imaginile rasterizate tipărite. Acest indicator se aplică numai imaginilor rasterizate și nu este utilizat în altă parte. Acest parametru se aplică dispozitivelor de imprimare raster. Nu poate fi aplicat unei imagini de computer deoarece, deși se numește imagine raster, este de fapt o imagine semiton.

Văzând valoarea lpi în setările imprimantei, ar trebui să înțelegeți că nu afectează nimic altceva decât numărul de puncte raster pe inch. Pentru a înțelege mai bine diferențele dintre ppi și lpi, merită să spunem că cea mai mică parte a unei imagini de pe un computer este un pixel. Cea mai mică parte a unei imagini pe hârtie este un punct.

În principiu, acești indicatori ar trebui să se potrivească atunci când imprimați o imagine. Cu toate acestea, designerii fac adesea nu doar o greșeală... Ei trimit pur și simplu un aspect pentru imprimare, care este de multe ori mai mare decât capacitățile tehnice ale echipamentelor de imprimare. Cea mai comună rezoluție a imaginii în rândul designerilor este de 300 ppi. Ei aduc proiectul cu o asemenea permisiune la ziar. Dar la tipărirea ziarelor se folosește rasterizarea de maximum 100 lpi. Ca rezultat, obținem că fișierul original ar putea fi de 9 ori mai mic.

Ce este dpi

Acum să ne uităm la valoarea dpi. Această valoare se aplică numai dispozitivului de imprimare raster. De fapt, punctele care alcătuiesc indicatorul lpi sunt la rândul lor formate din puncte mai mici. O serie de aceste puncte minuscule este egală cu o trecere a laserului pe tamburul foto sau filmul. Se dovedește că mulți dpi sunt folosiți pentru a imagini un lpi.

Este clar că cu cât raportul dintre lpi și dpi este mai mare, cu atât vom obține o imprimare de calitate mai bună la ieșire. Aici intră din nou în joc efectul de mozaic. Cu cât piesele sale sunt mai mici, cu atât devine mai precisă și mai detaliată. Dpi afectează și lpi; cu cât sunt utilizate mai multe puncte mici pentru a crea un punct raster mare, cu atât acest punct va fi mai precis. Imaginile de înaltă rezoluție atunci când sunt imprimate pot utiliza rapoarte de la 150 lpi la 2540 dpi și mai mari. În ceea ce privește tipărirea ziarelor, un raport de 100 lpi la 1200 dpi este suficient.

Când cumpărați un computer, se întâmplă adesea ca monitorul să fie ales pe principiul rezidual - câți bani au mai rămas de la achiziționarea unității de sistem. Acest lucru are sens. Performanța computerului nu este afectată de caracteristicile monitorului. Dar ar trebui să înțelegeți că un monitor ieftin cu o rezoluție maximă scăzută, imagine neclară și redare slabă a culorilor poate anula avantajele unei plăci video de top. O lumină de fundal pâlpâitoare va duce la oboseală rapidă și poate afecta negativ vederea. Așadar, economisirea pe un monitor poate fi inversă, mai ales dacă intenționați să utilizați computerul des și mult. Prin urmare, este mai bine să luați alegerea unui monitor în mod responsabil, alegându-l în conformitate cu sarcinile.

Principala influență asupra prețului unui monitor este dimensiunea diagonală a acestuia. Dar chiar și între monitoare de aceeași dimensiune, prețurile pot varia într-un ordin de mărime în funcție de alte caracteristici. Trebuie înțeles că multe caracteristici ale monitorului sunt importante pentru unii utilizatori și complet neinteresante pentru alții. Știind ce caracteristici sunt necesare pentru a îndeplini sarcini specifice, puteți face alegerea potrivită alegând un monitor bun la cel mai bun preț.

În funcție de scop, se obișnuiește să se distingă patru grupuri de la modele ieftine la cele scumpe de dimensiuni similare: birou, multimedia, jocuri și profesionale.

Monitoarele de birou sunt proiectate să funcționeze cu programe de birou. Cerințele pentru astfel de monitoare sunt minime și vizează reducerea oboselii în timpul lucrului prelungit: luminozitate suficientă, contrast și iluminare de fundal de înaltă calitate.

Pentru monitoarele multimedia, caracteristicile care oferă o „imagine” impresionantă ies în prim-plan. Reproducerea bună a culorilor, diagonala mare și formatul Ultrawide fac ca aceste monitoare să iasă în evidență de restul.

Monitoarele pentru jocuri înseamnă monitoare cu o rezoluție maximă ridicată, o rată de reîmprospătare ridicată și un timp de răspuns scăzut. Aici, redarea culorilor poate fi sacrificată pentru reproducerea de înaltă calitate a scenelor dinamice. Monitoarele pentru jocuri sunt de obicei cu ecran lat. Monitoarele ultralarge și curbate sunt adesea comercializate ca monitoare pentru jocuri.

Monitoarele pentru designeri, fotografi și artiști profesioniști trebuie să ofere o adâncime maximă de culoare și o reproducere a culorilor de înaltă calitate. De asemenea, sunt de dorit o rezoluție maximă ridicată, o dimensiune mică a pixelilor (acest lucru va asigura claritatea imaginii) și setări avansate de calibrare.

Caracteristicile monitorului.

Dimensiune (diagonală) monitorul este principala sa caracteristică, determinând în primul rând prețul și atractivitatea acestuia pentru utilizator. Dimensiunea se masoara in diagonala.Cu cat monitorul este mai lat din punct de vedere al raportului de aspect, cu atat este mai mica zona vizibila la aceeasi diagonala.
Diagonala ecranului variază de la 18 inchi la 55 și mai sus. În general, cu cât diagonala este mai mare, cu atât mai bine: mai multe informații se potrivesc pe monitor, un efect mai mare de prezență în jocuri și la vizionarea videoclipurilor.
Din păcate, pe măsură ce diagonala crește, prețul crește exponențial. Prin urmare, recent stațiile de lucru cu două sau mai multe monitoare au devenit din ce în ce mai populare: multe plăci video moderne vă permit să conectați mai multe monitoare, ceea ce vă permite să vă măriți semnificativ suprafața desktopului la un preț minim.

Rezolutie maxima.
Rezoluția ecranului este numărul de pixeli - puncte care alcătuiesc imaginea în lățime și înălțime. Cu cât rezoluția maximă este mai mare, cu atât imaginea este mai clară și cu atât mai multe informații percepute de ochi sunt plasate pe ecran.

Trebuie avut în vedere faptul că rezoluția maximă pentru fiecare monitor este optimă - la această rezoluție, fiecare pixel corespunde unui element cu cristale lichide. Nu trebuie să lucrați cu monitorul la o rezoluție mai mică decât cea maximă - aceasta fie va reduce zona vizibilă (se formează un cadru negru), fie fiecare pixel va fi format din mai multe elemente LCD și se poate dovedi că unii pixeli vor deveni mai mare decât altele (imaginea va începe să fie vizibil distorsionată) .

Rezoluția maximă ar trebui să se potrivească cu dimensiunea monitorului: dacă nu este suficientă, imaginile vor fi granulate, dar dacă rezoluția este prea mare, textul și obiectele vor deveni prea mici. Pentru a determina dacă rezoluția maximă corespunde dimensiunii, utilizați valoarea ppi - densitatea pixelilor. PPI (Pixels Per Inc - „pixeli per inch”) este egal cu numărul de pixeli pe inch ai monitorului. Textul și obiectele sistemelor de operare moderne sunt configurate pentru monitoare cu 96 ppi, prin urmare, pentru a menține claritatea textului și a elementelor mici, este de dorit ca ppi-ul monitorului să fie de cel puțin 90-100. Dacă DPI-ul monitorului este mult mai mic de 90 (75 sau mai puțin), imaginile vor apărea granulate. Acest lucru nu este atât de important pentru vizionarea videoclipurilor și a unor jocuri, dar pentru muncă un astfel de monitor nu va mai fi confortabil.

Rezoluția maximă a monitorului trebuie să fie suportată de placa video.
Când înlocuiți monitorul cu unul mai mare, ar trebui să vă amintiți, de asemenea, că creșterea rezoluției crește și sarcina pe placa video.

Raport de aspect (format) se referă la raportul dintre lățimea ecranului și înălțimea. Monitoarele vechi aveau un raport de 5:4 și 4:3; acestea sunt încă în vânzare astăzi și sunt de obicei folosite pentru sarcini de birou - sunt cele mai convenabile pentru a lucra cu documente în formate „hârtie”. Majoritatea monitoarelor moderne au un raport de aspect de 16:9 (format larg). Acest format acoperă cel mai bine câmpul vizual al unei persoane. Monitoarele cu format ultra-wide (21:9, Ultrawide) sunt recomandate pentru jocuri și vizionarea videoclipurilor. Deși marginile ecranului unor astfel de monitoare nu se focalizează, acestea sunt vizibile în vederea periferică, ceea ce crește efectul prezenței. pe monitoarele Ultrawide, distorsiunea culorii la marginile ecranului este mai vizibilă, mai ales dacă monitorul se află direct în fața feței tale la o distanță mică. Un ecran curbat reduce distorsiunea culorii la margini, în plus, un astfel de ecran îmbunătățește și mai mult efectul prezenței.

Tehnologia și tipul de fabricație a matricei.
Matricea este baza monitorului - un pachet de plăci transparente, între straturile cărora se află cristale lichide. Astăzi există trei tipuri de matrice LCD:

1. TN (TN+film)– cea mai simplă tehnologie pentru fabricarea matricelor LCD. Avantajele sunt timpul scurt de răspuns (cel mai scurt dintre matricele moderne) și costul redus. Dar există și o mulțime de dezavantaje: un unghi mic de vizualizare, contrast slab și redarea culorilor. Cea mai mare viteză de răspuns a făcut matricele TN populare printre sportivii electronici, dar astfel de matrice nu sunt potrivite pentru lucrul profesional cu grafică și vizionarea videoclipurilor.

2. IPS (SFT)/PLS nu prezintă dezavantajele TN: oferă o acoperire completă a spațiului de culoare sRGB și, prin urmare, o reproducere mai bună a culorilor. Au un contrast ridicat și unghiuri bune de vizualizare: până la 180º. IPS sunt cel mai des folosite în monitoarele profesionale, dar relativ recent au început să invadeze segmentul ieftin, câștigând o bună bucată de piață de la TN.

Dezavantajele IPS sunt prețul relativ ridicat, timpul lung de răspuns și efectul de strălucire caracteristic acestui tip - strălucirea colțurilor ecranului, vizibilă mai ales la un unghi și într-o imagine întunecată.
Astăzi, IPS reunește o întreagă familie de tehnologii care diferă ușor în caracteristici. Cele mai comune tehnologii sunt:
- AD-PLS – matrice PLS îmbunătățită (analog cu IPS de la Samsung). Diferă de PLS obișnuit prin timpul de răspuns mai scurt;
- AH-IPS – redare mai bună a culorilor și luminozitate, consum redus de energie;
- Tehnologia AHVA – AU Optronics care oferă un unghi de vizualizare ridicat
- E-IPS - transmisia crescută a luminii pixelilor permite utilizarea unor lămpi de iluminare de fundal mai puțin puternice, ceea ce reduce prețul și reduce consumul de energie.
- IPS-ADS – unghi de vizualizare crescut și distorsiune redusă a imaginii datorită câmpului electric generat de electrozii de la marginile ecranului.

3. V.A. din punct de vedere al caracteristicilor și al costului acestea sunt între tipurile TN și IPS. Au o reproducere bună a culorilor, un contrast mai bun decât IPS, unghiuri medii de vizualizare și timp de răspuns.
Există, de asemenea, mai multe tehnologii pentru producerea matricelor de acest tip:
MVA(PVA) – redare îmbunătățită a culorii, culoare negru profund.
AMVA, AMVA+ - dezvoltarea în continuare a tehnologiei MVA, cu reproducere îmbunătățită a culorilor și timp de răspuns redus.
WVA+ - dezvoltarea tehnologiei MVA de la HP, oferind un unghi larg de vizualizare - până la 178º
Timp de răspuns în pixeli.
Datorită caracteristicilor de design ale matricelor LCD, schimbarea culorii fiecărui pixel atunci când i se aplică un semnal de control are loc destul de lent (după standardele dispozitivelor electronice) și este măsurată în milisecunde. Primele matrice LCD aveau un timp de răspuns de până la sute de milisecunde; nu erau deloc potrivite pentru vizualizarea scenelor dinamice și chiar și un traseu lung a rămas în spatele cursorului mouse-ului când se mișca. Matricele LCD moderne au un timp de răspuns mai scurt, dar dacă acest indicator este mai mare de 15 ms, imaginea poate fi „încețoșată” la redarea scenelor foarte dinamice. Prin urmare, acest parametru este important pentru fanii jocurilor dinamice și, mai ales, jucătorii eSports. Cat de important?

De exemplu, putem lua în considerare cazul în care un mic „obiect” traversează întregul ecran în 0,1 secunde. Să presupunem că frame rate în joc este de 30 FPS, apoi obiectul va primi 3 imagini în timpul zborului, fiecare va rămâne pe ecran timp de 33 ms. Dacă timpul de răspuns este mai mare de 16 ms, atunci de ceva timp vor fi două obiecte pe ecran în același timp (unul „dispare” din cadrul precedent, celălalt este „desenat”). Deci, pentru jucătorii obișnuiți, acest lucru poate să nu fie important, dar pentru jucătorii de sport, timpul de răspuns devine aproape caracteristica principală a monitorului.

luminozitatea monitorului, măsurat în cd/m2, determină fluxul luminos emis de un ecran complet alb la 100% luminozitate de fundal. Acest indicator poate fi important dacă monitorul este instalat într-o încăpere bine luminată, într-o cameră cu ferestre panoramice mari sau în aer liber - în acest caz, va fi necesară o luminozitate mai mare - de la 300 cd/m2. În alte cazuri, o luminozitate de 200-300 cd/m2 va fi suficientă.

Contrastul monitorului determinat de raportul dintre luminozitatea culorilor alb-negru afișate de monitor. Majoritatea monitoarelor moderne au un raport de contrast de 1000:1 și acesta este suficient atât pentru lucru, cât și pentru jocuri. De asemenea, în caracteristici există indicatori de contrast dinamic, descriși ca diferența dintre alb la luminozitate maximă și negru la minim, dar nu există o metodă unică de măsurare a contrastului dinamic, așa că nu ar trebui să vă bazați pe acest indicator.

Unghi de vedere
Datorită designului matricei LCD, culoarea pură și luminozitatea maximă pot fi văzute doar când priviți ecranul la un unghi de 90º. Dacă te uiți la ecran din lateral, luminozitatea pixelilor scade. Pentru a înrăutăți lucrurile, luminozitatea pixelilor de diferite culori scade în mod neuniform, astfel încât culorile încep să se distorsioneze atunci când sunt privite din lateral. Un unghi de vizualizare îngust a fost inițial unul dintre cele mai grave dezavantaje ale ecranelor LCD, așa că producătorii de monitoare dezvoltau (și dezvoltă) constant noi tehnologii pentru a crește unghiurile de vizualizare. Până în prezent, au reușit să obțină rezultate notabile - unghiurile de vizualizare ale matricelor moderne au fost aduse la maximum posibil.

Dar nu totul este atât de perfect - un unghi de vizualizare, de exemplu, de 176º înseamnă doar că în interiorul unghiului de 176º contrastul ecranului nu va scădea sub 1:10. Schimbarea contrastului va fi în continuare destul de vizibilă și poate provoca disconfort chiar dacă privitorul se află în unghiul de vizualizare. Mai mult, monitoare diferite (cu aceleași unghiuri de vizualizare) pot diferi calitativ atunci când sunt privite din lateral. Dacă condițiile de utilizare a monitorului sugerează că va trebui adesea să îl priviți din lateral (de exemplu, un monitor pe perete, un monitor multimedia, un monitor suplimentar), atunci nu ar trebui să vă ghidați doar de vizualizarea menționată. unghi, deoarece unghiul de vizualizare nu spune nimic despre dinamica schimbărilor de contrast în acest unghi. Acest indicator nu este indicat de producători, așa că singura modalitate de a-l evalua este să priviți monitorul „în direct”.

Matricele IPS arată cel mai bine atunci când sunt privite din lateral - schimbările de contrast vizibile pentru ochi încep la majoritatea modelelor numai atunci când se abat de la perpendiculară cu 45-50 de grade, ceea ce oferă un unghi de vizualizare de 90-100º fără o scădere vizibilă a contrastului. Cel mai rău este TN: în ciuda unghiurilor de vizualizare declarate de peste 170º, schimbările de contrast devin uneori vizibile atunci când devii de la perpendiculară cu până la 20º.

Rata de reîmprospătare maximă
Rata de reîmprospătare a ecranului arată cât de repede este reîmprospătată imaginea de pe ecran. Majoritatea monitoarelor moderne au o rată de reîmprospătare de 60 Hz și aceasta este suficientă pentru o muncă confortabilă. Există o credință învechită că această frecvență nu este suficientă. Utilizatorii de PC care foloseau monitoare CRT își amintesc că era incomod să lucrezi cu ele la 60 Hz - ecranul pâlpâia vizibil. Dar designul ecranelor LCD este fundamental diferit de designul ecranelor CRT. Ecranele LCD nu pâlpâie la nicio rată de reîmprospătare (sau mai degrabă, uneori pâlpâie, dar acest lucru nu are nimic de-a face cu rata de reîmprospătare). Inerția vederii umane este în medie de 27,5 ms, cu un minim de 20 ms, iar o rată de reîmprospătare de 50 Hz este suficientă pentru o mișcare lină pe ecran. Unele monitoare de gaming acceptă frecvențe de până la 240 Hz, cu pretenția că acest lucru va asigura o netezime maximă și detalii ale mișcării. Pentru ca această afirmație să aibă sens, placa video nu trebuie doar să accepte această frecvență, ci și să ofere FPS-ul corespunzător. Pentru rezoluții înalte, o placă video rară va putea produce același 240 FPS chiar și în jocurile mai vechi.

A sustine actualizare dinamică ecranul poate fi mai util pentru a netezi mișcarea în jocuri. Esența actualizării dinamice este de a „ajusta” rata de reîmprospătare a ecranului la FPS-ul furnizat de placa video pentru a evita o situație în care momentul actualizării ecranului scade în momentul în care este afișat următorul cadru al jocului și doar jumătate. a noului cadru este desenat pe ecran. Deși această imagine va dura doar o perioadă neglijabilă de timp, efectul poate fi vizibil în scenele cu schimbări bruște de luminozitate. Tehnologiile FreeSync de la AMD și G-Sync de la Nvidia previn astfel de situații. Diferențele dintre tehnologii pentru utilizator sunt exprimate în FPS minim suportat: pentru G-Sync este de 30 FPS, iar pentru FreeSync este de 9.

Acoperire ecran poate fi lucios sau mat (anti-orbire). Suprafața lucioasă, ca și sticla pură, reflectă sursele de lumină, iar în iluminatul luminos al încăperii, obiectele din jurul monitorului și al operatorului însuși. Se crede că ecranele lucioase oferă culori mai saturate, dar sunt confortabile de lucrat doar cu iluminare ajustată. Suprafețele mate nu prezintă astfel de dezavantaje - reflexiile obiectelor nu sunt vizibile pe ele și chiar și strălucirea de la sursele de lumină puternică este redusă la minimum.
Gama de culori arată cât de complet poate afișa monitorul toate culorile dintr-un anumit spațiu de culoare. Spațiu de culoare sRGB– spațiul de culoare standard în care funcționează majoritatea dispozitivelor foto și video de uz casnic. Dacă monitorul dvs. nu oferă acoperire sRGB completă, este posibil să piardă unele culori pe care le afișează alte dispozitive cu acoperire sRGB completă. Utilizatorul mediu probabil nu va observa acest lucru, dar designerii și fotografii nu ar trebui să aleagă acest model.

Spațiu de culoare Adobe RGB putin mai lat decat standard datorita nuantelor bogate de albastru, verde si galben. Majoritatea dispozitivelor de consum nu vor putea reproduce aceste culori suplimentare, dar multe se încadrează în spațiul CMYK și pot fi imprimate. Prin urmare, imprimantele profesioniste și acei fotografi care lucrează pentru publicații tipărite au nevoie de monitoare cu acoperire completă Adobe RGB.

Touch screen astazi nu mai este perceput ca o curiozitate, dar nu mai are rost sa cumperi un monitor cu un ecran tactil - precizia pozitionarii cursorului cu un deget este mult mai mica decat cu un mouse, plus amprentele de pe suprafata monitorului fac. nu-l colorează deloc. Monitoarele cu ecran tactil sunt de obicei folosite doar pentru calculatoare în scopuri speciale - de exemplu, instalate în zone publice pentru a informa vizitatorii sau pentru ca vizitatorii să lucreze cu software specializat, din nou în locuri publice.

Uneori, condițiile de utilizare a unui monitor necesită abilitatea de a-și schimba poziția într-un interval larg - rotiți-l pe un suport, ridicați-l și coborâți-l și schimbați înclinarea. Puteți achiziționa un suport separat sau puteți alege un monitor cu un suport corespunzător - reglare înălțime, înclinare și rotire, cu o viraj de 90º - Modul portret, ceea ce este convenabil atunci când lucrați cu documente cu pagini înguste și lungi.

Dacă posibilitatea unui suport nu este suficientă și trebuie să atașați monitorul la un suport, atunci majoritatea monitoarelor sunt echipate cu Suport VESA, trebuie doar să alegeți dimensiunea potrivită pentru suport.

Caracteristicile importante ale monitoarelor sunt prezența anumitor conectori. Poate fi conectori video:

- VGA(D-SUB, DB15) – un conector învechit pentru transmiterea unui semnal RGB analogic. În prezent, suportul pentru standardul VGA a fost întrerupt; pe monitoarele moderne acest conector este instalat pentru compatibilitate cu plăcile video mai vechi. Ar trebui folosit ca ultimă soluție - dacă nu există posibilitatea de conectare printr-un standard digital. Rezoluția maximă atunci când este conectat prin acest conector va fi de 2048x1536 pixeli la o frecvență de 85 Hz.

- DVI(DVI-D) este un conector mai modern folosit pentru a transmite informații video în formă digitală. Rezoluția maximă permisă atunci când este conectat prin acest conector este 2560x1600 la o frecvență de 60 Hz în modul Dual link. Dacă rezoluția monitorului este mai mare de 1920x1080, atunci pentru a-l conecta prin acest conector, placa video trebuie să fie echipată cu un conector DVI-D Dual link.

- HDMI– cel mai comun conector astăzi pentru transmiterea datelor video digitale de înaltă definiție. Cea mai recentă ediție HDMI acceptă rezoluții de până la 10K la 120 Hz, în ciuda faptului că astfel de monitoare nu există încă în producția de masă.

- Displayport(mini Displayport) este un analog al HDMI, conceput special pentru echipamente informatice. Cea mai recentă ediție acceptă o rezoluție maximă de 8K (7680 × 4320) la 60 Hz.

- Fulger- Interfață Apple. Versiunile Thunderbolt 1 și 2 folosesc propriul conector (numit și Thunderbolt), Thunderbolt versiunea 3 utilizează un conector USB tip C. Thunderbolt versiunea 2 acceptă rezoluții de până la 4K (3840 × 2160), versiunea 3 – până la 5K (5120 × 2880). Uneori găsit în echipamente de la alte mărci.

Monitorul poate avea și conectori suplimentari:
- Mufă pentru căști 3.5: Interfețele HDMI și Displayport permit transmisia audio, astfel că căștile pot fi conectate nu la un computer, ci la un monitor.

USB – unii producători îl integrează în monitor mufa USB

Sistem de difuzoare încorporat poate economisi spațiu pe birou și scăpa de firele inutile - sunetul îi este transmis și prin HDMI sau Displayport. Potrivit pentru actorie vocală simplă pentru utilizatorii nepretențioși.

Opțiuni de monitorizare

Să începem cu segmentul bugetar în sine. Dacă sunteți un utilizator fără pretenții, atunci cumpărați cel mai ieftin monitor de 18-21”, care este destul de potrivit pentru lucrul cu programe de birou.

Calitatea matricei și a unghiurilor de vizualizare ale unor astfel de modele nu va fi atât de mare, dar cel puțin toate acestea sunt compensate de accesibilitate.

Cea mai bună opțiune pentru casă este modelele de 23-25 inch cu rezoluție FullHD. Nu prea mare și nici prea mic - echilibrul suprem de claritate și cost.

Nepretențioasă pe placa grafică a PC-ului, așa cum este cazul modelelor 2K sau 4K, dimensiunea pixelilor este acceptabilă. Imaginea, fonturile și pictogramele nu vor fi atât de mici. Alegeți tipul de matrice, design, set de conectori etc. în funcție de preferințele personale și de portofel. Dacă aveți nevoie de o calitate maximă a imaginii, atunci va fi IPS, VA și alte tipuri de matrice, altele decât TN. TN-urile în sine sunt oarecum mai ieftine și cel mai adesea mai rapide, de exemplu. mai potrivit pentru conținut dinamic și jocuri.

Pentru esteștii sau iubitorii de soluții de design, sunt oferite monitoare cu carcase „fără cadru”. Acest lucru nu afectează funcționalitatea, dar astfel de monitoare elegante arată destul de bine pe masă.

Editorii secțiunii „Interfețe” publică o traducere a materialului realizat de echipa Sketchapp.

Videoclipul acoperă majoritatea subiectelor din articol, dar dacă sunteți interesat de mai multe detalii, continuați să citiți

Pictograme pe un computer Macintosh din 1984. Designerul Susan Kare

Diferența este vizibilă mai ales în pictograma aplicației de e-mail și în text

Pentru a menține aceleași dimensiuni fizice ale elementelor UI, numărul de pixeli pe inch a trebuit să fie crescut. Butonul, care anterior ocupa 44 px, acum ocupă 88 px.