Tartibni hayotga tayyorlash. Element holatlari va moslashuvchanlik bilan ishlash

Tartibni hayotga tayyorlash. Element holatlari va moslashuvchanlik bilan ishlash.


Yaratuvchilar yoki ishlab chiquvchilar sifatida barchamiz foydalanuvchilarning muammolarini hal qilish uchun milliard dollarlik dasturni talab qiladigan milliard dollarlik g'oyaga egamiz. Ammo dizayn yordamida ilova g'oyangizni qanday sinab ko'rasiz va tasdiqlaysiz? Figma yordamida bu mumkin, chunki siz o'zingizning dizayningiz, prototipingiz va potentsial foydalanishingiz bilan hamkorlik qilishingiz mumkin.
Ushbu qo'llanmada siz foydalanuvchilar oziq-ovqat mahsulotlariga buyurtma berishlari va ularni o'z joylarida 10 daqiqa ichida etkazib berishlari mumkin bo'lgan dastur ustida ishlaysiz. Odatda, bunday dasturni loyihalashdan oldin siz foydalanuvchi tadqiqotlari va bozorni o'rganishingiz kerak bo'ladi. Bu biznes g'oyasini yaratishning foydalanuvchi tajribasi (UX) dizayn tomoni. Keyin, tadqiqotdan so'ng, siz o'zingizning tadqiqot natijangiz asosida dasturni ishlab chiqasiz. Bu jihat foydalanuvchi interfeysi (UI) dizaynidir. Ushbu postda biz ilovaning asosiy ekranini loyihalash orqali narsalarning UI tomoniga e'tibor qaratamiz.1-Qadam: Ilovangizni Sim Bilan Bog'lang
Boshlash uchun biz ilova g'oyamizning minimalist versiyasini yaratamiz. Bu simli ramka yoki past aniqlikdagi dizayn sifatida tanilgan. Ammo buni qilishdan oldin, uplabs, Mobbin yoki Ui8 kabi UI dizayn veb-saytlaridan olishingiz mumkin bo'lgan dizayn uchun Ilhom olishni maslahat beraman. Figma-da kayfiyat taxtasini ham yaratishingiz mumkin.
Simli ramkangizni loyihalash uchun Figma hisobingizga kiring yoki agar sizda yo'q bo'lsa, hisob yarating. Agar siz Figma bilan yangi tanishsangiz, qisqacha ma'lumot uchun ushbu xabarni ko'rib chiqing.
Tizimga kirganingizdan so'ng, Figma faylini yarating va uning nomini o'zgartiring.

IPhone simli ramkasini yaratish
Bu erda siz ilovaning simli ramkasini yaratasiz. Bu ilovaning haqiqiy mazmunini ifodalash uchun to'rtburchaklar, tutilish va uchburchaklar kabi shakllarni o'z ichiga oladi. Birinchidan, mintaqa vositasiga o'tish va Frame-ni tanlash orqali bo'sh dizayn tuvaliga iPhone 13 Pro telefon ramkasini qo'shing.
Keyin, shape tools-ga o'ting va to'rtburchak va tutilishni tanlang va keyin ularni quyidagi rasmga qo'shganim kabi iPhone ramkasiga qo'shing.

Yuqoridagi rasmda ilova bosh ekranining simli ramkasi ko'rsatilgan, bu biz ushbu qo'llanmada yaratadigan narsadir. Qutilar rasm va matnni aks ettiradi, biz ularni keyinchalik tegishli elementlar bilan almashtiramiz.
2-Qadam: Plaginlarni Yuklab Oling
Figma-da hamjamiyat tomonidan yaratilgan plagin integratsiyalari mavjud. To'g'ridan-to'g'ri Figma-da uchinchi tomon integratsiyasiga kirish sizning dizaynlaringizni tezlashtirishga yordam beradi. Ushbu qo'llanma uchun siz to'rtta plaginni birlashtirishingiz kerak:

