Pilih gaya seni

Memilih gaya seni adalah proses merencanakan arah estetika untuk elemen UI Anda. Penting untuk memulai proses desain Anda dengan gaya seni karena gaya seni memberikan aturan dasar visual yang dapat Anda rujuk untuk memastikan UI Anda secara intuitif memberikan informasi kepada pemain tentang apa yang dapat mereka lakukan dalam permainan Anda.

Menggunakan contoh permainan laser tag file .rbxl sebagai referensi, bagian dari kurikulum antarmuka pengguna ini menunjukkan kepada Anda bagaimana membuat keputusan yang berarti tentang cara mendesain elemen UI Anda sesuai dengan genre permainan Anda, termasuk panduan tentang:

• Mengidentifikasi elemen UI yang diperlukan sesuai dengan apa yang ingin Anda komunikasikan kepada pemain sepanjang permainan Anda.
• Memilih tema warna yang memperkuat konvensi warna spesifik genre yang intuitif untuk audiens Anda.
• Menggambarkan ikon sederhana yang mudah dipahami di semua ukuran layar.
• Menetapkan urutan tombol yang sesuai dengan kemungkinan alur kerja pemain yang berbeda.
• Menentukan sistem teks yang memastikan keterbacaan di perangkat target.

Setelah Anda menyelesaikan bagian ini, Anda akan belajar bagaimana merancang struktur dan alur informasi yang ingin Anda komunikasikan kepada pemain melalui UI dalam permainan Anda.

Identifikasi elemen UI Anda

Langkah pertama dalam memilih gaya seni untuk UI Anda adalah mengidentifikasi elemen UI apa yang Anda butuhkan untuk berbagai jenis informasi yang ingin Anda komunikasikan kepada audiens Anda. Melakukan pekerjaan ini di awal proses desain Anda sangat penting karena memungkinkan Anda untuk mengkategorikan elemen UI berdasarkan tujuan fungsional mereka, membuat keputusan semantik sesuai dengan di mana dan kapan pemain akan berinteraksi dengan setiap elemen UI, dan merencanakan di mana Anda dapat menggunakan kembali elemen UI di seluruh permainan Anda.

Ada banyak cara berbeda untuk brainstorming elemen UI mana yang diperlukan untuk kebutuhan gameplay Anda, tetapi disarankan untuk memulai dengan membayangkan apa yang perlu diketahui pemain segera setelah mereka bergabung dengan permainan Anda. Misalnya, ketika seorang pemain membuka permainan laser tag contoh, mereka mungkin bertanya pada diri mereka sendiri pertanyaan berikut:

• Apa tujuan permainan ini?
• Bagaimana saya tahu siapa yang ada di tim saya?
• Bagaimana saya melacak poin tim saya?
• Bagaimana saya memilih blaster?
• Bagaimana saya tahu di mana blaster menembakkan laser?
• Jika saya menggunakan perangkat seluler, bagaimana saya menembakkan blaster saya?
• Setelah saya menembakkan laser, kapan saya bisa menembak lagi?
• Bagaimana saya tahu kapan saya memulai ronde?
• Bagaimana saya tahu kapan saya berhasil menandai seseorang dengan blaster saya?
• Bagaimana saya tahu kapan tim musuh berhasil menandai saya?

Dengan menggunakan pertanyaan-pertanyaan ini untuk memahami informasi apa yang penting bagi pemain untuk diketahui agar berhasil, Anda dapat mengurutkan kebutuhan UI permainan laser tag contoh ke dalam tiga kategori:

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

Mengurutkan kebutuhan UI permainan Anda ke dalam kategori sangat membantu karena Anda dapat merumuskan gaya seni Anda di sekitar setiap kelompok untuk memperkuat informasi apa yang perlu diajarkan setiap kategori kepada pemain. Misalnya, jika Anda ingin UI Anda memberi tahu pemain tindakan apa yang dapat mereka ambil terkait status kesehatan karakter mereka, Anda mungkin memilih gaya seni dengan elemen UI yang memprioritaskan warna hijau dan/atau ikon plus sehingga pemain dapat dengan cepat mengenali fungsinya.

