Programmalıq injiniringge kirisiw / 7-ameliy PI_K
.pdf
7-ámeliy sabaq. Programmalıq támiynat prototipin jaratıw (V2.0). Cifrlı prototiplew (2 den 3 ke shekem prototiplew)
Jumıstıń maqseti:
Bul ámeliy sabaqtıń maqseti - studentlerge programmalıq támiynattıń cifrlı prototiplerin jaratıw procesin úyretiw. Ámeliy jumıs barısında studentler programmalıq ónimlerdiń 2D hám 3D prototiplerin islew tájiriybesin aladı, prototiplew quralların qollanıwdı úyrenedi hám paydalanıwshı interfeysin jobalaw principleri menen tanısadı. Prototiplewdiń programmalıq támiynat ónimin jaratıw procesindegi áhmiyetin túsinedi.
Ámeliy bólim:
Programmalıq támiynat prototiplewi – bul programmalıq ónimniń funkcionallıǵın hám paydalanıwshı interfeysin vizuallaw procesi bolıp tabıladı. Prototiplew klientler, investorlar hám komanda aǵzaları arasında túsinispewshiliklerdi kemeytiwge, programmalıq támiynat koncepciyaların erkin sınap kóriwge hám bahalawǵa, sonıń menen birge jobanıń rawajlanıw ciklin tezletiwge múmkinshilik beredi.
Cifrlı prototiplewdiń eki túri kóp tarqalǵan: 2D prototiplew (interfeys dizaynı, ekran maketleri) hám 3D prototiplew (programmanıń kólemli vizualizaciyası, ayrıqsha jaǵdaylarda interfeys elementleriniń 3D modelleri). Bul ámeliy sabaqta biz 2D hám 3D prototiplewdi Figma hám Adobe XD quralların qollanıp úyrenemiz.
Etap 1: Figma quralı arqalı 2D prototiplew
1. Figma quralın ornatıw hám tanıstırıw
Figma – bul zamanagóy interfeys dizaynı hám prototiplew quralı. Figma menen islew ushın onı kompyuterge ornatıw yamasa brauzer arqalı onlayn jumıs islew múmkin.
Figma quralın ornatıw ushın figma.com saytına kirip, akkaunt jaratıwıńız kerek. Tiykarǵı versiyası biypul bolıp, oqıw maqsetlerinde tolıq jetkilikli funkciyalarǵa iye.
2. Jańa proekt jaratıw
Figmada jańa proekt jaratıw ushın "File" → "New File" menyusın basıw kerek. Bunda bos jumıs maydanı payda boladı.
3. Ekran formatın tańlaw
Jobalap atırǵan programmańız qanday platformaǵa baǵdarlanǵan ekenin anıqlań. Mısalı:
Mobil qosımsha ushın: iPhone 13 Pro (390 × 844 px)
Veb-sayt ushın: Desktop (1440 × 1024 px)
Planshet qosımshası ushın: iPad (1024 × 768 px)
Ekran formatın tańlaw ushın instrumentler panelindegi "Frame" quralın basıp, oń táreptegi panelden qálegen formattı tańlaw kerek.
4. Interfeys elementlerin jaratıw
Interfeys elementlerin jaratıw ushın Figmadaǵı standart instrumentlerdi qollanıwǵa boladı:
Tekst qosıw ushın "Text" quralın tanlań
Formalar (túymeler, kartochkalar) jaratıw ushın "Rectangle", "Ellipse" quralların qollanıń
Túrli elementlerdi jaylastırıw ushın avtomatik túrde tegislew funkciyasın qollanıń (Shift basılǵan jaǵdayda elementlerdi jıljıtıw)
Mısal retinde, mobil qosımshanıń bas betin islep kóremiz:
Ekran joqarısında navigaciya panelin jaylastıramız
Orta bólimde kontent blogın jaratamız
Tómengi bólimde tómen navigaciya panelin (Tab Bar) jaylastıramız
5. Stiller hám komponentler jaratıw
Interfeys elementlerin qayta-qayta qollanıw ushın komponentler jaratıń. Elementti tańlap, oń táreptegi panelden "Create Component" basıń. Bul komponentti barlıq ekranlarda qollanıwǵa boladı.
Stillerdi jaratıw ushın:
Reń palletasın anıqlań (brendińizge baylanıslı)
Tekst stillerin (H1, H2, paragraphs) jaratıń
Elementler arasındaǵı aralıqtardı standartlastırıń
6. Ekranlardı baylanıstırıw hám interaktivlik qosıw
Prototiptiń interaktivligin qosıw ushın:
Interaktiv elementti (mısalı, túyme) tańlań
Oń táreptegi paneldegi "Prototype" tabın basıń
"+" belgisin basıp jańa baylanıs jaratıń
Baylanıs qatardı ekinshi ekranǵa baǵıtlań
Ótiw effektin tańlań (Smart Animate, Dissolve, t.b.)
Mısalı, "Login" túymesin basqanda kirgiziw formasınan negizgi ekranǵa ótiw effektin qosamız.
7. Prototipti testlew
Prototipti testlew ushın oń joqarıdaǵı "Present" túymesin basıń. Bul rejimde prototipti real qollanıw tájiriybesin sınap kóriwge boladı. Interaktiv ekranlar arasında ótiw, formalardı toltırıw, ápiwayı animaciyalardı kóriw múmkinshilikleri bar.
Etap 2: Adobe XD arqalı 3D prototiplew elementlerin qosıw
1. Adobe XD quralın ornatıw hám tanıstırıw
Adobe XD – bul Adobe kompaniyasınıń paydalanıwshı interfeyslerin dizaynlaw hám prototiplew quralı. Figmaǵa usaǵan, biraq 3D effektler boyınsha kóbirek múmkinshiliklerge iye.
Adobe XD ornatıw ushın adobe.com saytınan Creative Cloud qosımshasın júklep, XD programmasın ornatıw kerek.
2. 2D maketti importlaw
Adobe XDǵa Figmada islengen maketti importlaw ushın:
Figmada "File" → "Export" arqalı .fig faylın saqlań
Adobe XDda "File" → "Import" arqalı .fig faylın yamasa PNG/SVG formatında eksportlanǵan elementlerdi importlań
3. 3D effektlerdi qollanıw
Adobe XD programmasında interfeys elementlerine 3D effektlerin qosıw ushın:
Elementti tańlań
"Effects" panelinen "3D Transform" funkciyasın aktivlestiriń
X, Y hám Z boyınsha burıw, masshtablaw hám jıljıtıw parametrlerin
ózgertiń
Mısalı, mobil qosımshadaǵı kartochkalarǵa 3D transformaciya qollanıp, qosımshanıń vizual qabatın jaqsılaw múmkin.
4. Kólemli navigaciya elementlerin jaratıw
3D prototiplewdiń ájayıp qollanılıwlarınan biri – bul kólemli navigaciya elementlerin jaratıw:
Navigaciya elementlerin (menyu, tabulator, t.b.) tańlań
"3D Transform" funkciyasın qollanıń
Z-indeksin basqarıw arqalı elementler arasında tereńlik effektin jaratıń
5. Prototipti testlew hám eksportlaw
Adobe XDdaǵı 3D prototipti testlew ushın "Preview" rejimin qollanıń. Bul rejimde dizayndaǵı interaktiv elementler islenedi hám 3D effektlerdi kóriw múmkin.
Prototipti basqalar menen bólisiw ushın:
"Share" → "Create Link" arqalı onlayn nusqasın jaratıń
"File" → "Export" arqalı video yamasa statik súwretler formatında eksportlań
Etap 3: Prototip hújjetlestiriw hám prezentaciya
1. Prototiptiń maqsetin hám maqsetli auditoriyasın anıqlaw
Prototip hújjetlestiriwinde tómendegi maǵlıwmatlar kórsetiliwi tiyis:
Prototiptiń maqseti hám missiyası
Maqsetli paydalanıwshı portreti
Prototiptiń sheshetuǵın mashqalası
2. Ekranlar kartasın jaratıw
Programmanıń barlıq ekranların hám olardıń óz-ara baylanısların kórsetiw ushın ekranlar kartasın jaratıń. Bul karta programmalıq támiynattıń navigaciyasın hám strukturasın anıq kórsetedi.
3. Prototipti prezentaciyalaw
Prototipti komanda aǵzalarına yamasa steykxolderlerge prezentaciyalaw ushın:
Prototip navigaciyasın demonstraciyalaw ushın scenariy jazıń
Tiykarǵı paydalanıwshı jaǵdayların (use cases) kórsetiń
Alınǵan qátelikler hám olardı saplastırıw jolları tuwralı sóz etiń
ÁMELIY TAPSÍRMALAR:
Tapsırma 1: Mobil qosımsha prototipin jaratıw
Muzıka tıńlawǵa arnalǵan mobil qosımshanıń prototipin jaratıń. Qosımsha keminde 5 ekrannan ibarat bolıwı tiyis:
Bas bet (trekler dizimi)
Trek oynatıw ekranı
Pleylistler tizimi
Izlew ekranı
Profil ekranı
Figma quralın qollanıp, qosımshanıń interfeysin jaratıń hám barlıq ekranlardı interaktiv etip baylanıstırıń. Navigaciya elementleri intuitiv túrde túsinikli bolıwı kerek.
Tapsırma 2: 3D elementlerdi qosıw
Adobe XD quralın qollanıp, jaratılǵan prototipke 3D elementler qosıń:
Trekler arasında awısıwda 3D animaciya effektin qollanıń
Pleylistler ekranındaǵı kartochkalarǵa 3D transformaciya qosıń
Profil ekranındaǵı statistika diagrammasına kólemli effektler qosıń
Tapsırma 3: Prototipti hújjetlestiriw hám prezentaciyalaw
Jaratılǵan prototip boyınsha hújjetlestiriw tayarlań:
Prototiptiń maqseti hám sheshiletuǵın mashqalalar dizimin jazıń
Paydalanıwshı jaǵdayların (use cases) táriyipleń
Ekranlar kartaların jaratıń
Prototipti 3-5 minutlıq prezentaciya formasında tayarlań
Hár bir student óz prototipin klass aldında prezentaciya qılıwı hám basqa studentlerdiń sorawlarına juwap beriwi kerek. Prezentaciyada prototiptiń interaktivlik múmkinshilikleri, 3D elementleriniń qollanılıwı hám paydalanıwshı tájiriybesin jaqsılawǵa qosqan úlesi ayrıqsha aytılıwı tiyis.