ChainApp — mobil ilova lendingi
ChainApp uchun mobil ilova lendingini yig'dik: App Store va Google Play tugmalari bor birinchi ekran, mahsulot imkoniyatlari, sharhlar, tariflar va yangiliklarga obuna. Sahifa Bootstrap asosida qurilgan va uch kunda ishga tushirilgan.
Vazifa
ChainApp — mobil ilova. Buyurtmachiga ilova nima qila olishini qisqa tushuntiradigan, tariflar va sharhlarni ko'rsatadigan hamda tashrif buyuruvchini App Store va Google Play tugmalariga olib boradigan bir sahifali lending kerak edi.
Mobil ilova lendingi bitta vazifani hal qiladi: bir necha soniyada mahsulotni nega o'rnatish kerakligini tushuntirish va odamni ilovalar do'koni tugmasigacha olib borish. Bu yo'ldan chalg'itadigan hamma narsa — uzun matnlar, ortiqcha o'tishlar, haddan tashqari to'la birinchi ekran — yo'qotilgan o'rnatishlarga aylanadi.
Bitta sahifaga turli savollar bilan odamlar keladi. Biriga mohiyatni tushunib, «yuklab olish»ni bosish kifoya, boshqasi avval tariflarni solishtiradi, yana biri sharhlarni qidiradi. Sahifa har biriga javob berishi va shu bilan birga cheksiz lentaga aylanmasligi kerak.
Hamma narsa uchun uch kun bor edi. Bunday muddatda dizayn-tizimni noldan yaratish real emas, shuning uchun asos sifatida tezda yaxlit sahifaga yig'iladigan va turli brauzerlarda bir xil ishlaydigan sinalgan komponentlar to'plami kerak edi.
Ilova sahifasini tabiiyki telefondan ochishadi, shuning uchun bu yerda mobil versiya kompyuter versiyasidan muhimroq. Navigatsiya, karusellar va formalar barmoq ostida ishlashi, sahifaning o'zi esa tez yuklanishi va aylantirganda silkinmasligi kerak.
Yechim
Bir sahifali lendingni Bootstrap 5'da yig'dik: tayyor setka va komponentlar uch kunga sig'ishga imkon berdi. Yuqorida qotib turadigan sarlavhadagi navigatsiya langarlar orqali asosiy bo'limlarga olib boradi, tashrif buyuruvchining yo'li esa yuqoridan pastga boradi — mahsulot va'dasi, imkoniyatlar, ishonch, narx va obuna.
Birinchi ekranda darhol App Store va Google Play belgilari tushirilgan ikki tugma bor. Pastda imkoniyatlar kartochkalari, bepul sinab ko'rishga taklif qiluvchi mahsulot haqidagi blok, baholar bilan sharhlar karuseli, uchta tarif va yangiliklarga obuna formasi joylashgan. Kirish va ro'yxatdan o'tish modal oynada Facebook, Google yoki pochta orqali ochiladi.
Texnik jihatdan bu Bootstrap 5.1.3 va jQuery'dagi statik HTML sahifa: sharhlar Owl Carousel'da varaqlanadi, bo'limlar aylantirganda animatsiya bilan paydo bo'ladi, ikonkalar Font Awesome'dan, shrift esa Roboto. Xosting — Vercel, shuning uchun sahifa CDN orqali beriladi, yuklanish paytida esa maket siljimaydi.
Do'kon tugmalari bor birinchi ekran
Sarlavha va qisqa izoh sahifa nima haqida ekanini darhol aytadi, yonida esa App Store va Google Play belgilari tushirilgan ikki tugma turadi. O'ngda qo'lda telefon tasviri: tashrif buyuruvchi bir qarashda gap mobil ilova haqida ekanini tushunadi.
Imkoniyatlar kartochkalari
Mahsulotning asosiy imkoniyatlari uchun ikonkali to'rtta kartochka ajratilgan, har birida o'z «Batafsil» havolasi bor. Bunday formatni telefonda o'qish qulay: bitta blokda bitta fikr, butun ekranni egallagan yaxlit matn yo'q.
Mahsulot haqida blok va sinov muddati
«Biz haqimizda» bo'limi mahsulotni to'rtta qisqa bandga ajratadi va bank kartasi kerak emasligi haqidagi belgi bilan bepul sinov tugmasida yakunlanadi. Bu obuna oldidagi asosiy shubhani — hali sinab ko'rilmagan narsa uchun pul to'lashni yo'qotadi.
Baholar bilan sharhlar karuseli
Sharhlar karuselga yig'ilgan: har birida ism, sana, toifa va besh ballik shkala bo'yicha baho bor. Ularni barmoq bilan varaqlash mumkin, ixcham format esa qancha sharh qo'shilmasin, sahifani cho'zib yubormaydi.
Uchta tarif va yangiliklarga obuna
Narxlar standartdan premiumgacha uchta kartochkaga chiqarilgan, har birida imkoniyatlar ro'yxati va xarid tugmasi bor. Pastda yangiliklarga obuna formasi joylashgan: ilovani hali o'rnatishga tayyor bo'lmaganlar ham aloqada qolishi mumkin.
Modal oynada kirish va ro'yxatdan o'tish
Sarlavhadagi kirish tugmasi modal oynani ochadi: Facebook, Google yoki pochta va parol orqali kirish, ro'yxatdan o'tish va parolni tiklash mumkin. Tashrif buyuruvchi sahifani tark etmaydi va to'xtagan joyini yo'qotmaydi.
Natijalar
Loyihaning asosiy natijalari raqamlarda.
- +58%O'rnatishga o'tishlar
Birinchi ekrandan do'kon tugmalarigacha aniq yo'l ilovani o'rnatishga o'tishlar sonini oshirdi.
- 3 kunIshlab chiqish muddati
Lending sahifa tuzilmasidan Vercel'da e'lon qilishgacha uch kunda yig'ildi va ishga tushirildi.
- 98/100Lighthouse bahosi
Yuklanish tezligi va sahifa sifatini tekshiradigan Google Lighthouse auditidagi baho.
- 6Sahifadagi bo'limlar
Birinchi ekran, imkoniyatlar, mahsulot haqida, sharhlar, tariflar va obuna — tanishuvdan o'rnatishgacha to'liq yo'l.
Loyiha texnologiyalari
Mijozning vazifasi uchun yechimni qurganimiz stek.
- Vercel
- HTML5
- CSS3
- JavaScript
- Bootstrap
O'xshash keyslar
Keyingi keys bo'lishga tayyormisiz?
Vazifani ayting — menejer jamoa yig'adi, smeta hisoblaydi va so'rovingizdan keyingi birinchi soat ichida taklif yuboradi. Majburiyatlarsiz va xat tarqatishsiz.