7 days of WordPress themes, graphics & videos - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Game Development
  2. Mobile Development

Bagaimana desain antarmuka Menu untuk balita permainan atau aplikasi

Read Time: 9 mins

Indonesian (Bahasa Indonesia) translation by Kang Abbad (you can also view the original English article)

Pasar ponsel telah mulai untuk menargetkan generasi muda di jalan besar. Keseluruhan bagian dari app pasar berdedikasi terhadap aplikasi dan permainan bertujuan untuk pra-sekolah demografis. Pengembang telah mengambil catatan, dan pasar telah menjadi semakin padat.

Bila Anda membuat sebuah aplikasi yang ditargetkan pada generasi termuda, Anda perlu mengetahui dua hal utama:

  1. Rentang perhatian audiens Anda
  2. Kompleksitas Anda GUI (Graphical User Interface)

Dalam artikel ini, saya akan berbicara tentang antarmuka pengguna biasa yang terkait dengan sebagian besar aplikasi berbasis layar sentuh, dan bagaimana terbaik memodifikasi mereka ketika mendekati pasar ini.

Kesan pertama

Salah satu tema, Anda akan melihat dalam artikel ini adalah untuk mengurangi hambatan masuk. Lebih layar yang ditempatkan antara pikiran muda dan konten yang dimaksudkan, semakin besar kemungkinan si anak akan tumbuh tidak sabar dan menyerah pada aplikasi Anda.

Mari kita mulai dengan apa yang paling apps memulai pengalaman mereka dengan: splash screen. Takeaway cepat? Tidak menggunakan salah satu. Ada dua tahun pernah saya temui peduli bahwa JohnSmithDevelopment dibangun nya lagu-dan-tarian app; Dia atau dia hanya ingin mendapatkan dengan musik. Kemudian datang ditakuti klik tombol Beranda, dan sukar dipahami target audiens dimatikan untuk memeriksa sesuatu yang lain.

Anak-anak memiliki rentang perhatian yang pendek. Anda ingin mendapatkan barang-barang dari aplikasi Anda secepat mungkin. Mulai musik latar belakang saat start-up, dan jangan meninggalkan layar stagnan apapun. Bosan merupakan musuh Anda.

Layar awal

Seringkali, elemen disajikan seterusnya hadir adalah "mulai layar". Layar ini biasanya memiliki judul aplikasi Anda dan tombol ditandai bermain atau mulai atau dengan simbol setara — sesuatu seperti ini:

Layar ini biasanya menjalankan animasi, memantul judul di sekitar atau sesuatu yang serupa. Contoh khusus menganai layar mulai memiliki satu kesalahan yang mencolok, tetapi untuk memahaminya, kita perlu melihat lebih dekat bagaimana anak menafsirkan layar Anda.

Penyimpangan berbasis Menu

Cara Anda atau saya melihat konten pada perangkat genggam kami (atau apa pun yang elektronik, hal) sangat berbeda dari cara anak pandangan itu. Ambil, misalnya, mock-up akrab ini:

Sebagai pengguna berpengalaman, Anda akan melihat Deskripsi pada elemen tombol atau meja, dan menemukan jalan Anda ke konten yang diinginkan. Hal ini tidak selalu terjadi untuk anak. Anda dapat melihat tombol dengan bermain kata di atasnya, dan secara naluriah tahu apa yang harus dilakukan, tapi bisa satu tahun membaca tombol yang sama dan memahami dengan cara yang sama? Mungkin tidak. Struktur menu khas yang hanya tidak bekerja dengan baik ketika ditujukan untuk yang benar-benar muda. Jadi apa yang harus dilakukan?

Ukuran adalah penting

Mari kita melihat beberapa struktur menu yang lebih baik ditargetkan untuk balita:

Apa yang kita telah berubah dalam contoh ini adalah bahwa pengguna sekarang visual diarahkan menuju jalan kita inginkan. Kami menghilangkan kebutuhan untuk anak untuk memahami apa tombol masing-masing, dan sebaliknya menarik perhatian mereka ke objek-objek yang didasarkan pada ukuran atau lokasi.

Biasanya, segala sesuatu yang lain yang sama, Anda dapat mengharapkan anak yang ditarik ke objek terbesar pada layar. Sebaliknya, jika Anda memiliki banyak hal yang terjadi di layar Anda, menghapus menu atau tombol semua bersama-sama adalah pendekatan yang baik, hanya membutuhkan setiap sentuhan pada layar untuk bergerak sepanjang untuk konten Anda. Ada Pro dan kontra untuk setiap GUI yang Anda memutuskan untuk menggunakan.

