AXV

Wireframe loyihasini yakunlash va Figmaga eksport

Izohli karkaslar (Annotations), eksport formatlari va UI dizaynga o'tish

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

Bugungi dars rejasi

01. Izohli simli ramkalar

Annotatsiyalar: dasturchilar va jamoa uchun harakat qoidalarini yozish.

02. Eksport formatlari

PNG, SVG va PDF formatlarini to'g'ri tanlash va ulashish.

03. Figmaga ko'prik

Wireframeni Figma ish maydoniga referens qatlam qilib yuklash.

01

Izohli simli ramkalar (Annotations)

Dizayn va dasturlash o'rtasidagi tushunmovchiliklarga barham berish

Izohli wireframe sxemasi

Header • Qidiruv 1 Kitob kartasi 2 Kategoriya paneli 3 Texnik annotatsiyalar: 1. Qidiruv: Min. 3 ta harfda takliflar chiqadi. 2. Kitob kartasi: Bosilganda Book_details ochiladi. 3. Filtr: Janrlar bazadan dinamik yuklanadi.

Annotatsiya mazmuni

Mantiqiy qoidalar

Tugma bosilganda tizim qanday shartlarni tekshirishi kerakligi (`if / else`).

Ma'lumotlar manbasi

Ushbu blokdagi matn yoki ro'yxat qaysi ma'lumotlar bazasidan olinishi.

Cheklovlar

Maydonlarga kiritiladigan maksimal belgilar soni yoki ruxsat etilgan fayl turlari.

Oddiy va Izohli wireframe farqi

Faqat rasmli karkas

Dasturchi har bir tugma nima qilishini taxmin qilishga majbur bo'ladi. Xatolar va qayta qilishlar ko'payadi.

Annotatsiyalangan karkas

Har bir blok yonida aniq xatti-harakat, shartlar va qoidalar ko'rsatilgan. Dasturchi hech qanday savolsiz kod yozishga kirishadi.

02

Eksport formatlari

PNG, SVG va PDF — qaysi birini qachon ishlatish lozim?

Formatlar va ularning vazifalari

PNG Rastrli rasm • Tezkor ko'rish Taqdimotlar va chatlar SVG Vektorli grafika • Cheksiz masshtab Figma va tahrirlash PDF Texnik hujjat • Ko'p sahifali loyiha Buyurtmachi imzosi

Eksport oldidan tekshirish (Checklist)

Hamma sahifalar joyidami?

Bosh sahifa, katalog, tafsilotlar va ro'yxatdan o'tish oynalari to'liqligini tekshiring.

Orqaga yo'l bormi?

Har bir ekrandan oldingi holatga qaytish imkoni loyihalanganiga ishonch hosil qiling.

Qatlamlar tozalanganmi?

Keraksiz, ko'rinmas yoki tasodifiy chizilgan bloklar o'chirilganini nazorat qiling.

03

Figmaga ko'chirish va Referens qatlam

Wireframeni UI dizaynning mustahkam poydevoriga aylantirish

Figmaga o'tkazishning 4 qadami

1. Eksport

Axure yoki Balsamiq'dan PNG/SVG qilib oling.

2. Frame yaratish

Figmada Desktop 1440 o'lchamli Frame oching.

3. Qulflash

Rasmni joylab, Opacity'ni 40% qiling va qulflang.

4. UI chizish

Karkas ustidan rangli tugma va shriftlarni quring.

Figmada qatlamlar (Layers) ierarxiyasi

Qatlam 1: Wireframe Reference (Opacity 40%, LOCKED) Skelet karkas, proporsiyalar va elementlar koordinatasi Qatlam 2: Yakuniy UI Dizayn (Ranglar, Shriftlar, Komponentlar) Auto Layout, tugmalar, rasmlar va haqiqiy kontent

E-Kutubxona: Yakuniy karkas komplekti

https://e-kutubxona.uz (Loyiha xaritasi)
01

Home_books

Bosh sahifa

02

Catalog

Filtr & Qidiruv

03

Book_details

Tafsilotlar

04

Register

A'zo bo'lish

Dasturchilarga topshirish (Hand-off) odobi

Tartibli sahifalar

Sahifalar va bloklar to'g'ri nomlangan, keraksiz bo'sh qatlamlar o'chirilgan.

Havolalar va prototip

Chertiladigan prototip havolasi va ko'rish ruxsati (View access) to'g'ri sozlangan.

Qayta aloqa

Dasturchilarning savollariga tayyor bo'lish va annotatsiyalarni to'ldirib borish.

Topshirishdagi 3 ta katta xato

Faqat rasm berish

Interfaol prototip yoki havolasiz faqat skrinshot tashlab ketish.

Izohsiz qoldirish

Tugmalar bosilganda nima bo'lishini og'zaki aytib, yozib qoldirmaslik.

Versiyalar adashuvi

Qaysi fayl eng oxirgi va tasdiqlangan ekanligini belgilamaslik.

Tezkor viktorina

Wireframeni Figmada UI dizayn chizish uchun tagiga qo'yganda nega uni qulflash (Lock) kerak?

To'g'ri: Qulflangan qatlam ustida bemalol ishlash mumkin, u joyidan qimirlamaydi.

Bugungi amaliy vazifa 25 daqiqa

Oson«E-kutubxona» karkasidagi 3 ta asosiy blok ustiga raqamli markerlar qo'ying va izoh yozing.
O'rtaLoyiha sahifasini PNG formatida kompyuterga eksport qiling.
QiyinFigmaga import qilib, Opacity 40% qilib qulflang va ustidan bitta kitob kartasining rangli UI eskizini chizing.

I-bob: O'rganganlarimiz

1-hafta

UX & UI

Tadqiqot, persona, intervyu

2-hafta

Karkas

User Flow, Balsamiq, Low-fi

3-hafta

Prototip

Axure, Interactions, Formalar

Natija

Portfolio

Tayyor E-kutubxona wireframi

Dars xulosasi

Annotatsiyalar

Dasturchilar uchun aniq texnik spetsifikatsiya yaratish.

Eksport

PNG va SVG formatlari orqali loyihani jamoaga ulashish.

UI ga o'tish

Karkas ustida ranglar va shriftlar bilan ishlashga to'liq tayyormiz.

Keyingi bob: UI elementlari — Rang, Shrift va Kompozitsiya

Rang nazariyasi, kontrast, tipografiya va vizual ierarxiya qonunlari

4-hafta · 10-dars