Membuat Kerangka Desain Layout Anda

Membuat Kerangka Desain Layout Anda adalah proses merancang struktur dan alur informasi yang ingin Anda komunikasikan melalui UI dalam berbagai alur kerja. Langkah penting dalam tutorial ini memungkinkan Anda untuk mengulangi pengaturan elemen UI Anda, menemukan titik masalah, dan meningkatkan pengalaman pemain sebelum Anda menginvestasikan waktu dan sumber daya pada desain yang bermasalah yang tidak berfungsi untuk permainan Anda.

Menggunakan file contoh permainan laser tag .rbxl sebagai referensi, bagian dari kurikulum antarmuka pengguna ini menunjukkan kepada Anda cara menyusun elemen UI Anda di layar, termasuk panduan tentang:

• Merencanakan hierarki visual untuk UI Anda yang secara intuitif mengarahkan pemain ke fitur dan informasi yang mereka butuhkan untuk berhasil dalam permainan Anda.
• Memblokir elemen UI dengan bentuk dasar untuk meninjau komposisi elemen UI Anda bersamaan dengan UI inti dan kontrol sentuh Roblox.
• Mengembangkan alur pengguna untuk memperhitungkan tindakan yang perlu diambil pemain untuk mencapai tujuan mereka.

Setelah Anda menyelesaikan bagian ini, Anda akan belajar bagaimana membangun dan mengonfigurasi UI Anda di Studio yang menghormati gaya seni dan kerangka desain Anda.

Rencanakan Hierarki Visual

Hierarki visual adalah struktur organisasi yang menyoroti elemen UI berdasarkan urutan kepentingannya. Merencanakan hierarki visual untuk berbagai alur kerja dalam permainan Anda sangat penting karena ini mempersiapkan pemain untuk berhasil dalam mencapai tujuan mereka, yang sangat diperlukan untuk gameplay cepat dari permainan tembak-menembak orang pertama di mana tujuan berubah dari saat ke saat.

Hierarki visual yang efektif membimbing pemain melalui fitur dan informasi yang mereka butuhkan untuk memenuhi persyaratan gameplay Anda sesuai dengan tempat mereka secara alami melihat di layar untuk menyelesaikan alur kerja. Misalnya, hierarki visual dari contoh permainan laser tag harus membimbing pemain melalui kategori elemen UI berikut saat mereka menjelajahi peta dan menandai pemain di tim musuh:

1. Informasi tentang tujuan permainan.
2. Informasi tentang blaster.
3. Informasi tentang keadaan pemain.

Lokasi masing-masing kategori ini di layar dalam desain akhir menyoroti urutan kepentingannya:

• Kategori pertama berada di atas karena berisi elemen UI yang paling signifikan tentang cara memenangkan permainan.
• Kategori kedua mengambil sebagian besar ruang layar di tengah karena berfungsi sebagai titik fokus untuk menarik perhatian pemain pada aksi di ruang 3D, dan memiliki signifikansi terbesar untuk bermain permainan.
• Kategori ketiga berada di sisi karena pemain dapat membaca informasi periferal ini tanpa mengalihkan perhatian mereka dari gameplay.

Untuk beberapa genre permainan, Anda hanya perlu menampilkan satu kategori informasi pada satu waktu karena itu adalah satu-satunya jenis informasi yang penting bagi pemain selama alur kerja tersebut. Namun, untuk permainan tembak-menembak orang pertama, pemain perlu melihat elemen UI dari beberapa kategori sekaligus karena semuanya memberikan informasi yang dibutuhkan pemain untuk berhasil, seperti skor tim mereka, periode cooldown untuk blaster mereka, dan apakah mereka telah ditandai keluar dari putaran.

Saat merencanakan hierarki visual untuk alur kerja dalam permainan Anda sendiri, pertimbangkan hal berikut:

• Jika Anda mengelompokkan elemen UI dari kategori yang berbeda bersama-sama di seluruh layar, pemain tidak akan tahu di mana mencari apa yang mereka butuhkan. Untuk membantu pemain menavigasi permainan Anda, kelompokkan elemen UI dari kategori yang sama bersama-sama.
• Jika Anda memiliki terlalu banyak kategori di layar pada satu waktu, pemain mungkin tidak tahu informasi mana yang perlu mereka perhatikan. Untuk menghindari membanjiri pemain dengan kekacauan, tampilkan elemen UI secara kontekstual untuk alur kerja yang berbeda.
• Demikian pula, jika ada terlalu banyak elemen UI per kategori, itu dapat mengalihkan perhatian pemain dari memahami cara menyelesaikan tindakan atau proses. Untuk alasan ini, penting untuk menggunakan gaya seni Anda untuk memberikan penekanan visual pada urutan interaksi ideal Anda.

