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 menyediakan aturan dasar visual yang dapat Anda rujuk untuk memastikan UI Anda secara intuitif memberikan informasi kepada pemain tentang apa yang dapat mereka lakukan dalam pengalaman Anda.

Dengan menggunakan pengalaman laser tag sampel .rbxl sebagai referensi, bagian dari kurikulum antarmuka pengguna ini menunjukkan kepada Anda bagaimana membuat keputusan yang berarti tentang bagaimana merancang elemen UI Anda sesuai dengan genre pengalaman Anda, termasuk panduan tentang:

• Mengidentifikasi elemen UI yang diperlukan sesuai dengan apa yang ingin Anda komunikasikan kepada pemain sepanjang pengalaman Anda.
• Memilih tema warna yang memperkuat konvensi warna spesifik genre yang intuitif bagi audiens Anda.
• Menggambarkan ikon sederhana yang mudah dipahami di ukuran layar manapun.
• Menetapkan urutan tombol yang sesuai dengan kemungkinan alur kerja pemain yang berbeda.
• Menentukan sistem teks yang memastikan keterbacaan pada 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 pengalaman 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 mengkategorikan elemen UI berdasarkan tujuan fungsional mereka, membuat keputusan semantik sesuai dengan tempat dan waktu pemain akan berinteraksi dengan setiap elemen UI, dan merencanakan di mana Anda dapat menggunakan kembali elemen UI di seluruh pengalaman Anda.

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

• Apa tujuan dari pengalaman 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 di perangkat mobile, 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 sangat diperlukan pemain untuk tahu agar bisa sukses, Anda dapat mengurutkan kebutuhan UI dari pengalaman laser tag sampel ke dalam tiga kategori:

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

Mengurutkan kebutuhan UI pengalaman 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 pengalaman Anda ke dalam kategori, Anda dapat membuat daftar elemen UI yang diperlukan untuk memenuhi persyaratan masing-masing kategori. Untuk menunjukkan, pengalaman laser tag sampel menggunakan tabel berikut dari elemen UI untuk menjawab daftar pertanyaan potensial pemain sebelumnya. Saat Anda bekerja melalui tutorial ini, kurikulum UI akan terus merujuk daftar ini dan menyoroti keputusan desain utama yang terkait dengan setiap kategori elemen UI.

Sekarang Anda memiliki daftar elemen UI untuk pengalaman 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 mengkomunikasikan pesan melalui penerapan yang konsisten dalam pengalaman Anda, seperti menggunakan warna cerah untuk menunjukkan kapan sesuatu dapat dipilih. Menerapkan tema warna ke elemen UI Anda sangat penting, terutama ketika Anda mengandalkan konvensi warna dalam genre pengalaman Anda, karena memungkinkan pemain untuk dengan cepat memahami UI Anda dengan usaha minimal.

Dalam Kurikulum Seni Lingkungan, masing-masing setengah dari lingkungan laser tag diberi kode warna dari tampak 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 bertentangan dengan baik, dan memungkinkan pemain untuk dengan mudah melakukan pemindaian lingkungan mereka dan menentukan posisi mereka terlepas dari arah mana mereka menghadap di dalam bangunan.

Pengalaman laser tag sampel 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 ditampilkan di layar. Konsistensi ini membantu pemain memahami informasi tentang tujuan pengalaman selama gameplay yang cepat dari pengalaman tembak-menembak orang pertama, terutama karena pemain perlu membuat keputusan cepat saat melintasi lingkungan.

Saat memilih tema warna untuk pengalaman Anda sendiri, pertimbangkan yang 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 dari tema warna Anda, jangan selalu bergantung hanya pada warna untuk membedakan elemen UI. Sebaliknya, kombinasikan warna dengan ikon, bentuk, dan/atau animasi untuk memastikan UI Anda berkomunikasi efektif dengan setiap pemain.
• Lebih penting untuk UI Anda dapat dibaca ketimbang memiliki estetika yang indah. Untuk alasan ini, prioritaskan UI yang sederhana dengan warna yang tetap terbaca di atas elemen terang dan gelap dalam dunia 3D.