Setelah Anda mengurutkan kebutuhan UI permainan Anda ke dalam kategori, Anda dapat membuat daftar elemen UI yang diperlukan untuk memenuhi persyaratan setiap kategori. Untuk menunjukkan, permainan laser tag contoh menggunakan tabel berikut dari elemen UI untuk menjawab daftar pertanyaan potensial pemain sebelumnya. Saat Anda bekerja melalui tutorial ini, kurikulum UI akan terus merujuk ke daftar ini dan menyoroti keputusan desain utama yang terkait dengan setiap kategori elemen UI.

Sekarang Anda memiliki daftar elemen UI untuk permainan Anda, saatnya untuk mulai membuat pilihan gaya dan semantik untuk setiap kelompok elemen UI, dimulai dengan tema warna.

Pilih tema warna

Sebuah tema warna, atau palet warna, adalah pilihan warna yang masing-masing menyampaikan pesan melalui penerapan yang konsisten dalam permainan Anda, seperti menggunakan warna cerah untuk menunjukkan ketika sesuatu dapat dipilih. Menerapkan tema warna pada elemen UI Anda sangat penting, terutama ketika Anda mengandalkan konvensi warna dalam genre permainan Anda, karena ini memungkinkan pemain untuk dengan cepat memahami UI Anda dengan usaha minimal.

Dalam Kurikulum Seni Lingkungan, setiap setengah dari lingkungan laser tag diberi kode warna dari pandangan atas untuk membedakan area mana dari peta yang dekat dengan zona spawn masing-masing tim: mint untuk tim yang berkumpul di sisi kiri peta, dan carnation pink untuk tim yang berkumpul di sisi kanan peta. Warna-warna spesifik ini berguna karena mereka komplementer, yang berarti bahwa mereka saling kontras dengan baik, dan memungkinkan pemain untuk dengan mudah memindai lingkungan mereka dan mengorientasikan diri mereka terlepas dari arah mana mereka menghadap di dalam bangunan.

Permainan laser tag contoh menggunakan tema warna yang sama dalam UI-nya untuk menyoroti informasi yang berkaitan dengan setiap tim, seperti indikator tim setiap pemain dalam ruang 3D, atau pelacak poin tim yang menutupi layar. Konsistensi ini membantu pemain untuk dengan cepat memahami informasi tentang tujuan permainan selama gameplay yang cepat dari permainan tembak-menembak orang pertama, terutama saat pemain perlu membuat keputusan cepat saat menjelajahi lingkungan.

Saat memilih tema warna untuk permainan Anda sendiri, pertimbangkan hal-hal berikut:

• Kekuatan tema warna bergantung pada membantu pemain membuat asosiasi mental cepat antara setiap warna dan fungsinya. Untuk alasan ini, batasi tema warna Anda hanya untuk menyoroti informasi kunci yang ingin Anda asosiasikan dengan elemen UI Anda.
• Untuk memastikan pemain dengan buta warna dapat memahami pesan tema warna Anda, jangan selalu mengandalkan warna saja untuk membedakan antara elemen UI. Sebaliknya, gabungkan warna dengan ikon, bentuk, dan/atau animasi untuk memastikan UI Anda berkomunikasi secara efektif dengan setiap pemain.
• Lebih penting bagi UI Anda untuk dapat dibaca daripada estetis menyenangkan. Untuk alasan ini, prioritaskan UI sederhana dengan warna yang tetap terbaca di atas elemen terang dan gelap di dunia 3D.