Untuk tinjauan lengkap tentang hierarki visual untuk contoh permainan laser tag, lihat tabel berikut:

Memblokir Elemen UI

Sekarang Anda memiliki hierarki visual dalam pikiran, Anda dapat memblokir elemen UI individu menggunakan bentuk dasar untuk meninjau komposisi tata letak UI kustom Anda bersamaan dengan UI inti Roblox di berbagai perangkat. Proses ini memungkinkan Anda untuk melihat di mana Anda perlu memodifikasi desain Anda agar efektif di semua ukuran layar yang dapat digunakan pemain untuk mengakses permainan Anda, seperti di perangkat mobile, tablet, laptop, dan layar TV.

Sebelum Anda mulai, Anda perlu mencari tahu seberapa banyak ruang layar yang tersedia untuk elemen UI kustom Anda sambil mempertimbangkan UI inti Roblox. Misalnya, secara default, Roblox menampilkan elemen UI berikut di setiap permainan:

• Daftar pemain dalam permainan.
• Bar kesehatan karakter.
• Ransel karakter.
• Jendela obrolan.
• Tombol tangkap.
• Menu pop-up emote karakter.

Anda dapat menonaktifkan elemen-elemen ini yang tidak memenuhi persyaratan gameplay permainan Anda sendiri untuk menghemat ruang layar untuk UI kustom Anda. Misalnya, contoh permainan laser tag tidak memerlukan ransel karena pemain hanya memiliki kemampuan untuk memilih satu blaster. Namun, jika pemain dapat memilih beberapa blaster sekaligus, permainan dapat menonaktifkan UI inti ini untuk memastikan selalu ada ruang untuk pemilih blaster saat pemain respawn, kemudian menyediakan lokasi lain untuk memilih dari inventaris Anda.

Selain UI inti Roblox, Anda juga harus mempertimbangkan ruang layar yang diperlukan untuk kontrol sentuh default Roblox. Misalnya, ketika pemain mengakses permainan Anda menggunakan perangkat mobile, sebuah thumbstick virtual ditampilkan di sudut kiri bawah layar, dan tombol lompat ditampilkan di sudut kanan bawah layar. Ini memastikan bahwa pemain selalu dapat menavigasi permainan Anda, bahkan ketika mereka tidak memiliki akses ke keyboard atau pengontrol.

Dengan mempertimbangkan baik elemen UI inti Roblox yang diperlukan untuk gameplay permainan Anda, dan kemungkinan kontrol sentuh, Anda dapat memblokir elemen UI kustom Anda dalam satu desain yang adaptif di berbagai perangkat. Ini penting karena berarti Anda tidak perlu mempertahankan versi terpisah dari UI Anda saat Anda memperbarui permainan Anda.

Untuk mendemonstrasikan metode ini, tinjau dua gambar berikut tentang bagaimana contoh permainan laser tag memblokir elemen UI kustom untuk perangkat mobile dan PC. Kedua gambar tersebut mencakup:

• Bentuk dasar untuk mewakili UI kustom karena memungkinkan desain untuk dengan mudah melalui beberapa iterasi sebelum mencapai desain akhir.
• Pewarnaan grayscale yang memungkinkan mata mengikuti informasi tanpa gangguan dari latar belakang lingkungan yang berwarna-warni.
• Status terbuka dari jendela obrolan dan daftar pemain aktif serta jendela obrolan untuk melihat seberapa banyak ruang yang mereka ambil di layar.
• Ruang untuk kontrol mobile meskipun mereka tidak diperlukan untuk perangkat PC.

Ketika Anda merancang layout Anda dengan cara ini sambil memikirkan berapa banyak elemen UI yang dapat ada di layar pada saat yang sama, Anda sedang mempersiapkan untuk semua layout potensial sesuai dengan perangkat dan alur kerja pemain.

Saat memblokir elemen UI untuk layout Anda, pertimbangkan hal berikut:

• Di mana dan bagaimana Anda memblokir UI Anda dapat mempengaruhi komposisi layout Anda. Usahakan keseimbangan dan simetri dalam jumlah dan ukuran elemen UI kustom Anda bersamaan dengan UI inti Roblox.
• Berinteraksi dengan UI yang jauh dari sudut bawah beberapa perangkat mobile dan tablet adalah tidak nyaman atau tidak mungkin. Tempatkan elemen interaktif di zona yang mudah dijangkau dekat posisi istirahat alami untuk ibu jari.
• Ketika pemain menavigasi melalui lingkungan Anda, ruang 3D dapat menjadi gangguan dari UI di layar Anda. Uji layout Anda terhadap berbagai latar belakang yang mungkin untuk memastikan elemen UI di layar Anda tetap jelas dan terbaca.

Kembangkan Alur Pengguna

Alur pengguna adalah kumpulan jalur yang dapat diambil pemain dalam permainan untuk menyelesaikan tugas, seperti memilih senjata, membeli item, atau menyembuhkan karakter. Alur pengguna biasanya dimulai di mana Anda mengharapkan pemain untuk memulai tugas, dan diakhiri dengan tindakan atau pencapaian terakhir yang dicapai pemain di akhir tugas. Selain itu, alur pengguna yang efektif juga memperhitungkan jalur tidak biasa yang mungkin ingin diambil pemain sendiri untuk mencapai tujuan yang sama.

Diagram alur berikut menampilkan alur pengguna seorang pemain yang masuk dan bermain permainan laser tag contoh. Ketika seorang pemain membuka permainan, mereka bergabung dengan lobi. Jika putaran belum dimulai, mereka menunggu hingga loop putaran dimulai, jika tidak, mereka bergabung dengan tim yang saat ini bermain permainan. Jika kondisi akhir belum terpenuhi, seperti mencapai batas waktu atau menandai keluar 10 pemain per tim, maka pemain memilih blaster mereka dan mengalami gameplay utama dari menandai atau ditandai oleh tim musuh, melengkapi blaster baru di arena, atau respawn setelah mereka ditandai keluar. Setelah pemain memenuhi kondisi akhir, mereka menyelesaikan putaran dan bergabung kembali dengan lobi.

Penting untuk mengembangkan alur pengguna untuk segala sesuatu yang dapat dilakukan pemain dalam permainan Anda karena ini memungkinkan Anda untuk menilai di mana dan bagaimana Anda ingin mereka menyelesaikan tugas, dan mengantisipasi di mana Anda dapat mengurangi titik masalah bagi siapa pun yang mengikuti jalur mereka sendiri. Misalnya, jika Anda mengembangkan alur pengguna tambahan untuk contoh permainan laser tag, apa yang terjadi ketika pemain:

• Keluar dari putaran sebelum kondisi akhir terpenuhi?
• Meninggalkan permainan saat bergabung dengan tim?
• Menerima panggilan telepon di tengah putaran?
• Kehilangan koneksi ke putaran selama kurang dari 15 detik?

Dengan memvisualisasikan semua tindakan potensial yang dapat diambil pemain atau skenario yang dapat terjadi pada pemain saat menyelesaikan tugas, Anda dapat lebih baik menentukan bagaimana tata letak elemen UI Anda berdampak negatif pada pengalaman mereka, kemudian melakukan penyesuaian sebelum menerapkan desain Anda di Studio. Jika tugas terasa intuitif, tidak mengganggu, dan nyaman, pemain lebih mungkin untuk menghabiskan waktu di permainan Anda, dan kembali di lain waktu.

Saat mengembangkan alur pengguna untuk permainan Anda sendiri, pertimbangkan hal berikut:

• Apa yang Anda inginkan pemain lakukan dalam permainan Anda dan apa yang mereka inginkan untuk dilakukan mungkin sangat berbeda. Sebaiknya uji layout Anda dengan berbagai jenis pemain untuk mendapatkan pemahaman tentang jalur yang ingin mereka ambil untuk mencapai tujuan mereka.
• Diagram alur dapat menjadi sulit dibaca dan tidak efektif jika mencoba menangkap beberapa skenario sekaligus dalam diagram. Untuk memfokuskan perhatian Anda pada setiap tugas, batasi diagram alur pada satu tugas utama pada satu waktu.
• Pola interaksi bervariasi tergantung pada apakah pemain menggunakan kontrol sentuh, gamepad, atau mouse komputer untuk berinteraksi dengan permainan Anda. Jika Anda merancang untuk beberapa perangkat, kembangkan alur pengguna unik untuk setiap perangkat sehingga Anda dapat mengidentifikasi titik masalah dan menyederhanakan alur kerja.

Setelah Anda menyelesaikan desain kerangka Anda, saatnya untuk masuk ke Studio dan menghidupkan UI Anda.