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

Menggunakan file tag laser sampel pengalaman.rbxl sebagai referensi, bagian ini dari kurikulum antarmuka pengguna menunjukkan cara membuat keputusan berarti tentang cara 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 selama pengalaman Anda.
• Memilih tema warna yang memperkuat konvensi warna khusus genre yang intuitif untuk audiens Anda.
• Menggambarkan ikon sederhana yang mudah didekode pada ukuran layar apa pun.
• Menyiapkan urutan tombol yang sesuai dengan kemungkinan workflow pemain yang berbeda.
• Menentukan sistem teks yang memastikan legibilitas pada perangkat target.

Setelah Anda menyelesaikan bagian ini, Anda akan belajar cara merancang struktur dan aliran 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 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 fungsionalnya, 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 pengalaman Anda.

Ada banyak cara berbeda untuk melakukan brainstorming elemen UI mana yang diperlukan untuk persyaratan permainan Anda, tetapi disarankan untuk memulai dengan membayangkan apa yang dibutuhkan pemain saat mereka bergabung dengan pengalaman Anda.Sebagai contoh, ketika seorang pemain membuka pengalaman tag laser sampel, mereka mungkin bertanya pada diri sendiri pertanyaan berikut:

• Apa tujuan pengalaman?
• 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 menembak laser?
• Jika saya berada di perangkat seluler, bagaimana saya menembak blaster saya?
• Setelah saya menembak laser, kapan saya bisa menembak lagi?
• Bagaimana saya tahu kapan saya memulai ronde?
• Bagaimana saya tahu ketika 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 menjadi sukses, Anda dapat mengurutkan kebutuhan UI tag laser sampel ke dalam tiga kategori:

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

Mengatur kebutuhan UI pengalaman Anda ke dalam kategori berguna karena Anda dapat merumuskan gaya seni Anda di sekitar setiap kelompok untuk memperkuat informasi yang dibutuhkan setiap kategori untuk mengajarkan pemain.Sebagai contoh, jika Anda ingin UI memberi tahu pemain tentang tindakan apa yang dapat mereka ambil terkait status kesehatan karakter mereka, Anda mungkin memilih gaya seni dengan elemen UI yang menyediakan warna hijau dan/atau ikon plus sehingga pemain dapat dengan cepat mengenali fungsi mereka.

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

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

Pilih tema warna

Sebuah tema warna atau palet warna adalah pilihan warna yang masing-masing berkomunikasi pesan melalui aplikasi konsisten dalam pengalaman Anda, seperti menggunakan warna cerah untuk menunjukkan kapan sesuatu dapat dipilih.Menerapkan tema warna ke elemen UI Anda penting, terutama ketika Anda bergantung pada konvensi warna dalam genre pengalaman Anda, karena memungkinkan pemain untuk dengan cepat memahami UI Anda dengan usaha minimal.

Dalam Kurikulum Seni Lingkungan, setiap setengah dari lingkungan tag laser diberi warna dari pandangan atas ke bawah untuk membedakan area peta mana yang berada dekat 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 spesifik ini berguna karena mereka komplementer , artinya mereka saling kontras dengan baik, dan memungkinkan pemain untuk dengan mudah memindai lingkungan mereka dan mengarahkan diri mereka sendiri terlepas dari arah mana mereka menghadap di membangun kota.

Pengalaman tag laser sampel menggunakan tema warna yang sama ini di UI untuk menyoroti informasi yang berkaitan dengan setiap tim, seperti indikator tim masing-masing pemain dalam ruang 3D, atau pelacak titik tim yang melapisi layar.Konsistensi ini membantu pemain untuk dapat dengan cepat memahami informasi tentang tujuan pengalaman selama permainan berkecepatan tinggi dari pengalaman penembak orang pertama, terutama karena pemain perlu membuat keputusan cepat saat melintasi lingkungan.

Saat memilih tema warna untuk pengalaman Anda sendiri, pertimbangkan hal mengikuti:

