SHOP.CO — Figma'da onlayn do'kon prototipi
Figma'da SHOP.CO kiyim do'koni uchun onlayn do'kon prototipini loyihalashtirdik: bosh sahifa, filtrli katalog, mahsulot kartochkasi va savat — kompyuter va smartfon uchun. Bu ishga tushirilgan do'kon emas, interfeys maketlari.
Vazifa
SHOP.CO — biz ushbu prototipni qurgan shartli kiyim brendi: loyiha ortida haqiqiy buyurtmachi, ishga tushirish va savdo yo'q. Maketlarda futbolkalar, ko'ylaklar, jinsi shimlar, shortilar va xudilardan iborat kundalik garderob ko'rsatilgan: birgina «Casual» toifasida yuzta mahsulot bor, katalog filtrlari esa to'qqizta o'lcham va o'nta rangni qamrab oladi.
Onlayn do'kon prototipi avvalo xaridor katta assortimentda kerakli narsani topa olishini ko'rsatishi kerak. Hatto maketda ham «Casual» toifasida yuzta mahsulot bor, qulay filtrlarsiz odam cheksiz setkani varaqlaydi, charchaydi va izlagan narsasini topmay chiqib ketadi.
Kiyim xaridini o'lcham, rang va bichim hal qiladi, fotosurat esa faqat e'tiborni tortadi. Mahsulot kartochkasi bu savollarga narsa savatga tushishidan oldin javob berishi kerak, kiyim uchun boshqa xaridorlarning sharhlari esa ayniqsa muhim: ular orqali mato, o'lchamlar jadvali va sifat haqida xulosa qilinadi.
Savat — buyurtmalar eng ko'p yo'qoladigan joy. Xaridor rasmiylashtirishdan oldin yakuniy summani ko'rishni xohlaydi: chegirma, yetkazib berish narxi, promokod — so'nggi qadamda kutilmagan holatlarsiz. Nimadir tushunarsiz bo'lsa, tushunishga urinishdan ko'ra varaqni yopish osonroq.
Xuddi shu ssenariylar telefonda ham ishlashi kerak, u yerda filtrlar yon paneli va keng mahsulotlar setkasi uchun joy yetmaydi. Maketlar asosida ekranlar mantig'ini qayta ishlamasdan do'kon yig'ish uchun ikkala versiya ham yagona elementlar to'plamida kerak edi.
Yechim
Prototipni xaridor yo'li atrofida qurdik: bosh sahifa, katalog, mahsulot kartochkasi va savat. Har bir ekran bitta savolga javob beradi — do'konda nima bor, menga nima mos, narsa puliga arziydimi va yakunda qancha chiqadi. Ekranlar faqat Figma'da mavjud, ular ortida ishlaydigan sayt yo'q, shuning uchun funksiyalar interfeys darajasida ko'rsatilgan.
Bosh sahifa kirish nuqtasi vazifasini bajaradi: sarlavhadagi qidiruv, «Shop Now» tugmali birinchi ekran, yangi mahsulotlar va to'plamlar katalogga olib boradi. U yerda chapda toifa, narx, rang, o'lcham va uslub filtrlari, o'ngda saralash va sahifalash bilan mahsulotlar setkasi joylashgan. Kartochkada rang, o'lcham va miqdorni tanlash mumkin, savat esa chegirma, yetkazib berish va yakuniy summani hisoblaydi hamda promokod qabul qiladi.
Maketlarni Figma'da kompyuter va smartfon uchun yig'dik. Qidiruvli sarlavha, mahsulot kartochkasi, reyting yulduzchalari, chegirmali narx belgisi va tugmalar barcha ekranlarda umumiy elementlar sifatida takrorlanadi, pastki qismda esa rassilkaga obuna hamda Visa, Mastercard, PayPal, Apple Pay va Google Pay belgilari bor.
O'lcham bo'yicha filtrli katalog
Yon panel beshta filtr guruhini birlashtiradi: toifa, slayderli narx oralig'i, o'nta rang, XX-Small dan 4X-Large gacha to'qqizta o'lcham va kiyim uslubi. Xaridor barcha parametrlarni belgilagach, filtrlar bitta «Apply Filter» tugmasi bilan qo'llanadi.
Saralash, hisoblagich va sahifalash
Katalog setkasi ustida qancha mahsulot topilgani — «Showing 1-10 of 100 Products» — va ular qanday saralangani ko'rinadi, odatda ommaboplik bo'yicha. Sahifa pastida raqamlar hamda «Previous» va «Next» tugmalari joylashgan, sarlavha ustidagi navigatsiya zanjiri esa bir daraja yuqoriga qaytaradi.
O'lcham tanlanadigan kartochka
Uchta fotosuratli galereya, reyting, joriy va chizilgan eski narx hamda chegirma belgisi, rang va o'lcham tanlash, miqdor hisoblagichi va «Add to Cart» tugmasi kartochkaning birinchi ekranida jamlangan. Xaridor sahifani aylantirmasdan narsa unga mos kelishini hal qiladi.
Mahsulot ostidagi sharhlar va savollar
Kartochka ostida uchta yorliq bor: tavsif, baholangan sharhlar va tez-tez beriladigan savollar. Sharhlar bo'limida sana bo'yicha saralash, filtr va «Write a Review» tugmasi mavjud, har bir sharhda esa e'lon qilingan sana va tasdiqlangan xaridor belgisi ko'rinadi.
Yakuniy summasi aniq savat
Savatda har bir pozitsiyaning o'lchami, rangi va narxi ko'rinadi, miqdor tugmalar bilan o'zgaradi, o'chirish esa savat ikonkasi orqali. «Order Summary» bloki summa, chegirma, yetkazib berish va yakunni ko'rsatadi, promokod qabul qiladi va «Go to Checkout» tugmasi bilan rasmiylashtirishga olib boradi.
Kompyuter va smartfon versiyalari
To'rtala ekran ikki versiyada tayyorlangan — keng ekran va telefon uchun. Umumiy elementlar — qidiruvli sarlavha, mahsulot kartochkasi, obuna va beshta to'lov tizimi belgisi bor pastki qism — ikkala versiyada takrorlanadi, shuning uchun interfeys istalgan qurilmada taniladi.
Natijalar
Loyihaning asosiy natijalari raqamlarda.
- 4Asosiy ekranlar
Bosh sahifa, katalog, mahsulot kartochkasi va savat — xaridorning buyurtma tugmasigacha to'liq yo'li.
- 2Maket versiyalari
Har bir ekran kompyuter uchun va smartfon uchun alohida versiyada ko'rsatilgan.
- 5Katalogdagi filtr guruhlari
Toifa, narx, rang, o'lcham va kiyim uslubi natijalarni mos narsalargacha toraytiradi.
- 3Kartochkadagi yorliqlar
Tavsif, sharhlar va tez-tez beriladigan savollar mahsulot ostida ochiladi va sahifadan olib chiqmaydi.
Dizayn va interfeyslar
Loyihaning asosiy ekranlari va interfeyslari.
Loyiha texnologiyalari
Mijozning vazifasi uchun yechimni qurganimiz stek.
- Figma
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.