rp_b83568507f1a4b01a1b68f5ea0f0bdf9.png

DPI bo’yicha dizayner uchun qo’llanma (4-qism)

Retina display nima?

Apple iPhone 4 smartfonlarini chiqarganda “Retina” atamasini taqdim etdi. U Retina (tarj. to’r parda) deb atalishiga sabab qurilmaning PPI juda katta bo’lib, inson ko’zining to’r pardasi ekrandagi ayrim piksellarni ko’ra olmasligi ehtimolidandir.

Haqiqatan ham, bunday qurilmalarning ekran o’lchamlari kichik, lekin undagi piksellar soni ko’pligidan bu gapni asosli deyish mumkin. O’sha vaqtda bunday ekran eng yaxshi ekranlardan edi. Bugungi kunga kelib bizning ko’zlarimiz bunday ekrandagi piksellarni qabul qilishga o’rganib qolgan.

Texnik jihatda bunday displaylar o’zining fizik o’lchamiga qaraganda eni va bo’yiga ikki barobar ko’proq piksellarni aks ettiradi.

IPhone 3G / S diagonali 3,5 dyum, razresheniyesi esa 480 * 320px va 163 PPI edi.

iPhone 4/S esa diagonali 3,5 dyum, razresheniyesi esa 960 * 640px va 326PPI.

Roppa-rosa ikki barobar. Oddiy ko’paytiruvchi. Shuning uchun ekrandagi elementlar ikki barobar vizualroq va aniqroq ko’rinadi. Bitta normal piksel retinadagi 4ta pikselga teng.

Yaxshiroq tushunish uchn quyidagi murakkab dizayndagi bir misolga qarab ko’raylik.

Tasvirga izoh: Ikkita qurilmadagi har xil sifatli tasvirni hozir siz ko’rib turgan boshqa bir uchinchi qurilmada o’xhatish qiyin. Fizik jihatdan bir xil joy egallashiga qaramasdan Retina displayda musiqa pleyerining tasviri ikki barobar yaxshi va aniq ko’rinadi. Agar istasangiz o’zingiz buni tekshirib ko’rishingiz mumkin.
«Retina» display atamasi Apple ga tegishli, shuning uchun boshqa kompaniyalar «HI-DPI» yoki “Super power pixel maximum sp33d display” atamalarini qo’llaydi. Siz o’zingiz qurilmaning xarakteristikalaridan uning DPI va ekran o’lchamlarini aniqlab qanday display ekanligini aniqlashingiz mumkin.
Yodda tuting: DPI bilan tanishish, ekran razresheniyalari o’rtasidagi farqni tushunish, PPI va fizik o’lchamlar nisbatini yaxshi anglash uchun Apple mahsulotlari eng yaxshi vosita hisoblanadi. Chunki unda siz faqat 1 ko’paytiruvchi haqida bosh qotirasiz.

 

 

Ko’paytiruvchi nima?

 

 

Siz dizayningizni barcha mumkin bo’lgan PPI lar uchun moslashtirishingizda ko’paytiruvchi sizning matematik xaloskoringiz bo’ladi. Agar siz ko’paytiruvchini bilsangiz, qurilmaning boshqa mayda xarakteristikalari to’g’risida bosh qotirib o’tirishingizga hojat qolmaydi.
Keling, iPhone 3g va 4 uchun bir misol ko’rib chiqamiz. Sizda bir xil fizik o’lchamda ikki barobar ko’p piksellar bor. Shuning uchun sizning ko’paytiruvchingiz 2. Bu degani sizning grafik resursingiz iPone 4 razresheniyalariga mos kelishi uchun o’sha grafik resurs o’lchamlarini 2 ga ko’paytirishingiz kerak deganidir. Bor yo’g’i shu.
Faraz qilamiz, siz 44*44px o’lchamda knopka yasamoqdasiz. Keling uni «JIM» deb nomlaylik.

JIM iPhone 4 da yaxshi ko’rinishi uchun uni ikki barobar kattalashgan versiyasini yasash kerak. Quyida shunday qilib ko’ramiz.