Untuk menyoroti panduan dalam poin terakhir, permainan laser tag contoh memanfaatkan warna netral hitam dan putih untuk hampir setiap elemen UI lainnya yang menutupi layar 2D. Hitam dan putih saling kontras dengan baik, dan mudah dibaca saat sisa layar menampilkan lingkungan 3D yang berwarna-warni.

Gambarkan ikon sederhana

Sebuah ikon adalah simbol yang mewakili tindakan, objek, atau konsep dalam permainan. Menggambarkan ikon yang sederhana dan intuitif sangat penting karena hasil akhirnya memungkinkan pemain untuk dengan mudah mengenali apa yang dapat mereka lakukan dan apa yang ingin Anda sampaikan kepada mereka melalui UI Anda tanpa menggunakan teks, yang dapat memenuhi layar dan menarik perhatian dari konten yang penting. Proses ini bahkan lebih penting jika audiens Anda mengakses permainan Anda menggunakan layar kecil di perangkat seluler.

Ikon sederhana sebaiknya memiliki gaya yang berbeda dari elemen 3D Anda sambil tetap melengkapi dunia keseluruhan permainan Anda. Misalnya, dalam lingkungan akhir dari Kurikulum Seni Lingkungan, baik aset 3D modular maupun prop memiliki gaya seni yang bersih dan berteknologi tinggi yang memanfaatkan bentuk persegi panjang dengan sudut yang lembut dan membulat. Dari panel bevel di sepanjang lantai hingga jendela hampir bulat di langit-langit, tidak ada yang memiliki tepi tajam.

Untuk melengkapi gaya seni ini sambil tetap unik, semua elemen UI yang akan Anda pelajari untuk dibuat nanti dalam tutorial ini memiliki estetika futuristik dan sudut bulat tanpa mencocokkan bahasa bentuk aset 3D di lingkungan. Ini menjaga makna setiap ikon tetap berbeda dari informasi lain di ruang 2D dan 3D.

Untuk menunjukkan konsep ini, lihat dua gambar berikut dari permainan laser tag contoh dari crosshair yang memberi tahu pemain di mana blaster mereka menembak di layar, dan tombol yang memungkinkan pemain untuk menembakkan blaster mereka di perangkat seluler. Kedua ikon tersebut memiliki sudut lembut agar kohesif dengan dunia keseluruhan, tetapi bentuk heksagonal dan bulat mereka membedakannya dari apa pun yang dapat diasosiasikan pemain dengan ikon dalam permainan.

Saat menggambarkan ikon sederhana untuk permainan Anda sendiri, pertimbangkan hal-hal berikut:

• Ikon sederhana dapat dibaca bahkan ketika kecil. Untuk alasan ini, batasi detail pada ikon Anda yang akan menjadi tidak dapat dikenali di layar perangkat seluler.
• Ikon sangat kuat karena mereka dapat menyampaikan pesan terlepas dari bahasa pemain. Selama tidak mempengaruhi pemahaman pemain tentang UI Anda, gantikan teks yang tidak perlu dengan ikon untuk meningkatkan upaya lokalisasi.
• Banyak permainan dari genre yang sama menggunakan ikon yang secara stylistik mirip, seperti ikon pedang yang mewakili kekuatan, atau labu yang mewakili sihir. Rangkul simbolisme dalam genre permainan Anda sehingga pemain dapat memahami ikon Anda tanpa panduan tambahan.

Jika Anda tidak tahu jenis ikon apa yang umum dalam genre permainan Anda, lihat Basis Data UI Permainan. Alat sumber daya gratis ini untuk desainer UI mencakup tangkapan layar dari ratusan permainan dari berbagai genre yang dapat Anda rujuk selama proses desain Anda.

Tetapkan urutan interaksi

Sebuah urutan interaksi adalah urutan interaksi yang dapat dilakukan pemain dengan UI Anda. Karena sering ada beberapa elemen UI yang dapat diinteraksi di layar, penting untuk menetapkan urutan interaksi yang intuitif untuk membantu pemain dalam membuat keputusan saat mereka menavigasi berbagai alur kerja.

