Responsive veb-dizaynning ahamiyati: Qurilmalar bo'ylab foydalanuvchilar uchun qulay interfeyslarni yaratish Abduxalilova Dilbar Abdusalom qizi Toshkent Davlat Iqtisodiyot universiteti Raqamli iqtisodiyot fakulteti

Asosiy qism

Ekran o’lchamlari

1024
Ko'proq qurilmalar turli xil ekran o'lchamlari, ta'riflari va yo'nalishlariga ega. Har kuni yangi ekran o'lchamlariga ega yangi qurilmalar ishlab chiqilmoqda va bu qurilmalarning har biri o'lcham, funksionallik va hatto rangdagi o'zgarishlarni boshqacha. Ba'zilarining formati portret,a’zilari kvadrat tarzida. IPhone, iPad va ilg'or smartfonlarning mashhurligi oshib borayotganidan ma'lumki, ko'plab yangi qurilmalar foydalanuvchining xohishiga ko'ra portret formatidan landshaft formatiga o'tishlari mumkin. Bunday vaziyatlarni qanday loyihalash kerak?

240



portret

landshaft

320



768

Portret va landshaft formatlari.

Morten Xjerde va uning bir necha hamkasblari 2005-2008 yillarda sotilgan 400 ga yaqin qurilmalar boʻyicha statistik maʼlumotlarni aniqladilar. Quyida eng keng tarqalganlari keltirilgan:

2005 va 2008 yillar orasida eng keng tarqalgan ekran o'lchamlari.
15 yildan beri yanada ko'proq qurilmalar chiqdi . Ko'rinib turibdiki, biz har biri uchun shaxsiy echimlarni yaratishda davom eta olmaymiz. Xo'sh, vaziyatni qanday hal qilamiz?
Bu vaziyatni responsive dizayn bilan hal qilishimiz mumkin.

Responsive dizayn turlari

Buning 3ta yo’l orqali ko’rib chiqamiz:
moslashuvchan gridga asoslangan sxemani qo'llash (ing. "moslashuvchan, grid-based layout");
moslashuvchan tasvirlardan foydalanish (inglizcha "moslashuvchan tasvirlar");
media so'rovlar bilan ishlash (inglizcha "media query");

Moslashuvchan panjara

Moslashuvchan panjaraga asoslangan tartib.Moslashuvchan panjaraga asoslangan tartib ko’proq nisbatlarga asoslangan tartib hisoblanadi. Bu tartibdan foydalanayotganimizda biz pixsellarda emas foizlarda o’ylashimiz zarurdir.Ya’ni:
Width: 900px; /* 960 kenglikdagi ramka*/ bunda ham tasvir kengligi 900pxda
Width: 93.75%; /* 900px / 960px */ bunda ham tasvir kengligi 900pxda, ammo bunda ekran hajmi o’zgarganda ham tasvir joylashuvi oldingi holatidek saqlanadi.

Moslashuvchan panjara shablonga o'xshab turli xil sahifa tartiblari uchun asosiy qatlam sifatida ishlatilishi mumkin. Siz tarmoqqa kartalar yoki boshqa SAP Fiori UI(foydalanuvchi tajribasiga ega biznes ilovalarini yaratishga imkon beruvchi dizayn tizimi) elementlari kabi elementlarni joylashtirasiz. Ushbu tartib yondashuvi bir sahifada yoki bir nechta sahifalarda bitta izchil tajribani saqlashga yordam beradi.

Moslashuvchan panjara shablonining tarkibi va joylashuviga misol



Moslashuvchan panjara har xil turdagi sahifalarda ishlatilishi mumkin.