Pilih Gaya Seni

*Konten ini diterjemahkan menggunakan AI (Beta) dan mungkin mengandung kesalahan. Untuk melihat halaman ini dalam bahasa Inggris, klik di sini.

Memilih gaya seni adalah proses merencanakan arah estetik untuk elemen UI Anda. Penting untuk memulai proses desain Anda dengan gaya seni karena gaya seni memberikan aturan tanah visual yang dapat Anda referensikan untuk menjamin UI Anda secara intuitif memberikan informasi pemain tentang apa yang dapat mereka lakukan di pengalaman Anda.

Menggunakan file sample laser tag experience.rbxl sebagai referensi, bagian ini dari kurikulum UI menunjukkan cara membuat keputusan yang berarti tentang cara mendesain elemen UI Anda sesuai dengan genre pengalaman Anda, termasuk panduan tentang:

  • Mengidentifikasi elemen UI yang diperlukan menurut apa yang ingin Anda komunikasikan kepada pemain selama pengalaman Anda.
  • Memilih tema warna yang mengunggulkan praktik warna khusus genre yang mudah dimengerti untuk penonton Anda.
  • Menguraikan simbol sederhana yang mudah dibaca di setiap ukuran layar.
  • Menyiapkan urutan tombol yang cocok dengan kemungkinan alur kerja pemain yang berbeda.
  • Mengidentifikasi sistem teks yang menjamin keserbagunaan di perangkat target.

Setelah Anda menyelesaikan bagian ini, Anda akan belajar cara mendesain 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 fungsional mereka, membuat keputusan semantik berdasarkan

Ada banyak cara berbeda untuk mencari ide UI mana yang diperlukan untuk memenuhi persyaratan gameplay Anda, tetapi disarankan untuk memulai dengan melihat apa yang dibutuhkan pemain saat mereka bergabung dengan pengalaman Anda. Misalnya, ketika seorang pemain membuka pengalaman laser tag sampel, mereka mungkin bertanya-tanya tentang pertanyaan-pertanyaan berikut:

  • Apa tujuan dari pengalaman ini?
  • Bagaimana cara saya tahu siapa yang ada di tim saya?
  • Bagaimana saya melacak poin tim saya?
  • Bagaimana cara memilih blaster?
  • Bagaimana saya tahu di mana laser ditembakkan?
  • Jika saya berada di perangkat seluler, bagaimana cara menembak blaster saya?
  • Setelah saya menembak laser, kapan saya bisa menembak lagi?
  • Bagaimana saya tahu kapan saya memulai putaran?
  • Bagaimana cara saya tahu ketika saya berhasil menandai seseorang dengan blaster saya?
  • Bagaimana cara 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 UI pengalaman laser tag sampel ke tiga kategori:

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

Mengurutkan UI pengalaman Anda ke dalam kategori adalah hal yang membantu karena Anda dapat mengembangkan gaya seni Anda di sekitar setiap grup untuk menyoroti informasi setiap kategori yang perlu diajarkan kepada pemain. Misalnya, jika Anda ingin UI Anda memberi tahu pemain apa tindakan yang dapat mereka lakukan terhadap status kesehatan karakter mereka, Anda mungkin mem

Setelah Anda mengurutkan UI's UI ke dalam kategori, Anda dapat membuat daftar elemen UI yang diperlukan untuk memenuhi persyaratan setiap kategori. Untuk menunjukkan, contoh laser tag experience menggunakan tabel UI berikut untuk menangani daftar pertanyaan potensial pemain sebelumnya. Saat Anda bekerja melalui tutorial ini, kurikulum UI akan terus mengacu pada daftar ini dan menyoroti

KategoriElemen UI
Informasi tentang tujuan pengalaman
  • Tujuan prompt
  • Pelacak poin tim
  • Indikator tim
Informasi tentang blaster
  • Pemilih Blaster
  • Rambut ranting
  • Tanda pukul
  • Meter cooldown
  • Tombol menembak untuk perangkat seluler
Informasi tentang kondisi pemain
  • Tampilkan layar forcefield saat pemain bergabung atau bergabung kembali dengan putaran
  • Respawn layar saat pemain ditandai keluar
  • Indikator saat pemain musuh ditandai keluar

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

Pilih Tema Warna

A tema warna , atau palet warna, adalah pilihan warna yang masing-masing berkomunikasi pesan melalui aplikasi yang 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 mengandalkan prinsip konvensi warna dalam genre pengalaman Anda, k

Dalam Kursus Seni Lingkungan, setiap setengah dari lingkungan tag laser dihasilkan dari pandangan atas ke bawah untuk mengidentifikasi area mana dari peta yang dekat dengan setiap zona bertelur

The door on the mint green side of the map.
Pastel Biru-green
The door on the carnation pink side of the map.
Minyak Merah Muda

