Desain UI dan UX

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


antarmuka pengguna (UI) menggabungkan desain visual artistik dengan desain informasi pusat komunikasi untuk menghasilkan menu, tata letak game, dan tampilan kepala (HUD) dan UI lainnya yang dimana pemain berinteraksi dengan. UI dan U

Antarmuka Pengguna

Antarmuka berbagi informasi penting seperti poin hit, tujuan pencarian, dan harga yang memungkinkan pemain untuk membuat keputusan dan menavigasi permainan. Karena sering merupakan cara utama bagi game untuk berkomunikasi dengan pemain, UI sangat penting bagi pengalaman pemain. UI yang buruk dapat meninggalkan pemain bingung dan frustrasi, dan dapat menyebabkan retensi yang bur

  • Prioritasi
  • Perhatian
  • Bahasa Visual
  • Konvensi
  • Konsistensi

Prioritasi

Berbagi informasi yang paling penting pertama adalah Hierarki Informasi . Ini sangat penting dalam game di mana pemain sering membuat keputusan instan berdasarkan set terbatas informasi. Saat men prioritaskan UI, identifikasi apa yang penting atau paling relevan dengan pengalaman pemain dan pastikan itu mudah ditemukan dan dapat diakses. Pertimbangkan pertanyaan-pertanyaan ini:

  • Apa yang dilakukan pemain saat ini?
  • Apa hal yang paling penting bagi mereka untuk menyadari, atau memiliki akses ke?
  • Apa pilihan yang mereka miliki untuk dibuat?
  • Apa informasi yang mereka butuhkan untuk membuat pilihan itu?
  • Berapa sering mereka akan terlibat dalam pilihan itu?

Informasi dan fitur penting berubah selama kursus permainan, tergantung pada faktor seperti peran yang dimainkan, lokasi mereka di dunia game, dan item yang mereka pegang. UI dapat dirancang untuk menyajikan hanya apa yang penting secara kontekstual – beralih tombol dan informasi tergantung pada apa yang berguna dalam setiap konteks. Ini memastikan bahwa pemain selalu memiliki apa yang mereka butuhkan

Contoh

Elemen yang tidak relevan dapat menyebabkan kebingungan dan distraksi. RPG yang dibalik nama RPG memiliki UI yang bersih dan minimalis yang sangat penting untuk interaksi mobile, karena layar kecil dapat dengan mudah terbenga-benga dengan tombol, layar, dan teks yang berlebihan.

A close up view of an unselected circular Items button with a brown book icon. The environment in the background is a brown dirt with a patch of snow.
Item sebelum pemilihan di Spellbound RPG >
A close up view of a selected circular Items button with a brown book icon, along with three additional buttons for skills, equipment, and the players deck. The additional buttons only display when the button is selected.
Item setelah pemilihan di Spellbound RPG >

Dalam Super Striker League, interaksi pemain bervariasi tergantung pada apakah mereka mengendalikan bola. Tanpa bola, pemain dapat Sprint dan Tackle untuk mengambil kembali kendali. Setelah memiliki bola, tombol beralih ke Deke dan Pass, memungkinkan pemain untuk menghindari lawan dan melewati bola. Dengan mengubah tombol ini, UI

Tombol konteks di Super Striker League
Tombol konteks di Super Striker League

Dalam The Survival Game, pemain harus menyadari status kesehatan dan kelaparan mereka, dan memiliki akses cepat ke peta mereka, inventaris, dan alat. Informasi ini memungkinkan mereka untuk membuat keputusan dan men prioritaskan tindakan untuk bertahan. Jika informasi ini atau alat tidak mudah ditemukan atau hilang, keputusan bertahan menjadi lebih sulit dan tidak memuaskan.

Fitur HUD dalam The Survival Game >

Perhatian

Meskipun UI minimalis, prioritized, dan konteksualisasi, pemain mungkin masih memerlukan bantuan untuk menemukan apa yang mereka butuhkan. Desainer UI dapat menggunakan beberapa alat visual untuk menangkap dan membimbing perhatian pemain, seperti:

  • Warna: Warna cerah menarik perhatian lebih dari yang membosankan. Gunakan warna cerah untuk menonjolkan teks penting, tombol, dan elemen lainnya, dan tonjolkan warna untuk menurunkan perhatian yang kurang signifikan. Ini meningkatkan kesan terlihat dan mengurangi distraksi.
  • Ukuran: Elemen yang lebih besar lebih terlihat dan dianggap lebih penting dibandingkan dengan yang lebih kecil.
  • Ruang: Elemen yang dikelilingi oleh ruang negatif yang luas atau pengurangan mata menarik.
  • Kedekatan: Elemen yang dikumpulkan menyiratkan koneksi. Dengan menempatkan elemen terkait dan item di dekat satu sama lain, pemain dapat memahami asosiasi mereka dan menemukan mereka lebih mudah.
  • Gerakan: Elemen bergerak menarik perhatian. Bahkan gerakan ringan dapat membuat elemen terlihat di antara counterpart statis. Efek partikel, geser tombol, dan panah bergerak dapat sering digunakan dalam tutorial untuk menunjukkan.