Untuk menyoroti panduan dalam poin terakhir, pengalaman laser tag sampel menggunakan warna netral hitam dan putih untuk hampir setiap elemen UI lainnya yang ditampilkan di layar 2D. Hitam dan putih saling bertentangan dengan baik, dan mudah dibaca saat sisa layar menampilkan lingkungan 3D yang berwarna-warni.

Gariskan ikon sederhana

Sebuah ikon adalah simbol yang mewakili aksi, objek, atau konsep dalam suatu pengalaman. Menggambarkan ikon yang sederhana dan intuitif sangat penting karena hasil akhirnya memungkinkan pemain dengan mudah mengenali apa yang dapat mereka lakukan dan apa yang ingin Anda komunikasikan melalui UI Anda tanpa menggunakan teks, yang dapat mengacaukan layar dan menarik perhatian dari konten yang penting. Proses ini semakin krusial jika audiens Anda mengakses pengalaman Anda menggunakan layar kecil di perangkat mobile.

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

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

Untuk menunjukkan konsep ini, lihat dua gambar berikut dari pengalaman laser tag sampel dari bidikan silang yang memberi tahu pemain di mana blaster mereka menembak di layar, dan tombol yang memungkinkan pemain menembakkan blaster mereka di perangkat mobile. Kedua ikon tersebut memiliki sudut lembut agar koheren dengan dunia keseluruhan, tetapi bentuk heksagonal dan bulatnya membedakannya dari informasi lain yang dapat diasosiasikan pemain dengan ikon dalam pengalaman.

Saat menggambarkan ikon sederhana untuk pengalaman Anda sendiri, pertimbangkan yang berikut:

• Ikon sederhana dapat dibaca meskipun dalam ukuran kecil. Untuk alasan ini, batasi detail di ikon Anda yang akan menjadi tidak dapat dikenali di layar perangkat mobile.
• Ikon sangat kuat karena dapat mengkomunikasikan pesan tanpa memandang bahasa pemain. Selama hal itu tidak mempengaruhi pemahaman pemain tentang UI Anda, gantikan teks yang tidak perlu dengan ikon untuk meningkatkan upaya lokalisasi.
• Banyak pengalaman dengan genre yang sama menggunakan ikon yang memiliki gaya yang mirip, seperti ikon pedang yang mewakili kekuatan, atau beaker yang mewakili sihir. Terima simbolisme dalam genre pengalaman Anda sehingga pemain dapat memahami ikon Anda tanpa panduan tambahan.

Jika Anda tidak tahu jenis ikon apa yang umum dalam genre pengalaman Anda, periksa Database UI Game. Alat sumber daya gratis ini untuk desainer UI mencakup tangkapan layar dari ratusan pengalaman dari genre yang berbeda 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 terdapat beberapa elemen UI yang dapat diinteraksi di layar, penting untuk menetapkan urutan interaksi yang intuitif untuk membantu pemain membuat keputusan saat mereka menavigasi berbagai alur kerja.

Ada biasanya tiga jenis interaksi dalam sebuah alur kerja:

• Interaksi Utama – Aksi yang paling mungkin dilakukan pemain.
• Interaksi Sekunder – Aksi yang kemungkinan dilakukan pemain sebagai alternatif dari aksi utama.
• Interaksi Tersier – Aksi yang paling sedikit mungkin dilakukan pemain.

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

Dalam alur kerja ini, aksi yang paling mungkin dilakukan pemain adalah memilih antara dua jenis blaster yang berbeda, jadi tombol blaster jauh lebih besar daripada elemen interaksi lainnya dalam desain. Tingkat penekanan visual ini menarik perhatian pemain, dan menarik perhatian 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 langsung 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 berputar di antara pilihan mereka. Tombol-tombol ini halus dan jauh lebih kecil daripada elemen interaksi utama dan sekunder, tetapi juga dapat terpahami 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 arah yang jelas tentang urutan pilihan yang perlu mereka buat. Untuk alasan ini, selain dari penekanan visual 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 pengalaman Anda sendiri, pertimbangkan yang berikut:

• Pemain perlu memiliki pemahaman yang jelas tentang kapan mereka dapat berinteraksi dengan UI Anda untuk melakukan aksi. Untuk alasan ini, disarankan untuk memberikan setidaknya satu bentuk umpan balik visual untuk elemen UI yang dapat diinteraksi, seperti menampilkan sebuah garis luar atau mengubah ukuran, warna, atau animasi tombol ketika elemen tersebut sedang difokuskan.
• 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 aksi atau proses. Untuk menghindari pengalaman pemain yang negatif, buat label yang jelas, singkat, 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 bisa sulit dibaca atau sulit dipilih, terutama jika mereka berdekatan di perangkat mobile. Untuk alasan ini, penting untuk tinjak kembali ukuran elemen UI interaktif Anda di berbagai ukuran layar.

Dalam Implement di Studio, Anda akan belajar cara menggunakan objek UIAspectRatioConstraint untuk memastikan elemen UI mempertahankan rasio aspek tertentu terlepas dari perangkat apa yang digunakan pemain untuk mengakses pengalaman Anda. Selain memudahkan proses desain Anda, teknik ini juga dapat membantu Anda memenuhi pedoman aksesibilitas konten web Ukuran dan Spasi Target Sentuh untuk menciptakan zona sentuh untuk elemen UI interaktif yang setidaknya 9x9 mm di perangkat mobile.

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 status kesehatan." Menentukan sistem teks lebih awal dalam proses desain Anda memungkinkan Anda memiliki struktur yang dapat Anda terapkan secara konsisten di seluruh pengalaman Anda sehingga pemain tahu apa yang diharapkan saat mereka mencari informasi yang mereka butuhkan.

Sementara sistem teks dapat bervariasi tergantung pada genre pengalaman 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 yang terkait dengan 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 pengalaman Anda.
• Bahasa di mana pemain mungkin membaca teks lokal Anda.
• Latar belakang yang mungkin ada di balik teks di layar.

Sebagai contoh, desain respon layar berikut ketika seorang pemain ter-tag out diubah ke ukuran font yang lebih kecil atau lebih besar sesuai dengan perangkat pemain, memberikan cukup ruang di kedua sisi teks bahasa Inggris untuk bahasa dengan terjemahan yang lebih panjang, dan menyertakan latar belakang yang kontras sehingga pemain dapat membaca teks terlepas dari warna yang ada di latar belakang mereka.

Saat menentukan sistem teks untuk pengalaman Anda sendiri, pertimbangkan yang berikut:

• Teks sulit dibaca ketika menyatu dengan kebisingan latar belakangnya. Untuk meningkatkan keterbacaan UI Anda, tampilkan teks di atas warna yang kontras atau dengan stroke.
• Jika Anda tidak mengubah ukuran teks untuk perangkat yang berbeda, teks tersebut akan terlalu besar atau menjadi kecil dan tidak dapat dibaca di layar pemain. Untuk menangkap ketidaksesuaian di teks Anda, uji desain Anda di berbagai perangkat sepanjang proses desain.
• Kata-kata dapat melampaui desain asli Anda ketika Anda menerjemahkannya ke dalam bahasa lain. Untuk meningkatkan komposisi desain Anda, acu pada ruang maksimal yang dapat diambil teks Anda di layar.
• Meskipun beberapa font dapat cocok dengan estetika pengalaman 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 dari UI Anda, Anda dapat melanjutkan ke bagian berikutnya dari tutorial untuk belajar bagaimana membuat kerangka tata letak dari setiap elemen dalam berbagai alur kerja pemain.