Dizaineru ceļvedis DPI – konvertēšana reālās pasaules izmēros

Atklāšana: Jūsu atbalsts palīdz vietnei darboties! Mēs nopelnām nodošanas maksu par dažiem pakalpojumiem, kurus mēs iesakām šajā lapā.


Tīmeklī DPI apzīmē blīvuma pikseļus collā. PPI vienkārši apzīmē pikseļus collā. (Lai arī DPI radās drukāšanas nozarē, tā modernizētās definīcijas dēļ to bieži izmanto PPI tīmeklī.)

Neatkarīgi no tā, kuru ievirzi vēlaties, jums ir jāsaprot, kā DPI iestatījumi ietekmē to, kā jūsu grafika parādīsies ekrānā, ja veidojat vietnes vai lietotnes.

Neoficiālais tīmekļa grafiskā dizaina standarts ir 72 DPI. Tas bija Photoshop standarta DPI iestatījums pirmā Mac datora, 128K, dienās. (Šis ir jauks 128K pikseļu blīvuma salīdzinājums ar iPad).

Izmantojot 72 DPI, drukāšana bija uzticamāka. Un 72 DPI mums ir iestrēdzis pareizi vai nepareizi.

Praksē daudzām mūsu izmantotajām ierīcēm ir ievērojami augstāks DPI nekā 72, kas rada daudz izaicinājumu. Par laimi, ir zināmas konvencijas, kas jums palīdzēs izstrādājot dizainu.

Kāpēc ir svarīga ekrāna izšķirtspēja

Iedomājieties, ka jums ir divas ierīces, kurām ir vienāds fiziskais izmērs. 1. ierīcei ir 72 DPI ekrāns. 2. ierīcei ir 144 DPI displejs.

Ja jūs projektējat attēlu ar 72 DPI, attēls tiks parādīts precīzi tādā lielumā, kādu paredzējāt 72 DPI ekrānā. Bet 144 PPI ekrānā tas būs uz pusi mazāks nekā esat iecerējis, jo displejā ir divreiz vairāk pikseļu.

Atcerieties: fiziskajam izmēram nav nekādas ietekmes uz DPI, izņemot to, ka mazākus ekrānus ir lētāk ražot, tāpēc tiem parasti ir augstāks DPI nekā lielajiem ekrāniem. Mūsdienu ierīcēs DPI ir ļoti atšķirīgas, pat līdzīga izmēra ierīcēm:

  • Apple Cinema Display: 99
  • Microsoft virsma: 148
  • Amazon Kindle Fire 7 ″: 170
  • Apple 12 ″ MacBook: 226
  • BlackBerry pase: 453
  • Samsung Galaxy S7: 576
  • Sony Xperia Z5 Premium: 801.

(Varat uzreiz uzzināt sava ekrāna DPI, lai redzētu, kā tas tiek salīdzināts.)

Ja jūs dizainos to netaisījāt, jūsu 72 DPI grafika būtu niecīga uz Sony Xperia Z5 Premium. Tāpēc jums jāzina, kā rīkoties ar milzīgām atšķirībām pikseļu izšķirtspējā.

Nepaļaujieties uz zīmolu vai mārketingu, lai konsekventi aprakstītu displeja izšķirtspēju. Piemēram, Apple Retina zīmols apraksta daudz dažādu displeja blīvumu atkarībā no jūsu aplūkotās ierīces. Zemākais tīklenes displejs ir 218 DPI, bet augstākais – vairāk nekā 400.

Lai izstrādātu konsekventu dizainu, jums nepieciešama atšķirīga pieeja.

Dp un punktu izmantošana vienkāršai mērogošanai

Kad esat sapratis mērvienības operētājsistēmā iOS un Android, varat pilnībā neņemt vērā sava dizaina pikseļu izmērus.

Tā vietā jūs varat izmantot virtuālo pikseļu vai CSS pikseļu jēdzienu .:

Tas nedaudz atšķiras operētājsistēmās Android vs iOS:

  • dp nozīmē no ierīces neatkarīgu pikseļu vai no blīvuma neatkarīgu pikseļu. Tas tiek izmantots operētājsistēmā Android. Viens dp mēra 1/160 collas.
  • Punkti ir ekvivalenti iOS. Viens punkts mēra collu 1/163.

