AXV

Ikonka, Tugma va Navigatsiya Dizayni

UI Kit asoslari, tugmalar ierarxiyasi, 5 ta holat va navigatsiya arxitekturasi

10-sinfAdvanced UX/UI3-hafta · 9-dars

Bugun nimani o'rganamiz?

Tugmalar ierarxiyasi

Primary, Secondary, Ghost, FAB va maxsus tugmalar vazifasi

5 ta holat & 44px

Enabled, Hover, Focus, Active, Disabled va mobil touch target me'yori

Ikonkalar & UI Kit

Universal ramzlar, navigatsiya bloklari va Figma Auto Layout komponentlari

01

Tugmalar va Vizual Ierarxiya

Foydalanuvchi diqqatini harakatga (Call to Action — CTA) yo'naltirish

Tugma — harakatga undovchi vosita

«Tugma — interfeysdagi eng faol komponent. U foydalanuvchining niyatini natijaga aylantiradi.»

Call to Action (CTA)

Har bir ekranda foydalanuvchi amalga oshirishi kerak bo'lgan asosiy maqsad aniq ko'rinishi shart.

Vizual vazn va tartib

Barcha amallar bir xil bo'lmaydi: to'lash, bekor qilish va hisobni o'chirish turli vizual kuchga ega bo'lishi kerak.

Asosiy tugmalar ierarxiyasi

Primary Button

Birlamchi tugma

