Amaliy ish №6 Figma-da dizayn tizimi. Asoslar, matnlar, tipografiya

Amaliy ish № 6
Figma-da dizayn tizimi. Asoslar, matnlar, tipografiya
Dizayn tizimi komponentlar bilan tez o'zaro aloqada bo'lish, barcha maketlarga osongina o'zgartirishlar kiritish imkonini beradi va umuman olganda dizaynerda katta hajmdagi ma'lumotlarni tartibga solish mahoratini singdiradi.
Ko'pincha, dizayner dizayn tizimini diqqat bilan bajarishga kirishadi, unga tegishli e'tibor beradi. Ammo ekranlar kattalashgani sayin, yangi komponentlar va sozlashlarni joriy qilish ma'naviy jihatdan qiyinroq bo'lib tuyuladi. Ammo bir narsani esda tuting - dizayn tizimiga qancha vaqt sarflasangiz, kelajakda u shunchalik ko'p vaqtni tejaydi.
Dizayn tizimlarining asosiy qoidasi: komponentlar qancha kam bo'lsa, siz, ishlab chiquvchi va oxirgi foydalanuvchi uchun shuncha yaxshi bo'ladi. Bu ranglar, shriftlar, piktogrammalar va boshqalar soniga tegishli. Dizayn yanada uyg'un va birlashtirilgan ko'rinadi.
Ranglar
Ranglar nafaqat sizning dizayningiz qanday ko'rinishini ko'rsatish uchun mavjud, balki ular mahsulot yoki xizmatdan foydalanish hissiyotini uyg'otadi, brendingizning shaxsiylashtirilganligini ko'rsatadi va foydalanuvchi bilan tom ma'noda "gaplashadi".
Ranglar palitrasini aniqlang
Ranglar palitrasini aniqlash dizayn tizimini qurishda juda muhim qadamdir, lekin ko'pincha bu jarayon qiyin. Kayfiyat, his-tuyg'ular, esdalik - bularning barchasi ranglardir.
Asosiy ranglar palitrasi quyidagi soyalarni o'z ichiga olishi kerak: neytral (neytral), asosiy (asosiy), urg'u (ikkilamchi) va "teskari aloqa" (teskari aloqa).
Har bir rangdan 50 ta rang yasash shart emas. Bu faqat chalkashliklarni keltirib chiqaradi, ammo foyda keltirmaydi. Buning o'rniga, 6-12 ni yaratishga harakat qiling va barcha maketlarda bir xil joyda bir xil rangdan foydalaning.
Masalan, birinchi ekrandagi kirishning standart zarbasi "Neytral / 300" dir. Keyin keyingi ekranlarda xuddi shunday bo'lishi kerak.
Neytral asosan elementlarning sukut bo'yicha yoki o'chirilgan holatlarida qo'llaniladi. Odatda, bu kulrang yoki ko'k ranglardir.

"Neytral" palitrasi
Birlamchi maksimal foydalanuvchi diqqatini talab qiladigan interaktiv elementlar uchun ishlatiladi. Asosan faol holat elementlari uchun ishlatiladi. Siz bir nechta asosiy rangga ega bo'lishingiz mumkin, lekin bittadan boshlash yaxshidir.

"Birlamchi" palitrasi
Urg'u (ikkilamchi) asosiy rangni qo'llab-quvvatlash uchun ishlatiladi. Belgilar yoki yorliqlar uchun ishlatilishi mumkin.
Teskari aloqa ranglari foydalanuvchini mumkin bo'lgan harakatlarining natijalari haqida vizual ravishda xabardor qilish uchun kerak. Xato yoki muhim harakat (Xato) qizil rangda ko'rsatilgan. Masalan, jadvaldagi ma'lumotlar qatorini o'chirish. Ogohlantirish - to'q sariq. Muvaffaqiyat yashil rangda.
"Xato" palitrasi

"Ogohlantirish" palitrasi

"Muvaffaqiyat"
Keyingi ekranlarni yaratishni boshlashdan oldin ranglar palitrasi haqida qaror qabul qiling
Ko'pgina dizaynerlar rang uslublarisiz foydalanuvchi interfeysini yaratishda noqulay vaziyatga tushib qolishadi. Ko'proq ekranlar mavjud bo'lganda, "pipetka" holati paydo bo'ladi. Xuddi shu rangni olish uchun bir maketdan ikkinchisiga o'tishingiz kerak.
Bunga yo'l qo'ymaslik uchun, keling, modal kalendar oynasiga ega bo'lgan birinchi ekranni yaratdingiz deb tasavvur qilaylik (ranglar juda ko'p bo'lgani uchun men buni misol qilib oldim).
Figma "/" slash yordamida uslublarni papkalarga qulay tarzda ajratish imkonini beradi. To'g'ri ierarxiyani yaratish uchun undan foydalaning.

Figma UI to'plami - bu Figma-dagi hujjat bo'lib, u interfeyslarni loyihalash uchun grafik elementlar uchun tayyor tayyorlangan uslublar va bezaklar to'plamiga ega. Aslini olganda, bu yangi dizayn tizimini yaratish uchun kodsiz yoki shablonsiz dizayn tizimidir.

Figma UI to'plami izchil dizaynni loyihalashda yordam beradi, dizaynerlar va ishlab chiquvchilar uchun vaqtni tejaydi, dizayn jarayonlarini tezlashtiradi, mutaxassislar o'rtasidagi muloqotni osonlashtiradi, bitta "ekotizim" da ishlashga imkon beradi.
UI to'plamidan foydalanish dizaynerlar uchun hayotni ancha osonlashtirishi mumkin. Hujjat tuzilmasi yaratildi - tezkor boshlash uchun shablon. Siz shunchaki yaratilgan ob'ektlarning (shriftlar, ranglar, tugma shakllari va boshqalar) uslubini sozlashingiz kerak va barcha elementlar va bloklar ushbu uslubni meros qilib oladi. Yoki siz darhol tayyor bloklardan maketlarni yig'ishingiz mumkin va shundan so'ng siz ushbu bloklarni bir joyda (bosh komponentlarda) o'rnatishingiz mumkin va barcha nusxalar (nasollar) o'zgarishlarni meros qilib oladi.