Moderasi adalah kunci dengan alat-alat ini. Penggunaan berlebihan dari elemen terang dan bergerak dapat menghantam dan menyulitkan pemain daripada membantu mereka.

Contoh

Di Jailbreak > UI musim berlalu, sebuah garis emas kuning berbaris di bawah ikon musim berlalu eksklusif, menarik perhatian ke hadiah premium dan membuat mereka terlihat secara visual dari yang gratis.

UI tiket musim di Jailbreak

Dalam Petualangan Naga, > prioritas visual diberikan ke paket koin tertinggi dengan meningkatkan ukurannya dan menghapusnya dengan lebih banyak pemadatan, untuk membedakannya dari paket koin yang lebih kecil.

Kumpulan koin di Petualangan Naga

Dalam Tower Defense Simulator , kedua ukuran dan kedekatan digunakan untuk secara visual menggrup dan membedakan Kulit Menara Harian dari Peti Harian.

Toko di Tower Defense Simulator ”

Bahasa visual

Selain menarik perhatian pemain ke elemen paling penting di layar, desainer UI mengembangkan bahasa visual untuk membantu pemain memahami apa yang mereka lihat. Bahasa visual adalah set pilihan desain yang tujuannya, status, asosiasi, dan relevansi. Bahasa dibangun dari alat seperti bentuk, warna, dan gaya. Beberapa contoh penggunaan untuk bahasa visual termasuk:

Ikon.

Ikon dapat menggunakan identitas visual yang mengkomunikasikan makna dan asosiasi. kejadian, ikon terkait dengan statistik spesifik dapat berbagi palet warna dan bentuk serupa, memungkinkan pemain untuk mengenali dan memahami fungsinya.

Statistik Pemain di Angin Keberuntungan >

Tombol-tombol.

Sebagai bentuk input pemain yang umum, tombol harus mudah untuk diidentifikasi. Housing tombol di wadah, seperti warna mengelilingi teks atau ikon, menghasilkan mereka dari latar belakang, menjadikannya tampak interaktif. Menambahkan sorotan atau bayangan dapat meningkatkan daya sentuh mereka dengan menyarankan kedalaman 3D.

Tombol dalam BotClash Simulator

Teks

Headers dan judul yang berisi informasi tingkat tinggi yang signifikan harus lebih besar dan lebih kuat daripada teks tubuh. Warna yang sangat legible dan kontras dengan warna latar belakang mereka akan ditampilkan dengan baik harus dipertimbangkan. Pilihan gaya seperti warna dan bolding dapat menyoroti informasi penting seperti item dalam game, statistik, atau kemampuan. Selalu prioritaskan kesanggupan saat memilih huruf.

Toko Pakaian di Angin Keberuntungan

Setelah bahasa visual telah dirancang, itu dapat disajikan dalam sebuah Panduan Gaya, set dari aturan dan contoh yang membantu semua orang di tim memahami cara menerapkan bahasa secara konsisten di seluruh game.

Konvensi

Konvensi umumnya pilihan desain yang diterapkan yang dilihat di banyak permainan yang berbeda. Beberapa contoh termasuk:

  • Simbol X di sebuah tombol yang menutup dialog saat ditekan
  • Warna abu-abu diterapkan ke tombol yang saat ini tidak dapat digunakan
  • Sebuah ikon kunci mengambil alih tombol atau fitur untuk menunjukkan bahwa pemain belum mendapatkannya atau belum membuka kunci

Mengingat penggunaan mereka yang luas, pemain biasanya akrab dengan konvensi tersebut. Menggunakan kesadaran ini dapat membuat antarmuka lebih intuitif dan mengurangi kebutuhan arahan khusus game. Bermain game dalam genre target Anda dapat membantu mengidentifikasi konvensi yang dikenal pemain. Seorang desainer UI mungkin memilih pendekatan yang unik untuk memenuhi proses keputusan mereka, t

X Tutup Tombol di Winds of Fortune , Petualangan Naga , BotClash Simulator , dan
2> DOORS2>

Konsistensi statistik "Kesehatan" hijau di Arcane Odyssey

Konsistensi

Apa pun keputusan yang dibuat oleh desainer UI, mereka harus diterapkan secara konsisten di seluruh game. Konsistensi membantu pemain belajar untuk menavigasi permainan lebih efisien dan mencegah kebingungan dan kekecewaan.

