AXV

Wireframe va Balsamiq

Interfeysning skeletini 10 daqiqada chizishni o'rganamiz

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

Bugun nimani o'rganamiz?

Wireframe nima?

Ekran skeleti, Low-fi va High-fi

Balsamiq

Qo'lda chizilgandek maketlar

Amaliyot

"Mobile_Book" bosh ekrani

01

Wireframe nima?

Interfeysning skeleti va uning aniqlik darajalari

Uy qurishdan oldin nima qilinadi?

Avval parda rangi emas, poydevor va xonalar o'rni chiziladi: chizma (cherteoj).
  1. Xonalar o'lchami va eshik-romlar o'rni belgilanadi
  2. Keyin devor va jihozlar tanlanadi
  3. Wireframe: dasturning shu chizmasi

Wireframe: simli karkas

Struktura

Elementlar qayerda turishini ko'rsatadi

Ierarxiya

Qaysi ma'lumot muhimroq, qaysi ikkinchi darajali

Pastga ↓ qo'shimcha

Qo'shimcha: matn nima bo'ladi?

  • Uzun matn o'rniga Lorem Ipsum yoki qalin chiziqlar
  • Tugma yozuvlari esa aniq yoziladi: "Sotib olish", "Ro'yxatdan o'tish"
  • Foydalanuvchi tugma nima qilishini tushunishi kerak

Dizayn bosqichlari zanjiri

Eskizqog'ozda Wireframeskelet Mockuprangli Prototipbosiladi Bugun shu yerdamiz

Wireframe ichida nima bor?

LogoMenyu Sotib olish Pastki qism Sarlavha Rasm o'rni Pastki qism Matn Tugma

Qismning ustiga sichqoncha olib boring yoki bosing.

Low-fi va High-fi

Low-fidelity

  • Oq-qora bloklar, qog'ozdagi chizma
  • Rasm o'rnida "X"
  • G'oyani 5 daqiqada sinash
VS

High-fidelity

  • Haqiqiy rang, shrift va foto
  • Figma yoki Sketch'da yaratiladi
  • Tayyor dasturdan deyarli farq qilmaydi

Nega boshida ranglardan qochamiz?

Mijoz e'tibori chalg'iydi

"Tugmaning qizil rangi yoqmadi", "Rasm chiroyli emas": ikkinchi darajali gaplar.

Ko'k
To'q sariq
Feruza

Gap tuzilma haqida ketadi

Qulaylik va mantiqiy joylashuv muhokama qilinadi.

Qora
Kulrang
Oq

Rasm o'rni: Image Placeholder

Rasm = X Matn = chiziqlar Sotib olishTugma = aniq yozuv

UI elementlari: bosing

Container

bosing

Ekran ramkasi: Browser yoki Smartphone.

Button

bosing

Tugma: foydalanuvchi bosadigan harakat.

TextInput

bosing

Matn kiritiladigan maydon.

Image

bosing

Ichida "X" bo'lgan to'rtburchak: rasm o'rni.

02

Balsamiq dasturi

Qalamda chizilgandek tezkor maketlar

Balsamiq falsafasi

0
butun ilova maketi
0
g'oyani sinab ko'rish
0
pikselga vaqt sarflanmaydi
Elementlar ataylab daftarga qalamda chizilgandek ko'rinadi: diqqat kontentda.

Balsamiq ish muhiti

UI Library: Containers, Forms, Text, Media Canvasish maydoni PropertyInspector Quick Add

Qismlarni bosing: har birining vazifasi chiqadi.

Quick Add: yozing va tushiring

Bo'sh ekran

Klaviaturadan yozing

Button

Quick Add: yozing va tushiring

Bosh sahifa

Button

Enter: tugma ekranda

Sichqonchasiz, bir soniyada.

Birinchi wireframe: qadamlar

1. Ramka qo'yamiz

Smartphone konteynerini ish maydoniga joylaymiz.

2. Bloklarni joylaymiz

Heading, Input, Image va Button elementlarini qo'shamiz.

3. Eksport qilamiz

Natijani PNG yoki PDF formatida saqlaymiz.

03

Amaliyot: Mobile_Book

Kitob ilovasi bosh ekrani wireframe'i

"Mobile_Book" bosh ekrani

Mobile_Book Header + profil Kitob qidirish Qidiruv paneli Ommabop kitoblar Kvant fiz.O'tkan kunlar Kitob muqovalari AsosiyQidiruvKutubxona Pastki navigatsiya

Kitob tafsilotlari ekrani

< Orqaga

X Muqova

Kitob nomi
Muallif

Betlar · Hajmi · Tili

Mutolaa qilish
  • Orqaga qaytish tugmasi
  • Katta kitob rasmi (placeholder)
  • Nomi va muallifi
  • 3 ta statistik blok
  • Katta asosiy tugma

Pastga ↓ maslahat

Maslahat: asosiy harakat pastda

Asosiy tugma ekranning eng quyisida, to'liq eni bo'ylab: bosish oson.
Bosh ekranda pastki navigatsiya: Asosiy, Qidiruv, Kutubxona.

Mini-test

Wireframe'da rasm o'rni qanday belgilanadi?

To'g'ri: Image placeholder, ichida X bo'lgan to'rtburchak.

Odatiy xatolar

Boshidanoq rang va chiroyli rasm qo'yish.
Piksel ketidan quvib, chiziqlarni tekislashga vaqt sarflash.
Tugmaga umumiy yozuv: "Tugma" o'rniga "Sotib olish".

Amaliy topshiriq 20 daqiqa

OsonSmartphone ramkasi, sarlavha, qidiruv va 2 ta kitob muqovasi
O'rtaPastki navigatsiya paneli va kitob tafsilotlari ekrani
QiyinNatijani PNG/PDF qilib eksport qiling

Tezkor nazorat 5 daqiqa

  1. Wireframe nima va binodagi o'xshashi?
  2. Low-fi va High-fi farqi nimada?
  3. Nega boshida ranglar ishlatilmaydi?
  4. Balsamiqning asosiy farqi nima?
  5. Rasm o'rni qanday belgilanadi?

Xulosa

Bugun o'rgandik

Wireframe, Low-fi va High-fi, Balsamiq elementlari va Quick Add

Keyingi dars (6)

Axure RP: murakkab komponentlar va navigatsiya