O'tgan vaqt mobaynida asosan veb muhitda publikatsiya ishlarini olib bordim. Reaksiya beruvchi veb ishlari tajribasi bor edi, lekin mobil muhitda jiddiy ravishda UI ni tuzish va harakatlarni amalga oshirish ilk marta bo'ldi. Dastlab, mobil ham nihoyat veb texnologiyalari asosida ekanini hisobga olib, mavjud usuldan katta farq qilmaydi deb o'yladim. Ammo aslida ishni amalga oshirish davomida mobil faqat ekranning kichik o'lchamli veb emasligini bir necha jihatdan his qildim.
Mobil muhitda esa naqsh strukturasidan tashqari foydalanuvchi kiritish usuli, ekran balandligining hisoblanishi, skrollni boshqarish usuli, kirish imkoniyatlarini ta'minlash usuli kabi turli jihatlar birgalikda hisobga olinishi shart edi. Ayniqsa, vebda tabiiy ravishda ishlatilgan usullar mobilda bevosita qo'llanilmasligi ko'p hollarda yangi standartlarni davomiy o'rganish jarayonida edi.
Mobilda avvalo his qilgan farq foydalanuvchi kiritish usuli edi. Veb muhitda sichqonchaga asoslanganligi sababli hover holatini ishlatish interaktiv mavqe juda umumiydir.
.button:hover{
background-color: #f5f5f5;
}Hover holati foydalanuvchi element ustiga sichqonchani qo'yganda vizual javob berish usuli bo'lib, desktop UI uchun muhim interaktiv elementlardan biridir. Ammo mobil muhitda sichqoncha o'zi mavjud emas va barcha kiritish harakatlari tegish asosida amalga oshiriladi. Buning natijasida hover holati mobilda amalda hech qanday harakat qilmaydi yoki cheklangan darajada harakat qiladi. Shuning uchun mobilda hover asosidagi interaktivni emas, balki faol holat yoki tanlangan holat asosida UI tuzish usuli umumiy amaliyotdir.
.button:active{
background-color: #f5f5f5;
}Ushbu farqlar orqali bir xil UI-da ham kiritish usuliga qarab holat dizayni to'liq o'zgarishi mumkinligini aniqladim. Oddiygina uslubni o'zgartirish darajasida emas, foydalanuvchi harakati o'ziga xos bo'lib UI holatini qayta belgilash zarurligi muhim edi.
Checkbox va radio tugmalarida ham shunga o'xshash farqlarni tajriba qilganimni ko'rish mumkin edi. Veb muhitda kichik boshqarish elementlarini to'g'ridan-to'g'ri bosish bilan ta'minlash mumkin bo'lsa, mobilda ishga tushirish aniqligi muhim jihatlardan biri bo'lib xizmat qiladi. Mobilda barmoq orqali boshqarish qachonki bosiladigan hudud kifoya qilmasa, ishlanish darajasi keskin pasayishi mumkin. Ayniqsa, checkbox kabi kichik UI elementlarini bosish imkoniyati firibgarlik ehtimolini oshiradi. Ushbu muammoni hal qilish uchun checkbox va belgi bir joyda bosiladigan hudud ko'rsatilgan usulni foydalaniladi.
<FormControlLabel
control={<Checkbox />}
label="자동 로그인"
/>Ushbu tuzilma checkbox ga qaramasdan matnli maydonni ham birgalikda tanlash imkonini beradi, buni ta'minlash bilan tegish hududini kengaytiradi. Natijada foydalanuvchi kengroq maydon orqali bir xil harakatni bajarishi mumkin bo'ladi va UI aniqligi va ishlatilishi birga yaxshilanadi.
Mobil UI bilan ishlash jarayonida Bottom Sheet tuzilmasi ham muhim andozalardan biri edi. Bottom Sheet - ekranning pastki qismidan yuqoriga ko'tarilgan turdagi panel UI bo'lib, mobil muhitda tez-tez qo'llaniladigan interfeysdir.
Vebda odatda markazga joylashtirilgan Modal ko'p ishlatilmoqda, lekin mobilda ekran pastki qismi barmoq kirish imkoniyati eng yaxshi hudud sifatida baholanadi. Ushbu sababga ko'ra, variant tanlash, filtrlash, kiritish shakli, fayl yuklash kabi funksiyalar ko'p hollarda Bottom Sheet shaklida taqdim etiladi.
Bundan tashqari, Bottom Sheet to'liq ekran almashtirishsiz funksiya taqdim etishi sababli foydalanuvchining hozirgi kontekstni saqlagan holda qo'shimcha harakatlarni amalga oshirishi mumkinligi juda muhim. Bu mobil UX uchun juda muhim element sifatida ishtirok etadi.
<Boshliq ma'lumotlar loyiha doirasida foydalanilayotgan Bottom Sheet tasviri>
Tuza tadbir jarayonida Safe Area tushunchasi ham muhim element sifatida ishtirok etdi. Oxirgi mobil qurilmalar ekraning to'liq hajmini ishlatish shakli umumiy hisoblanadi, shunga ko'ra yuqori va pastki qismda jismoniy UI hududlari mavjud.
Yuqorida kamera va sensor uchun mo'ljallangan notch (yani cho'zilgan) hududi mavjud, pastda esa asosiy harakatlar uchun asosiy ko'rsatgich mavjud. Ushbu hududlar kontent bevosita bosishdan taqiqlangan hududlarga kiradi.
Shuning uchun mobil UI da Safe Area ni hisobga olgan holda bo'shliqni ko'rib chiqish zaruriy hisoblanadi.
.mobile-layout{
padding-top: var(--safe-area-top);
}Safe Area ni hisobga olmaslik natijasida kontent qurilma UI bilan to'qnashib, o'qish qiyin bo'lishi yoki ayrim materiallar yashirilishi mumkin. Ayniqsa, iOS muhitida bu ta'sir aniqroqda namoyon bo'ladi.
Ekran balandligini boshqarish usuli ham web va mobilda muhim farqlardan biri edi.
Webda odatda quyidagi usulda umumiy ekran balandligi tuziladi.
html,
body,
#root{
height: 100%; // 또는 height: 100vh;
}height: 100% ota-ona elementining balandligiga qarab hisoblanadi, 100vh esa viewport balandligiga qarab hisoblanadi. Viewport — bu foydalanuvchi hozirda ko'rayotgan ekran maydoni deganidir. Ya'ni, ekraning aslida ko'rinadigan maydonining asosidir. Ammo mobil muhitda manzil satri, pastki panel va boshqa elementlar dinamik ravishda paydo bo'lib, yo'q bo'lishi sababli haqiqatan foydalanish mumkin bo'lgan ekran balandligi doimiy ravishda o'zgaradi. Natijada 100vh haqiqiy ekran bilan aniq mos kelmasligi mumkin. Ushbu muammoni hal qilish uchun hozirda dvh (Dynamic Viewport Height) birliklarini ishlatish odatiy holga aylandi.
html,
body,
#root{
height: 100dvh;
}Dvh brauzer UI o'zgarishlarini hisobga olib, haqiqatan foydalanish mumkin bo'lgan ekran balandligini asosida hisoblanganligi sababli mobil muhitda barqaror joylashuv tuzish imkonini beradi. Ayniqsa, aylantirish qamroviga ega bo'lgan joylashuvda joylashuv tebranishini kamaytirishda muhim rol o'ynaydi.
Aylantirish harakati ham mobil muhitda muhim omillardan biri edi.
.mobile-content{
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}Xususan, -webkit-overflow-scrolling: touch iOS muhitida inersial aylantirishni qo'llash uchun xususiyatdir. Ushbu sozlama qo'llanganda foydalanuvchi tezda aylantirgandan so'ng qo'lini olib qo'yganida ham tabiiy ravishda aylantirish davom etishi ta'siri yuzaga keladi. Mahalliy ilovada his qilinadigan aylantirish tajribasi bilan o'xshash harakatni web muhitda ham amalga oshirish uchun muhim sozlama.
Shrift birliklari ham mobil muhitni inobatga olgan holda strukturaviy o'zgartirilgan qismdir. Dastlab, dizayn to'plamida belgilanganidek kodda ham shriftlarni px birliklarida belgilagan edik.
$fz-10: 10px;
$fz-11: 11px;
$fz-12: 12px;
…Px tushunarli va ishlatishi oson birlik, lekin bu mutlaq birlikdir. Mobil muhitda imkoniyatlar sozlamalariga ko'ra foydalanuvchi matn o'lchami o'zgarishi mumkinligi sababli nisbiy birliklarni ishlatish yanada mos keladi.
Loyihada dizayn to'plamida belgilangan turli shrift o'lchamlarini izchil ravishda remga aylantirib foydalanish uchun util funksiya tuzildi.
// rem 변환 함수 정의(Base size: 16px 기준)
@function rem($px) {
@return math.div($px, 16px) * 1rem;
}
$fz-10: rem(10px);
$fz-11: rem(11px);
$fz-12: rem(12px);
$fz-13: rem(13px);
…Bu oddiy birlik aylanish emas, balki dizayn to'plamiga asoslangan stil tizimida izchillikni saqlash uchun strukturaviy yondashuv.
Afzalliklari quyidagilardan iborat.
Birinchidan, dizayn to'plamini px asosida saqlash bilan birga asl kodda rem birliklari bilan birlashtirilgan foydalanishni ta'minlaydi.
Ikkinchidan, birlik aylanishi mantig'i bitta funktsiya ichida jamlanganligi sababli saqlash osonroq bo'ladi.
Uchinchidan, tasodifan noto'g'ri birlik hisoblashni to'g'ridan-to'g'ri yozish muammolarini kamaytirish mumkin.
To'rtinchidan, kelajakda imkoniyatlar sozlamalari yoki asosiy shriftni o'zgartirishga moslashuvchan ravishda javob bera oladi.
Tizim tuzilishi usullarida ham muhim o'zgarishlar bo'ldi.
Vebda kartochka yoki ro'yxat elementlarining balandligini o'zgaruvchan qiymat sifatida belgilash holatlari ko'p uchraydi.
.card{
height: 120px;
}Lekin mobil muhitda foydalanuvchi sozlamalariga ko'ra shrift o'lchami yoki kontent uzunligi o'zgarishi mumkin. Doimiy balandlik matnning kesilishiga yoki tizim tuzilishining buzilishini keltirib chiqarishi mumkin. Shuning uchun mobilda balandlikni saqlash o'rniga, padding va kontent oqimi asosida tabiiy ravishda kengayadigan tuzilma yanada mos keladi.
.card{
padding: 16px;
}Bu usul turli ekran o'lchamlari va kontent o'zgarishlariga yanada moslashuvchan javob bera olishiga imkon beradi va texnik xizmat ko'rsatish nuqtai nazaridan barqaror tuzilmani taqdim etadi.
Ushbu mobil nashr tajribasi orqali eng katta sezganim, mobil muhit oddiygina vebning kichraytirilgan versiyasi emasligini anglashim bo'ldi. Kirish usuli, tizim tuzilishi, ekran balandligini hisoblash usuli, aylantirish harakati, kirish imkoniyatlariga javob berish usullari kabi bir nechta elementlar birgalikda ko'rib chiqilishi kerak va har bir element foydalanuvchi tajribasiga bevosita ta'sir qilishini tasdiqlashim mumkin edi.
Kelajakda turli qurilma muhitlarini hisobga olib, yanada barqaror va bir xilda UI ni yaratishga yordam beradigan tajribani kengaytirishni maqsad qilmoqchiman.
KKAMJJING