Dizainerio vadovas, skirtas DPI – konvertavimas į realiojo pasaulio dydžius

Atskleidimas: Jūsų palaikymas padeda išlaikyti svetainę! Mes uždirbame siuntimo mokestį už kai kurias paslaugas, kurias rekomenduojame šiame puslapyje.


Žiniatinklyje DPI reiškia tankio taškus colyje. PPI reiškia tik taškus colyje. (Nors DPI atsirado spausdinimo pramonėje, dėl modernizuoto apibrėžimo ji dažnai naudojama vietoje PPI internete).

Kad ir kokį originalumą teikiate pirmenybę, turite suprasti, kaip DPI nustatymai turi įtakos tam, kaip jūsų grafika bus rodoma ekrane, jei kuriate svetaines ar programas.

Neoficialus žiniatinklio grafinio dizaino standartas yra 72 DPI. Tai buvo „Photoshop“ standartinis DPI nustatymas pirmojo „Mac“ kompiuterio, 128K, dienomis. (Štai gražus 128 000 taškų tankio palyginimas su „iPad“).

Naudojant 72 DPI, spausdinimas buvo patikimesnis. Ir 72 DPI įstrigo su mumis, teisingai ar neteisingai.

Praktiškai daugelio mūsų naudojamų prietaisų DPI yra žymiai didesnis nei 72, o tai kelia daug iššūkių. Laimei, yra žinomos konvencijos, kurios jums padės kuriant savo dizainą.

Kodėl ekrano skiriamoji geba?

Įsivaizduokite, kad turite du tokio paties dydžio prietaisus. 1 įrenginio ekranas yra 72 DPI. 2 įrenginyje yra 144 DPI ekranas.

Jei suprojektuosite vaizdą 72 DPI, vaizdas bus rodomas tiksliai tokio dydžio, kokį numatėte 72 DPI ekrane. Bet 144 PPI ekrane jis bus perpus mažesnis nei ketinote, nes ekranas turi dvigubai daugiau taškų.

Atminkite: fizinis dydis visiškai neturi įtakos DPI, išskyrus tai, kad mažesni ekranai yra pigesni, todėl jie paprastai turi didesnį DPI nei dideli ekranai. Šiandieniniuose įrenginiuose DPI yra labai skirtinga, net ir panašaus dydžio įrenginiams:

  • „Apple Cinema“ ekranas: 99
  • „Microsoft“ paviršius: 148
  • „Amazon Kindle Fire 7“: 170
  • „Apple 12“ “„ MacBook “: 226
  • „BlackBerry“ pasas: 453
  • „Samsung Galaxy S7: 576“
  • „Sony Xperia Z5 Premium“: 801.

(Galite iš karto sužinoti ekrano DPI ir pamatyti, kaip jis palyginamas.)

Jei to nepadarėte savo dizainuose, jūsų „72 DPI“ grafika būtų maža „Sony Xperia Z5 Premium“. Štai kodėl jūs turite žinoti, kaip susidoroti su didžiuliais taškų raiškos skirtumais.

Nepasikliaukite prekės ženklu ar rinkodara, kad nuosekliai apibūdintumėte ekrano skiriamąją gebą. Pvz., „Apple Retina“ prekės ženklas apibūdina labai daug skirtingų ekrano tankių, atsižvelgiant į jūsų žiūrimą įrenginį. Žemiausias tinklainės ekranas yra 218 DPI, o aukščiausias – daugiau nei 400.

Norint sukurti nuoseklų dizainą, reikia kitokio požiūrio.

Dp ir taškų naudojimas paprastam mastelio nustatymui

Kai suprantate „iOS“ ir „Android“ matavimo vienetus, galite visiškai neatsižvelgti į savo dizaino taškų matavimus.

Vietoj to galite naudoti virtualių taškų arba CSS taškų sąvoką .:

Tai šiek tiek skiriasi „Android“ ir „iOS“:

  • dp reiškia nuo įrenginio nepriklausomą pikselį arba nuo tankio nepriklausomą pikselį. Jis naudojamas „Android“. Vienas taškas matuoja 1/160 colio.
  • Taškai yra lygiaverčiai „iOS“. Vienas taškas matuoja 1/163 colio.

