APP INVENTOR 2 - Почистете предните съвети (+4 пример): 6 стъпки

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:51

Ще видим как можем да направим вашето приложение на AI2 да изглежда естетично:)

Този път без код, само съвети за гладко приложение като четирите примера отгоре!

Консумативи

Стъпка 1: Въведение

Тази инструкция е за всеки, който учи или използва App Inventor 2, софтуер, разработен от MIT.

MIT AI2 е безплатно, просто и невероятно разработване на приложение за смартфон, което е идеално за всяко DIY Arduino или електронно устройство. Но неговата простота също го прави доста ограничен, особено когато се опитвате да накарате приложението ви да изглежда естетично.

Целта на тази инструкция е да ви даде някои съвети за създаване на страхотен фронт за бъдещото ви приложение, което ще изглежда просто и елегантно, както всеки фронт трябва да бъде.

Ще видим основите за създаване на приложение, което ще изглежда така, както е показано в примера 4.

Да започваме !

ПС: Ако обичате този проект, можете да гласувате за мен в конкурса за наука в класната стая. Благодаря ви много !!

PS2: Някои грешки на английски ще бъдат направени, прости ми:)

Стъпка 2: BackGround

Направих по -нататъшното създаване на Figma, векторен безплатен софтуер, подобрен на усъвършенствана боя, който ви позволява лесно да създавате форми и цветове: Много е интуитивен, препоръчвам го: www.figma.com!

Не е нужно да използвате Figma за предната част, но ми харесва да направя дизайна, преди да създам самото приложение.

Както можете да видите на снимката, фонът трябва да бъде много мек, тъй като ще поставим някои бутони, изображения и т.н … върху него …

Препоръчвам 30% прозрачност на цвета, който използвате, и фон само с 1 цвят.

Стъпка 3: Цветовете

Цветовете, които избирате, и техният интензитет са много важни в едно приложение.

Първият съвет, който давам, е да изберем максимум 3 цвята (+ черно и бяло): все още се опитваме да бъдем меки:)

За 4 -те примера, които направих, ето съветите, които съм избрал (можете да ги видите и на снимката, като обобщение):

Фон: мек и светъл фон без форма (30% прозрачност на цвета). Запомнете този цвят, за да интегрирате бутоните си!

Заглавието: Тънкият текст в тъмно сив цвят изглежда добре! За следните субтитри и текст останете в черно, но променете нюанса на черното (сиво, когато това не е голяма информация) и играйте с размера и атрибута, който можете (удебелен, курсив).

Бутонът: Един цвят, като цяло вашият цвят на фона с (80-100% прозрачност), след това черен или бял, за да го завършите.

Плъзгачите: не използвайте 2 цвята за тях, само един цвят от лявата страна, а дясната в черен нюанс.

Това е !!

По-малко е повече !!!! Не използвайте твърде много цветове, форма и размер, бъдете фини!

Стъпка 4: Задайте десния параметър на екрана

На главния екран на частта App Inventor Designer можете да изберете основните характеристики на екрана.

На Screen1 -> Properties, изпълнете следното действие, за да изтриете рамката за екстри от AI2, която наистина не изглежда добре ^_ ^.

1 - Ориентация на екрана

Изберете само една ориентация, защото приложението не се адаптира много добре, когато го завъртите.

Избрах портретна ориентация.

2 - Деактивирайте „Заглавието видимо“и 3- Деактивирайте „ShowStatusBar“

Деактивирам заглавието и лентата на състоянието, защото добавят някаква лента в приложението, която не е много естетична (според мен).

4 - Размери

Размерът на общото приложение е 505x320 (височина x ширина). Запомнете тези измерения, за да създадете своя фон и снимки (поне да имат същата пропорция)! Ако използвате Figma, можете незабавно да създадете правилния размер на приложението си.

5 - Оразмеряване

Ако изберете Fixed, приложението ще бъде с размер 505x320. Ако изберете Responsive, приложението ще пасне на вашия смартфон, но внимавайте, ще трябва да адаптирате снимките си.

Стъпка 5: Как да го направите:)

За да възпроизведем първия пример, ще следваме 3 стъпки (като снимките):

1 - Вземете размерите

Това, което е готино за figma е, че можете да видите размера на вашите рамки и обект, така че можете да видите какъв размер ще бъдат вашите обекти и празното място! Празните са много важни за App Inventor, защото ще ги създадем, като поставим невидим етикет!

2 - Попълнете празното поле с невидими етикети

Както можете да видите на втората снимка, ние възпроизвеждаме предната част, която искаме, като поставяме етикет с подходящ размер. След това го направете да изглежда невидим (махнете бутона „видимо“).

Използвайте също оформлението -> подредба, за да поставите вашите елементи

3 - Опитайте се да създадете своите бутони на софтуера

Когато е възможно, създайте бутоните си на уебсайта на AI2, те ще бъдат с високо качество, а малката анимация „при щракване“ще бъде доста готина:). Когато не можете да създадете свои собствени бутони, можете да ги създадете на друг софтуер и след това да ги импортирате като изображение.

Стъпка 6: Резултатът:)

Вляво: екранна снимка от моя смартфон на AI2.

Вдясно: чертежът, направен на Фигма.

Наистина се надявам, че този Instructable ще ви помогне да изградите великолепно приложение на AI2.

Благодаря ви много за гледането. Ако имате нужда от допълнителни съвети, моля, уведомете ме …

Друг Instructable на бекенда на AI2 ще бъде пуснат скоро!

С уважение, Томас, от Technofabrique