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