Wireframe desain Anda

Menggambar ulang desain Anda adalah proses merancang struktur dan aliran informasi yang ingin Anda komunikasikan melalui UI dalam berbagai alur kerja.Langkah kritis dari tutorial ini memungkinkan Anda untuk mengulangi pengaturan elemen UI Anda, menemukan titik nyeri, dan meningkatkan pengalaman pemain sebelum Anda menginvestasikan waktu dan sumber daya pada desain bermasalah yang tidak berfungsi untuk pengalaman Anda.

Menggunakan file tag laser sampel pengalaman.rbxl sebagai referensi, bagian ini dari kurikulum antarmuka pengguna menunjukkan cara memstrukturkan elemen UI Anda di layar, termasuk panduan tentang:

• Merencanakan hierarki visual untuk UI yang secara intuitif membawa pemain ke fitur dan informasi yang mereka butuhkan untuk berhasil dalam pengalaman Anda.
• Memblokir dalam elemen UI dengan bentuk dasar untuk meninjau komposisi elemen UI Anda bersama dengan kendaliUI inti Roblox dan sentuhan.
• Mengembangkan alur pengguna untuk menghitung tindakan yang diperlukan pemain untuk mencapai tujuan mereka.

Setelah Anda menyelesaikan bagian ini, Anda akan belajar cara membangun dan mengkonfigurasi UI di Studio yang menghormati gaya seni dan wireframe Anda.

Rencanakan hierarki visual

Sebuah hierarki visual adalah struktur organisasi yang menyoroti elemen UI berdasarkan urutan pentingnya.Merencanakan hierarki visual untuk berbagai alur kerja dalam pengalaman Anda penting karena mengatur pemain untuk sukses dalam mencapai tujuan mereka, yang terutama diperlukan untuk permainan cepat pemain pertama yang menembak pengalaman di mana tujuan berubah dari saat ke saat.

Panduan hierarki visual yang efektif membimbing pemain melalui fitur dan informasi yang mereka butuhkan untuk memenuhi persyaratan permainan sesuai dengan tempat di mana mereka secara alami melihat di layar untuk menyelesaikan alur kerja.Sebagai contoh, hierarki visual tag laser sampel harus memandu pemain melalui kategori UI berikut saat mereka menavigasi peta dan menandai pemain di tim musuh:

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 prioritas mereka:

• Kategori pertama berada dekat dengan atas karena berisi elemen UI yang paling signifikan tentang cara memenangkan game.
• Kategori kedua mengambil sebagian besar ruang layar di dekat tengah karena berfungsi sebagai titik fokus untuk menarik perhatian pemain terhadap tindakan di ruang 3D, dan memiliki arti paling penting untuk bermain game.
• Kategori ketiga berada dekat dengan sisi karena pemain dapat membaca informasi peripheral ini tanpa mengalihkan perhatian mereka dari gameplay.

Untuk beberapa genre pengalaman, Anda hanya perlu menampilkan satu kategori informasi pada satu waktu karena itu adalah satu-satunya jenis informasi yang penting bagi pemain selama alur kerja itu.Namun, untuk pengalaman penembak orang pertama, pemain perlu melihat elemen UI dari beberapa kategori pada saat yang sama karena mereka semua menyediakan informasi yang perlu pemain jadikan sukses, seperti skor tim mereka, periode penundaan untuk blaster mereka, dan jika mereka diberi label keluar dari ronde.

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

• Jika Anda mengelompokkan elemen UI dari kategori yang berbeda bersama di seluruh layar, pemain tidak akan tahu di mana mencari apa yang mereka butuhkan.Untuk membantu pemain menavigasi pengalaman Anda, elemen UI grup dari kategori yang sama bersama-sama .
• Jika Anda memiliki terlalu banyak kategori di layar pada satu waktu, pemain mungkin tidak tahu informasi apa yang perlu mereka perhatikan.Untuk menghindari membanjiri pemain dengan kekacauan, tampilkan elemen UI untuk konteks 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 enfasi visual untuk pesanan interaksi ideal Anda .

