Udhëzuesi i Dizajnuesit për DPI – Shndërrimi në madhësi të botës reale

Disclosure: Mbështetja juaj ju ndihmon të mbani sitin në punë! Ne fitojmë një tarifë referimi për disa nga shërbimet që rekomandojmë në këtë faqe.


Në internet, DPI qëndron për piksele të densitetit për inç. PPI thjesht qëndron për piksele për inç. (Megjithëse DPI ka origjinën në industrinë e shtypjes, shpesh përdoret në vend të PPI në internet për shkak të përkufizimit të modernizuar të tij.)

Cilindo inicializëm që preferoni, duhet të kuptoni se si ndikojnë parametrat DPI në mënyrën se si grafikët tuaj do të shfaqen në ekran nëse dizenjoni uebfaqe ose aplikacione.

Standardi jozyrtar për hartimin grafik për ueb është 72 DPI. Kjo ishte vendosja standarde e DPI e Photoshop në ditët e kompjuterit të parë Mac, 128K. (Këtu është një krahasim i këndshëm i densitetit të pikselit të 128K kundrejt një iPad.)

Duke përdorur 72 DPI, shtypja ishte më e besueshme. Dhe 72 PDI ka mbërthyer me ne, me të drejtë ose gabim.

Në praktikë, shumë prej pajisjeve që ne përdorim kanë DPI dukshëm më të lartë se 72, që paraqet shumë sfida. Për fat të mirë, ka konventa të njohura që do t’ju ndihmojnë ndërsa zhvilloni modelin tuaj.

Pse çështjet e zgjidhjes së ekranit

Imagjinoni që keni dy pajisje që janë të njëjtën madhësi fizike. Pajisja 1 ka një ekran ekrani prej 72 DPI. Pajisja 2 ka një ekran prej 144 DPI.

Nëse hartoni një imazh në 72 DPI, imazhi do të shfaqet saktësisht në madhësinë që keni menduar në ekranin 72 DPI. Por në ekranin 144 PPI, do të jetë gjysma e madhësisë që keni menduar, sepse ekrani ka dyfish më shumë pixel.

Mos harroni: madhësia fizike nuk ka aspak ndikim në DPI, përveç që ekranet më të vegjël janë më të lirë për tu prodhuar, kështu që ato kanë tendencë të kenë DPI më të lartë se ekranet e mëdha. Në pajisjet e sotme, ekziston një variant i madh në DPI, madje edhe për pajisjet me madhësi të ngjashme:

  • Ekrani i Kinemasë Apple: 99
  • Sipërfaqja e Microsoft: 148
  • Amazon Kindle Fire 7 ″: 170
  • Apple 12 ″ MacBook: 226
  • Pasaporta BlackBerry: 453
  • Samsung Galaxy S7: 576
  • Sony Xperia Z5 Premium: 801.

(Mund të zbuloni menjëherë DPI-në e ekranit tuaj për të parë se si ai krahason.)

Nëse nuk do e kishe korrigjuar këtë në hartimet tuaja, grafika juaj 72 DPI do të ishte e vogël në Sony Xperia Z5 Premium. Kjo është arsyeja pse ju duhet të dini se si të merreni me dallime të mëdha në zgjidhjen e pikselëve.

Mos u mbështet në markë ose marketing për të përshkruar rezolucionin e ekranit në ndonjë mënyrë të qëndrueshme. Për shembull, marka Retina e Apple përshkruan shumë dendësi të ndryshme të ekranit, në varësi të pajisjes që po shikoni. Ekrani më i ulët Retina është 218 DPI, dhe më i larti është më shumë se 400.

Për të zhvilluar modele të qëndrueshme, keni nevojë për një qasje të ndryshme.

Përdorimi i PD dhe pikave për shkallëzim të thjeshtë

Pasi të kuptoni njësitë e matjes në iOS dhe Android, mund të mos pranoni plotësisht masën e pikselit për hartimin tuaj.

Në vend të kësaj, ju mund të përdorni konceptin e pikselëve virtualë, ose pikave CSS:

Kjo është paksa e ndryshme në Android vs iOS:

  • dp qëndron për pixel të pavarur të pajisjes ose pixel të pavarur nga densiteti. Përdoret në Android. Një PD mat 1/160 inç.
  • Pikat janë ekuivalente për iOS. Një pikë mat 1/163 e një inç.