Tātad, lai arī pastāv neliela blīvuma atšķirība, sistēmas ir ļoti līdzīgas.

Ja Android lietotnes izkārtojumam izmantojat dp mērījumu, jums precīzi nav jāzina, kādi ir mērījumi katrai ierīcei, kurai tiks parādīts šis izkārtojums. Ierīce zina savu reizinātāju un piemēro to dp vērtībai, tāpēc tā automātiski padarīs jūsu dizainu paredzētajā izmērā. Plašāku informāciju par to var atrast Android izstrādātāja dokumentācijā.

Ja jūs projektējat, izmantojot punktus iOS, viss, kas jums jāzina, ir tas, ka dažām Apple ierīcēm punkts tiek parādīts kvadrātā ar 1 pikseļu, dažām tas tiek parādīts kā 4 pikseļi kvadrātā, bet citi – kā 9 pikseļi kvadrātā. Citiem vārdiem sakot, punkta mērīšanai tiek piemērots reizinātājs 1, 2 vai 3, lai tas būtu piemērots jebkuras iOS ierīces ekrāna izšķirtspējai..

Izmantojot Android ekrāna blīvuma kvalifikatorus

Katra Android ierīce tiek klasificēta kategorijās vai spaiņos atbilstoši ekrāna blīvumam. Tur ir tūkstošiem dažādu ierīču, tāpēc šī koncepcija palīdz vienkāršot dizainera sagatavošanās darbu, sašaurinot ierīces, kas viņiem ir vajadzīgas, lai izveidotu attēlus.

Veidojot Android attēlu, piemēram, lietotnes ikonu, ir seši kvalifikatori, kas jums jāzina:

  • Zems (LDPI): jebkura ierīce līdz 120 DPI, reizinātājs – 0,75
  • Vidējs (MDPI): no 120 līdz 160 DPI, reizinātājs ar 1 (bāzes blīvums)
  • Augsts (HDPI): no 160 līdz 240 DPI, reizinātājs 1,5
  • Īpaši augsts (XHDPI): no 240 līdz 320 DPI, reizinātājs ar 2
  • Īpaši augsts (XXHDPI): no 320 līdz 480 DPI, reizinātājs ar 3
  • Extra-extra-extra-high (XXXHDPI): no 480 līdz 640 DPI, reizinātājs no 4.

Veidojot lietotnes attēlus vai ikonas, vienkārši ievietojiet tos mapēs atbilstoši jūsu izveidotajiem kausiem. Kopā ar izveidotā izkārtojuma dp mērījumiem Android automātiski atlasīs darbam labākos attēlus.

Projektēšana pieskārienam

DPI mīklā ir viens pēdējais gabals, un tā ir atšķirība starp skārienekrāniem un parastajiem displejiem. Lai gan tas nav tieši saistīts ar DPI, tas ir labi apsvērt.

Grafika acīmredzami izskatās vienādi skārienekrānos vai bez skārienekrāniem, pieņemot, ka tiem ir tāda pati ekrāna izšķirtspēja. Bet ir ļoti būtiska atšķirība: cilvēki tos navigē vienādi. Pirkstu pieskāriens ir daudz mazāk precīzs nekā peles rādītājs.

Pieskāriena mērķi ir ixOS 44x44pt un Android – 48x48pt. Lai izvairītos no iespējamām kļūdām, visa navigācija ir jāpadara lielāka un jāpalielina atstatums ap to.

Resursi

  • DP pārvēršana PPI: ceļvedis no vietnes Android Developer vietnes
  • Pixplicity DP to PPI pārveidotājs: lielisks kalkulators un pārveidotājs
  • Padomi dizaineriem: uzziniet vairāk par Android blīvuma kvalifikatoriem un dp aprēķiniem
  • BBC mobilās piekļuves pamatnostādnes par skārienmērķa lielumu: Šis raksts piedāvā izcilus labākās prakses padomus pieejamu mobilo izkārtojumu izstrādāšanai HTML formātā
  • iOS projektēšanas vadlīnijas: Ietver izšķirtspēju, atlases samazināšanu, ikonas, tipogrāfiju, standarta izkārtojuma komponentus un automātiskos ikonu efektus.
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me