• 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 pemain hubungkan dengan elemen UI Anda.
• Untuk memastikan pemain dengan ketakbisaan warna dapat memahami pesan tema warna Anda, jangan selalu bergantung pada warna saja untuk membedakan antara elemen UI.Sebagai gantinya, gabungkan warna dengan ikon, bentuk, dan/atau animasi untuk memastikan UI Anda berkomunikasi secara efektif dengan setiap pemain.
• Lebih penting agar UI Anda dapat dibaca daripada menyenangkan secara estetika.Untuk alasan ini, prioritaskan UI sederhana dengan warna yang tetap dapat dibaca di atas elemen ringan dan gelap di dunia 3D.

Untuk menyoroti panduan di poin terakhir, pengalaman tag laser sampel menggunakan warna netral hitam dan putih untuk hampir setiap elemen UI lain yang melapisi layar 2D.Hitam dan putih kontras satu sama lain dengan baik, dan mereka mudah dibaca karena sisa layar menampilkan lingkungan 3D berwarna lainnya.

Garis panduan ikon sederhana

Sebuah ikon adalah simbol yang mewakili action, objek, atau konsep dalam pengalaman .Menggambarkan ikon yang sederhana dan intuitif penting karena hasil akhir 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 mengganggu layar dan menarik perhatian dari konten yang penting.Proses ini bahkan lebih penting jika audiens Anda mengakses pengalaman Anda menggunakan layar kecil di perangkat seluler.

Simbol sederhana idealnya memiliki gaya yang berbeda dari elemen 3D Anda sambil tetap menyenangkan seluruh dunia pengalaman Anda.Sebagai contoh, di lingkungan terakhir dari Kurikulum Seni Lingkungan, baik aset modular maupun prop 3D memiliki gaya seni bersih dan berteknologi tinggi yang menggunakan bentuk persegi dengan sudut lembut dan bulat.Dari panel bergerigi di sepanjang lantai ke jendela bulat dekat di langit-langit, tidak ada yang termasuk tepi tajam.

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

Untuk menunjukkan konsep ini, lihat dua gambar berikut dari pengalaman tag laser sampel crosshair yang memberi tahu pemain di mana blaster mereka menembak di layar, dan tombol yang memungkinkan pemain menembak blaster mereka di perangkat seluler.Kedua ikon termasuk sudut lembut untuk menjadi kohesif dengan dunia secara keseluruhan, tetapi bentuk segi enam dan lingkaran mereka memisahkan mereka dari apa pun yang bisa dihubungkan pemain dengan ikon dalam pengalaman.

Saat merancang ikon sederhana untuk pengalaman Anda sendiri, pertimbangkan hal mengikuti:

• Ikon sederhana dapat dibaca bahkan ketika mereka kecil.Untuk alasan ini, batasi rincian pada ikon Anda yang akan menjadi tidak dapat dikenali di layar perangkat seluler.
• Ikon kuat karena mereka dapat mengkomunikasikan pesan tidak peduli bahasa pemain.Selama itu tidak memengaruhi pemahaman pemain tentang UI Anda, ganti teks yang tidak perlu dengan ikon untuk meningkatkan upaya lokalisasi.
• Banyak pengalaman genre yang sama menggunakan ikon yang secara estetika mirip, seperti ikon pedang yang mewakili kekuatan, atau beaker yang mewakili sihir. Angkat simbolisme dalam genre pengalamanmu sehingga pemain dapat memahami ikonmu 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 termasuk tangkapan layar dari ratusan game genre yang berbeda yang dapat Anda referensikan selama proses desain Anda.

Tetapkan urutan interaksi

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

Biasanya ada tiga jenis interaksi dalam alur kerja:

• Interaksi Utama – Tindakan yang paling mungkin dilakukan pemain.
• Interaksi Sekunder – Tindakan yang dilakukan pemain kemungkinan akan dilakukan sebagai alternatif actionutama.
• Interaksi Tertiary – Tindakan yang paling tidak mungkin dilakukan pemain.

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