Pra, ndërsa ka një ndryshim delikate në densitet, sistemet janë shumë të ngjashme.

Nëse hartoni duke përdorur një matje dp për paraqitjen e një aplikacioni Android, nuk do të duhet të dini saktësisht se cilat janë matjet për çdo pajisje që do të shfaqë atë paraqitje. Pajisja e njeh shumëzuesin e vet, dhe e aplikon atë në vlerën e dp, kështu që automatikisht do të bëjë modelimin tuaj në madhësinë e synuar. Ka më shumë për këtë në dokumentacionin e zhvilluesit Android.

Nëse dizajnoni përdorimin e pikave për iOS, gjithçka që duhet të dini është se disa pajisje Apple shfaqin një pikë si katror 1 pikësh, disa e shfaqin atë si katror 4 pixel, dhe disa e shfaqin atë si katror 9 pixel. Me fjalë të tjera, matja e pikës i nënshtrohet një shumëzuesi prej 1, 2 ose 3 për të përshtatur rezolucionin e kërkuar të ekranit për çdo pajisje iOS.

Përdorimi i Kualifikuesve të Densitetit të Ekranit Android

Devicedo pajisje Android është kategorizuar në kategori ose kova sipas densitetit të ekranit. Ka mijëra pajisje të ndryshme atje, kështu që ky koncept ndihmon për të thjeshtuar punën e parë të një projektuesi duke ngushtuar pajisjet që duhet të krijojnë imazhe për.

Kur krijoni një imazh për Android, si një ikonë e aplikacionit, janë gjashtë kualifikuesit që duhet të dini rreth:

  • E ulët (LDPI): çdo pajisje deri në 120 DPI, shumëzues 0.75
  • Medium (MDPI): ndërmjet 120 dhe 160 DPI, shumëzues i 1 (densiteti bazë)
  • E Lartë (HDPI): ndërmjet 160 dhe 240 DPI, shumëzues i 1.5
  • Extra-High (XHDPI): 240 deri 320 DPI, shumëzues i 2
  • Ekstra-ekstra-e lartë (XXHDPI): 320 në 480 DPI, shumëzues i 3
  • Extra-ekstra-ekstra-e lartë (XXXHDPI): 480 deri 640 DPI, shumëzues i 4.

Kur krijoni imazhe ose ikona të aplikacionit tuaj, thjesht vendosni ato në dosje, sipas kovave që keni krijuar. Së bashku me matjet e dp për paraqitjen që keni krijuar, Android automatikisht do të zgjedh imazhet më të mira për punën.

Projektimi Për Prekje

Ekziston një pjesë e fundit në enigmën e DPI, dhe ky është ndryshimi midis ekraneve të prekjeve dhe ekraneve të rregullt. Ndërsa nuk është e lidhur drejtpërdrejt me DPI, është një gjë e mirë për t’u marrë parasysh.

Padyshim që grafikët duken të njëjtë në ekranet e prekjeve ose ekranet pa prekje, duke supozuar se ato kanë të njëjtën rezolucion të ekranit. Por ka një ndryshim shumë të rëndësishëm: njerëzit nuk i lundrojnë në të njëjtën mënyrë. Një rubinet gishti është shumë më pak i saktë se një tregues i miut.

Objektivat e prekjes janë 44x44pt në iOS, dhe katror 48x48pt për Android. Ju do të duhet ta bëni të gjithë navigimin tuaj më të madh dhe të rritni hapësirën përreth tij për të shmangur mundësinë e gabimeve.

burime

  • Konvertimi i PD në PPI: Një udhëzues nga faqja e internetit e Zhvilluesit Android
  • Konvertuesi Pixplicity i PD në PPI: Një kalkulator dhe konvertues i shkëlqyeshëm
  • Këshilla për Designers: Mësoni më shumë rreth Kualifikuesve të Densitetit dhe llogaritjeve të dp
  • Udhëzime për qasje në celularin BBC në madhësinë e synuar të prekjes: Ky artikull ofron këshilla të shkëlqyera për praktikat më të mira për hartimin e paraqitjeve të arritshme të lëvizshme në HTML
  • Udhëzime për Dizajnin iOS: Rezolucioni i kapakëve, shembja e mostrave, ikonat, typografia, përbërësit standardë të paraqitjes dhe efektet automatike të ikonave.
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map