Tekshirdi: Toshkent-2021 Mavzu

MUHAMMAD AL-XORAZMIY NOMIDAGI TOSHKENT AXBOROT TEXNOLOGIYALARI UNIVERSITETI

Inson va kompyuter o’zaro ta’siri fanidan

Mustaqil ish

Bajardi: 217-19 guruh talabasi

Kenjayev Abbos

Asqarov Diyorbek

Tekshirdi: ________________

Toshkent-2021


Mavzu: Interfeys dizayn xatoliklari va ularga ishlov berish. Dizaynning vizual komponentlarini tasvirlar usullari.

Reja :

1. 
   Interfeys dizayni
   
2. 
   Interfeys dizayn xatoliklari va ularga ishlov berish.
   
3. 
   Dizaynning vizual komponentlarini tasvirlar usullari.
   

Interfeys (ing . pIyeggase) — texnik va programmalash vositalari majmui; hisoblash, boshqarish yoki oʻlchash tizimlari (mas, EHM ning opera-tiv va tashqi xotira qurilmasi)dagi turli funksional qurilmalarning oʻzaro taʼsirini taʼminlaydi. I. uzatilayotgan axboroglarni kodlash va sin-xronligiga nisbatan belgilangan qoida hamda kelishuvga muvofiq tayyor modullardan sistemani, qurilmalarning mexanik va elektr birikmalarini sig-nad koʻrinishida (axborotlar va boshqa shaklida) toʻplashga imkon beradi.Kompyuter ishlashi uchun apparatli (Hardware) ta’minotdan tashqari dasturiy (Software) ta’minot ham muhim ahamiyatga egadir. Kompyuter tizimini tashkil etuvchi bu ikki vositaning o‘zaro aloqasi interfeys deyiladi. Interfeys bir necha turga bo‘linadi, ya’ni: apparatli interfeys; dasturiy interfeys; apparatli-dasturiy interfeys. Apparatli interfeysni kompyuter qurilmalarini ishlab chiqaruvchilar ta’minlaydi. Dasturiy ta’minot bilan apparatli ta’minot o‘rtasidagi mutanosiblikni operatsion sistema boshqaradi. Kompyuterli tizim samarali ishlashi uchun apparatli va dasturiy ta’minotdan tashqari foydalanuvchi qatnashadi. kompyuterda ishlashi jarayonida uning apparatli ta’minoti bilan ham, dasturiy ta’minoti bilan ham aloqada bo‘ladi. Insonning dastur bilan va dasturning inson bilan muloqatga kirishish usuli foydalanuvchi interfeysi deyiladi. Dasturlar xilma-xil bo‘lgani uchun ularning interfeysi ham turlicha bo‘ladi. Foydalanuvchi interfeysini xususiyatlariga ko‘ra bir nechta turga ajratish mumkin. Dasturning ishlash muhitiga qarab, dastur nografik yoki grafik interfeysga ega bo‘ladi. Dizayn asoslari har qanday vizual yetkazuvchning asosidir, tasviriy san’atdan tortib to zamonaviy veb-dizayngacha. Hattoki aksariyat kompozitsiyalarni tashkil etuvchi shrift kabi kichik detallar ham. Ushbu misollarning umumiy jihati nimada? Chunki bular dizaynning eng asosiy elementlaridir, jumladan: Chiziq, forma, shakl, textura va balans. Tarqoq holda hech qanday ma’noga ega bo’lmasligimi mumkin. Ammo bular birgalikda biz ko’radigan va yaratadigan har bir narsalarning qismidir.

Dizayn asoslari agar siz rassom bo’lmasangiz sizni biroz cho’chitishi mumkin. Baxtimizga ko’plab uslublar borki sizga 0 dan har xil elementlar bilan ishlash va sodda vizuallarni yaratishni o’rgatadi.

UI va UX dizayn web ilovalarni tayyorlashda eng ko'p qo'llaniladigan va munosib atamalardan biri hisoblanadi. Ular odatda bir - birlariga bog’liq bo’ladi. UI, UX dizayni bilan birgalikda joylashtiriladi. Hatto bu atamalar har doim birga ishlatilaverganidan xuddi bir narsadek tuyuladi.