Untuk tinjauan lengkap tentang hierarki visual untuk pengalaman tag laser sampel, lihat tabel berikut:

Blok dalam elemen UI

Sekarang setelah Anda memiliki hierarki visual dalam pikiran, Anda dapat memblokir elemen UI individu menggunakan bentuk dasar untuk meninjau komposisi UI khusus Anda bersama dengan UI inti Roblox di banyak perangkat.Proses ini memungkinkan Anda untuk melihat di mana Anda perlu memodifikasi desain Anda sehingga efektif pada semua ukuran layar yang dapat digunakan pemain untuk mengakses pengalaman Anda, seperti di ponsel, tablet, laptop, dan layar TV.

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

• Daftar pemain dalam pengalaman.
• Bar kesehatan karakter.
• Ransel karakter.
• Jendela obrolan.
• Tombol penangkapan.
• Menu popup emote karakter.

Anda dapat menonaktifkan salah satu elemen ini yang tidak memenuhi persyaratan gameplay pengalaman Anda sendiri untuk menyimpan ruang layar untuk UI khusus Anda.Sebagai contoh, pengalaman tag laser sampel tidak memerlukan ransel karena pemain hanya memiliki kemampuan untuk memilih satu blaster.Namun, jika pemain dapat memilih beberapa peledak sekaligus, pengalaman ini dapat menonaktifkan UI inti ini untuk memastikan selalu ada ruang untuk pemilih peledak saat pemain respawn, lalu berikan lokasi lain untuk dipilih dari inventaris Anda.

Selain UI inti Roblox, Anda juga harus mempertimbangkan ruang layar yang diperlukan untuk kendalisentuhan default Roblox.Sebagai contoh, 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 ketika mereka tidak memiliki akses ke keyboard atau kontroler.

Dengan mempertimbangkan elemen UI inti Roblox yang diperlukan untuk gameplay pengalaman Anda, dan kemungkinan kendalisentuhan, Anda dapat memblokir elemen UI khusus Anda dalam satu desain yang dapat disesuaikan di antara 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 blok pengalaman tag laser sampel di UI khusus untuk perangkat mobile dan PC.Kedua gambar termasuk:

• Bentuk dasar untuk mewakili UI khusus karena memungkinkan desain untuk dengan mudah melalui beberapa iterasi sebelum mencapai desain akhir.
• Mewarnai skala abu-abu yang memungkinkan mata untuk mengikuti informasi tanpa gangguan dari lingkungan latar belakang berwarna
• Status terbuka dari jendela chat dan daftar pemain aktif dan jendela chat untuk melihat berapa banyak ruang yang mereka ambil di layar.
• Ruang untuk kontrol seluler bahkan jika mereka tidak diperlukan untuk perangkat PC.

Ketika Anda merancang tata letak Anda dengan cara ini sambil memikirkan berapa banyak elemen UI yang dapat ada di layar pada saat yang sama, Anda melakukan pencegahan masa depan untuk semua tata letak potensial sesuai dengan perangkat dan alur kerja pemain.

Saat memblokir elemen UI untuk desain Anda, pertimbangkan hal mengikuti:

• Di mana dan bagaimana Anda memblokir di UI Anda dapat mempengaruhi komposisi layout Anda. Bertujuan untuk keseimbangan dan simetri dalam jumlah dan ukuran elemen UI khusus Anda di samping UI utama Roblox.
• Berinteraksi dengan UI yang jauh dari sudut bawah beberapa perangkat seluler dan tablet adalah tidak nyaman atau tidak mungkin. Tempatkan elemen interaktif di zona yang mudah dijangkau dekat posisi istirahat alami untuk jari.
• Ketika pemain menavigasi melalui lingkungan Anda, ruang 3D dapat menjadi terganggu dari UI di layar Anda. Tes desain Anda terhadap berbagai latar belakang yang mungkin untuk memastikan elemen UI di layar tetap jelas dan dapat dibaca.

