APP INVENTOR 2 - Алдыңғы кеңестерді тазалаңыз (+4 Мысал): 6 қадам

2024 Автор: John Day | [email protected]. Соңғы өзгертілген: 2024-01-30 10:24

Біз AI2 қосымшасын қалай эстетикалық етіп жасауға болатынын көреміз:)

Бұл жолы ешқандай код жоқ, тек жоғарыдағы 4 мысал сияқты тегіс қолданбаға арналған кеңестер!

Жабдықтар

1 -қадам: Кіріспе

Бұл нұсқаулық MIT әзірлеген App Inventor 2 бағдарламалық жасақтамасын үйренетін немесе қолданатындардың барлығына арналған.

MIT AI2 - ақысыз, қарапайым және таңғажайып смартфон қосымшасы, ол әр DIY Arduino немесе электронды құрылғы үшін өте қолайлы. Бірақ оның қарапайымдылығы оны өте шектеулі етеді, әсіресе сіз қосымшаны эстетикалық етіп көрсетуге тырысқанда.

Бұл Нұсқаулықтың мақсаты - сіздің болашақ қосымшаңызға керемет фронт жасау үшін бірнеше кеңестер беру, ол әр фронт сияқты қарапайым және талғампаз болып көрінеді.

Біз 4 -мысалда көрсетілгендей болатын қосымшаны құрудың негізін қарастырамыз.

Бастайық!

PS: Егер сізге бұл жоба ұнайтын болса, сіз маған Classroom Science конкурсында дауыс бере аласыз. Сізге көп рахмет !!

PS2: Кейбір ағылшын қателері жіберіледі, мені кешіріңіз:)

2 -қадам: Background

Мен Figma -де қосымша пішіндер мен түстерді оңай жасауға мүмкіндік беретін қосымша векторлық ақысыз бағдарламалық жасақтама жасадым: бұл өте интуитивті, мен оны ұсынамын: www.figma.com!

Фигманы алдыңғы жағыңыз үшін пайдаланудың қажеті жоқ, бірақ мен қосымшаны жасамас бұрын дизайнды жасағанды ұнатамын.

Суретте көріп тұрғандай, фон өте жұмсақ болуы керек, өйткені біз оған бірнеше түймелер, суреттер және т.б. қоямыз …

Мен сіз қолданатын түс бойынша 30% мөлдірлікті және тек 1 түсі бар фонды ұсынамын.

3 -қадам: Түстер

Қолданбада сіз таңдаған түстер мен олардың қарқындылығы өте маңызды.

Мен беретін бірінші кеңес - максимум 3 түсті таңдау (+ ақ -қара): біз әлі жұмсақ болуға тырысамыз:)

Мен жасаған 4 мысал үшін мен таңдаған кеңестер (оларды суретте, қорытынды ретінде көруге болады):

Фон: пішіні жоқ жұмсақ және жеңіл фон (түстің мөлдірлігі 30%). Түймешіктерді біріктіру үшін бұл түсті есте сақтаңыз!

Тақырып: Қара сұр түсті жұқа мәтін жақсы көрінеді! Келесі субтитр мен мәтін үшін қара түсте болыңыз, бірақ қара көлеңкені өзгертіңіз (сұр емес, үлкен ақпарат) және мүмкін болатын өлшеммен және атрибутпен ойнаңыз (қалың, курсив).

Түйме: бір түсті, жалпы фондық түсі (80-100% мөлдірлікпен), содан кейін қара немесе ақ.

Сырғытпалар: олар үшін 2 түсті пайдаланбаңыз, тек бір түсті сол жақта, ал оң жақта қара көлеңкеде.

Міне бітті !!

Азырақ көп !!!! Түстерді, пішін мен өлшемді көп пайдаланбаңыз, нәзік болыңыз!

4 -қадам: Экранның оң жақ параметрін орнатыңыз

App Inventor Designer бөлігінің негізгі экранында сіз экранның негізгі сипаттамасын таңдай аласыз.

Экран1 -> Сипаттарда AI2 -ден жақсы көрінбейтін қосымша жақтауды жою үшін келесі әрекетті орындаңыз ^_ ^.

1 - экранның бағыты

Бір бағытты таңдаңыз, себебі оны бұрған кезде бағдарлама жақсы бейімделмейді.

Мен портреттік бағытты таңдадым.

2 - «Көрінетін тақырыпты» өшіру және 3 - «ShowStatusBar» өшіру

Мен тақырып пен күй жолағын өшіремін, себебі ол қосымшаға эстетикалық емес кейбір жолақтарды қосады (менің ойымша).

4 - Өлшем

Жалпы қосымшаның өлшемі 505x320 (биіктігі x ені). Фон мен суреттерді жасау үшін осы өлшемді есте сақтаңыз (кем дегенде бірдей пропорцияда)! Егер сіз Figma -ді қолдансаңыз, сіз бірден қолданбаның дұрыс өлшемін жасай аласыз.

5 - Өлшем

Егер сіз Fixed параметрін таңдасаңыз, онда бағдарлама өлшемі 505x320 болады. Егер сіз Responsive таңдасаңыз, онда бағдарлама смартфонға сәйкес келеді, бірақ сақ болыңыз, сіз суреттеріңізді бейімдеуіңіз керек.

5 -қадам: мұны қалай істеу керек:)

Бірінші мысалды қайталау үшін біз 3 қадамды орындаймыз (суреттер сияқты):

1 - Өлшемдерді алыңыз

Фигманың таңқаларлық жағы - бұл сіздің кадрларыңыз бен объектілеріңіздің көлемін көре аласыз, осылайша сіздің объектілеріңіз бен бос орындарыңыз қандай болатынын көре аласыз! Бос орындар Inventor бағдарламасында өте маңызды, өйткені біз оларды көрінбейтін жапсырма қою арқылы жасаймыз!

2 - бос орынға көрінбейтін жапсырмаларды толтырыңыз

Екінші суретте көріп тұрғаныңыздай, біз сәйкес өлшемді жапсырманы орналастыру арқылы қалаған фронтты шығарамыз. Содан кейін оны көрінбейтін етіп жасаңыз («көрінетін» түймесін басыңыз).

Сондай -ақ, элементтерді орналастыру үшін Орналасу -> Орналастыруды пайдаланыңыз

3 - Бағдарламалық жасақтамада түймелерді жасауға тырысыңыз

Мүмкіндігінше, AI2 веб -сайтында түймелеріңізді жасаңыз, олар жоғары сапалы болады және «басу» шағын анимациясы керемет болады:). Егер сіз түймелерді өзіңіз жасай алмасаңыз, оларды басқа бағдарламалық жасақтамада жасай аласыз, содан кейін оны сурет ретінде импорттауға болады.

6 -қадам: Нәтиже:)

Сол жақта: AI2 смартфонынан скриншот.

Оң жақта: Фигмада жасалған жоба.

Бұл нұсқаулық AI2 -де керемет қосымшаны құруға көмектеседі деп сенемін.

Көргендеріңізге көп рахмет. Егер сізге қосымша кеңестер қажет болса, маған хабарлаңыз …

AI2 артқы жағында тағы бір нұсқаулық жақында шығады!

Құрметпен, Томас, Technofabrique компаниясынан