Unsplash (Unsplash)
Foydalanuvchining Profili
Lorem Ipsum
O'zbekiston Respublikasi moliya vazirligi
Biz ushbu plaginlardan ilovamizning simli ramkasini to'ldirish uchun foydalanamiz.3-qadam: simli ramkaga tarkib qo'shing
UI dizaynida dizaynlarning ikki turi mavjud: biz ilgari ko'rgan past aniqlikdagi simli ramka va yuqori aniqlikdagi dizayn. Yuqori aniqlikdagi dizayn - bu siz yaratadigan yoki kodlaydigan haqiqiy ilovaning batafsil vizual tasviri yoki nusxasi.
Bu erda siz simli ramkangizning yuqori aniqlikdagi vizual tasvirini yaratasiz. Siz barcha qutilarni haqiqiy tarkib bilan almashtirasiz. Yangi sahifa yarating va uni "yuqori aniqlik" deb o'zgartiring, so'ngra tuvalga iPhone 13 Pro telefon ramkasini qo'shing.

Yuqoridagi rasm oziq-ovqat dasturining yuqori aniqlikdagi dizayni. Qidiruv yozuvini ochish va foydalanuvchi Profil plaginini qidirish uchun yuqori chap katakchani bosish va Ctrl + / yozish orqali avatar rasmini almashtiring. Uni tanlang va tasodifiy avatar tasviri qutini to'ldiradi. Qutilarni Unsplash-dan rasmlar bilan to'ldirish uchun xuddi shu jarayonni bajaring.
Belgilar uchun siz Iconify plaginidan foydalanasiz. Plaginni oching va "savat" va "qidirish" belgilarini qidiring. Dizayningizga qo'g'irchoq matnlarni qo'shish uchun siz Lorem Ipsum plaginidan foydalanishingiz mumkin. U avtomatik ravishda qo'g'irchoq matnlarning paragraflari yoki jumlalarini qo'shadi.
Siz muharriri yuqori o'ng burchagida Play tugmasini bosish Figma sizning dizaynlashtirilgan oldindan ko'rish mumkin.

Oldindan ko'rish ekraningiz yuqoridagi rasmga o'xshash bo'lishi kerak.
4-qadam: hamkorlik qiling va dizayningiz haqida fikr bildiring
Endi siz o'z ilovangizni yaratganingizdan so'ng, sharhlar va fikr-mulohazalar uchun boshqa dizaynerlar, foydalanuvchilar va muhandislar bilan hamkorlik qilishingiz mumkin. Izoh qo'shish uchun muharrirning yuqori satridagi sharhlar tugmasini bosing. Keyin, jamoangiz uchun sharh qoldirmoqchi bo'lgan dizayndagi istalgan maydonni tanlang yoki foydalanuvchilarni sinab ko'ring.


Shuningdek, siz ulashish tugmachasini bosish va almashish parametrlarini o'rnatish orqali dizaynni baham ko'rishingiz mumkin.

5-qadam: dizayningizni Figma hamjamiyati bilan baham ko'ring
Figma hamjamiyati shablonlarga, vidjetlarga va plaginlarga kirishni ta'minlaydi. Figma foydalanuvchisi sifatida siz ham o'zingizning dizaynlaringiz va plaginlaringizni boshqalar foydalanishi uchun jamoatchilikka nashr etishingiz mumkin. Buni ulashish tugmasi va nashr etish tugmasini bosish orqali qilishingiz mumkin.

Va bu! Siz oziq-ovqat mahsulotlarini etkazib berish ilovasining bosh ekranini yaratdingiz, garchi hali qilinadigan ishlar ko'p. Figma bilan ko'proq mashq qilish uchun dizayningiz ustida ishlashni davom eting.
Xulosa
Tabriklaymiz! Siz oziq-ovqat xarid qilish ilovangiz uchun simli ramka va yuqori aniqlikdagi dizaynni loyihalash orqali Figma-da birinchi UI ilovasi dizaynini qanday yaratishni o'rgandingiz. Agar UI/UX dizayni bilan ishlashni xohlasangiz, Ux/UI dizayni uchun Figma-dagi Cprime kursini tekshirishingiz mumkin.