Kabelkan Desain Anda

Wireframing layout Anda adalah proses mendesain struktur dan alir informasi yang ingin Anda komunikasikan melalui UI dalam berbagai workflow. Langkah kritis tutorial ini memungkinkan Anda untuk beriterasi pada rangkaian elemen UI Anda, menemukan poin sakit, dan meningkatkan pengalaman pemain sebelum Anda menginvestasikan waktu dan sumber daya pada desain yang problematik yang tidak bekerja untuk p

Menggunakan file sample laser tag experience.rbxl sebagai referensi, bagian ini dari kurikulum UI menunjukkan cara menyajikan elemen UI Anda di layar, termasuk panduan tentang:

• Mencoba mengembangkan hierarki visual untuk UI Anda yang secara intuitif membawa pemain ke fitur dan informasi yang mereka butuhkan untuk berhasil dalam pengalaman Anda.
• Mengunci elemen UI dengan bentuk dasar untuk meninjau komposisi elemen UI Anda bersama dengan UI inti Roblox dan kendalisentuh.
• Mengembangkan aliran pengguna untuk menghitung tindakan yang diperlukan yang harus dilakukan pemain untuk mencapai tujuan mereka.

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

Rencanakan Hierarki Visual

Sebuah piramida visual adalah struktur organisasi yang menyoroti elemen UI dengan urutan prioritas mereka. Menyusun piramida visual untuk berbagai workflow di pengalaman Anda penting karena itu menetapkan pemain untuk sukses dalam mencapai tujuan mereka, yang sangat diperlukan untuk gameplay cepat dari pengalaman penembak pertama orang pertama di mana tujuan berubah dari saat ke saat.

Efek visual hierarki yang efektif membimbing pemain melalui fitur dan informasi yang mereka butuhkan untuk memenuhi persyaratan gameplay Anda sesuai dengan di mana mereka secara alami terlihat di layar untuk menyelesaikan workflow. Misalnya, hierarki visual dari pengalaman tag laser sampel harus membimbing pemain melalui kategori UI berikut saat mereka menjelajahi peta dan menandai pemain di tim musuh:

1. Informasi tentang tujuan pengalaman.
2. Informasi tentang blaster.
3. Informasi tentang kondisi pemain.

Lokasi masing-masing kategori ini memiliki di layar dalam sorotan desain akhir menunjukkan urutan prioritas mereka:

• Kategori pertama adalah dekat dengan atas karena berisi elemen UI yang paling penting tentang cara memenangkan game.
• Kategori kedua mengambil sebagian besar ruang layar dekat pertengahan karena berfungsi sebagai fokus untuk menarik perhatian pemain ke tindakan di ruang 3D, dan memiliki signifikansi terbesar untuk bermain game.
• Kategori ketiga dekat dengan sisi karena pemain dapat membaca informasi periferal ini tanpa mengalihkan perhatian mereka dari gameplay.

Untuk beberapa jenis pengalaman, Anda hanya perlu menampilkan satu kategori informasi pada satu waktu karena itu adalah satu-satunya jenis informasi yang penting bagi pemain selama workflow itu. Namun, untuk pengalaman penembak orang pertama, pemain perlu melihat elemen UI dari beberapa kategori pada saat yang sama karena mereka semua memberikan

Saat merencanakan piramida visual untuk alur kerja Anda sendiri, pertimbangkan hal mengikuti:

• Jika Anda menggabungkan elemen UI dari kategori berbeda bersama di seluruh layar, pemain tidak akan tahu di mana mencari apa yang mereka butuhkan. Untuk membantu pemain dalam menavigasi pengalaman Anda, grup elemen UI 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 mengejutkan pemain dengan banyaknya kerumitan, tampilkan UI elemen konteks untuk berbagai workflow .
• Demikian pula, jika ada terlalu banyak elemen UI per kategori, itu dapat mengalihkan pemain untuk memahami cara menyelesaikan tindakan atau proses. Untuk alasan ini, penting untuk menggunakan gaya seni Anda untuk memberikan fokus visual untuk pesanan interaksi ideal Anda .

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

Blok dalam Elemen UI

Sekarang Anda memiliki piramida visual dalam pikiran, Anda dapat menghalangi dalam elemen UI individual 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 mengubah desain Anda sehingga efektif di semua ukuran layar yang dapat dibuka oleh pemain, sepert

Sebelum Anda memulai, Anda perlu mengetahui berapa banyak ruang layar yang tersedia untuk elemen UI khusus Anda sambil mengambil kedalaman UI Roblox. Misalnya, oleh default, Roblox menunjukkan elemen UI berikut di setiap pengalaman:

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

Anda dapat menonaktifkan salah satu dari elemen ini yang tidak memenuhi persyaratan gameplay Anda sendiri dalam order untuk menyimpan ruang layar untuk UI Anda sendiri. Misalnya, pengalaman laser tag sampel tidak memerlukan ransel karena pemain hanya memiliki kemampuan untuk memilih satu blaster. Namun, jika p

Selain UI inti Roblox, Anda juga harus mempertimbangkan ruang layar yang dibutuhkan untuk kendalisentuh default Roblox. Misalnya, ketika pemain mengakses pengalaman Anda menggunakan perangkat mobile, tampilan virtual tombol pemutar ditunjukkan di sudut kiri bawah layar, dan tombol lompat ditunjukkan di sudut kanan bawah layar. Ini memastikan bahwa p

