AXV

Axure RP: Dinamik panellar va interaksiyalar

Statik karkasdan chertiladigan interaktiv prototip sari

9-sinfUX/UI dizayn3-hafta · 7-dars

Bugungi dars rejasi

01. Interaksiyalar mantiqi

Trigger, Action va Target tamoyili orqali elementlarni jonlantirish.

02. Dinamik panellar

Dynamic Panels: bitta joyda bir nechta holatlarni (States) boshqarish.

03. Navigatsiya va Preview

Sahifalararo bog'lanish va brauzerda real vaqtda sinab ko'rish.

01

Interaksiyalar mantiqi (Interactions)

Foydalanuvchi harakati va tizimning unga munosabati

Interaktivlikning 3 tayanch ustuni

1. Trigger (Hodisa) Foydalanuvchi nima qildi? OnClick / OnHover Klaviaturani bosish 2. Action (Amal) Tizim nima bajarishi kerak? Open Link / Set State Ko'rsatish yoki yashirish 3. Target (Nishon) Qaysi obyekt o'zgaradi? Book_details.html Modal oyna / Menyu

Axure RP dagi asosiy hodisalar (Events)

OnClick

Element ustiga sichqoncha yoki barmoq bilan chertilganda sodir bo'ladi.

OnMouseEnter / Leave

Kursor element ustiga kelganda (Hover) va undan uzoqlashganda ishlaydi.

OnKeyUp / Down

Matn kiritish maydoniga foydalanuvchi klaviaturada yozayotganda ishlaydi.

Eng ko'p qo'llaniladigan Action turlari

Open Link

Boshqa sahifaga yo'naltirish.

Set Panel State

Dinamik panel holatini o'zgartirish.

Show / Hide

Elementni ko'rsatish yoki yashirish.

Scroll to Widget

Sahifaning kerakli joyiga tushirish.

02

Dinamik panellar (Dynamic Panels)

Bitta ekranda bir nechta holatlarni (States) boshqarish san'ati

Dinamik panel qanday ishlaydi?

Dynamic Panel: Book_Tabs State 1: Mundarija State 2: O'quvchilar fikri

Dinamik panel qayerlarda kerak?

Tablar (Vkladkalar)

Sahifani qayta yuklamasdan «Tavsif», «Xarakteristika» yoki «Sharhlar»ga o'tish.

Modal oynalar (Popup)

«Kirish» yoki «Savatcha» bosilganda ekranning markazida paydo bo'ladigan oyna.

Slayderlar (Karusel)

Bosh sahifadagi aksiyalar va yangi kitoblar bannerlarini surib ko'rish.

Tablar: Yangi sahifa yoki Dinamik panel?

Noxush usul: sahifalar ko'payib ketadi

Har bir tab uchun alohida sahifa yaratilsa, menyu va header nusxalanadi, kichik o'zgarish butun loyihada chalkashlik keltirib chiqaradi.

Professional usul: Dynamic Panel

Bitta ramka ichida State 1 va State 2 almashadi. Tez, oson boshqariladi va haqiqiy veb-dastur kabi ishlaydi.

Elementlarni to'g'ri nomlash odobi

Tugmalar

btn_submit, btn_login, btn_back kabi aniq prefiks bilan nomlash.

Panellar

dp_book_tabs, dp_modal_auth ko'rinishida dinamik panellarni belgilash.

Sahifalar

Home_books, Book_details, Search_results deb mantiqiy nom qo'yish.

03

Sahifalararo navigatsiya

«Home_books» dan «Book_details» ga o'tishni loyihalash

Sahifani ulash bosqichlari

1. Elementni tanlash

Kitob kartasi yoki tugmani belgilang.

2. New Interaction

Interactions panelida Click or Tap hodisasini tanlang.

3. Open Link

Loyiha sahifalari ro'yxatidan Book_details ni bosing.

4. Preview

Brauzerda tekshiring: rasm bosilganda yangi sahifa ochiladi.

E-kutubxona wireframe navigatsiyasi

Header • Qidiruv Kitob 1 Kitob 2 Kitob 3 Katta muqova O'qishni boshlash Tavsif | Fikrlar

Brauzerda ko'rinishi (Preview)

http://127.0.0.1:32767/home_books.html

Online E-Kutubxona

Dasturchilik va sun'iy intellekt kitoblari kolleksiyasi

[Tanlangan kitob]

Clickable

Kitob 2

Kitob 3

Prototiplar darajasi

Low-fidelity (Past aniqlik)

Monoxrom (kulrang), oddiy shakllar, faqat navigatsiya va mantiqni tekshirish uchun xizmat qiladi.

High-fidelity (Yuqori aniqlik)

Ranglar, tipografiya, rasmlar va animatsiyalar bilan yakuniy mahsulotga 100% o'xshash model.

Tezkor viktorina

Bitta blok ichida bir nechta tablarni yangi sahifa ochmasdan ko'rsatish uchun qaysi vosita ishlatiladi?

To'g'ri javob: Dynamic Panel bir nechta State'larni (holatlarni) o'zida saqlay oladi.

Bugungi amaliy vazifa 25 daqiqa

Oson2 ta sahifa yarating: Home_books va Book_details hamda ular o'rtasida o'tishni ulang.
O'rtaBook_details sahifasida 2 ta holatli (Mundarija va Fikrlar) Dinamik panel yarating.
QiyinOrqaga qaytuvchi tugmaga Open Link in Parent Window amali orqali bosh sahifaga qaytishni biriktiring.

Prototip yaratishdagi 3 ta katta xato

Ranglarga chalg'ish

Wireframe bosqichida rang va bezakka berilib, foydalanuvchi mantiqini unutish.

Nomlamaslik

Yuzlab elementlarni «Rectangle 45», «Panel 12» deb qoldirib, adashib ketish.

Orqaga yo'l yo'qligi

Foydalanuvchi yangi ekranga o'tgach, orqaga qaytish tugmasini loyihalashni unutish.

Dars xulosasi

Interaksiyalar

Trigger → Action → Target mantiqi tizimni jonlantiradi.

Dynamic Panels

Tablar va modal oynalar uchun ixcham va qudratli konteyner.

Real sinov

Preview yordamida loyiha qulayligini kod yozishdan oldin baholash.

Keyingi dars: Formalar va Kiritish maydonlari

Text Field, Dropdown, Checkbox va xatolik holatlari (Validation states)

3-hafta · 8-dars