Aflați mai multe despre densitatea pixelilor în designul interfeței mobile. Este importantă densitatea mare de pixeli pe afișajul unui smartphone?

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). Să mergem!

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 a lui Pitagora.

Orez. 1. Lățimea, înălțimea și dimensiunea diagonalei monitorului

Pentru a arăta cum sunt folosite toate aceste formule, să luăm, de exemplu, un monitor cu diagonala de 20 de inci cu o rezoluție de 1280x720 (HD).

Astfel, Wp va fi egal cu 1280, Hp – 720 și Di – 20. Datorită prezenței acestor date, putem calcula pi-pi-ai. Mai întâi folosim formula (2).

Acum să aplicăm aceste date 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.

Acest lucru este bun 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.

Argumente pro şi contra

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 o arătați 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.

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ă, de asemenea, lpi; cu cât sunt folosite 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.

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ă.

Pentru a menține aceeași dimensiune fizică a interfeței cu utilizatorul, dimensiunile pixelilor au fost dublate. Butonul, care anterior ocupa 44 de pixeli, acum ocupă 88 de pixeli. 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 modelelor 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ă a pixelilor care să reprezinte 1 punct - depinde de dispozitivul specific (consultați secțiunea „Percepția la scară” 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).

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 aceleași pictograme 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.

Diferite dimensiuni

Dar uneori, utilizarea unei densități mai mici de pixeli nu este suficientă... elementele de design individuale 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.

Î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 retiniană a persoanei medii cu vedere normală este de aproximativ 1 minut de arc. După ce am făcut ajustarea 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ții mai mici. Ș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.

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 de pixeli, acum ocupă 88 de pixeli.

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 punctelor în 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

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

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.