Dengan mengambil kedua elemen UI inti Roblox yang diperlukan untuk permainanplay dari pengalaman Anda, dan kemungkinan kendalisentuh, Anda dapat menghalangi dalam elemen UI khusus Anda dalam satu desain yang adaptif di semua perangkat. Ini penting karena itu berarti Anda tidak perlu mempertahankan versi terpisah dari UI Anda saat Anda meningkatkan pengalaman Anda.

Untuk menunjukkan metode ini, tinjau dua gambar berikut tentang cara tag laser sampel memblokir dalam elemen UI khusus untuk kedua perangkat mobile dan PC. Kedua gambar ini termasuk:

• Bentuk dasar untuk mewakili UI khusus karena memungkinkan desain untuk mudah melewati beberapa iterasi sebelum mencapai desain akhir.
• Mewarnai grayscale yang memungkinkan mata untuk mengikuti informasi tanpa gangguan dari lingkungan latar belakang warna
• Negara 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.

Saat Anda merancang layout Anda dengan cara ini sambil memikirkan berapa banyak elemen UI yang dapat ada di layar pada saat yang sama, Anda melindungi masa depan untuk semua potensi layout menurut perangkat dan workflow pemain.

Saat menambahkan blok di elemen UI untuk layout Anda, pertimbangkan mengikuti:

• Di mana dan cara Anda memblokir dalam UI Anda dapat mempengaruhi komposisi layout Anda. Tujuan untuk keseimbangan dan simetri dalam jumlah dan ukuran elemen UI khusus Anda bersama dengan UI utama Roblox.
• Interaktasi dengan UI yang jauh dari sudut bawah beberapa perangkat mobile dan tablet adalah tidak nyaman atau tidak mungkin. Tempatkan elemen interaktif di zona mudah-mencapai dekat posisi istirahat alami untuk jari.
• Saat pemain menjelajahi lingkungan Anda, ruang 3D dapat menjadi mengalihkan dari UI on-screen Anda. Tester layar Anda terhadap berbagai latar belakang yang mungkin untuk memastikan elemen UI on-screen Anda tetap jelas dan terbaca.

Untuk lebih banyak informasi tentang apa yang perlu dipertimbangkan saat Anda merancang dan menyetel elemen UI Anda untuk banyak perangkat, lihat Posisi dan Ukuran - Faktor Penggunaan Multi-Platform.

Mengembangkan Alur Pengguna

Alir pengguna adalah koleksi jalan yang pemain dapat ambil dalam pengalaman untuk menyelesaikan tugas, seperti memilih senjata, membeli item, atau menyembuhkan karakter. Alir pengguna biasanya dimulai di mana Anda mengharapkan pemain untuk memulai tugas, dan selesai dengan tindakan terakhir atau pencapaian yang pemain mencapai di ujung tugas. Selain itu

Petunjuk alir berikut menunjukkan alir pengguna seorang pengguna yang memasuki dan bermain pada pengalaman laser tag game. Saat seorang pengguna membuka pengalaman, mereka bergabung dengan lobi. J

Sangat penting untuk mengembangkan aliran pengguna untuk semua yang dapat dilakukan pemain dalam pengalaman Anda karena itu memungkinkan Anda untuk mengevaluasi di mana dan bagaimana Anda ingin mereka untuk menyelesaikan tugas, dan memantikan di mana Anda dapat mengurangi poin sakit bagi siapa pun yang mengikuti jalan mereka sendiri. Misalnya, jika Anda mengembangkan aliran pengguna tambahan untuk pengalaman

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

Dengan melihat semua tindakan potensial yang dapat dilakukan pemain atau skenario yang dapat terjadi pada pemain saat menyelesaikan tugas, Anda dapat lebih baik menentukan bagaimana layout UI Anda berdampak negatif pada pengalaman mereka, lalu membuat penyesuaian sebelum menerapkan desain Anda di Studio. Jika tugas terasa intuitif, tidak mengganggu, dan mudah, pemain lebih mungkin menghabiskan w

Ketika mengembangkan aliran pengguna untuk pengalaman Anda sendiri, pertimbangkan hal mengikuti:

• Apa yang Anda inginkan pemain lakukan dalam pengalaman Anda dan apa yang mereka inginkan mungkin berbeda sepenuhnya. Lebih baik menguji layout Anda dengan banyak jenis pemain untuk mendapatkan pemahaman tentang jalan yang mereka inginkan untuk mencapai tujuan mereka.
• Grafik alir dapat menjadi sulit untuk dibaca dan tidak efektif jika mereka mencoba untuk menangkap beberapa skenario sekaligus dalam diagram. Untuk fokuskan perhatian Anda pada setiap tugas, batasi grafik alir ke satu tugas utama pada satu waktu .
• Pattern interaksi bervariasi tergantung apakah pemain menggunakan kendalisentuh, gamepad, atau mouse komputer untuk berinteraksi dengan pengalaman Anda. Jika Anda mendesain untuk beberapa perangkat, berkembangkan aliran pengguna unik untuk setiap perangkat jadi Anda dapat mengidentifikasi titik sakit dan menyederakan alur kerja.

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