Tidak peduli bagaimana Anda mendekati itu, setiap kali Anda membuat adegan ke layar itu tidak konten Anda, Anda telah menciptakan penghalang antara anak dan permainan Anda.

Tombol konten

Mari kita lihat pada dua tombol:

Berikut adalah contoh lain dari menyampaikan informasi visual ke pengguna Anda. Sementara ini dua tombol berarti hal yang sama, tombol di sebelah kiri lebih baik menyampaikan kepada anak apa yang mereka harapkan.

Gambar lebih untuk anak muda daripada kata-kata berarti. Teks adalah musuh menu balita, jadi gunakan hemat. Hal ini berlaku untuk pilihan tombol dan tombol navigasi juga. "Kembali" berarti kurang dari grafis panah. Sama berlaku untuk "Replay", "Menu", dan sebagainya.

Desain item navigasi Anda seperti Anda akan untuk pasar global: meminimalkan teks dan menggunakan isyarat grafis.

Warna dan suara

Menu Anda perlu pop dari layar. Ada beberapa awesome warna berdasarkan tutorial di situs ini untuk membantu Anda memulai memilih palet warna untuk permainan atau aplikasi.

Dalam hal ke menu, menjaga tombol atau obyek interaktif cerah dan bersemangat, dan objek latar belakang Anda lebih diredam. Efek yang aku pada objek latar depan juga membantu untuk memberikan kesan "bermunculan" dari layar, dan karena itu lebih mungkin untuk menarik perhatian.

Lihat berapa banyak lagi tombol pop ketika latar belakang gambar kabur?

Demikian juga, suara adalah daya tarik besar untuk anak-anak. Cahaya, segar musik akan mengadakan beberapa perhatian. Menyimpan musik merenung gelap dan riff logam berat untuk RPG Anda.

Juga, ketika Anda memilih musik latar belakang untuk aplikasi Anda, hati-hati untuk menemukan sebuah lagu bahwa orang tua akan mampu mentolerir. Mereka adalah orang-orang yang akan memiliki keputusan final untuk apakah aplikasi Anda memiliki daya tahan apapun pada perangkat.

Rempah-rempah itu

Kami memiliki beberapa alat yang ampuh dalam gudang kami, tapi kami can do better. Sejauh ini, kami menu ini masih cukup statis dan kusam. Anak-anak menggunakan perangkat ini untuk rangsangan visual, dan memberikan beberapa rempah-rempah menu Anda akan membantu untuk mempertahankan minat mereka.

Hal ini dicapai dengan sedikit trik, animasi, tindakan dan efek partikel. Anda bisa memiliki karakter utama tersenyum dan melambaikan tangan di sudut, atau kereta trundling di bagian bawah layar, atau jumlah waktunya acak peristiwa terjadi semua sekaligus di samping atau di belakang menu Anda.

Saya akan berhati-hati terhadap terlalu banyak dari ini "kebisingan", meskipun. Apa yang sebenarnya tidak menguntungkan menu Anda (itu adalah, apa pun yang ada hanya untuk menunjukkan), akan mengalihkan pengguna dari GUI Anda sebenarnya. Bukannya menambahkan kebisingan, mengapa tidak berlari beberapa tindakan sederhana pada menu yang ada untuk menarik perhatian pengguna dan memberikan beberapa zip ke adegan dalam proses? Misalnya, memiliki tombol visual bergerak, atau tumbuh dan kemudian menyusut secara berurutan, adalah cara yang bagus untuk menarik perhatian untuk itu.

Berikut adalah perbandingan sederhana tombol statis untuk satu berdenyut:

Mata secara naluriah tertarik pada tombol bergerak. Saya ingin menggunakan tindakan untuk membuat efek ini dalam program saya. Kode untuk seperti tindakan yang ditampilkan di sini (kode yang ditulis di Objective-C, tetapi dengan mudah beradaptasi dengan bahasa lain):

Hal yang hebat tentang tindakan adalah bahwa mereka memerlukan tanpa grafis sumber daya tambahan. Ada tidak ada efek pada ukuran app-bundel Anda, dan Anda tidak perlu untuk menyewa seorang seniman menggambar urutan gambar untuk Anda. Karena itu, Anda dapat mencapai efek yang sama dengan urutan animasi tradisional dan file atlas.

Efek partikel

Memiliki tombol Anda bergerak besar, tetapi bagaimana jika kita bisa membuat pop dari layar bahkan lebih? Ini adalah mana efek partikel dapat bekerja untuk keuntungan Anda. Partikel adalah hanya gambar yang bisa kita gunakan berulang -ulang ribuan kali untuk menciptakan efek.