Ekrandagi eng muhim amal (To'lov qilish, Ro'yxatdan o'tish). To'liq yorqin fon, yuqori kontrast. Odatda ekranda 1 ta bo'ladi.

Secondary Button

Ikkilamchi tugma

Zarur, ammo yordamchi amallar (Bekor qilish, Qoralama saqlash). Konturli (outline) yoki och neytral fonli ko'rinish.

Tertiary / Ghost

Uchinchi darajali

Eng kam diqqat talab qiluvchi amallar (Parolni tiklash, Tafsilotlar). Fonsiz, faqat matn yoki havola ko'rinishida.

Tugmalar ierarxiyasining vizual kuchi

PRIMARY Birlamchi (Eng muhim) Davom etish To'liq yorqin fon Eng yuqori kontrast 1 ekranda 1 ta CTA SECONDARY Ikkilamchi (Yordamchi) Bekor qilish Konturli yoki neytral Birlamchi tugmaga fon Bir nechta bo'lishi mumkin TERTIARY / GHOST Uchinchi darajali Parolni unutdingizmi? Fonsiz yoki havola Minimal vizual yuk Qo'shimcha ma'lumotlar

Qo'shimcha va maxsus tugmalar

FAB (Floating Action)

Asosan mobilda qo'llanadi. Doira shaklida, soyali bo'lib ekranning pastki qismida suzib turadi (masalan, yangi xat yozish).

Ikona tugma (Icon Button)

Joy tejash uchun faqat piktogramma ko'rinishida bo'ladi (qidiruv, savat, bildirishnoma). Bounding box orqali teginish maydoni kengaytiriladi.

Havola tugma (Link)

Matnli giperhavola ko'rinishida bo'lib, foydalanuvchini boshqa sahifaga yoki resursga ravon yo'naltiradi.

Tugma yorlig'i (Label) qoidalari

To'g'ri amaliyot

Aniq fe'l bilan boshlash: "To'lov qilish", "Saqlash", "Yuklab olish".

Qisqalik va laconizm: 1-3 ta so'zdan oshmasin.

Shrift qoidasi: 14–18px, Medium yoki Semibold.

Qo'pol xatolar

Noaniq so'zlar: "Bu yerga bosing", "Davom etish mumkin".

Uzun gaplar: Tugma ichiga to'liq gap yoki shartlarni yozish.

Nomuvofiqlik: Bitta platformada bir sahifada "Yuborish", boshqa sahifada "Jo'natish" deyish.

02

Tugma Holatlari va Ergonomika

5 ta interaktiv holat, Accessibility va 44px teginish me'yori

Tugmaning 5 ta holati (Button States)

1. Enabled (Default) Odatiy bosishga tayyor holat Tasdiqlash 2. Hover Kursor ustiga keltirilganda (to'qroq) Tasdiqlash 3. Focus (Accessibility) Tab klaviaturasi bilan tanlanganda halqa Tasdiqlash 4. Active (Pressed) Bosilgan lahzadagi reaksiyasi Tasdiqlash 5. Disabled Faol emas (bosish taqiqlangan) Tasdiqlash

Kontrast va qulaylik (Accessibility)

4.5 : 1 Kontrast nisbati

WCAG AA standartiga ko'ra, tugma matni va uning foni o'rtasidagi kontrast kamida 4.5:1 bo'lishi shart.

Figma uchun Stark yoki Contrast Checker plaginlari buni avtomatik tekshirib beradi.

Fokus va ko'zga tashlanish

Sichqonchasiz foydalanuvchilar (Tab tugmasi orqali yuruvchilar) tugma qayerdaligini doimo aniq ko'rishlari kerak.

Focus holatidagi kontur hech qachon yashirib qo'yilmasligi lozim.

Mobil interfeyslarda 44px qoidasi

KICHIK TUGMA (24px) Qo'pol ergonomik xato Yuborish Barmoq o'lchami: ~44px Xato bosish ehtimoli 80% STANDART TUGMA (48px) Apple va Google standarti Yuborish To'liq touch target qamrovi Ergonomik va qulay

Figmada Auto Layout tugma yaratish

1

Matn yozish

T tugmasini bosib matn kiriting (masalan, "Saqlash"). Shrift: Inter/Roboto, 16px, Semibold.

2

Auto Layout

Matnni tanlab Shift + A bosing. Freym avtomatik ravishda moslashuvchan konteynerga aylanadi.

3

Padding & Radius

Yon padding: 24px, balandlik bo'yicha: 12px, burchak radiusi: 8px qilib o'rnating.

4

Variants

Komponentga aylantiring va Variantlar orqali Hover, Focus, Disabled holatlarini shakllantiring.

03

Ikonkalar va Navigatsiya Bloklari

Universal vizual metaforalar va sayt tuzilmasini boshqarish

Ikonkalar bilan ishlash qoidalari

Tanish metaforalar

Qidiruv uchun lupa, xarid uchun savat, sozlamalar uchun tishli g'ildirak. Odamlar tanigan belgilardan foydalaning.

Yangi belgi yaratmang

Noaniq va noodatiy ikonka foydalanuvchini chalg'itadi. Ikonka vazifasi — so'zsiz tezkor tushunishni ta'minlashdir.

Matn bilan quvvatlang

Imkon boricha ikona yoniga qisqa matn qo'shing. Bu tushunmovchilikni 90% ga kamaytiradi.

Asosiy navigatsiya bloklari

Header & Gorizontal menyu

Sahifaning yuqori qismida joylashadi: chapda logotip (bosh sahifaga qaytaradi), o'rtada bo'limlar havolalari, o'ngda qidiruv va profil.

Bottom Navigation (Pastki tab-bar)

Mobil ilovalarda bir qo'l bilan boshqarish uchun pastki qismda 3–5 ta eng muhim tugmani jamlovchi navigatsiya paneli.

Navigatsiya arxitekturasi: Desktop vs Mobil

DESKTOP HEADER & BREADCRUMBS Bosh sahifa > Katalog > Noutbuklar MOBIL BOTTOM BAR
04

UI Kit va Dizayn Tizimi

Komponentlar yordamida izchil, tezkor va xatosiz interfeys yaratish

UI Kit nima?

Atomlar va komponentlar

Ranglar, tipografiya, ikonalar, tugmalar va input maydonlarining yagona kutubxonasi.

Muntazam izchillik

Barcha sahifalarda tugmalar, oraliqlar va shriftlar bir xil qoidada ishlatiladi.

Bir zumda yangilanish

Asosiy master komponent o'zgarganda loyihadagi barcha 100 ta sahifadagi tugmalar avtomatik yangilanadi.

Amaliy taqqoslash: Havaskor vs Professional

Tartibsiz dizayn (UI Kitsiz)

Har xil o'lchamdagi tugmalar (28px, 35px, 51px).

Och sariq fonda oq matn (past kontrast).

Bitta ekranda 4 ta turli Primary tugma.

Tugma holatlari (Hover, Focus) unutilgan.

Professional dizayn (UI Kit bilan)

Yagona 8pt panjara va 48px qulay o'lcham.

Kamida 4.5:1 kontrast (WCAG me'yori).

Aniq ierarxiya: 1 ta Primary, qolgani Secondary.

5 ta to'liq holat va qulay klaviatura fokusi.

Tezkor bilim sinovi

Mobil interfeyslarda tugmaning teginish maydoni (touch target) nega kamida 44px bo'lishi kerak?
Faqat chiroyli ko'rinish va katta matn sig'ishi uchun
Inson barmog'i bilan adashmasdan va qo'shni elementlarga tegib ketmasdan qulay bosish uchun
Dasturchilar kod yozayotganda qiynalmasligi uchun
Figmada Auto Layout faqat 44px dan boshlab ishlagani uchun

Amaliy laboratoriya mashg'uloti

Figma UI Kit yaratish

1. Primary va Secondary tugmalarni Auto Layout bilan loyihalang;

2. Burchak radiusini 8px, ichki paddinglarni 24x12px qilib sozlang;

3. 5 ta holat (Enabled, Hover, Focus, Active, Disabled) variantlarini birlashtiring.

Navbar va Bottom Bar yig'ish

1. Desktop uchun: Logo, 3 ta menyu havolasi va Primary CTA tugma;

2. Mobil uchun: 4 ta universal ikonkali Bottom Navigation bar yarating.

Darsning asosiy xulosalari

Oltin standartlar

Bitta ekranda bitta asosiy Primary CTA, kamida 44px o'lcham va 4.5:1 kontrast nisbati.

Tizimli yondashuv

Ikonkalarni ixtiro qilmang, universal ramzlardan foydalaning va elementlarni UI Kit orqali boshqaring.

Keyingi mavzu: IV bob. Prototiplash va Wireframe yaratish asoslari