Kirish
Ishga kirgach, doimiy ravishda veb ekran asosida dizayn qilib keldim. Keyin esa, Bizend loyihasiga jalb etilganimda, Bizend dizayn tizimidan foydalangan holda veb ekran dizaynini davom ettirdim va bir yildan ortiq vaqt davomida tabiiy ravishda veb markazli sezgi to'plandi. Qanchalik bo'sh joy bo'lishi kerakligini, qaysi fontlar o'qilishi kerakligini, tugmalar qayerda bo'lishi kerakligini...
Keyin, sinf rahbari eslatmalari mobil ilovasi loyihasi yangidan boshlangach, yaxshi niyat bilan mas'ul dizayner sifatida tayinlandim. Bizend komponentlariga odatlangan holda mobil platformaga duch kelganda, bu shunchaki ekran kichraygani emas edi. Veb va mobil, ikki platformani taqqoslar ekanman, bu haqiqatan ham boshqacha bo'lgan paytlardagi hissiyotlarimni yig'dim.
Font
Asosiy ekran ishlaridan oldin, dizayn tokenlari va tipografiyani avval tartibga keltirdim. Veb ishlarida matn uchun 12px ishlatgan bo'lsam, sinf rahbari eslatmalari mobil ishlarida label va chiplardan tashqari 13px minimal o'lchovdan ko'proq foydalanishga qaror qildim.
Qaytib qaraganda g'alati ko'rinadi. Smartfon ko'zdan taxminan 30-40 sm masofada joylashgan, monitor esa 50-70 sm masofada ligan o'lcham. Yaqin qaraganda yaxshiroq ko'rinmaydimi?
Aslida to'g'ri. Biroq mobil qurilmalarda matnning kichik ko'rinishidagi sababi — piksellar birligi. Monitorning 1px va smartfonning 1px fizik jihatdan turlicha hajmga ega. Smartfonning ekrani kichik, ammo yuqori o'lchov sifatiga ega va 1px haqiqatan ham ancha kichik maydonni egallaydi. Demak, piksellar soni bir xil bo'lsa ham, mobil qurilmalarda ancha kichik nuqtalarga aylantiriladi. Buni tuzatish uchun mobil qurilmalarda sp(Android), pt(iOS) birliklaridan foydalanib, qurilma o'lchoviga avtomatik ravishda moslashtiriladi.
Yo'l-yo'riqlar bo'yicha iOS Inson Interfeysi Yo'l-yo'riqlari kamida 17pt, Android Material Dizayn kamida 12sp tavsiya etiladi, amaliyotchilikda esa asosiy matn 14-16sp eng ko'p foydalanilmoqda. Platformaning yo'l-yo'riqlari minimal qiymatlar bo'lib, agar haqiqiy maqsadli yosh darajasi yuqori bo'lsa, standartni ko'tarish kerak. Ya'ni, standart kim o'qiyotganidan kelib chiqishi kerak.
Safe Area
Veb ekrani dizayn qilayotganingizda, layoutning asosiy talabi brauzer viewportidir. Scroll yoki ekran o'lchamiga qarab farq qiladi, ammo asosiy qoidalar ko'rsatkich hududida mazmunni joylashtirishdir.
Mobilda ekran bo'lsa ham, ushbu hududdan to'liq foydalana olmaysiz. Notch, dinamik orol, holat paneli, uy indikatorlari kabi bu hududlar dizayner tomonidan bevosita nazorat qilinmaydigan qismlardir. Tizim mavjud bo'lgan joy yuklanganida, mazmun yashirilishi yoki tegish mumkin bo'lmaydigan muammolar paydo bo'ladi. Mazmunni joylashtirishda qochish kerak bo'lgan hududni Safe Area deb ataymiz va mobil dizaynida buni albatta hisobga olishimiz kerak.
Dizayner mobil ekranni dizayn qilganda, Status Bar va Home Indicator hududini oldindan ta'minlash kerak. Ayniqsa, pastki qismda o'rnatilgan tugma (Fixed Footer) ni loyihalaganda uy indikatorlar hududini e'tiborsiz qoldirsa, asl qurilmada tugma indikatori bilan chakkalanib ko'rinishi yoki kesilishi va foydalanishda noqulaylik tug'dirishi mumkin. Vebda faqat viewport ichida joylashtirish mumkinligini bilsak, mobilda Safe Area ichida joylashtirish kerakligi haqida fikrni o'zgartirishimiz kerak.
Amaliy ishda ham bu qismni aniq qoidalar sifatida belgilab oldik. Pastki navigatsiya paneli bo'lmasa, detal sahifasida pastki Safe Area-ni 48px ga belgilab, uning ustiga mazmun va tugmalarni joylashtirishni asosiy qoidamizga aylantirdik.
Mobil qurilmalar ishlab chiqaruvchisi va modeli bilan notch o'lchami, uy indikatorlarining balandligi kabi sharoitlar har xil. Qurilmaga to'g'ri kelishdan ko'ra Safe Area ni keng tutib boshlash turli muhitlarga xavfsiz ta'sir qilishning bir usuli.
Navigatsiya joyi
Webda GNB (Global Navigation Bar) eng yuqorida, LNB (Local Navigation Bar) esa chap tarafdagi yon panelda joylashgan bo'lishi odatiy. Bu uzoq vaqt davomida yig'ilgan namunadir, shuning uchun foydalanuvchilar ham bu holatni oddiy deb hisoblashadi.
Ammo, mobil ilovalar boshqacha. Odatda, asosiy menyu ekran pastida joylashadi, chunki u faqat katta barmoq bilan boshqariladi va bu Bottom Navigation (pastki navigatsiya) deb ataladi. Smartphone’ni bir qo'l bilan ushlab turganda barmoq tabiiy ravishda ekran pastki qismiga tegadi. Aksincha, yuqori burchaklar bir qo'l bilan harakatlanishda eng qiyin joylardir.
Tez-tez ishlatiladigan navigatsiyani yuqoriga qo'ysangiz, foydalanuvchilar har safar qo'lini harakatlantirishi yoki telefonni o'zgartirishi kerak. Bu tushuncha Thumb Zone (barmoq zonas) deb ataladi va mobil UX da umumiy layoutga ta'sir qiladi. Tez-tez ishlatiladigan harakatlar pastda, kam muhim ma'lumotlar esa yuqorida joylashgan bo'lishi odatiy. CTA tugmasini ekran pastida saqlash ham shu sababdan.
Hover
Web ekranini loyihalashda hover muhim elementlardan biridir. Tugmachaga sichqoncha qo'yilganda rang o'zgaradi, havola ustiga qo'yilganda esa chiziq paydo bo'ladi, kartochka ustiga qo'yilganda esa soyasi o'sadi - foydalanuvchilarga burar kishi mumkinligini ko'rsatishning eng oson usuli.
Ammo mobil muhitda sichqoncha kursori yo'q bo'lganligi sababli hover mavjud emas. Barmoq bilan tegingan zahoti u allaqachon pressed (bosilgan) holatiga o'tadi va hoverdan o'tish vaqti yo'q. Mobilda interaktiv elementlarni boshqa usullar bilan ifodalashadi.
-
Pressed holati: teginishda fon rangida yoki shaffoflikda o'zgarish bilan javob berish
-
Ripple effekti (Android): teginish nuqtasidan to'lqin tarqaladigan vizual javob
-
Haptic Feedback: teginishni fizik jihatdan titroq orqali bildirish
Webda hover orqali hal qilinadigan narsalarni mobilda boshqa interaktsiya tili bilan tarjima qilish kerak. Yanada muhimroq, hoverning o'zi mavjud bo'lmagan muhitda, bu bosilishi mumkin bo'lgan element ekanligini UI orqali aniqlik kiritish zarur. Fon ranglari yoki chegara orqali teginishga yaroqli hududni vizuallashtirish yoki ikonka faqat bitta ko'rinishda ishlatishdan ko'ra, matn yorlig'i bilan birgalikda joylashtirish bunga misol bo'lishi mumkin.
Ma'lumotlar oqimi
Web ekran keng. 2-qavat, 3-qavatli layoutdan foydalansangiz, bir ekranda ko'plab ma'lumotlarni joylashtirishingiz mumkin. Masalan, jadval yonida batafsil panel qo'shib, ma'lumotlarni yon tomonga yoyish mumkin.
Mobil esa baland va tor, yonlarga yoyish uchun joy yo'q. Shuning uchun mobilda ma'lumotlar chuqurlik (depth) bo'yicha loyihalanadi. Ro'yxat ekrani → batafsil ekran → batafsil sozlamalar ekraniga o'xshash, qatlamlarga bo'lib kiradigan struktura.
Bir ekranga sig'adigan ma'lumotlar miqdori cheklangan bo'lgani uchun, nimani birinchi ko'rsatish va nimani yashirishni belgilash ustuvorligi aynan muhim bo'ladi. Webda qay darajada joylashtirish masalasi bo'lsa, mobilda qaysi ma'lumotni birinchi ko'rsatish muhim masala hisoblanadi.
Agar ma'lumotlarni juda juda nozik bo'laklarga bo'lsangiz, chuqurlik ortadi va foydalanuvchi bugungi o'rnini yo'qotishi osonlashadi. Umuman olganda, 3 chuqurlik ichida loyihalash tavsiya etiladi, chunki bu hamma narsani bo'lib qo'ymaslik kerak, shuningdek, foydalanuvchi yo'lini yo'qotmasligi uchun struktura bilan ishlash mobil dizaynning muhim jihatlaridan biridir.
Tugma joyi
Vebda tugmalar asosan kontent oqimida joylashgan. Formani to'ldirish va pastida yuborish tugmasi mavjud yoki harakat talab qilinadigan hudud sarlavhasi yonida tahrirlash tugmasi mavjud. Sahifani aylantirganda tugmalar ham birga harakat qiladi va ko'p tugmalarni yashirmay, hammasini ochiq holda saqlaydi.
Mobilda bu bilan boshqa shablonlar tez-tez paydo bo'ladi.
-
Fixed Footer Button: ekranning eng past qismida joylashgan CTA tugmasi bo'lib, aylanishga qaramay doimo bir joyda turadi. Foydalanuvchi qaerda bo'lmasin, asosiy harakatga tezda kirish imkoniyatiga ega.
-
Floating Action Button (FAB): ekranning ustida suzayotgan dumaloq tugma. Kontent ustida yonma-yon joylashgan va doimiy ko'rinadigan tuzilishi bor.
Bu shablonlar vebda ham ishlatilishi mumkin, lekin mobilda ancha tabiiy ishlaydi. Oldin aytib o'tilgan Thumb Zone bilan bog'liqdir, chunki pastki qismdagi doimiy tugma bosh barmoq uchun eng qulay joyda joylashgan.
Ish jarayonida bu tugmani mustahkamlash yoki kontent oqimida joylashtirish har bir ekranda takroriy o'yin bilan muhokama qilinadigan qarorga aylandi. Kontent qisqa bo'lsa, mustahkam tugma sira sal lingan ko'rinadi, aylanish uzun bo'lsa, mustahkam tugma mavjud bo'lishi kerak, shunda foydalanish qulay bo'ladi. E'lon tafsilotlari sahnasidagi kabi uzun aylantiriladigan ekranlaringizni pastda mustahkamlab, qisqa mazmunda esa oqimga joylashtirish usuli bilan har bir ekranda turlicha qo'llagan.
Yana bir narsani hisobga oldim, bu tugmalarning xavf darajasi. Joylashuv tor bo'lsa yoki tasodifiy bosilishi muammolarni keltirib chiqarishi mumkin bo'lgan tugmalar Thumb Zone'dan intentionally uzoqda joylashtirilgan va ko'proq ko'rish (more) tugmasi orqali bir qadam ko'proq o'tish uchun rejalashtirilgan (xatolarni oldini olish uchun).
Yakuni
Hozirgi vaqtgacha veb va mobilning farqlarini birma-bir ko'rib chiqdik, lekin oxir-oqibat ikkita platforma o'zaro qarashlar jihatidan mutlaqo farq qiladi. Veb — joylarni qanday joylashtirish masalasi, mobil esa nima tanlash masalasiga yaqin edi.
Platformalar o'zgarganida, foydalanuvchining jismoniy manipulyatsiya usuli ham, ma'lumotlarni iste'mol qilish usuli ham, ekranlarga qarash masofasi ham o'zgaradi. Bu farqni tushunmasangiz, vebda yaxshi ishlagan shablonlarni bevosita qaytarib ishlata olasiz. Ushbu ish orqali platformani o'zgartirganda hissiyotni ham o'zgartirish kerakligini shaxsan his qildim.
Manbalar va manzil
eykim