Taigi, nors yra nedidelis tankio skirtumas, sistemos yra labai panašios.

Jei planuojate naudoti „Android“ programos išdėstymo taškų matavimą, jums nereikia tiksliai žinoti, kokie yra kiekvieno įrenginio, kuriame bus rodomas tas matavimas, matavimai. Įrenginys žino savo daugiklį ir taiko jį dp reikšmei, todėl jis automatiškai pavers jūsų dizainą numatytu dydžiu. Apie tai daugiau yra „Android“ kūrėjo dokumentacijoje.

Jei kuriate naudodami „iOS“ taškus, viskas, ką jums reikia žinoti, yra tai, kad kai kurie „Apple“ įrenginiai tašką rodo kaip 1 pikselio kvadratą, kai kurie – 4 pikselių kvadratą, o kiti – kaip 9 pikselių kvadratą. Kitaip tariant, taškas matuojamas dauginant iš 1, 2 arba 3, kad atitiktų reikiamą ekrano skiriamąją gebą bet kuriame „iOS“ įrenginyje..

„Android“ ekrano tankio kvalifikacinių rodiklių naudojimas

Kiekvienas „Android“ įrenginys skirstomas į kategorijas arba segmentus pagal ekrano tankį. Iš viso yra tūkstančiai skirtingų įrenginių, todėl ši koncepcija padeda supaprastinti parengiamąjį dizainerio darbą, susiaurindama įrenginius, kurių jiems reikia norint sukurti vaizdus..

Kurdami „Android“ vaizdą, pavyzdžiui, programos piktogramą, turite žinoti apie šešis kriterijus:

  • Žemas (LDPI): bet koks įrenginys iki 120 DPI, daugiklis 0,75
  • Vidutinis (MDPI): nuo 120 iki 160 DPI, daugiklis iš 1 (bazinis tankis)
  • Aukštas (HDPI): nuo 160 iki 240 DPI, daugiklis 1,5
  • Ypač didelis (XHDPI): nuo 240 iki 320 DPI, daugiklis iš 2
  • Ypač didelis (XXHDPI): nuo 320 iki 480 DPI, daugiklis iš 3
  • Ypač didelis, ypač didelis (XXXHDPI): nuo 480 iki 640 DPI, daugiklis iš 4.

Kurdami programos vaizdus ar piktogramas, tiesiog įdėkite juos į aplankus pagal savo sukurtus kaušus. Kartu su jūsų sukurto maketo matavimo vienetais matavimais „Android“ automatiškai išrinks geriausius darbo vaizdus.

Projektavimas liečiant

Yra vienas paskutinis DPI dėlionės kūrinys. Tai yra jutiklinių ekranų ir įprastų ekranų skirtumas. Nors tai nėra tiesiogiai susijęs su DPI, į tai verta atsižvelgti.

Grafika akivaizdžiai atrodo vienoda jutikliniuose arba ne jutikliniuose ekranuose, darant prielaidą, kad jų ekrano skiriamoji geba yra ta pati. Tačiau yra labai svarbus skirtumas: žmonės nesinaudoja jais vienodai. Piršto bakstelėjimas yra daug mažiau tikslus nei pelės žymiklis.

„IOS“ liečiami taikiniai yra 44x44pt, o „Android“ – 48x48pt. Turėsite padaryti visą savo naršymą didesnį ir padidinti atstumą aplink jį, kad išvengtumėte klaidų tikimybės.

Šaltiniai

  • DP konvertavimas į PPI: vadovas iš „Android“ kūrėjo svetainės
  • „Pixplicity DP to PPI“ keitiklis: puikus skaičiuotuvas ir keitiklis
  • Patarimai dizaineriams: sužinokite daugiau apie „Android“ tankio koeficientus ir dp skaičiavimus
  • BBC mobiliųjų įrenginių pritaikymo neįgaliesiems gairės dėl liečiamo dydžio: Šiame straipsnyje pateikiami puikios geriausios praktikos patarimai, kaip HTML formatuoti prieinamus mobiliųjų įrenginių išdėstymus
  • „iOS“ projektavimo gairės: apima skiriamąją gebą, mėginių ėmimą, piktogramas, tipografiją, standartinius išdėstymo komponentus ir automatinius piktogramų efektus.
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map