Berikut adalah beberapa contoh UI konsistensi dalam game:

  • Statistik "Kesehatan" muncul dalam hijau di semua teks, ikon terkait, dan bar kesehatan.
  • Dialog NPC apa pun yang menyebutkan item dalam game, ditampilkan dalam huruf besar.
  • Tombol tertutup selalu berwarna merah dan berisi X putih, muncul hanya di sudut kanan atas dari dialog.
  • Setiap kali seorang pemain tidak dapat membeli item di belanja, harga ditampilkan dalam merah.

Pilihan ini disengaja, bertujuan untuk memudahkan pemahaman dan navigasi pemain. Dengan menerapkannya secara konsisten, pemain dapat menghubungkan elemen terkait, mengidentifikasi item penting, mengembangkan kenangatan otot, membuat keputusan yang cepat, dan menghabiskan lebih banyak waktu game.

UX

Desain UX terkait cara pemain berinteraksi dengan game, cara mereka membuat pilihan mereka dikenal kepada game, dan cara mereka bergerak dari satu pilihan ke pilihan berikutnya. Meskipun UX sering bekerja tangan-dalam-tangan dengan antarmuka pengguna (UI), lebih fokus pada interaktivitas dan pengalaman pemain daripada desain visual dan informatif UI.

Memahami Pemain

Tujuan utama desainer UX adalah untuk membuat interaksi dan aliran yang intuitif, tidak mengganggu dan mudah bagi pemain untuk digunakan. Proses ini dimulai dengan pemahaman pemain itu sendiri, audiens yang dimaksud untuk game. Saat mengidentifikasi pemain pengalaman, pertimbangkan hal mengikuti:

  • Demografi: Demografi membantu menginformasikan pilihan desain dengan menyajikan informasi umum tentang gruppemain. Misalnya, pemain yang lebih muda kemungkinan besar bermain di perangkat seluler atau tablet daripada komputer pribadi, jadi permainan yang dimaksudkan untuk audiens tersebut biasanya memrioritaskan desain dan polishing pengalaman pengguna seluler.

  • Tingkat Pengalaman Pengguna: Pengembang dapat memilih untuk mendesain untuk pengguna dengan sedikit pengalaman bermain, jumlah yang signifikan, atau di suatu tempat di antara. Interaksi yang dikenal pengguna berpengalaman, seperti mengetik kunci nomor untuk meng装备 item di bilah alat, atau menekan c untuk mencrouch, mungkin tidak jelas bagi pengguna yang tidak

  • Kesamaan Genre: Sama dengan levelpengalaman umum, kesamaan genre mencerminkan tingkat pengalaman pemain dengan jenis permainan tertentu. Game yang jatuh ke dalam genre populer di Roblox, seperti Roleplay, Survival Horror, dan First-Person Shooter, kemungkinan memiliki banyak pemain yang telah bermain game serupa sebel

  • Gaya Bermain: Pemain sering menyukai jenis permainan tertentu, termasuk kompetisi dan pengumpulan kesuksesan, eksplorasi, dan koperasi. Preferensi ini tidak hanya mencerminkan preferensi mekanik pemain tetapi juga memengaruhi keputusan UX. Desainer mengambil ke dalam pertimbangan pengalaman pemain saat mereka berinter

Setelah mempertimbangkan faktor-faktor ini dan memilih kelompok pemain target (atau kelompok), dapatkan tahu tentang mereka dengan bertemu dengan mereka, bermain dengan mereka, dan belajar tentang preferensi dan tujuan mereka untuk memberi tahu pilihan desain lebih baik.

Mendesain Interaksi

Interaksi adalah fitur yang memungkinkan pemain untuk mengalami dan berkomunikasi pilihan mereka dalam game. Desainer UX ingin interaksi ini menjadi intuitif, dan memerlukan penjelasan se sedikit mungkin. Untuk melakukan ini mereka menggunakan:

  • Konvensi
  • Metafors
  • Umpan Balik

Konvensi

Konvensi adalah desain dan prinsip UX yang pemain mungkin sudah familiar dari game lain.

"E" pengingat dekat di Mermaid Life Mermaid Life
Mermaid Life Mermaid Life Mermaid Life Mermaid Life Mermaid Life Mermaid Life Mermaid Life Mermaid Life Mermaid Life Mermaid Life Mermaid Life Mermaid Life

Contoh konvensi termasuk:

  • Prompt kedekatan "E" yang digunakan oleh pengembang Roblox untuk menunjukkan kepada pemain bahwa item dapat berinteraksi jika mereka berdiri cukup dekat untuk tampaknya.
  • Tombol "C" yang memungkinkan avatar pemain untuk menggulung sehingga mereka dapat berduck di bawah hambatan atau masuk ke ruang yang ketat.
  • Jumlah tombol yang memasang item dari bar alat ke tangan avatar sehingga mereka dapat digunakan.
  • Berjalan ke lingkaran di tanah untuk menunggu mencocokkan.