Pengalaman laser tag sampel menggunakan tema warna yang sama dalam UI-nya untuk menyoroti informasi yang berkaitan dengan setiap tim, seperti indikator tim masing-masing pemain dalam ruang 3D, atau pemutar poin tim yang menggabungkan lingkungan. Ini konsistensi membantu pemain dapat dengan cepat memahami informasi tentang tujuan pengalaman

Sebuah pratinjau dari tracker poin tim dalam pengalaman sample laser tag.

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 fungsi mereka. Untuk alasan ini, batasi tema warna Anda untuk hanya menyoroti informasi kunci yang ingin pemain asosiasikan dengan elemen UI Anda.
  • Untuk memastikan pemain dengan kesulitan melihat dapat memahami pesan tema warna Anda, jangan selalu mengandalkan warna sendirian untuk membedakan antara elemen UI. Sebaliknya, kombinasikan warna dengan ikon, bentuk, dan/atau animasi untuk memastikan UI Anda berkomunikasi secara efektif dengan setiap pemain.
  • Lebih penting bagi UI Anda untuk menjadi legible daripada menyenangkan secara estetika. Untuk alasan ini, prioritaskan UI sederhana dengan warna yang tetap dibaca di antara elemen cahaya dan gelap di dunia 3D .

Untuk menyoroti panduan dalam poin terakhir, pengalaman tag laser sampel menggunakan warna netral hitam dan putih untuk hampir setiap elemen UI lainnya yang menggabungkan layar 2D. Hitam dan putih kontras satu sama lain dengan baik, dan mereka mudah dibaca sebagai sisa layar menunjukkan lingkungan 3D yang warnanya tidak berubah.

Urutkan Ikon Sederhana

Sebuah ikon adalah simbol yang mewakili action, objek, atau konsep dalam pengalaman. Menyoroti ikon yang sederhana dan intuitif penting karena hasil akhir memungkinkan pemain dengan mudah mengenali apa yang dapat mereka lakukan dan apa yang ingin Anda katakan melalui UI Anda tanpa menggunakan teks, y

Ikon sederhana secara ideal memiliki gaya yang berbeda dari elemen 3D Anda sambil masih menyertain dunia 3D yang lebih luas dari pengalaman Anda. Misalnya, dalam lingkungan final dari Kurikulum Seni Lingkungan, kedua aset 3D modular dan prop memiliki gaya seni yang bersih dan berteknologi tinggi yang menggunakan sud

Untuk menyempurnakan gaya seni ini sambil tetap unik, semua elemen UI yang akan Anda pelajari untuk membuat nanti dalam tutorial ini termasuk sudut pandang futuristik dan sudut pandang bulat tanpa mencocokkan bahasa bentuk 3D di ruang 2D dan lingkungan. Ini menjaga setiap arti ikon berbeda dari informasi lain di ruang 2D dan 3D.

Untuk menunjukkan konsep ini, lihat dua gambar berikut dari pengalaman laser tag sampel yang memberi tahu pemain di mana laser mereka menembak di layar, dan tombol yang memungkinkan pemain untuk menembak laser mereka di perangkat seluler. Kedua ikon ini termasuk sudut keras untuk dibuat bersama-sama dengan dunia pada umumnya, tetapi bentukHexagon dan lingkaran mereka menjadikan mere

Saat menguraikan simbol sederhana untuk pengalaman Anda sendiri, pertimbangkan hal mengikuti:

  • Ikon sederhana mudah dibaca bahkan ketika mereka kecil. Untuk alasan ini, batasi detail pada ikon Anda yang akan menjadi tidak dapat dikenali di layar perangkat seluler.
  • Ikon adalah kuat karena mereka dapat berkomunikasi pesan tidak peduli bahasa pemain. Asalkan itu tidak menyulitkan pemahaman pemain tentang UI Anda, ganti teks yang tidak perlu dengan ikon untuk meningkatkan upaya lokalisasi.
  • Banyak pengalaman dari jenis yang sama menggunakan ikon yang mirip secara estetis, seperti ikon pedang yang mewakili kekuatan, atau cangkir yang mewakili sihir. Peluk simbolisme dalam jenis pengalaman Anda sehingga pemain dapat memahami ikon Anda tanpa bimbingan 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 screenshot dari ratusan game bergenre berbeda yang dapat Anda referensikan selama proses desain Anda.

Tetapkan Pesanan Interaksi

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

Ada tiga jenis interaksi umum dalam workflow:

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

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

Dalam workflow 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 fokus visual ini menangkap perhatian pemain, dan menarik mata mereka ke tengah elemen UI utama. Setelah pem