Izoh: chapda burchaklari 2px aylanasimon burchak, shrift o’lchami 16px, o’ngda esa burchaklari 4px aylanasimon burchak, shrift o’lchami – 32px.
Hammasi oddiy. Endi Jimning normal PPI (iPhone 3) uchun Jim.png va 200% PPI (iPhone 4) uchun esa Jim@2x.png versiyalari paydo bo’ldi.
Endi siz so’rashingiz mumkin: «Shoshmang! Axir bu ikkisidan boshqa ko’paytiruvchilar ham borku. Unaqada ish ko’payib ketadiku. Nima har bir ko’paytiruvchi uchun resurslarni moslab chiqish kerakmi?»

Yaxshiyamki, bu siz o’ylaganchalik u qadar qo’rqinchli emas. Biz bunga sal keyinroq yana qaytamiz.

Keling, avval o’lchov birliklari haqida gaplashaylik. Chunki endi sizga dizayningizni ko’plab DPI ga moslashtirish uchun pikseldan boshqa o’lchov birliklari kerak bo’ladi.

Mana DP va PT haqida so’z yuritishga yetib keldik.
Yodda tuting: Siz ishlab turgan har bir dizayn uchun ko’paytiruvchini bilishingiz shart.
DP, PT va SP nima?

DP yoki PT o’lchov birligi bo’lib. Ko’plab qurilmalar va DPI lar uchun yaratilgan maketingizni belgilashda ishlatiladi.
DP yoki Dip bu Device independent Pixel (qurilmaga bog’liq bo’lmagan piksel), PT esa Point (nuqta). PT Apple da ishlatilsa, DP Androidda ishlatiladi, aslida ikkalasining mohiyati bir xil. Qisqa qilib aytganda, ular qurilmaning ko’paytiruvchisiga bog’liq bo’lmagan o’lchamni belgilaydi. Bu texnik masalani yechishda dizayner va injenerlarga ayni qo’l keladi.
Keling, avvalgi misolimizdagi “JIM” knopkasini olaylik.
JIM ning eni oddiy retina bo’lmagan ekranlar uchun 44px, retina ekranlar uchun esa 88px. Jim ning atrofiga 20px bo’sh qadam (padding) qo’shamiz.Bu holda qadam retina ekranlar uchun 40px bo’ladi. Aslini olganda, retina bo’lmagan ekranlar uchun loyihalashda retina piksellarini hisobga olish noto’g’ridir.
Oddiy retina bo’lmagan ekran tomonlarini 100% nisbatda qilib olamiz.

Bu holatda JIMning o’lchamlari 44x44DP yoki PT, bo’sh qadam esa 20DP yoki Pt bo’ladi. Siz texnik topshiriqni istalgan PPI uchun bajarishingizda JIM ning o’lchamini 44 * 44dp yoki pt qilib belgilayverasiz.
Android va IOS bu o’lchamni ekranga adaptatsiya qiladi va to’g’ri ko’paytiruvchi bilan kovertatsiya qiladi. Ana shuning uchun ham PPI bilan loyihalash oson deb hisoblayman.
SP esa DP va PT dan alohida ishlatiladi, lekin bir xil ish bajaradi. SP bu Scale-independent pixels (masshtabga bog’liq bo’lmagan piksel) bo’lib, shrift o’lchamini belgilashda ishlatiladi. SP Android qurilmaning foydalanuvchisi sozlagan shriftga bog’liq. Dizayner uchun SP ni belgilash xuddi DP ni belgilash kabidir. 1x masshtabda o’qish uchun eng yaxshi o’lcham bu 16SP hisoblanadi.
Yodda tuting: Texnik topshiriq tuzib turgan vaqtingizda har doim razresheniye/masshtabga bog’liq bo’lmagan qiymatlardan foydalaning. HAR DOIM. Ekran o’lchamiga/razresheniyega qanchalik bog’liq bo’lmasa shunchalik sifatliroq chiqadi.

Manba: habrahabr.ru

(356 marta o'qilgan, bugun 1 marta o'qildi)

O'xshash maqolalar: