APP İNVENTOR 2 - Təmiz Ön İpuçları (+4 Nümunə): 6 Addım

2024 Müəllif: John Day | [email protected]. Son dəyişdirildi: 2024-01-30 07:45

AI2 -də tətbiqinizi necə estetik göstərə biləcəyimizi görəcəyik:)

Bu dəfə kod yoxdur, yuxarıdakı 4 nümunə kimi hamar bir tətbiq üçün yalnız məsləhətlər!

Təchizat

Addım 1: Giriş

Bu Təlimat, MIT tərəfindən hazırlanmış App Inventor 2 proqramını öyrənən və ya istifadə edən hər kəs üçündür.

MIT AI2, hər DIY Arduino və ya elektron cihaz üçün mükəmməl olan pulsuz, sadə və heyrətamiz bir smartfon tətbiqetməsidir. Ancaq sadəliyi onu olduqca məhdudlaşdırır, xüsusən də tətbiqinizin estetik görünməsinə çalışdığınız zaman.

Bu Təlimatın məqsədi, gələcək tətbiqiniz üçün hər cəbhədə olduğu kimi sadə və zərif görünəcək sərin bir cəbhə yaratmaq üçün sizə bəzi məsləhətlər verməkdir.

Göstərilən 4 Nümunə kimi görünəcək bir Tətbiq yaratmaq üçün əsasları görəcəyik.

Gəlin başlayaq !

PS: Bu layihəni sevirsinizsə, Classroom Elm Yarışmasında mənə səs verə bilərsiniz. Çox sağ ol !!

PS2: İngilis dilində bəzi səhvlər ediləcək, məni bağışla:)

Addım 2: Arka Plan

Əlavə şəkil və rənglər yaratmağa imkan verən inkişaf etmiş bir boya kimi vektorlu pulsuz bir proqram olan Figma -da daha bir yaradıcılıq etdim: Çox intuitivdir, bunu tövsiyə edirəm: www.figma.com!

Cəbhəniz üçün Figma istifadə etməyinizə ehtiyac yoxdur, ancaq tətbiqin özünü yaratmadan əvvəl dizayn etməyi sevirəm.

Şəkildə gördüyünüz kimi, arxa planın çox yumşaq olması lazımdır, çünki üzərinə bəzi düymələr, şəkillər və s. Qoyacağıq …

İstifadə etdiyiniz rəngdə 30% şəffaflıq və yalnız 1 rəngli bir fon təklif edirəm.

Addım 3: Rənglər

Seçdiyiniz rənglər və intensivliyi bir tətbiqdə çox vacibdir.

Verəcəyim ilk məsləhət maksimum 3 rəng (+ qara və ağ) seçməkdir: hələ də yumşaq olmağa çalışırıq:)

Etdiyim 4 nümunə üçün seçdiyim məsləhətlərdir (bunları şəkildəki kimi də görə bilərsiniz):

Arxa fon: heç bir forma olmayan yumşaq və yüngül bir fon (rəngin 30% şəffaflığı). Düymələrinizi birləşdirmək üçün bu rəngi unutmayın!

Başlıq: Tünd boz rəngli nazik mətn yaxşı görünür! Aşağıdakı altyazı və mətn üçün qara rəngdə qalın, ancaq qara rəngin kölgəsini dəyişdirin (böyük bir məlumat olmadıqda boz) və bacardığınız ölçü və atributla oynayın (qalın, italik).

Düymə: Bir rəng, ümumiyyətlə fon rəngi (80-100% şəffaflıq) ilə, sonra qara və ya ağ rənglə bitirmək üçün.

Sürgülər: onlar üçün 2 rəng istifadə etməyin, sol tərəfdə yalnız bir rəng, qara rəngdə isə sağ tərəf.

Bu belədir !!

Az daha çoxdur !!!! Çox rəng, forma və ölçü istifadə etməyin, incə olun!

Addım 4: Ekranın sağ Parametrini təyin edin

App Inventor Designer hissəsinin əsas ekranında ekranın əsas xüsusiyyətlərini seçə bilərsiniz.

Screen1 -> Xüsusiyyətlərdə, AI2 -dən həqiqətən yaxşı görünməyən əlavə çərçivələri silmək üçün aşağıdakı hərəkəti edin ^_ ^.

1 - Ekranın istiqamətləndirilməsi

Yalnız bir istiqamət seçin, çünki onu çevirdiyiniz zaman tətbiq çox yaxşı uyğunlaşmır.

Portret istiqamətini seçdim.

2 - 'Görünən Başlığı' və 3- 'ShowStatusBar'ı deaktiv edin

Başlığı və status çubuğunu deaktiv edirəm, çünki tətbiqə çox estetik olmayan bir çubuq əlavə edir (mənim fikrimcə).

4 - Ölçü

Ümumi tətbiqin ölçüsü 505x320 (hündürlük x en) dir. Arxa planınızı və şəkillərinizi yaratmaq üçün bu ölçüləri unutmayın (heç olmasa eyni nisbətdə olsun)! Figma istifadə edirsinizsə, tətbiqinizin düzgün ölçüsünü dərhal yarada bilərsiniz.

5 - Ölçü

Sabit seçsəniz, tətbiq 505x320 ölçüdə olacaq. Həssas seçsəniz, tətbiq smartfonunuza uyğun olacaq, amma diqqətli olun, şəkillərinizi uyğunlaşdırmalı olacaqsınız.

Addım 5: Bunu necə etmək olar:)

İlk nümunəni təkrarlamaq üçün 3 addımı izləyəcəyik (şəkillər kimi):

1 - Ölçüləri götürün

Fiqmanın sərinliyi budur ki, çərçivələrinizin və obyektinizin ölçüsünü görə bilərsiniz, beləliklə obyektlərinizin hansı ölçüdə olacağını görə bilərsiniz və boşluq! Boşluqlar App Inventor -da çox vacibdir, çünki onları görünməz etiket qoyaraq yaradacağıq!

2 - Boşluğu görünməyəcək etiketləri doldurun

İkinci şəkildən göründüyü kimi, uyğun ölçüdə etiket qoyaraq istədiyimiz cəbhəni çoxaldırıq. Sonra görünməz hala gətirin ('görünən' düyməsini sıxın).

Maddələrinizi yerləşdirmək üçün Layout -> Aranjımandan da istifadə edin

3 - Proqramda Düymələrinizi yaratmağa çalışın

Mümkünsə, düymələrinizi AI2 veb saytında yaradın, onlar yüksək keyfiyyətdə olacaq və 'tıkla' kiçik animasiyası çox sərin olacaq:). Öz düymələrinizi edə bilmədiyiniz zaman onları başqa bir proqramda yarada və sonra şəkil olaraq idxal edə bilərsiniz.

Addım 6: Nəticə:)

Solda: AI2 üzərindəki smartfonumdan ekran görüntüsü.

Sağda: Figma üzərində hazırlanmış qaralama.

Ümid edirəm ki, bu Təlimat AI2 -də möhtəşəm bir tətbiq yaratmağınıza kömək edəcəkdir.

İzlədiyiniz üçün çox sağ olun. Əlavə məsləhətlərə ehtiyacınız varsa, mənə bildirin…

AI2 -nin arxa tərəfində başqa bir təlimat tezliklə yayımlanacaq!

Hörmətlə, Thomas, Technofabrique -dən