Sementara tidak mungkin, pemain mungkin tidak tahu bahwa mereka dapat memilih salah satu dari tombol blaster untuk berkomunikasi bahwa blaster mana yang ingin mereka gunakan. Untuk membantu dalam situasi ini, ada dua tombol panah tertiary yang dapat digunakan pemain untuk berkeliling antara pilihan mereka. Tombol-tombol ini halus dan jauh lebih kecil d

Jika Anda menempatkan interaksi utama, sekunder, dan tersier dalam urutan interaksi yang berbeda, seperti bertukar tombol SELECT dengan tombol panah kiri, pemain tidak akan memiliki arah yang jelas dalam urutan pilihan yang mereka butuhkan untuk dibuat. Untuk alasan ini, selain fokus visual tombol, al

Kesuksesan desain ini adalah bahwa itu alami bagi pemain yang akrab dengan kedua bahasa kiri-kanan dan kiri-kanan!

Ketika membuat perintah interaksi untuk workflow Anda sendiri, pertimbangkan hal mengikuti:

  • Pemain perlu memiliki pemahaman yang jelas tentang kapan mereka dapat berinteraksi dengan UI Anda untuk melakukan tindakan. Untuk alasan ini, disarankan untuk menyediakan setidaknya satu bentuk umpan balik visual untuk elemen UI yang dapat diinteraksi, seperti menunjukkan garis atau mengubah ukuran tombol saat fokus berada di atasnya.
  • Jika label pada elemen UI yang dapat diinteraksi kelihatan kabur atau mirip satu sama lain dalam workflow yang sama, pemain dapat salah memahami cara menyelesaikan tindakan atau proses. Untuk menghindari pengalaman pemain negatif, buat label yang hapus, 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 dapat sulit dibaca atau sulit dipilih, terutama jika mereka berada dalam kedekatan di perangkat seluler. Untuk alasan ini, penting untuk meninjau ukuran elemen UI interaktif Anda di berbagai ukuran layar .

Dalam Mengembangkan di Studio , Anda akan belajar cara menggunakan objek UIAspectRatioConstraint untuk menjamin UI elemen mempertahankan aspek tertentu tanpa peduli perangkat pengguna menggunakan untuk mengakses pengalaman Anda. Selain membuat proses desain Anda lebih mudah

Tentukan Sistem Teks

Sebuah sistem teks adalah set aturan tentang huruf dan gaya untuk semua kata dalam UI Anda, seperti "selalu menggunakan judul besar" atau "menggunakan huruf hijau saat menyebutkan statistik kesehatan." Menentukan sistem teks sejak awal proses desain Anda memungkinkan Anda memiliki struktur yang dapat Anda terapkan secara konsisten di seluruh pengalaman Anda sehingga

Sementara sistem teks dapat bervariasi tergantung pada genre atau persyaratan dunia 3D, yang paling penting adalah aturan yang harus diikuti oleh semua sistem teks Anda 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 meningkat

  • Para pemain perangkat dapat menggunakan untuk mengakses pengalaman Anda.
  • Bahasa di mana pemain dapat membaca teks lokalisasi Anda.
  • Latar belakang yang kemungkinan adalah di balik teks layar.

Misalnya, desain respons layar berikutnya saat seorang pemain ditag keluar skala ke ukuran font yang lebih kecil atau lebih besar sesuai dengan ukuran perangkat pemain, termasuk cukup ruang di kedua sisi teks untuk bahasa dengan terjemahan panjang, dan termasuk latar belakang kontras sehingga pemain dapat membaca teks tanpa mengkhawatirkan warna di latar belakang.

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

  • Teks sulit dibaca ketika ia bercampur dengan kebisingan latar belakangnya. Untuk meningkatkan kemudahan bacaan UI Anda, tampilkan teks di atas warna kontras atau dengan serpihan .
  • Jika Anda tidak menyesuaikan teks Anda untuk perangkat yang berbeda, teks akan mengambil terlalu banyak ruang atau menjadi kecil dan tidak dapat dibaca di layar pemain. Untuk menangkap ketidakcocokan dalam desain Anda, tes desain Anda di banyak perangkat sepanjang proses desain.
  • Kata-kata dapat mengekstensi desain asli Anda ketika Anda menyelidikinya ke bahasa lain. Untuk meningkatkan komposisi desain Anda, 引用 sebagian besar ruang yang dapat ditempatkan teks Anda di layar .
  • Sementara beberapa huruf dapat menyesuaikan estetika pengalaman Anda, mereka mungkin sulit dibaca dalam jumlah besar. Untuk alasan ini, gunakan teks berkilauan dengan hati-hati , seperti untuk judul atau teks pesan.

Setelah Anda memiliki rencana untuk gaya seni UI Anda, Anda dapat pindah ke bagian berikutnya dari tutorial untuk belajar cara menyetel tata letak setiap elemen dalam berbagai workflow pemain.