Fan: ui/ux dizayn Mustaqil ish №1 Tekshirdi: Modullayev J

MUHAMMAD AL‑XORAZMIY NOMIDAGI TOSHKENT AXBOROT TEXNOLOGIYALARI UNIVERSITETI



Fan: UI/UX dizayn
Mustaqil ish №1

Tekshirdi: Modullayev J
Bajardi: Jovliyev U va Ikromov SH
Mavzu: Mobil ilovaning foydalanuvchi interfeysini loyihalash

Laboratoriya ishi №3 Mobil ilovaning foydalanuvchi interfeysini loyihalash

Ishning maqsadi: Mobil ilovaning foydalanuvchi interfeysini loyihalash tamoyillarini o'rganish.

Nazariy material

1. Umumiy ma'lumot

Mobil ilova (Mobile app) - smartfonlar, planshetlar va boshqa mobil qurilmalarda ishlash uchun mo'ljallangan dasturiy ta'minot.
Dastlab mobil ilovalar elektron pochtani tezkor tekshirish uchun ishlatilgan, biroq ularning yuqori talabi mobil telefon o‘yinlari va GPS, aloqa, video tomosha qilish va internetni ko‘rish kabi boshqa sohalarda ham kengayishiga olib keldi.

2. Xulq-atvor namunalari

Mobil gadjetlardan foydalanish ko'plab nuanslar atrofida aylanadi, ularni e'tiborsiz qoldirib bo'lmaydi, masalan, bosh barmog'ining holati.
Shu sababli, navigatsiya tugmalari odatda ekranning pastki qismida joylashgan. Navigatsiya tugmalarining joylashuviga misol 3.1-rasmda ko'rsatilgan.

3.1-rasm. Navigatsiya tugmalarining joylashuviga misol.
O'zaro ta'sirning ikki turi taxmin qilinadi: imo-ishoralar va animatsiya.
Foydalanuvchilar turli vaziyatlarda turli imo-ishoralardan foydalanishga odatlanib qolishgan. Odatdagi imo-ishoralar 3.2-rasmda ko'rsatilgan.

3.2-rasm. Mobil ilova bilan ishlash uchun odatiy imo-ishoralar
Animatsiyaning keng tarqalgan turlari, shuningdek, ilovalar bilan oldingi tajribalar asosida bir qator umidlarni oshiradi.

3. Harakat hisobi

Anatomik omil juda muhim dizayn elementidir. Loyihalashda inson tanasining tuzilishini va mobil qurilmalardan foydalanish statistikasini ko'rib chiqing. Yuqori chap burchak muhim ma'lumotlar uchun yaxshi, ekranning pastki qismi esa navigatsiya uchun.
Shaxs uchun eng qulay imo-ishoralarning sxemalari 3.3-rasmda ko'rsatilgan.

Guruch. 3.3-rasm. Inson uchun eng qulay imo-ishoralar sxemalari
Foydalanuvchining ishlashi davomida smartfon yo'nalishini o’ziga qulay holatda o’zgartirishi 3.4-rasmda keltirilgan.

3.4-rasm. Smartfon yo’nalisi.
Foydalanuvchilar vaqtining deyarli yarmini qurilmani o‘ng qo‘li bilan ushlab, ekranni boshqarish uchun faqat bosh barmog‘idan foydalanishga sarflaydi. Smartfon bilan ishlashda qo'llarning joylashishini taqsimlash 3.5-rasmda ko'rsatilgan.

3.5-rasm. Smartfon bilan ishlashda qo'l pozitsiyalarining global taqsimlanishi
3.6-rasm diagonal o'lchamlari bo'yicha smartfonlarning global taqsimotini ko'rsatadi.

3.6-rasm. Smartfonlarning diagonal o'lchamlari bo'yicha global taqsimoti
3.6-rasmda ko'pchilik foydalanuvchilar ekran o'lchamlari 4 dyuymdan 5,5 dyuymgacha bo'lgan smartfonlardan foydalanishlari ko’rsatilgan

Laboratoriya ishi uchun topshiriq

1-laboratoriya ishida tasvirlangan mobil mijoz uchun foydalanuvchi interfeysini ishlab chiqish. Foydalanuvchi interfeysini ishlab chiqish ushbu qo'llanmaning 2-bandiga muvofiq 3-bandni hisobga olgan holda amalga oshirilishi kerak.
1. Analoglarni tahlil qilish, ularning afzalliklari va kamchiliklarini aniqlash, tahlil natijalarini hisobotda aks ettirish.
2. Foydalanuvchi stsenariylarini ishlab chiqish va ulardan ba'zilarini hisobotga kiritish.
3. Ta'riflangan foydalanuvchi stsenariylari nuqtai nazaridan ekranlar xaritasini ishlab chiqish.
4. Qoralama ekran prototipini ishlab chiqish.
5. Ilova uchun kamida ikkitadan mos uslublarni tanlang.
6. Uslublardan biriga asoslanib, 4 dyuymli va 6 dyuymli ekranlar uchun dastur dizayn konsepsiyasini ishlab chiqing.

Tekshirish uchun savollar

1. 
   Mobil ilova interfeysini loyihalashning asosiy bosqichlarini aytib bering.
   
2. 
   Android OS uchun material dizayni va iOS uchun foydalanuvchi interfeysi o'rtasidagi farq nima?
   
3. 
   Smartfonlarning qaysi diagonali uchun interfeys dizaynini e'tiborsiz qoldirish mumkin?
   
4. 
   Navigatsiya paneli odatda ekranning qayeriga joylashtiriladi?
   
5. 
   Ilova bilan ishlash uchun odatiy imo-ishoralarni ayting.
   

Foydalanilgan adabiyotlar

1. 
   Раскин, Д. Интерфейс: новые направления в проектировании компьютерных систем / Д. Раскин. – Москва : Символ-плюс, 2005. – Т. 272.
   
2. 
   Купер, А. Психбольница в руках пациентов / А. Купер. – Москва : Символ-плюс, 2009.
   
3. 
   Купер, А. Алан Купер об интерфейсе. Основы проектирования взаимодействия / А. Купер, Р. Рейман, Д. Кронин. – Санкт-Петербург ; Москва : Символ-Плюс, 2009.
   
4. 
   Электронное руководство по material design. – URL: https:// material.io (дата обращения: 10.01.2019).
   
5. 
   Apple Human Interface Guidelines. – URL: https://developer.apple.com (дата обращения: 10.01.2019). 6. Как спроектировать интерфейс мобильного приложения. – URL:
   

https://geekbrains.ru (дата обращения: 10.01.2019).
7. User Interface Development Flow. 8-step Process. – URL: https:// medium.com/swlh/user-interface-development-flow-537f82f00247 (дата обращения: 10.01.2019).