UI Dizayn nima? UI dizayndagi “UI” atamasi “foydalanuvchi interfeysi” (eng. User Interface)ni bildiradi. Foydalanuvchi interfeysi esa dasturning grafik ko'rinishidir. Foydalanuvchilar bosgan tugmachalar, o'qiladigan matnlar, tasvirlar, matn kiritish joylari va foydalanuvchi bilan o'zaro aloqada bo’lgan barcha narsalar UI dizayn hisoblanadi. Bunga ekran rejimi, interfeys animatsiyasi va har bir microinteraction (mikro-shofqin: foydalanuvchining va dizaynning o'zaro ta’sir etuvchi kichik daqiqalari) kiradi. Har qanday ko'rinadigan element, shovqin yoki animatsiya hamma uchun mo'ljallangan ishlar bilan UI dizaynerlari shug’ullanadi. Ular ilova qanday ko'rinishi kerakligini belgilab beradilar. Rang sxemalarini va tugma shakllarini, matnlar uchun ishlatiladigan satrlar va yozuvlarning kengligi tanlashi hullas UI dizaynerlari dasturning foydalanuvchi interfeysining barcha ko’rinishini tayyorlaydi. UI dizaynerlar ham grafik dizayner hisoblanib, estetika bilan shug’ullanishadi. Dastur interfeysini ilovaning maqsadiga mos kelish uchun ko'rinish tayyorlashadi. Ogohlantiruvchi va mavzularga mos kelishiga ishonch hosil qilishlari kerak bo'ladi. Va har bir elementning estetik jihatdan birlashtirilganligini va maqsadga muvofiqligini ta’minlashi kerak bo'ladi.

UX Dizayn nima? UX design UI dizaynerlarining ishlab chiqqan UI elementlari bilan qanday aloqa o'rnatish, oson yoki qiyin ekanligi bilan shug’ullanadi. UX dizaynerlar dasturning foydalanuvchi uchun qulay bo'lgan interfeys bilan shug’ullanadi. UI dizaynerlari foydalanuvchi interfeysi qanday ko’rinishini belgilash topshirig’i topshirilgan bo'lsa-da, UX dizaynerlari foydalanuvchi interfeysi qanday ishlashini aniqlash uchun mas’uldirlar. Shuningdek, interfeysning funktsional tuzilishini belgilaydi. Web site yoki ilovaning qanday tashkil qilinganligi va barcha qismlarning bir-biriga mutanosibligini ta’minlash UX dizaynerlarning zimmasida bo'ladi. Qisqa qilib aytganda, interfeysning qanday ishlashini tasavvur qilishadi. Agar u yaxshi ishlasa va muammosiz bo'lsa, foydalanuvchi yaxshi ko'nikmaga ega bo’ladi. Biroq, boshqarish murakkab yoki g’ayrioddiy bo'lsa, u holda, UX dizaynerlarining ishi ancha og'irlashadi.

2. Interfeys dizayn xatoliklari va ularga ishlov berish