Konvensi menjadi terbentuk ketika implementasi atau pilihan desain tertentu tumbuh dalam popularitas karena kemudahan penggunaannya. "C" untuk mendekat, misalnya, mudah diingat karena menjadi huruf pertama dalam kata mendekat, dan ditempatkan secara mudah dekat dengan WASD, tombol yang digunakan pemain untuk menavigasi. Ini

Metaforsiruang

Metaphors mengaitkan konsep abstrak ke konsep yang lebih terkenal, menciptakan jalan pintas untuk memahami. Dalam contoh ini dari Spellbound Wizard RPG, aktivitas meletakkan mantra sihir dilakukan dengan menarik kartu dari dek. UI/UX berbasis kartu menggunturkan aktivitas meletakkan mantra sihir, yang tidak memil

Casting sihir sebagai kartu di RPG Spellbound RPG

Umpan Balik

Komunikasi dari game ke pemain dikenal sebagai umpan balik. Umpan balik membantu pemain memahami bahwa tindakan yang mereka ambil telah memiliki efek dalam game. Ini dapat berkontribusi pada belajar cara game berfungsi dan menambahkan lapisan polish ekstra yang membuat fitur lebih memuaskan untuk digunakan. Beberapa contoh umpan balik termasuk:

  • Seorang musuh bermain animasi "ketuk" untuk menunjukkan bahwa ia telah mengambil kerusakan dari senjata pemain
  • Tombol yang mengubah warna untuk menunjukkan status geser, ditekan, dan dilepaskan (ditentukan)
  • Efek suara kasir "cha-ching!" bermain saat pemain menyelesaikan pembelian
  • Sebuah bar kemajuan mengisi saat pemain menyelesaikan tujuan pencarian

Ketika umpan balik hilang atau tidak mencukupi, pemain mungkin tidak tahu apa yang telah mereka capai, mengerti apakah efeknya baik atau buruk, atau bahkan tahu apakah fitur yang mereka gunakan berfungsi dengan benar atau mengalami bug.

Mendesain Aliran

Banyak interaksi sering dibutuhkan oleh pemain untuk menyelesaikan tujuan. Desainer UX peduli tentang bagaimana pemain beralih dari satu tindakan atau layar UI atau pilihan ke tahap berikutnya dan memastikan bahwa jalan ini logis dan mudah.

Misalnya, untuk melengkapi item di avatar di Berry Avenue RP, seorang pemain harus:

  • Temukan dan klik tombol Avatar
  • Pilih kategori item (wajah, kepala, leher, dll)
  • Gulir untuk menemukan item yang menarik
  • Ketuk item untuk melengkapinya di avatar mereka
  • Temukan dan klik tombol Selesai untuk keluar dari kustomisasi avatar

Alur pengaturan avatar dalam Berry Avenue RP ”

Langkah-langkah ini diambil bersama-sama mewakili aliran kustomisasi avatar. Aliran ini sederhana dan mudah, dengan asumsi sebanyak mungkin langkah perlu dilakukan untuk melengkapi item. Karena pemain tidak perlu melakukan banyak tindakan atau berpikir terlalu banyak tentang apa yang perlu mereka lakukan, aliran ini rendah dalam friksiョン, pengukuran upaya yang d

Mendesain aliran yang efisien dan rendah friksi memerlukan pertimbangan yang hati-hati tentang kasus pengguna. Kasus pengguna dapat diungkapkan sebagai tujuan pengguna seperti:

  • Menginginkan dapat dengan cepat mengubah avatar
  • Menemukan item dengan mudah saat diubah
  • Mengpratinjau item sebelum memilih
  • Mudah menghapus item setelah pemilihan

Target ini kemudian membimbing desain UI dan UX fitur:

  • Pemain mengakses fitur kustomisasi avatar melalui tombol prominen di HUD, dan dapat segera memulai menggunakan item untuk avatar mereka
  • Tab menyortir item ke dalam kategori yang mudah, dan lapangan pencarian memungkinkan pemain untuk mencari item secara langsung
  • Item ditampilkan secara instan di avatar
  • Pemain dapat menghapus item dengan mengetuknya lagi untuk menghapus, atau mengetuknya di daftar item yang dilengkapi

Pengguna dapat kemudian mulai mengatur UI dan merencanakan langkah yang pemain akan ambil untuk menyelesaikan tahap pengubahan avatar mereka. Proses ini dapat dipercepat dengan menggunakan aliran grafis, yang secara visual menunjukkan tindakan pemain saat mereka menavigasi UI. Diagram ini dapat membantu mengidentifikasi langkah yang terlewatkan, tit

Contoh dari flow chart.