APP INVENTOR 2 - Tips Membersihkan Depan (+4 Contoh): 6 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:55

Kami akan melihat bagaimana kami dapat membuat Aplikasi Anda di AI2 terlihat estetis:)

Tidak ada kode kali ini, hanya tip untuk aplikasi yang mulus seperti 4 contoh di atas!

Perlengkapan

Langkah 1: Pendahuluan

Instruksi ini untuk semua orang yang belajar atau menggunakan App Inventor 2, perangkat lunak yang dikembangkan oleh MIT.

MIT AI2 adalah pengembangan aplikasi smartphone gratis, sederhana dan menakjubkan, yang sempurna untuk setiap Arduino DIY atau perangkat elektronik. Tetapi kesederhanaannya juga membuatnya sangat terbatas, terutama ketika Anda mencoba membuat aplikasi Anda terlihat estetis.

Tujuan dari Instructable ini adalah untuk memberi Anda beberapa tips untuk membuat tampilan depan yang keren untuk aplikasi masa depan Anda, yang akan terlihat sederhana dan elegan, sebagaimana mestinya.

Kita akan melihat dasar-dasar untuk membuat Aplikasi yang akan terlihat seperti 4 Contoh yang ditunjukkan.

Mari kita mulai!

PS: Jika Anda menyukai proyek ini, Anda dapat memilih saya di Lomba Sains Kelas. Terima kasih banyak !!

PS2: Beberapa kesalahan bahasa Inggris akan dibuat, maafkan saya:)

Langkah 2: Latar Belakang

Saya telah membuat kreasi lebih lanjut di Figma, perangkat lunak bebas vektor, seperti cat canggih, yang memungkinkan Anda membuat bentuk dan warna dengan mudah: Sangat intuitif, saya merekomendasikannya: www.figma.com !

Anda tidak perlu menggunakan Figma untuk bagian depan Anda, tetapi saya suka membuat desain sebelum membuat aplikasi itu sendiri.

Seperti yang Anda lihat pada gambar, latar belakang harus sangat lembut, karena kita akan meletakkan beberapa tombol, gambar, dll… di atasnya…

Saya merekomendasikan transparansi 30% pada warna yang Anda gunakan, dan latar belakang dengan hanya 1 warna.

Langkah 3: Warna

Warna yang Anda pilih dan intensitasnya sangat penting dalam sebuah Aplikasi.

Saran pertama yang saya berikan adalah memilih maksimal 3 warna (+hitam putih): kami tetap berusaha soft:)

Untuk 4 contoh yang saya buat, berikut adalah saran yang saya pilih (Anda juga dapat melihatnya pada gambar, sebagai rekap):

Latar Belakang: latar belakang yang lembut dan terang tanpa bentuk (30% transparansi warna). Ingat warna ini untuk mengintegrasikan tombol Anda!

Judul: Teks tipis dalam warna abu-abu gelap terlihat bagus! Untuk subtitle dan teks berikut, tetap dalam warna hitam, tetapi ubah bayangan hitam (abu-abu jika itu bukan informasi besar), dan mainkan dengan ukuran dan atribut yang Anda bisa (tebal, miring).

Tombol: Satu warna, pada umumnya warna latar belakang Anda dengan (transparansi 80-100%), kemudian hitam atau putih untuk menyelesaikannya.

Slider: jangan gunakan 2 warna untuk mereka, hanya satu warna di sisi kiri, dan sisi kanan dalam naungan hitam.

Itu dia !!

Kurang itu lebih !!!! Jangan menggunakan terlalu banyak warna, bentuk dan ukuran, Jadilah halus!

Langkah 4: Atur Parameter Kanan Layar

Pada layar utama bagian App Inventor Designer, Anda dapat memilih karakteristik utama layar.

Pada Screen1 -> Properties, ikuti tindakan berikut untuk menghapus bingkai ekstra dari AI2 yang tidak terlalu bagus ^_^.

1 - Orientasi layar

Pilih hanya satu orientasi karena aplikasi tidak beradaptasi dengan baik saat Anda memutarnya.

Saya memilih orientasi Potret.

2 - Nonaktifkan 'Judul Terlihat' dan 3- Nonaktifkan 'ShowStatusBar'

Saya menonaktifkan judul dan bilah status, karena menambahkan beberapa bilah pada aplikasi, yang tidak terlalu estetis (menurut saya).

4 - Dimensi

Dimensi aplikasi umum adalah 505x320 (tinggi x lebar). Ingat dimensi tersebut untuk membuat latar belakang dan gambar Anda (setidaknya memiliki proporsi yang sama) ! Jika Anda menggunakan Figma, Anda dapat membuat ukuran aplikasi yang tepat secara instan.

5 - Ukuran

Jika Anda memilih Tetap, maka aplikasi akan berukuran 505x320. Jika Anda memilih Responsif, maka aplikasi akan sesuai dengan ponsel cerdas Anda, tetapi berhati-hatilah, Anda harus menyesuaikan gambar Anda.

Langkah 5: Bagaimana Melakukannya:)

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

1 - Ambil dimensinya

Apa yang keren di figma adalah Anda dapat melihat ukuran bingkai dan objek Anda, sehingga Anda dapat melihat ukuran apa yang akan menjadi objek Anda, dan yang kosong! Yang kosong sangat penting di App Inventor karena kita akan membuatnya dengan memberi label tak terlihat!

2 - Isi bagian yang kosong akan Label yang tidak terlihat

Seperti yang Anda lihat pada gambar kedua, kami mereproduksi bagian depan yang kami inginkan dengan menempatkan label dengan ukuran yang sesuai. Kemudian buat agar terlihat tidak terlihat (hapus klik tombol 'terlihat').

Juga gunakan Layout -> Arrangement untuk menempatkan item Anda

3 - Coba buat Tombol Anda di perangkat lunak

Jika memungkinkan, buat tombol Anda di situs web AI2, mereka akan berkualitas tinggi dan animasi kecil 'saat diklik' akan agak keren:). Jika Anda tidak dapat membuat tombol sendiri, Anda dapat membuatnya di perangkat lunak lain, lalu mengimpornya sebagai gambar.

Langkah 6: Hasilnya:)

Di sebelah kiri: tangkapan layar dari ponsel cerdas saya di AI2.

Di sebelah kanan: draf yang dibuat di Figma.

Saya sangat berharap Instructable ini akan membantu Anda membangun aplikasi yang luar biasa di AI2.

Terima kasih banyak untuk menonton. Jika Anda membutuhkan saran lebih lanjut, beri tahu saya…

Instruksi lain di backend AI2 akan segera dirilis!

Hormat Anda, Thomas, dari Technofabrique