Biasanya ada tiga jenis interaksi dalam alur kerja:

• Interaksi Utama – Tindakan yang paling mungkin dilakukan pemain.
• Interaksi Sekunder – Tindakan yang mungkin dilakukan pemain sebagai alternatif dari tindakan utama.
• Interaksi Tersier – Tindakan yang paling tidak mungkin dilakukan pemain.

Setiap jenis interaksi harus memiliki tingkat penekanan visual yang berbeda tergantung pada kemungkinan pemain melakukan tindakan tersebut. Untuk menggambarkan konsep ini, periksa gambar berikut dari urutan interaksi untuk alur kerja memilih blaster dalam permainan laser tag contoh, di mana A mewakili interaksi utama, B mewakili interaksi sekunder, dan C mewakili interaksi tersier.

Dalam alur kerja ini, tindakan yang paling mungkin dilakukan pemain adalah memilih antara dua jenis blaster yang berbeda, jadi tombol blaster jauh lebih besar daripada elemen interaktif lainnya dalam desain. Tingkat penekanan visual ini menarik perhatian pemain, dan menarik mata mereka ke tengah elemen UI keseluruhan. Setelah pemain membuat keputusan mereka, langkah logis berikutnya dalam alur kerja adalah mengonfirmasi pilihan mereka dan memulai ronde. Untuk alasan ini, tombol PILIH berada tepat di bawah interaksi utama.

Meskipun tidak mungkin, pemain mungkin tidak tahu bahwa mereka dapat memilih salah satu tombol blaster untuk mengkomunikasikan blaster mana yang ingin mereka gunakan. Untuk membantu dalam situasi ini, ada dua tombol panah tersier yang dapat digunakan pemain untuk beralih antara pilihan mereka. Tombol-tombol ini halus dan jauh lebih kecil daripada elemen interaksi utama dan sekunder, tetapi juga dapat dilihat oleh pemain yang membutuhkan arahan tentang tindakan apa yang dapat mereka lakukan.

Jika Anda menempatkan interaksi utama, sekunder, dan tersier ini dalam urutan interaksi yang berbeda, seperti menukar tombol PILIH dengan tombol panah kiri, pemain tidak akan memiliki arahan yang jelas tentang urutan pilihan yang perlu mereka buat. Untuk alasan ini, selain penekanan visual dari urutan tombol, alur kerja yang efektif mengikuti hierarki visual yang membimbing pemain melalui urutan keputusan ideal Anda sesuai dengan arah mereka kemungkinan memindai informasi, seperti dari atas ke bawah dan dari kiri ke kanan.

Saat menetapkan urutan interaksi untuk alur kerja dalam permainan Anda sendiri, pertimbangkan hal-hal berikut:

• Pemain perlu memiliki pemahaman yang jelas tentang kapan mereka dapat berinteraksi dengan UI Anda untuk melakukan tindakan. Untuk alasan ini, disarankan untuk memberikan setidaknya satu bentuk umpan balik visual untuk elemen UI yang dapat diinteraksi, seperti menampilkan garis luar atau mengubah ukuran, warna, atau animasi tombol saat dalam fokus.
• Jika label pada elemen UI yang dapat diinteraksi samar atau mirip satu sama lain dalam alur kerja yang sama, pemain dapat salah memahami cara menyelesaikan tindakan atau proses. Untuk menghindari pengalaman pemain yang negatif, buat label yang jelas, ringkas, dan berbeda satu sama lain.
• Jika elemen UI interaktif terlalu besar, mereka dapat mengalihkan perhatian dari informasi penting lainnya di layar. Sebaliknya, jika mereka terlalu kecil, mereka dapat sulit dibaca atau sulit dipilih, terutama jika mereka berdekatan di perangkat seluler. Untuk alasan ini, sangat penting untuk meninjau ukuran elemen UI yang dapat diinteraksi Anda di berbagai ukuran layar.

