Vodič dizajnera za DPI – Pretvaranje u stvarne veličine svijeta

Objava: Vaša podrška pomaže održavanju web mjesta! Naplaćujemo naknadu za preporuku za neke usluge koje preporučamo na ovoj stranici.


Na internetu, DPI označava piksele gustoće po inču. PPI jednostavno znači piksela po inču. (Iako DPI potječe iz industrije ispisa, često se koristi umjesto PPI na webu zbog modernizirane definicije.)

Koji god inicijalizam preferirate, morate razumjeti kako postavke DPI utječu na način na koji će se vaša grafika pojaviti na zaslonu ako dizajnirate web stranice ili aplikacije.

Neslužbeni standard za grafički dizajn za web je 72 DPI. To je bila Photoshopova standardna DPI postavka u vrijeme prvog Mac računala, 128K. (Evo lijepe usporedbe gustoće piksela od 128 kilograma u odnosu na iPad.)

Korištenjem 72 DPI, ispis je bio pouzdaniji. I 72 DPI je zapelo s nama, bilo ispravno ili pogrešno.

U praksi mnogi uređaji koje koristimo imaju znatno veći DPI od 72, što predstavlja puno izazova. Srećom, postoje konvencije koje će vam pomoći pri razvoju vašeg dizajna.

Zašto je rezolucija zaslona važna

Zamislite da imate dva uređaja iste fizičke veličine. Uređaj 1 ima zaslon od 72 DPI. Uređaj 2 ima zaslon od 144 DPI.

Ako dizajnirate sliku na 72 DPI, slika će se prikazati točno u veličini koju ste namjeravali na zaslonu 72 DPI. Ali na 144 PPI ekranu, to će biti upola manje od namjere, jer zaslon ima dvostruko više piksela.

Zapamtite: fizička veličina uopće nema utjecaja na DPI, osim što je jeftinije proizvesti manje ekrane, pa imaju viši DPI od velikih ekrana. Na današnjim je uređajima velika razlika u DPI, čak i za uređaje slične veličine:

  • Apple Cinema Display: 99
  • Microsoftova površina: 148
  • Amazon zapaliti vatru 7 ″: 170
  • Apple 12 ″ MacBook: 226
  • BlackBerry pasoš: 453
  • Samsung Galaxy S7: 576
  • Sony Xperia Z5 Premium: 801.

(Možete odmah pronaći DPI zaslona da biste vidjeli kako se uspoređuje.)

Ako za to niste dizajnirali, vaša 72 DPI grafika bila bi sićušna na Sony Xperia Z5 Premium. To je razlog zašto morate znati kako se nositi s ogromnim razlikama u razlučivosti piksela.

Ne oslanjajte se na marke ili marketing da biste na bilo koji dosljedan način opisali razlučivost zaslona. Na primjer, Appleovo brandiranje mrežnice opisuje puno različitih gustoća prikaza, ovisno o uređaju koji gledate. Najniži retina zaslon ima 218 DPI, a najviši više od 400.

Za razvoj konzistentnih dizajna potreban vam je drugačiji pristup.

Korištenje Dp i bodova za jednostavno skaliranje

Jednom kada shvatite mjere mjerenja u iOS-u i Androidu, možete u potpunosti zanemariti mjerenje piksela u svom dizajnu.

Umjesto toga, možete koristiti koncept virtualnih piksela ili CSS piksela:

To se malo razlikuje na Androidu i iOS-u:

  • dp označava piksel nezavisan od uređaja ili piksela neovisan o gustoći. Koristi se na Androidu. Jedan dp mjeri 1/160 inča.
  • Bodovi su ekvivalentni za iOS. Jedna točka mjeri 1/163 inča.

Iako postoji osjetljiva razlika u gustoći, sustavi su vrlo slični.

Ako dizajnirate pomoću dp mjerenja za izgled Android aplikacije, ne morate znati točno koja su mjerenja za svaki uređaj koji će prikazati taj izgled. Uređaj poznaje svoj multiplikator i primjenjuje ga na dp vrijednost, pa će automatski prikazati vaš dizajn po predviđenoj veličini. O tome ima više u dokumentaciji za razvojne programere za Android.

Ako dizajnirate pomoću točaka za iOS, sve što trebate znati je da neki Apple uređaji prikazuju točku u kvadraturi od 1 piksela, neki je prikazuju kao kvadrat od 4 piksela, a neki je prikazani kao kvadrat od 9 piksela. Drugim riječima, mjerenje točke podliježe množitelju od 1, 2 ili 3 kako bi se postavila potrebna razlučivost zaslona za bilo koji iOS uređaj.

Korištenje kvalifikatora za gustoću zaslona Android

Svaki Android uređaj kategoriziran je u kategorije ili kante prema gustoći zaslona. Tamo postoje tisuće različitih uređaja, pa ovaj koncept pomaže pojednostaviti dizajnerove pripreme sužavanjem uređaja koji su im potrebni za stvaranje slika za.

Kada stvorite sliku za Android, poput ikone aplikacije, postoji šest kvalifikatora o kojima morate znati:

  • Nizak (LDPI): bilo koji uređaj do 120 DPI, množitelj od 0,75
  • Srednja (MDPI): između 120 i 160 DPI, množitelj 1 (osnovna gustoća)
  • Visoka (HDPI): između 160 i 240 DPI, množitelj od 1,5
  • Izuzetno visok (XHDPI): 240 do 320 DPI, množitelj od 2
  • Extra-extra-high (XXHDPI): 320 do 480 DPI, množitelj od 3
  • Extra-extra-extra-high (XXXHDPI): 480 do 640 DPI, množitelj od 4.

Kada stvorite slike ili ikone aplikacije, jednostavno ih smjestite u mape prema kantama koje ste stvorili. Zajedno s dp mjerenjima za izgled koji ste stvorili, Android će automatski odabrati najbolje slike za posao.

Dizajn za dodir

Postoji jedan završni komad u DPI slagalici i to je razlika između zaslona osjetljivih na dodir i uobičajenih zaslona. Iako nije izravno povezano s DPI-om, dobro je uzeti u obzir.

Grafika očito izgleda isto na dodirnim ekranima ili ekranima bez dodira, pod pretpostavkom da imaju istu razlučivost zaslona. Ali postoji vrlo važna razlika: ljudi ih ne kreću istim putem. Dodir prsta puno je manje precizan od pokazivača miša.

Ciljevi dodira u iOS-u su od 44x44pt, a za Android 48x48pt. Trebat ćete povećati svu svoju navigaciju i povećati razmak oko nje, kako biste izbjegli potencijal grešaka.

Resursi

  • Pretvaranje DP-a u PPI: vodič sa web mjesta za Android Developer
  • Pixplicity DP u PPI pretvarač: izvrstan kalkulator i pretvarač
  • Savjeti za dizajnere: Saznajte više o Androidovim kvalifikatorima gustoće i izračunima dp-a
  • BBC Mobile Accessibility Guides on Touch Target Size: Ovaj članak nudi izvrsne savjete o najboljoj praksi dizajniranja pristupačnih rasporeda mobilnih uređaja u HTML-u
  • Smjernice za dizajn iOS-a: Pokriva razlučivost, smanjivanje nivoa slike, ikone, tipografija, standardne komponente izgleda i automatski efekti ikona.
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map