Dalam alur kerja ini, tindakan yang paling mungkin dilakukan pemain adalah memilih di antara dua jenis blaster yang berbeda, sehingga tombol blaster jauh lebih besar dari elemen interaktif lainnya dalam desain.Tingkat fokus visual ini menangkap perhatian pemain, dan menarik mata mereka ke tengah elemen UI keseluruhan.Setelah pemain membuat keputusan, langkah logis berikutnya dalam alur kerja adalah untuk mengkonfirmasi pilihan mereka dan memulai ronde.Untuk alasan ini, tombol SELECT berada langsung di bawah interaksi utama.

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

Jika Anda menempatkan interaksi utama, sekunder, dan tertiary ini dalam urutan interaksi yang berbeda, seperti menukar tombol SELECT dengan tombol panah kiri, pemain tidak akan memiliki arah yang jelas tentang urutan pilihan yang perlu mereka buat.Untuk alasan ini, selain dari fokus visual dari perintah tombol, alur kerja yang efektif mengikuti hierarki visual yang memandu pemain melalui urutan keputusan ideal Anda sesuai dengan arah yang kemungkinan mereka akan memindai informasi, seperti top-down dan kiri ke kanan.

Saat menetapkan urutan interaksi untuk alur kerja dalam pengalaman Anda sendiri, pertimbangkan hal mengikuti:

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

Di Terapkan di Studio , Anda akan belajar cara menggunakan objek UIAspectRatioConstraint untuk memastikan elemen UI mempertahankan rasio aspek tertentu tidak peduli perangkat apa yang digunakan pemain untuk mengakses pengalaman Anda.Selain membuat proses desain Anda lebih mudah, teknik ini juga dapat membantu Anda memenuhi rekomendasi Ukuran dan Jarak Target Touch dari Pedoman Aksesibilitas Konten Web untuk membuat zona sentuhan untuk elemen UI interaktif yang setidaknya 9x9 mm di perangkat seluler.

Tentukan sistem teks

Sistem teks adalah kumpulan aturan tentang huruf dan gaya untuk semua kata di UI Anda, seperti "selalu judul tebal" atau "gunakan huruf hijau saat merujuk pada statistik kesehatan." Menentukan sistem teks sejak awal dalam proses desain Anda memungkinkan Anda untuk memiliki struktur yang dapat Anda terapkan secara konsisten selama 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 paling penting yang harus diikuti semua sistem teks adalah untuk 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:

• Pemain perangkat yang dapat digunakan untuk mengakses pengalaman Anda.
• Bahasa di mana pemain dapat membaca teks lokal Anda.
• Latar belakang latar belakang yang mungkin di balik teks di layar.

Sebagai contoh, desain respons layar berikut ketika pemain ditagih keluar skala ke ukuran font yang lebih kecil atau lebih besar sesuai dengan perangkat pemain, termasuk cukup ruang di kedua sisi teks bahasa dengan terjemahan lebih lama, dan termasuk latar belakang kontras sehingga pemain dapat membaca teks tidak peduli warna latar belakang mereka.

Saat menentukan sistem teks untuk pengalaman Anda sendiri, pertimbangkan hal mengikuti:

• Teks sulit dibaca ketika bercampur dengan kebisingan latar belakangnya.Untuk meningkatkan legibilitas UI Anda, tampilkan teks di atas warna kontras atau dengan garis .
• Jika Anda tidak memperbesar teks untuk perangkat yang berbeda, teks akan mengambil terlalu banyak ruang atau menjadi kecil dan tidak dapat dibaca di layar pemain.Untuk menangkap ketidakcocokan dalam teks Anda, uji desain Anda di beberapa perangkat sepanjang proses desain.
• Kata-kata dapat diperpanjang melampaui desain asli Anda saat Anda mengubahnya ke bahasa lain.Untuk meningkatkan komposisi desain Anda, referensikan sebagian besar ruang yang dapat ditangani teks Anda di layar .
• Sementara beberapa font dapat memenuhi estetika pengalaman Anda, mereka mungkin sulit dibaca dalam jumlah besar.Untuk alasan ini, gunakan teks berstil dengan hemat , seperti untuk judul atau teks peringatan.

Setelah Anda memiliki rencana untuk gaya seni UI Anda, Anda dapat beralih ke bagian berikutnya dari tutorial untuk mempelajari cara merancang tata letak setiap elemen dalam berbagai alur kerja pemain.