Interfeys deganda informatikada dasturdagi turli komponentlar va foydalanuvchi o'rtasidagi o'zaro aloqani ta'minlovchi vositalar va qoidalar yig'indisi tushuniladi, Dreamweaver paketi taklif etadigan muomala usuli zamonaviy foydalanuvchi uchun odatiy bo'lib qolgan grafik oynali interfeys prinsiplariga asoslanadi. Dreamweaver paketi o'sha sinfdagi boshqa dastllr1ar bilan taqqoslaganda ancha an iq, moslashuvchan va shu bilan bir paytda kuchli interfeys hisoblanadi. Palitralar, ko'p sonli klaviatura kombinatsiyalari va menyu qatori uning asosiy vositalari hisoblanadi. Barcha operatsiyalar to'xtatilgach ekranda qoladigan oynalarni palitralari (Palette) yoki panellar (panel) deb atash qabul qilingan. Ekranning maxsus ajratilgan pozitsiyalarida emas, balki ixtiyoriy joyida joylasha oladigan oynalar ko'chib yuruvchi palitralar (floating plette) deb ataladi. Dreamweaver dasturi muloqot oynalarining ko'pchiligi ko'chib yuruvchi palitralar ko'rinishida ishlaydi. Palitralar va pane liar orasidagi kichik farqlar dastumi tavsiflash uchun sezilarli ahamiyatga ega emas. Shuning uchun kelgusida bu atamalarni sinonimlar sifatida qo'lIaymiz. Deyarli barcha palitralar blr1ashish xususiyatiga ega. Bu har xii palitralarni bitta muloqot oynasida joylashtirish mumkinligini bildiradi. Birlashtirish amali turli mavzu yoki buyruqlarga tegishli boshqaruv vositalariga ega bo'lgan ko' p funksiyali terma palitralarni olish imkoniyatini beradi. Birlashish xllsusiyatiga ega bo'lgan palitralarni . -. (ular dasturda ko'pchilikni tashkil etadi) modulli (dockable) palitralar deb ataymiz. Bir nechta alohida modullardan iborat murakkab palitraLar terma (tabbed) palitralar deb ataLadi.. Boshqaruvning eng talab qilinuvchi vositasi so'zsiz, Properties inspector (xossalar nazoratchisi) palitrasi hisoblanadi. Uning yordamida HTML sahifalarida obyektlarni formatlash va HT\-lL sahifasidagi obyektlarni tahrirlash bo'yicha ko'plab amallar bajariladi. Behavieros (rejimlar) palitrasi - bu modul ko'chib yuruvcbi palitraga misol bo'ladi. Dreamweaver dasturi turli loyiha masalalarini hal qilishga mo' ljallangan obyektlarga ega. Rasmda ikkita oddiy 1110dulli Layers va History palitralardan iborat bo' lgan terma palitraga misol keltirilgan. Objekts palitrasi tashqi obyektLar: rasmlar, jadvallar, qatlamlar, freymlar va boshqa obyektlarni qo'y ish uchun mo'ljallangan. Rasmda ko'rsatilgan bosbqa barcha boshqaruv elementlari hujjat oynasining ajralmas tashkil etuvcbi qismi hisoblanadi. Texnik tizimlarning ishonchli ishlashi, dasturiy mahsulotlarni interfeyslarining qu\ayligi asosida to'g'ri tashki\ qilingan. Dreamweaver paketi formatlash va tahrirlashning deyarU barcha asosiy buyruqlari uchun amalga oshirishning bir necha xiI usullarini taklif etadi. Keng formatli ekranJarning egalari barcha buyruqlarni palitralar va panellar yordamida bajarishlari mumkin. Bundan mahrum foydalanuvchilarga esa dastur menyu qatori buyruq\arini va klaviatllra tugmalari kombinatsiyalaridan foydalanishadi. Dreamweaver dasturi «ochiq arxitektura» prinsiplariga asoslangan. Bu amaliy dasturni interfeysi (Application Programming Interface, API) to'liq ochiq ekanligini bildiradi. Uning yordamida tashqi dasturchilar hamda dasturiy ta'minot hilan shug' ullanuvchi firmalar, dastur va uning interfeysiga radikal funksional o'zgartirishlar kiritishi: yangi uskuna qo'shish, menyu palitrasi yoki bo'limini yaratish, yangi obyekt yoki multimedia roligini dasturlashtirish va hokazolar. Dreamweaver tizimi tarkibiga multimedia roliklarini qo'yishga mo'ljallangan qo'shimcha dastur kiradL shuning uchun Flash - texnologiyaning interfaol imkoniyatlarini tahrirlagichdan chiqmay tu rib ko'rib chiqish mumkin. Ta'lim tizimida esa, axborot texnologiyalarini qo'llab, ta'limtarbiya berish va unga tegishli barcha jarayonlarni axborotlashtirish bilan ta'lim samaradorligini oshirishga olib kelinadi. Bunda - axborot texnologiyalaridan dars jarayonidagi kO'rgazmalilik imkoniyatlari oshib o'quvchi.larning mazmunni tushunish darajasi ortadi. O'quvchi dars vaqtida biror murakkab jarayonni ko'z oldiga keltirishi qiyin bO'lib, uni 4 laS8vvur qila olmaydi. Ana shunday paytda kompyuterning maxsus dasturlari yordamida shu murakkab jarayonni aynan o'zidek qilib tasvirlab berish mum kin. Bunda o'quvchilarda ushbu murakkab jarayon haqidagi tasawurni bosil qiladi. Bu kabi dasturlar kO'pincha inson ko'zi bilan ko'ra olmaydigan (masalan. mashina dvigateli ichidagi harakatlar. odam qon aylanis1J tizimi va boshqalar) murakkab jar~'onlarni tasvirlab berish uchun xizmat qiladi. Bunday dasturlarga misol qilib Flash MX, 3D MAX kabi dasturlarni aytishimiz mumkin. l'shbu dasturlar yordamida nafaqat murakkab jarayoniaming tasvirlarin~ balki barcha turdagi elektron darsliklarni yaratish imkoniyatlari ham mavjud. Ayniqsa animatsiyali ma'lumotlarni kekirisb va bezasbda keng qo'Hash mumkin. Usbbu qo'lIanmada shuningdek Flash MX dasturini o'rganishga bag"ishlangan ma'lumotlar ham berilgan. Qo'lIanmada dastur imkoniyatlari uning interfeysi., 8asb-4ilmlar. ftasb-saytJar yaratish \"8 ulardan turli jarayonlarda foydalanish to'g"risidagi ma'lumotlar berilgan. Bundan tashqari web dizaynning eng muhim ajralmas qismlaridan biri bo'lgan kompyuter gra1ikasi haqida ham ma'lumot beriladi. Bizga ma'lumki -web unlbarrirlar saytning asosini yaratishda ishlatilsa uni psmlar. grafiklar \'a turli .. illustratsiyalar bilan ~itish ucbun esa grafik muharrirtariga murojal qilamiz. Bunda Adobe PbotoShop, Coreldraw kabi grafik mubarrirlarning o'rni tengsiz. Foydalanuvchi interfeyslarini loyihalash - bu dizayn estetikasi va vizual ierarxiyasining belgilangan qoidalariga rioya qilishdir. Ushbu qoidalarga e'tibor bering va siz ishni bajarishga yordam beradigan oddiy, qulay interfeyslarni o'ylab topasiz. Biroq, ba'zida UI dizaynerlari ijodkorlikka intilib, haddan tashqari ko'p tajriba o'tkazishga harakat qilishadi. Natijada paydo bo'lgan dizaynlar UI dizaynidagi yomon xatolar bilan to'ldirilishi va mahsulotning ishlashiga salbiy ta'sir ko'rsatishi mumkin.

Yaxshi UI dizayni uchun xatolarga yo’l qo’ymaslik uchun eng yaxshi amaliyotlar :

Umumiy UI elementlari orqali izchillikni ta'minlash

Bo'sh joydan oqilona foydalanish

1ıpogratıya orqali ierarxiya va ravshanlıwı etkazish

Tizim holatini aniq xabar qilish

Standartlarni oqilona joylashtirish.

Vizual elementlar san'at va dizaynning qurilish bloklari hisoblanadi. Hammasi bo'lib 7 ta vizual element mavjud bo'lib, ular chiziq, shakl, rang, qiymat, shakl, tekstura va bo'shliqdir. Ushbu maqolada biz har bir elementni alohida ko'rib chiqamiz, shuningdek ularni dizayningizda qanday ishlatishni ko'rib chiqamiz. Nimani loyihalashtirmasligingizdan qat'iy nazar, siz ushbu vizual elementlarning bir nechtasi bo'lmasa, kamida bittasidan foydalanishingiz mumkin. Biz ushbu vizual elementlarning har biri haqida, shuningdek, ulardan UI va veb-dizaynda qanday foydalanishingiz mumkinligi haqidagi misollarni batafsil ko'rib chiqamiz.

1. 
   Chiziq
   

Piktogrammalardan tortib rasmlar, diagrammalar va boshqalargacha, chiziqlar veb­ dizaynning muhim elementidir. Chiziqlar ingichka, qalin, chiziqli, qora yoki rangli bo'lishi mumkin. Chiziq bilan erishishingiz mumkin bo'lganjuda ko'p o'zgaruvchanlik mavjud, keling, bir nechta misollarni ko'rib chiqaylik.
Ushbu ilova dizayni maketiga kiritilgan chizilgan rasm yoki oddiy illyustratsiyalar sodda, ammo juda ifodali. Turli teksturali qo'lda chizilgan chiziqdan foydalangan holda, ushbu vizual element dizaynga o'zgacha jo'shqinlik beradi. Agar chiziq tekis o'lchamli va hech qanday teksturaga ega bo'lmagan monoline bo'lsa, u dizaynga butunlay boshqacha kayfiyat bag'ishlaydi.


Vizual element sifatida chiziqdan foydalanishga misol ( manba)

Oldingi misoldan farqli o'laroq, ushbu ilova dizayni maketida chiziqlar qanday ishlatilishiga e'tibor bering. Chiziqlar bir tekis qalinlikda, ba'zilari qora, boshqalari esa pushti rangning engil soyasida va tasvirlangan sahnaga harakat qo'shish uchun ishlatiladi.

Vizual element sifatida chiziqdan foydalanishga misol ( manba)

Veb-dizayndagi vizual element sifatida chiziqlardan foydalanishning yana bir keng tarqalgan va muhim usuli piktogramma uchundir. Belgilar foydalanuvchi tajribasini boshqarishda muhim ahamiyatga ega. Bitta belgi bilan siz so'z va tilni almashtira olasiz va universal uchrashuv uchun amalni bitta oddiy belgiga soddalashtirasiz. Bunga misol uy tugmasi. Biz foydalanayotgan ilovaning biror joyida uyga o'xshash belgini ko'rganimizda, ushbu belgini bosish bizni uy yoki asboblar paneli tajribasiga qaytarishini bilamiz.

Vizual element sifatida chiziqdan foydalanishga misol ( manba)

Shakl

Chiziqdan foydalanganda va uni bir uchidan ikkinchisiga ulashda shakl hosil bo'ladi. Dizayningizga kontekst qo'shish uchun chiziq doira, kvadrat, uchburchak yoki murakkabroq shakllarga aylantirilishi mumkin. Siz yanada murakkab rasmlar va piktogrammalarni yaratish uchun shakllarni chiziqlar bilan birlashtira olasiz. Ushbu misolda, burchaklari yumaloq bo'lgan kvadrat qo'shish piktogramma dizayniga qanday qo'shilishiga e'tibor bering. Bu oddiy qo'shimcha, lekin u dizaynni o'zgartiradi, endi ular veb-saytdagi tugmalar yoki sarlavha bo'lishi mumkin.

Shaklni vizual element sifatida ishlatishga misol ( manba)

Ilovani ishga tushirish tajribasi uchun ushbu misolda to'ldirilgan shakllarning qo'shilishi illyustratsiyalar uchun kontrast va chuqurlikni qanday qo'shishiga e'tibor bering. Agar u faqat chizilgan rasm bilan bajarilgan bo'lsa, dizayn hali ham muvaffaqiyatli bo'lar edi, lekin qora bilan birga sariq va ko'k rang qo'shilishi bilan bizning ko'zimiz dizaynning bir qismidan boshqasiga tortiladi. Shakllar rang, --naqsh=[]ilan to'ldirilishi yoki oddiygina kontur bilan o'ralgan bo'lish

Xulosa:

UI va UX: Uyg'unlikda ishlaydigan ikkita turli xil yo’nalish. UI dizayni va UX dizayni juda xilma-xil mahorat to'plamlarini o'z ichiga oladi, ammo ular bir-birining muvaffaqiyati uchun ajrals hisoblanadi. UI foydalanuvchi interfeysi, ya'ni "foydalanuvchi interfeysi" degan ma'noni anglatadi. Ya'ni, UI dizayneri mahsulotning foydalanuvchiga qanday taqdim etilishi uchun birinchi navbatda javobgardir. U tugmalarni, piktogramma ishlab chiqadi, shriftlarni tanlaydi, maketini tayyorlaydi. UX foydalanuvchi tajribasi degan ma'noni anglatadi. Shunday qilib UX dizayner sayt dizayni, dasturlari va boshqa har qanday narsani - foydalanuvchi qulay bo'lishi va nimani tushunishi uchun va u ozgina kuch sarflab, kerakli narsani saytdan olishi uchun loyihalashtiradi. Ko'pincha, har ikkala ishni ham bitta shaxs-orkestr ijro etadi: UI / UX dizayner. Front-end developer dizaynerlarning ishini unga dinamikani kiritish orqali hayotga olib keladi: tugmalar bosila boshlaydi va rasm o'zgaradi. U ramkalar, dastlabki protsessorlar va kutubxonalar bilan to'ldirilgan dasturlash tillarini bilishi kerak