Untuk informasi lebih lanjut tentang apa yang harus dipertimbangkan saat merancang dan memblokir elemen UI Anda untuk banyak perangkat, lihat Penempatan dan Pengukuran - Faktor Multi-Platform.

Kembangkan alur pengguna

Alur pengguna adalah koleksi jalur yang dapat diambil pemain dalam pengalaman untuk menyelesaikan tugas, seperti memilih senjata, membeli item, atau menyembuhkan karakter.Alur pengguna biasanya dimulai di mana Anda mengharapkan pemain untuk memulai tugas, dan selesai dengan tindakan atau pencapaian akhir yang dicapai pemain pada akhir tugas.Selain itu, aliran pengguna yang efektif juga menyumbang jalur tidak biasa yang mungkin ingin diambil pemain sendiri untuk mencapai tujuan yang sama.

Diagram alir berikut menunjukkan aliran pengguna pemain yang memasuki dan memainkan tag laser sampel.Ketika seorang pemain membuka pengalaman, mereka bergabung dengan lobi.Jika ronde belum dimulai, mereka menunggu sampai ronde loop dimulai, jika tidak mereka bergabung dengan tim yang saat ini sedang memainkan game.Jika kondisi akhir belum terpenuhi, seperti mencapai batas waktu atau menandai 10 pemain per tim, maka pemain memilih blaster mereka dan mengalami permainan utama tagging atau ditag oleh tim musuh, memasang blaster baru di arena, atau respawn setelah mereka ditag keluar.Setelah pemain memenuhi kondisi akhir, mereka menyelesaikan ronde dan bergabung dengan lobi lagi.

Penting untuk mengembangkan alur pengguna untuk semua yang dapat dilakukan pemain dalam pengalaman Anda karena memungkinkan Anda untuk mengevaluasi di mana dan bagaimana Anda ingin mereka menyelesaikan tugas, dan memprediksi di mana Anda dapat meringankan titik rasa sakit bagi siapa pun yang mengikuti jalan mereka sendiri.Sebagai contoh, jika Anda mengembangkan aliran pengguna tambahan untuk pengalaman tag laser sampel, apa yang terjadi ketika pemain:

• Keluar dari ronde sebelum kondisi akhir terpenuhi?
• Tinggalkan permainan saat bergabung dengan tim?
• Terima panggilan telepon di tengah ronde?
• Kehilangan koneksi mereka ke ronde kurang dari 15 detik?

Dengan memvisualisasikan semua tindakan potensial yang dapat dilakukan pemain atau skenario yang dapat terjadi pada pemain saat menyelesaikan tugas, Anda dapat lebih memperhitungkan bagaimana penataan elemen UI Anda mempengaruhi pengalaman mereka, lalu buat penyesuaian sebelum menerapkan desain Anda di Studio.Jika tugas terasa intuitif, tidak mengganggu, dan nyaman, pemain lebih mungkin menghabiskan waktu di pengalaman Anda, dan kembali pada tanggal kemudian.

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

• Apa yang ingin pemain lakukan dalam pengalaman Anda dan apa yang ingin mereka lakukan mungkin sangat berbeda.Yang terbaik adalah menguji desain Anda dengan beberapa jenis pemain untuk mendapatkan pemahaman tentang rute yang ingin mereka ambil untuk mencapai tujuan mereka.
• Grafik alur bisa menjadi sulit untuk dibaca dan tidak efektif jika mereka mencoba menangkap banyak skenario sekaligus dalam diagram.Untuk memfokuskan perhatian Anda pada setiap tugas, batasi bagan alir pada satu tugas utama pada satu waktu .
• Pola interaksi bervariasi tergantung pada apakah pemain menggunakan kendalisentuh, gamepad, atau mouse komputer untuk berinteraksi dengan pengalaman Anda.Jika Anda merancang untuk beberapa perangkat, kembangkan aliran pengguna unik untuk setiap perangkat sehingga Anda dapat mengidentifikasi titik nyeri dan mempercepat alur kerja.

Setelah Anda menyelesaikan desain wireframe Anda, saatnya untuk pindah ke Studio dan membuat UI Anda menjadi hidup.