APP INVENTOR 2 - Petua Depan Bersih (Contoh +4): 6 Langkah

2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-30 11:09

Kami akan melihat bagaimana kami dapat menjadikan Aplikasi anda di AI2 kelihatan estetik:)

Tiada kod kali ini, hanya petua untuk aplikasi yang lancar seperti 4 contoh di atas!

Bekalan

Langkah 1: Pengenalan

Instructable ini adalah untuk semua orang yang belajar atau menggunakan App Inventor 2, perisian yang dikembangkan oleh MIT.

MIT AI2 adalah pengembangan aplikasi telefon pintar percuma, ringkas dan menakjubkan, yang sangat sesuai untuk setiap DIY Arduino atau peranti elektronik. Tetapi kesederhanaannya juga membuatnya cukup terhad, terutama ketika anda berusaha menjadikan aplikasi anda kelihatan estetik.

Tujuan dari Instructable ini adalah untuk memberi anda beberapa petua untuk membuat bahagian depan yang menarik untuk aplikasi masa depan anda, yang akan kelihatan sederhana dan elegan, seperti yang seharusnya.

Kami akan melihat asas-asas untuk membuat Aplikasi yang akan kelihatan seperti 4 Contoh yang ditunjukkan.

Mari kita mulakan !

PS: Sekiranya anda menyukai projek ini, anda boleh memilih saya dalam Pertandingan Sains Kelas. Terima kasih banyak-banyak !!

PS2: Beberapa kesalahan bahasa Inggeris akan dilakukan, maafkan saya:)

Langkah 2: Latar Belakang

Saya telah membuat penciptaan lebih lanjut di Figma, perisian bebas vektor, seperti cat canggih, yang membolehkan anda membuat bentuk dan warna dengan mudah: Ini sangat intuitif, saya mengesyorkannya: www.figma.com!

Anda tidak perlu menggunakan Figma untuk bahagian depan anda, tetapi saya suka membuat reka bentuk sebelum membuat aplikasinya sendiri.

Seperti yang anda lihat pada gambar, latar belakang harus sangat lembut, kerana kita akan meletakkan beberapa butang, gambar, dll … di atasnya …

Saya mencadangkan ketelusan 30% pada warna yang anda gunakan, dan latar belakang dengan hanya 1 warna.

Langkah 3: Warna

Warna yang anda pilih dan keamatannya sangat penting dalam Aplikasi.

Nasihat pertama yang saya berikan adalah memilih maksimum 3 warna (+ hitam dan putih): kita masih berusaha lembut:)

Untuk 4 contoh yang saya buat, berikut adalah nasihat yang telah saya pilih (anda juga dapat melihatnya di gambar, sebagai rangkuman):

Latar Belakang: latar belakang lembut dan ringan tanpa bentuk (ketelusan warna 30%). Ingat warna ini untuk menggabungkan butang anda!

Tajuk: Teks nipis dalam warna kelabu gelap kelihatan bagus! Untuk sari kata dan teks berikut, tetap dalam warna hitam, tetapi ubah warna hitam (kelabu ketika itu bukan maklumat besar), dan mainkan dengan ukuran dan atribut yang anda boleh (tebal, miring).

Butang: Satu warna, secara amnya warna latar belakang anda dengan (ketelusan 80-100%), kemudian hitam atau putih untuk menyelesaikannya.

The Sliders: jangan gunakan 2 warna untuknya, hanya satu warna di sebelah kiri, dan sebelah kanan dalam warna hitam.

Itu sahaja !!

Sedikit tetapi lebih dari cukup !!!! Jangan gunakan terlalu banyak warna, bentuk dan ukuran, Jadilah halus!

Langkah 4: Tetapkan Parameter Kanan Skrin

Pada skrin utama bahagian App Inventor Designer, anda boleh memilih ciri utama skrin.

Pada Skrin1 -> Properties, ikuti tindakan berikut untuk menghapus bingkai tambahan dari AI2 yang tidak kelihatan baik ^ _ ^.

1 - Orientasi skrin

Pilih hanya satu orientasi kerana aplikasi tidak dapat menyesuaikan diri dengan baik semasa anda menghidupkannya.

Saya memilih orientasi Potret.

2 - Lumpuhkan 'Tajuk Terlihat' dan 3- Lumpuhkan 'ShowStatusBar'

Saya melumpuhkan tajuk dan bar status, kerana menambah bar pada aplikasi, yang tidak begitu estetik (pada pendapat saya).

4 - Dimensi

Dimensi aplikasi biasa ialah 505x320 (tinggi x lebar). Ingatlah dimensi tersebut untuk membuat latar belakang dan gambar anda (sekurang-kurangnya mempunyai perkadaran yang sama)! Sekiranya anda menggunakan Figma, anda dapat membuat ukuran aplikasi anda dengan tepat.

5 - Saiz

Sekiranya anda memilih Tetap, maka aplikasi akan berukuran 505x320. Sekiranya anda memilih Responsif, maka aplikasi tersebut akan sesuai dengan telefon pintar anda, tetapi berhati-hatilah, anda harus menyesuaikan gambar anda.

Langkah 5: Cara Melakukannya:)

Untuk menghasilkan semula contoh pertama, kita akan mengikuti 3 langkah (seperti gambar):

1 - Ambil dimensi

Apa yang menarik pada figma ialah anda dapat melihat ukuran bingkai dan objek anda, sehingga anda dapat melihat ukuran apa yang akan menjadi objek anda, dan yang kosong! Kekosongan sangat penting pada App Inventor kerana kita akan membuatnya dengan meletakkan label yang tidak kelihatan!

2 - Isi Label kosong yang tidak kelihatan

Seperti yang anda lihat pada gambar kedua, kami memperbanyak bahagian depan yang kami mahukan dengan meletakkan label dengan ukuran yang sesuai. Kemudian jadikan ia kelihatan tidak kelihatan (hapus butang 'nampak').

Gunakan juga Layout -> Arrangement untuk meletakkan barang anda

3 - Cuba buat Butang anda pada perisian

Sekiranya boleh, buat butang anda di laman web AI2, mereka akan berkualiti tinggi dan animasi kecil 'on click' agak sejuk:). Apabila anda tidak dapat membuat butang sendiri, anda boleh membuatnya pada perisian lain, dan kemudian mengimportnya sebagai gambar.

Langkah 6: Hasilnya:)

Di sebelah kiri: tangkapan skrin dari telefon pintar saya di AI2.

Di sebelah kanan: draf dibuat pada Figma.

Saya sangat berharap Instructable ini dapat membantu anda membina aplikasi hebat di AI2.

Terima kasih banyak kerana menonton. Sekiranya anda memerlukan nasihat lebih lanjut, beritahu saya …

Instructable lain pada backend AI2 akan dikeluarkan tidak lama lagi!

Dengan hormatnya, Thomas, dari Technofabrique