AXV

Prototip va uning turlari

Low-fidelity va High-fidelity: g'oyani qurishdan oldin sinab ko'ramiz

10-sinfAdvanced UX/UI4-hafta · 10-dars

Bugun nimani o'rganamiz?

Prototip nima

Ta'rif, 5 maqsad va prototiplashning 4 bosqichi

Prototip turlari

Statik va dinamik; qora-oq va rangli (low va high fidelity)

Sahifa bloklari

Navigatsiya, axborot, xizmat, dizayner va reklama bloklari

01

Prototip nima va nega kerak?

Qurishdan oldin sinab ko'rish

Prototip: soddalashtirilgan namuna

Prototip asosiy funksiyalar va foydalanuvchi bilan o'zaro ta'sir qanday bo'lishini vaqt va pul sarflamasdan oldin ko'rsatadi.

Arxitektor

Binoning maketini yaratadi

Aviatsiya muhandisi

Aerodinamik quvurda modelni sinaydi

Dizayner

Interfeys prototipini yaratadi

Nega prototip vaqt va pulni tejaydi?

Prototip arzon va tez o'zgartirish oson Sinov xatolar erta topiladi Mahsulot o'zgartirish qimmat Karton maketni o'zgartirish oson, qurilgan devorni buzish qimmat

Prototipning 5 ta maqsadi

  1. Dizayn g'oyalarini ishlab chiqish va yaxshilash
  2. Jamoa ichida umumiy tushuncha yaratish
  3. Menejer yoki mijozni g'oyalarga ishontirish
  4. Texnik imkoniyatlarni tekshirish
  5. Foydalanuvchilar bilan dizaynni sinab ko'rish
02

Prototiplashning 4 bosqichi

Jarayon va iteratsiya

4 bosqich: g'oyadan sinovgacha

1 Konseptual dizayn 2 O'zaro ta'sir dizayni 3 Ekran dizayni 4 Sinovdan o'tkazish Iteratsiya: sinovdan keyin yaxshilaymiz Bosqichni bosing yoki ustiga boring

Birinchi prototip noto'g'ri chiqsa-chi?

Hujjat: bu tabiiy. Muhim: oddiy variantni tez yaratib, sinash.

Chuqurroq ko'rish uchun pastga

Iteratsiya sikli

Oddiy variant
Sinov
Yaxshilash
03

Prototip turlari

Statik va dinamik; qora-oq va rangli

Prototip turlari xaritasi

Prototiplar Statik (rasm) Dinamik (interaktiv) Qog'oz Wireframe Grafik rasm Tugma bosilsa ekran almashadi

Statik va dinamik prototip

Statik

Rasm yoki bosma. Qog'oz prototipi: o'zgartirish oson, e'tibor mazmunga, arzon.
VS

Dinamik

Ekranlar orasida o'tish taqlid qilinadi. Murakkab o'zaro ta'sirni sinaydi, lekin xatoni tuzatish mashaqqatliroq.

Low-fidelity va High-fidelity

Past detallashgan (low-fidelity)

  • Sahifa sxemalariga asoslangan
  • Eng tez va arzon, o'zgartirish oson
  • Fokus: tuzilma, mazmun, mantiq

Yuqori detallashgan (high-fidelity)

  • Mijoz qabul qilgan vizual dizaynga asoslangan
  • Yakuniy natijaga o'xshash, ko'pincha interaktiv
  • Mijoz va ishlab chiquvchi bilan muloqotni osonlashtiradi

Wireframe: faqat tuzilma

maktab.uz

Maktab sayti

Menyu | Qidiruv

Rangli prototip: yakuniyga yaqin

maktab.uz

Maktab sayti: qabul ochiq

Bosh sahifa | Qabul | Yangiliklar | Aloqa

Rang, shrift va rasm bilan to'liq maket

Bilimingizni sinang

Qora-oq wireframe qaysi yondashuvga kiradi?

To'g'ri: sahifa sxemalariga asoslangan qora-oq prototip past detallashgan yondashuv hisoblanadi.
04

Sahifa tartibining qurilish bloklari

Navigatsiya, axborot, xizmat, dizayner, reklama

Sahifa 5 xil blokdan quriladi

Navigatsiya: logo | menyu | qidiruv Axborot (yangiliklar) Xizmat (til) Dizayner (bezak) Reklama: nom va shior Podval: havolalar | mualliflik huquqi

Navigatsiya hal qiladigan 3 muammo

1. Yo'l

Sahifaning bir nuqtasidan boshqasiga o'tish yo'li. Hamma sahifani hammasiga bog'lab bo'lmaydi: elementlar tanlanadi, havolalar ishlashi shart.

2. Elementlar orasidagi munosabat

Qaysi element muhimroq, ular bir-biridan nimasi bilan farq qiladi.

3. Joriy sahifaga munosabat

Element mazmuni va foydalanuvchi ko'rib turgan sahifa orasidagi bog'liqlik.

Navigatsiya bloklari

Asosiy sahifaga (logo) Qidiruv Gorizontal menyu Vertikal menyu Ikkilamchi navigatsiya Tanlov navigatsiyasi Avtorizatsiya Podval Breadcrumbs
Logotip odatda yuqori chapda, qidiruv yuqori o'ngda; qidiruvni yashirish tavsiya etilmaydi.

Qaysi blok?

Kartani bosing

Til tanlash

bosing

Xizmat bloki

Yangiliklar

bosing

Axborot bloki: «Bo'lim» (nomi, mazmuni, to'liq variantga havola)

Nom va shior

bosing

Reklama bloki

Amaliy topshiriq 15 daqiqa

OsonStatik yoki dinamik: qo'lda chizilgan ekranlar; tugmalar bosilganda almashadigan Figma namoyishi.
O'rtaBlok turini aniqlang: logotip havolasi, til tanlash, breadcrumbs, mualliflik huquqi.
QiyinA4 da maktab sayti bosh sahifasining qog'oz prototipi: kamida 7 blok. Sherigingiz «Qabul qoidalarini topish» vazifasini sinaydi.

Odatiy xatolar

Prototip = tayyor sayt

Prototip soddalashtirilgan namuna, tayyor mahsulot emas.

Birinchi variantni mukammal qilish

Avval oddiy variant, sinov, keyin takomillashtirish.

Wireframega rang qo'shish

Rang va rasm e'tiborni mazmundan chalg'itadi.

Qidiruvni yashirish

Chiroyli bo'lsin deb qidiruvni yashirish tavsiya etilmaydi.

Xulosa

0
maqsad
0
bosqich
0
navigatsiya muammosi

Bugun o'rgandik

Prototip, turlari, low va high fidelity, sahifa bloklari

Keyingi dars

UX flow diagrammalari va axborot arxitekturasi