Membuat Wireframe untuk Layout Anda

Membuat wireframe untuk layout Anda adalah proses merancang struktur dan aliran informasi yang ingin Anda komunikasikan melalui UI dalam berbagai alur kerja. Langkah penting dalam tutorial ini memungkinkan Anda untuk melakukan iterasi pada pengaturan elemen UI Anda, menemukan titik-titik masalah, dan meningkatkan pengalaman pemain sebelum Anda menghabiskan waktu dan sumber daya pada desain bermasalah yang tidak berfungsi untuk pengalaman Anda.

Menggunakan file contoh pengalaman laser tag .rbxl sebagai referensi, bagian kurikulum antarmuka pengguna ini menunjukkan 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 pengalaman Anda.
• Memblokir elemen UI dengan bentuk dasar untuk meninjau komposisi elemen UI Anda bersamaan dengan UI dan kontrol sentuh inti 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 wireframe Anda.

Rencanakan hierarki visual

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

Hierarki visual yang efektif mengarahkan pemain melalui fitur dan informasi yang perlu mereka penuhi sesuai dengan tempat mereka secara alami melihat pada layar untuk menyelesaikan alur kerja. Misalnya, hierarki visual dari contoh pengalaman laser tag harus mengarahkan pemain melalui kategori elemen UI berikut saat mereka menavigasi peta dan menandai pemain di tim lawan:

1. Informasi tentang tujuan pengalaman.
2. Informasi tentang blaster.
3. Informasi tentang status 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 sekitar tengah karena berfungsi sebagai titik fokus untuk menarik perhatian pemain ke aksi di ruang 3D, dan memiliki arti yang paling signifikan untuk memainkan permainan.
• Kategori ketiga berada di sisi karena pemain dapat membaca informasi periferal ini tanpa mengalihkan perhatian mereka dari gameplay.

Untuk beberapa genre pengalaman, Anda hanya perlu menampilkan satu kategori informasi sekaligus karena itu adalah satu-satunya jenis informasi yang penting bagi pemain selama alur kerja tersebut. Namun, untuk pengalaman penembak 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 ronde.

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

• Jika Anda mengelompokkan elemen UI dari kategori yang berbeda di seluruh layar, pemain tidak akan tahu ke mana harus melihat untuk apa yang mereka butuhkan. Untuk membantu pemain menavigasi pengalaman Anda, kelompokkan elemen UI dari kategori yang sama bersama-sama.
• Jika Anda memiliki terlalu banyak kategori di layar sekaligus, pemain mungkin tidak tahu informasi apa yang perlu mereka perhatikan. Untuk menghindari membebani pemain dengan kekacauan, tampilkan elemen UI secara kontekstual untuk alur kerja yang berbeda.
• Demikian juga, jika ada terlalu banyak elemen UI per kategori, itu dapat mengalihkan perhatian pemain dari pemahaman tentang cara menyelesaikan tindakan atau proses. Oleh karena itu, penting untuk menggunakan gaya seni Anda untuk memberikan penekanan visual pada urutan interaksi ideal Anda.

Untuk tinjauan lengkap tentang hierarki visual untuk contoh pengalaman 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 layout 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 pengalaman Anda, seperti di perangkat seluler, tablet, laptop, dan layar TV.

Sebelum Anda memulai, Anda perlu menentukan berapa banyak ruang layar yang tersedia untuk elemen UI kustom Anda sambil mempertimbangkan UI inti Roblox. Sebagai contoh, secara default, Roblox menampilkan elemen UI berikut di setiap pengalaman:

• Daftar pemain dalam pengalaman.
• Bilah kesehatan karakter.
• Ransel karakter.
• Jendela obrolan.
• Tombol tangkap.
• Menu pop-up dari emotes karakter.

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

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

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

Untuk menunjukkan metode ini, tinjau dua gambar berikut tentang bagaimana contoh pengalaman laser tag memblokir elemen UI kustom untuk perangkat seluler dan PC. Kedua gambar termasuk:

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

Saat Anda merancang layout Anda dengan cara ini sambil memikirkan seberapa banyak elemen UI dapat ada di layar pada saat yang sama, Anda 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. Berusahalah untuk 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 seluler dan tablet adalah tidak nyaman atau bahkan mustahil. Tempatkan elemen interaktif di zona yang mudah dijangkau di dekat posisi istirahat alami untuk jempol.
• Ketika pemain menavigasi melalui lingkungan Anda, ruang 3D dapat menjadi pengalih perhatian dari UI Anda di layar. Uji layout Anda terhadap berbagai latar belakang yang mungkin untuk memastikan elemen UI Anda di layar tetap jelas dan terbaca.

Kembangkan alur pengguna

Alur pengguna adalah kumpulan jalur yang dapat diambil pemain dalam suatu pengalaman untuk menyelesaikan tugas, seperti memilih senjata, membeli item, atau menyembuhkan karakter. Alur pengguna biasanya dimulai di mana Anda mengharapkan pemain memulai tugas, dan diakhiri dengan tindakan terakhir atau pencapaian yang dicapai pemain di akhir tugas tersebut. 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 dari seorang pemain yang masuk dan bermain pengalaman laser tag contoh. Ketika seorang pemain membuka pengalaman, mereka bergabung dengan lobi. Jika ronde belum sedang berlangsung, mereka menunggu hingga loop ronde dimulai, jika tidak, mereka bergabung dengan tim yang sedang bermain game. Jika kondisi akhir belum terpenuhi, seperti mencapai batas waktu atau menandai 10 pemain per tim, maka pemain memilih blaster mereka dan mengalami gameplay utama dari menandai atau ditandai oleh tim musuh, memperlengkapi blaster baru di arena, atau respawn setelah mereka ditandai keluar. Setelah pemain memenuhi kondisi akhir, mereka menyelesaikan ronde dan kembali ke lobi.

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

• Menghentikan ronde sebelum kondisi akhir terpenuhi?
• Meninggalkan pengalaman saat bergabung dengan tim?
• Menerima telepon di tengah ronde?
• Kehilangan koneksi ke ronde 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 layout elemen UI Anda berdampak negatif pada pengalaman mereka, lalu melakukan penyesuaian sebelum menerapkan desain Anda di Studio. Jika tugas terasa intuitif, tidak mengganggu, dan nyaman, pemain lebih mungkin untuk menghabiskan waktu di pengalaman Anda, dan kembali di lain waktu.

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

• Apa yang Anda ingin pemain lakukan di pengalaman Anda dan apa yang mereka ingin lakukan mungkin sangat berbeda. Sebaiknya uji layout Anda dengan berbagai jenis pemain untuk memahami jalur yang ingin mereka ambil untuk mencapai tujuan mereka.
• Diagram alur bisa 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 dalam satu waktu.
• Pola interaksi bervariasi tergantung pada apakah pemain menggunakan kontrol sentuh, pengendali game, atau mouse komputer untuk berinteraksi dengan pengalaman 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 wireframe Anda, saatnya untuk berpindah ke Studio dan mewujudkan UI Anda.