APP INVENTOR 2 - Таза алдыңкы кеңештер (+4 мисал): 6 кадам

2024 Автор: John Day | [email protected]. Акыркы өзгөртүү: 2024-01-30 10:40

AI2деги колдонмоңузду эстетикалык кылып кантип көрсөтө аларыбызды көрөбүз:)

Бул жолу код жок, үстүндөгү 4 мисал сыяктуу жылмакай колдонмо үчүн кеңештер!

Жабдуулар

1 -кадам: Киришүү

Бул көрсөтмө MIT тарабынан иштелип чыккан App Inventor 2 программасын үйрөнүп же колдонуп жүргөн ар бир адам үчүн.

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

Бул Нускаманын максаты - келечектеги колдонмоңуз үчүн сонун фронт түзүү үчүн бир нече кеңештерди берүү, ал ар бир фронтто болгондой жөнөкөй жана жарашыктуу көрүнөт.

Биз 4 мисал көрсөткөндөй боло турган колдонмону түзүүнүн негиздерин көрөбүз.

Кел, баштайлы!

PS: Эгерде сиз бул долбоорду жакшы көрсөңүз, анда мага Classroom Science конкурсунда добуш бере аласыз. Сага чоң рахмат !!

PS2: Англисче кээ бир каталар кетет, мени кечир:)

2 -кадам: BackGround

Мен Фигмада кошумча форма жана түстөрдү түзүүгө мүмкүндүк берген, векторлуу бекер программалык камсыздоону түздүм: Бул абдан интуитивдүү, мен аны сунуштайм: www.figma.com!

Фигманы алдыңкы бетиңизге колдонуунун кажети жок, бирок мен тиркемени түзүүдөн мурун дизайнды жасаганды жакшы көрөм.

Сүрөттө көрүнүп тургандай, фон өтө жумшак болушу керек, анткени биз ага кээ бир баскычтарды, сүрөттөрдү ж.б. коймокчубуз …

Мен сиз колдонгон түстүн 30% тунуктугун жана 1 гана түстүү фон сунуштайм.

3 -кадам: Түстөр

Колдонмодо сиз тандаган түстөр жана алардын интенсивдүүлүгү абдан маанилүү.

Мен берген биринчи кеңеш - 3 түстүү максимумду тандоо (+ ак жана кара): биз дагы эле жумшак болууга аракет кылып жатабыз:)

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

Фон: эч кандай формасы жок жумшак жана жарык фон (түстүн 30% тунуктугу). Баскычтарыңызды бириктирүү үчүн бул түстү унутпаңыз!

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

Баскыч: Жалгыз түс, жалпысынан сиздин фонуңуздун түсү (80-100% тунуктугу), андан кийин ак же кара.

Слайдерлер: алар үчүн 2 түстү колдонбоңуз, бир гана түстү сол жагында, ал эми оң жагын кара көлөкөдө.

Дал ушул !!

Азыраак көп !!!! Өтө көп түстөрдү, форманы жана өлчөмдү колдонбоңуз, кылдат болуңуз!

4 -кадам: Экрандын оң параметрин коюңуз

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

Экран1де -> Сипаттарда, AI2ден анча жакшы көрүнбөгөн кошумча кадрларды жок кылуу үчүн төмөнкү аракеттерди аткарыңыз ^_ ^.

1 - экрандын багыты

Бир гана багытты тандаңыз, анткени сиз аны бурганыңызда колдонмо өтө жакшы адаптацияланбайт.

Мен Портрет багытын тандадым.

2 - "Title Visible" жана 3- "ShowStatusBar" өчүрүү

Мен аталышты жана статус тилкесин өчүрөм, анткени ал колдонмого кээ бир тилкелерди кошот, бул өтө эстетикалык эмес (менин оюмча).

4 - Өлчөм

Жалпы колдонмонун өлчөмү 505x320 (бийиктиги x туурасы). Фонуңузду жана сүрөттөрүңүздү түзүү үчүн бул өлчөмдөрдү унутпаңыз (жок дегенде бирдей пропорцияда)! Эгерде сиз Фигманы колдонсоңуз, анда колдонмоңуздун керектүү өлчөмүн заматта түзө аласыз.

5 - өлчөмү

Эгерде сиз Fixed тандасаңыз, анда колдонмо 505x320 өлчөмдө болот. Эгер сиз Responsive тандасаңыз, анда колдонмо смартфонуңузга туура келет, бирок этият болуңуз, сүрөттөрүңүздү ыңгайлаштырууга туура келет.

5 -кадам: Муну кантип кылуу керек:)

Биринчи мисалды кайра чыгаруу үчүн, биз 3 кадамды аткарабыз (сүрөттөр сыяктуу):

1 - Өлчөмдөрдү алыңыз

Фигманын эң сонун жери - сиз кадрларыңыздын жана объектиңиздин көлөмүн көрө аласыз, андыктан объекттериңиздин өлчөмү кандай болорун көрө аласыз жана боштук! Бланктар App Inventorдо абдан маанилүү, анткени биз аларды көрүнбөгөн энбелги коюу менен түзөбүз!

2 - боштукту көрүнбөс этикеткаларды толтуруңуз

Экинчи сүрөттө көрүнүп тургандай, биз керектүү өлчөмдөгү этикетканы коюп, биз каалаган фронтту кайра чыгарабыз. Андан кийин аны көрүнбөс кылып көрсөтүңүз ("көрүнөө" баскычын чыкылдатыңыз).

Ошондой эле элементтериңизди жайгаштыруу үчүн Layout -> Arrangement колдонуңуз

3 - Программада сиздин Баскычтарыңызды түзүүгө аракет кылыңыз

Мүмкүн болсо, AI2 веб -сайтында баскычтарыңызды түзүңүз, алар жогорку сапатта болот жана кичине "чыкылдатуу" анимациясы абдан сонун болот:). Өз баскычтарыңызды жасай албаганыңызда, аларды башка программада түзүп, анан аны сүрөт катары импорттой аласыз.

6 -кадам: Жыйынтык:)

Сол жакта: AI2деги смартфондон скриншот.

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

Бул Instructable сизге AI2де сонун колдонмо түзүүгө жардам берет деп үмүттөнөм.

Көргөнүңүз үчүн сизге чоң рахмат. Эгерде сизге дагы кеңештер керек болсо, мага билдириңиз …

AI2дин арткы бетиндеги дагы бир Инструкция жакында чыгарылат!

Урматтоо менен, Томас, Technofabriqueтен