Dalam Implementasikan di Studio, Anda akan belajar bagaimana menggunakan objek UIAspectRatioConstraint untuk memastikan elemen UI mempertahankan rasio aspek tertentu tidak peduli perangkat apa yang digunakan pemain untuk mengakses permainan Anda. Selain membuat proses desain Anda lebih mudah, teknik ini juga dapat membantu Anda memenuhi pedoman aksesibilitas konten web Ukuran dan Jarak Target Sentuh untuk menciptakan zona sentuh untuk elemen UI interaktif yang setidaknya 9x9 mm di perangkat seluler.

Tentukan sistem teks

Sebuah sistem teks adalah seperangkat aturan tentang font dan gaya untuk semua kata dalam UI Anda, seperti "selalu tebal untuk header" atau "gunakan font hijau saat merujuk pada statistik kesehatan." Menentukan sistem teks lebih awal dalam proses desain Anda memungkinkan Anda memiliki struktur yang dapat Anda terapkan secara konsisten di seluruh permainan Anda sehingga pemain tahu apa yang diharapkan saat mereka mencari informasi yang mereka butuhkan.

Sementara sistem teks dapat bervariasi tergantung pada genre permainan atau persyaratan dunia 3D, aturan terpenting yang harus diikuti oleh semua sistem teks adalah memastikan semua teks UI Anda jelas dan mudah dibaca. Dengan menggunakan aturan ini sebagai dasar untuk semua keputusan terkait sistem teks Anda, Anda dapat meningkatkan aksesibilitas dan pengalaman pengguna bagi pemain yang membaca UI Anda dengan mempertimbangkan berbagai cara pemain dapat berinteraksi dengan teks Anda, seperti:

• Perangkat yang mungkin digunakan pemain untuk mengakses permainan Anda.
• Bahasa di mana pemain mungkin membaca teks yang dilokalisasi.
• Latar belakang yang mungkin ada di belakang teks di layar.

Misalnya, desain respons layar berikut ketika seorang pemain ditandai keluar menyesuaikan ukuran font yang lebih kecil atau lebih besar sesuai dengan perangkat pemain, mencakup cukup ruang di kedua sisi teks bahasa Inggris untuk bahasa dengan terjemahan yang lebih panjang, dan mencakup latar belakang yang kontras sehingga pemain dapat membaca teks terlepas dari warna apa pun di latar belakang mereka.

Saat menentukan sistem teks untuk permainan Anda sendiri, pertimbangkan hal-hal berikut:

• Teks sulit dibaca ketika menyatu dengan kebisingan latar belakangnya. Untuk meningkatkan keterbacaan UI Anda, tampilkan teks di atas warna kontras atau dengan garis tepi.
• Jika Anda tidak menyesuaikan teks Anda untuk perangkat yang berbeda, teks tersebut akan mengambil terlalu banyak ruang atau menjadi kecil dan tidak dapat dibaca di layar pemain. Untuk menangkap ketidaksesuaian dalam teks Anda, uji desain Anda di beberapa perangkat selama proses desain.
• Kata-kata dapat melampaui desain asli Anda ketika Anda melokalisasikannya ke dalam bahasa lain. Untuk meningkatkan komposisi desain Anda, rujuk pada ruang paling banyak yang dapat diambil teks Anda di layar.
• Meskipun beberapa font dapat sesuai dengan estetika permainan Anda, mereka mungkin sulit dibaca dalam jumlah besar. Untuk alasan ini, gunakan teks bergaya dengan hemat, seperti untuk judul atau teks peringatan.

Setelah Anda memiliki rencana untuk gaya seni UI Anda, Anda dapat melanjutkan ke bagian berikutnya dari tutorial untuk belajar bagaimana membuat wireframe tata letak setiap elemen dalam berbagai alur kerja pemain.