Kita dapat membuat efek mencari besar lain untuk menarik perhatian ke tombol kami dengan penambahan satu gambar kecil, Deskripsi XML file dan tiga baris kode. Seluk-beluk di belakang efek partikel dan tindakan yang sedikit di luar cakupan tutorial ini, tapi untuk menyelesaikan, di sini adalah kode untuk memuat file:

Dan inilah hasilnya:

Gambar keuntungan lebih mendalam dari efek ini, dan mendapat perhatian lebih tertarik untuk itu.

Pergi dan kembali

Jadi, apa yang salah dengan menu itu dari awal?

Ketika saya memberikannya kepada anak muda saya untuk menguji, ia terus berusaha untuk tekan judul animasi. Tombol Play adalah stagnan, dan, meskipun besar dan terkemuka di layar, ia terus ditarik ke judul animasi memantul. Ia mendapat frustrasi, dan sebelum aku bisa menunjukkan padanya bagaimana menuju ke layar berikutnya, ia menekan tombol Home yang ditakuti, mencari sesuatu yang lain.

Saya telah mengikuti dua tips saya dari atas, tapi punya satu salah langkah penting: gangguan. Aku telah secara tidak sengaja menciptakan penghalang dalam layar awal saya.

Ingat, ketika berhadapan dengan balita, Anda tidak dapat mengharapkan kemudian untuk memiliki kesabaran untuk memilah-milah cara membuat aplikasi Anda bekerja. Jika tidak masuk akal bagi mereka setelah mencoba dua, mereka akan pindah. Menghilangkan hambatan, dan membuatnya sederhana dan intuitif sehingga seseorang tanpa keterampilan bahasa tertulis atau pengalaman produk akan tahu apa yang harus dilakukan.

Panduan dan Tips

Dengan itu dalam pikiran, berikut adalah beberapa panduan untuk mengambil:

  1. Setiap layar Anda menempatkan antara anak dan konten Anda adalah satu kesempatan mereka harus menolak aplikasi Anda sama sekali.
  2. Membuat tombol Anda menonjol, baik dalam ukuran dan warna, tekstur, dan kontras.
  3. Membuat tombol titik fokus dari layar; setiap animasi harus dilakukan pada mereka dan bukan pada unsur-unsur lain yang dapat berfungsi sebagai gangguan.
  4. Membuat musik yang mengalir, tapi memberikan orangtua cara sederhana untuk mematikannya.
  5. Menghindari tidak perlu teks; pengguna Anda tidak mungkin untuk dapat membacanya. Gunakan ikon dan gambar yang umum untuk "bermain", "suara", "menu", dan sebagainya.
  6. Jangan menganggap pengguna Anda membosankan — mereka mungkin sangat baik tahu bagaimana untuk menggunakan mesin lebih baik daripada orangtua mereka. Namun, juga tidak menganggap bahwa hanya karena Anda menunjukkan kepada mereka tampilan tabel atau sebuah elemen paging bahwa mereka tahu bagaimana untuk menemukan lebih banyak konten. Selalu memberikan indikasi visual dari mana untuk mencari item di layar.

Saran terbaik saya dapat menawarkan Anda adalah ini: menu terbaik untuk aplikasi atau permainan yang ditujukan untuk balita adalah menu tidak sama sekali.

Jika pengguna Anda harus klik lebih dari satu tombol untuk mendapatkan konten Anda, Anda memiliki terlalu banyak. Satunya alasan untuk memiliki sebuah tombol di app adalah jika Anda mempresentasikan pengguna dengan lebih dari satu aktivitas untuk memilih dari. Dalam kasus ini, membuat setiap aktivitas memiliki tombol ukuran dan disorot serupa, dan membuat semua elemen setara menonjol.

Jika konten Anda harus cocok pada lebih dari satu layar, selalu meninggalkan indikasi visual kepada pengguna bahwa ada konten yang tersedia. Dalam kasus ini, saya menggunakan fitur "mengintip" untuk menunjukkan bagian dari tombol berikutnya, seperti video ini:

Kesimpulan

Terima kasih untuk membaca, dan saya berharap bahwa Anda telah menemukan diskusi yang mendalam. Jika Anda memiliki komentar, silahkan merasa bebas untuk meninggalkan mereka di bawah ini. Saya juga senang melihat menu Anda membuat aplikasi Anda sendiri.

Saya telah menyertakan file proyek contoh dengan tutorial ini, ditulis di Objective-C dengan xCode 5 untuk iOS platform. Proyek ini menunjukkan contoh perbandingan dari dua tombol, satu statis dan yang lain termasuk berbasis tindakan pseudo animasi dan efek partikel.

Atribusi

  • Font: Ramah gemuk oleh James Fordyce
  • Grafis, gambar dan video oleh Richard Yeates
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Game Development tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.