Axure RP: wireframe'dan interfeys sxemasigacha

Bugun Home_books sahifasining to'liq wireframe'ini yasaymiz

9-sinfUX/UI dizayn2-hafta · 6-dars

Bugun nimani o'rganamiz?

Axure RP

Balsamiq bilan farqi

Panellar

Pages, Canvas, Widgets

Grayscale

Kulrang ierarxiya

Eksport

PNG/SVG va Figma

Takrorlash

5-dars: wireframe va Balsamiq asoslari

Tezkor takrorlash

Balsamiq'da «X» bilan chizilgan to'rtburchak nimani bildiradi?

To'g'ri: [X] rasm o'rni (placeholder). Wireframe'da haqiqiy rasm kerak emas.

Axure RP

Professional prototiplash vositasi

Balsamiq va Axure RP

Balsamiq

Qalamaki, daftardagi eskiz uslubi. Dastlabki tezkor g'oyalar uchun: 5-10 daqiqa. Faqat oddiy havolalar. O'rganish 1 kun.

Axure RP

Geometrik toza, professional karkas. To'liq va batafsil sxemalar. O'zgaruvchilar, formulalar, shartli o'tishlar.

Xususiyatlar jadvali

Xususiyat	Balsamiq	Axure RP
Asosiy uslub	Qalamaki eskiz	Geometrik, toza
Maqsad	Tezkor g'oya	Batafsil sxema
Mantiq	Oddiy havola	O'zgaruvchi, shart
Murakkablik	Juda sodda	Professional

G'oyadan dizaynga yo'l

Qutilar ustiga bosing: izoh chiqadi.

Axure RP interfeysi

Panellar, sahifalar va komponentlar

Ish maydoni: to'rtta hudud

Har hududni bosing yoki ustiga olib boring.

Panellar: qadam-baqadam

1. Pages

Barcha sahifalar daraxt ko'rinishida. Ularni tartibli nomlash shart.

2. Canvas

Markaziy hudud, pikselli setka bilan jihozlangan.

3. Widgets Library

Rectangle, Text, Droplist, Checkbox, Radio: tayyor g'ishtlar.

4. Interactions

Bosilganda qayerga o'tish, animatsiya va dinamik holatlar.

Sahifalarni nomlash

Home_books: bosh sahifa
Search_results: qidiruv natijalari
Book_details: kitob tafsiloti
Profile: foydalanuvchi profili

Pastga bosing: nega nomlash muhim? ↓

Nega tartibli nom kerak?

Topish oson

20 sahifa ichidan kerakligi darrov topiladi.

Jamoa tushunadi

Boshqa dizayner va dasturchi nomdan mazmunni biladi.

Navigatsiya

Havolalarni to'g'ri sahifaga ulash osonlashadi.

Interactions: bosilganda o'tish

Kartani tanlang

Click or Tap

Open Link

Book_details

Komponentlar

Interfeys g'ishtlari va ularning ierarxiyasi

Asosiy vidjetlar: bosing

Rectangle

bosing

Asosiy g'isht: banner, karta, sarlavha qutisi, tugma.

Text

bosing

Sarlavha (Heading) va tavsif matnlari.

Droplist, Checkbox, Radio

bosing

Formalar uchun vidjetlar: tanlash va belgilash.

Bitta Rectangle

Header

Bitta Rectangle

Header

Logo uchun to'rtburchak va 4 ta matnli menyu havolasi: hammasi Rectangle va Text'dan.

Home_books: sahifa sxemasi

Blok o'lchamlari

Header balandligi

Banner balandligi

Kartalar orasi (gap)

Pastga bosing: shu sahifa telefonda qanday ko'rinadi? ↓

Mobil ko'rinish

Home_books

Kitoblar olamiga xush kelibsiz

Batafsil

Kitob 1

Kitob 2

Kartalar bir ustunga tushadi
Menyu bitta tugmaga yig'iladi
Banner qisqaradi

Kulranglar ierarxiyasi

Rangsiz ham muhimlikni ko'rsatish

Grayscale: 4 ta ton

1-ton
sarlavha, tugma

2-ton
ikkilamchi matn

3-ton
fon bloklari

4-ton
sahifa foni

Ko'z avval eng to'q (kontrastli) elementga qaraydi: Visual Weight.

Oldin va keyin

Bir xil kulrang

Sarlavha, tugma va matn bir xil ko'rinadi. Qaysi biri muhim: aniq emas.

3-4 xil ton

Sarlavha va tugma to'q, matn o'rtacha, fon och. Muhimi bir qarashda ko'rinadi.

Eksport va Figmaga yo'l

Qutilarni bosing: har bosqich izohi chiqadi.

Eksport: 3 qadam

File, Export to Image: PNG yoki SVG
PNG'ni Figmaga sudrab tashlang (drag-and-drop)
Rasmni qulflang (Lock), ustidan UI dizayn chizing

Axure RP'da: Publish, Export Pages to Images.

Amaliyot

Wireframe yasaymiz

Amaliy topshiriq 20 daqiqa

OsonHome_books: Header (logo + 4 havola) va banner (sarlavha, Batafsil tugmasi, rasm o'rni [X])

O'rtaTavsiya etilgan kitoblar: 3 ta bir xil karta, orasi 24 px, 3-4 ta kulrang ton

QiyinKarta bosilganda Book_details sahifasiga o'tish (Click, Open Link), so'ng PNG eksport

Tezkor nazorat

Kulranglar ierarxiyasi (Grayscale) nima uchun kerak?

To'g'ri: kulrang tonlar muhimlikni rangsiz ham bir qarashda ko'rsatadi.

Xulosa

Bugun o'rgandik

Axure RP va Balsamiq farqi, panellar, nomlash, Grayscale, eksport

Uyga vazifa

Home_books wireframe'ini tugatib, PNG qilib saqlash

3-hafta

Murakkab komponentlar va interaktiv prototiplash