Antarmuka 101: Membuatnya Cantik

23

Saya telah membuat beberapa game yang sebenarnya telah saya lepaskan ke alam liar. Ada satu masalah khusus yang sering saya temui, dan itulah masalah antarmuka / tema permainan.

Bagaimana Anda bisa membuat keputusan yang konsisten dan tidak arbitrer tentang tampilan dan nuansa game Anda?

Misalnya, dalam versi salah satu game berbasis kimia Silverlight saya, saya membuat (buruk?) Keputusan untuk pergi dengan tampilan dan nuansa alami, gaya lansekap, yang menghasilkan UI ini:

Valensi 0,1, penuh dengan rumput, batu, dan langit.

Kemudian dalam iterasi selanjutnya, saya menjadi lebih pintar dan pergi dengan tampilan dan rasa yang lebih "mesin," kumuh, yang menghasilkan ini (UI akhir):

Versi final Valence terlihat lebih seperti mesin dan kasar

Saya pasti akan mengatakan bahwa selera saya di UI meningkat melalui iterasi. Tapi itu adalah hasil dari banyak keputusan semula yang sewenang-wenang diikuti oleh banyak penyesuaian.

Apakah ada cara yang lebih baik untuk mencari tahu bagaimana tema permainan Anda?


Untuk memberikan paralel dalam penulisan, saat Anda menulis novel fantasi / fiksi ilmiah, ada banyak elemen yang perlu Anda gambarkan. Meskipun Anda dapat secara sewenang-wenang menciptakan benda / makhluk / tempat / dll, Anda mendapatkan dunia yang jauh lebih konsisten ketika Anda duduk selama beberapa menit dan merancang area, wilayah, planet, atau alam semesta. Semuanya kemudian cocok bersama dengan baik, dan Anda dapat bertanya pada diri sendiri "bagaimana ini akan bekerja di alam semesta ini?

Sunting: Sepertinya saya tidak menjelaskan ini dengan baik. Biarkan saya menyederhanakan pertanyaan secara ekstrim: ketika saya perlu meletakkan layar judul (dengan latar belakang, font, tombol dikuliti) bagaimana saya memutuskan bagaimana mereka harus terlihat? Hijau atau biru? Grunge atau tidak? Bulat atau rata? Serif atau sans-serif?

Ambil pertanyaan itu dan ledakkan ke dalam gim Anda secara keseluruhan. Bagaimana Anda mengetahui bagaimana hal-hal seharusnya terlihat? Proses apa yang Anda gunakan untuk membuatnya konsisten dan tidak arbitrer?

Lihatlah screenshot lagi. Saya bisa saja menempel di rumput / langit / batu, tetapi logam tampaknya lebih cocok dengan gagasan reaksi kimia dan atom.

ashes999
sumber
Saya ingin mengklarifikasi bahwa pertanyaan ini tidak spesifik untuk format atau game atau platform (kecuali mungkin game 2D); itu generik untuk semua gim yang Anda buat.
ashes999
8
Pertama, hasil edit Anda terjadi tiga menit setelah komentar saya. Kedua, Anda masih bertanya, "Bagaimana cara menumbuhkan selera desain yang baik?" Ada banyak buku, seluruh program gelar, dan ya, bahkan ux.stackexchange.com yang dapat membantu Anda melakukannya - tetapi bahkan selusin paragraf jawaban di sini bahkan tidak akan membantu Anda memulai.
1
"Dalam mode ini! Dalam mode ini, Anda harus ..."
Daniel Pendergast
1
@Nevermind: Kecuali ada seluruh UXSE yang ditujukan untuk hal-hal seperti itu.
5
UI! = Desain Grafis. Kedua contoh Anda di atas memiliki UI yang sama dengan tema grafis yang berbeda.
DampeS8N

Jawaban:

15

Anda tampaknya memiliki gaya yang saling bertentangan.

Lihatlah UI-UI ini dari Peggle, Ultima Underworld, Diablo 3, Starcraft 2, dan Gran Turismo 5.

Perhatikan bagaimana setiap UI konsisten dalam temanya .

Peggle

Peggle seperti pin-ball di semua elemen UI-nya. Semuanya meter, tuas, nozzle, loncatan.

Dunia Ultima

Ultima Underworld memiliki elemen UI yaitu besi / baja, ramuan, ransel, peta. Waktu berpetualang.

Diablo III

Mirip dengan Dunia Bawah Ultima (sebenarnya tampaknya didasarkan pada UW)

Starcraft 2

Futuristik, ramping, sederhana, minimal (protos)

Gran Turismo 5

Interior mobil

Jadi Anda lihat, desain pertama Anda benar-benar tidak konsisten dan tidak cacat. Apa hubungan bidang terbuka dengan permainan Anda? Hal yang sama berlaku untuk latar belakang logam. Cobalah bangku lab untuk papan permainan, dan latar belakang lab kimia, dengan labu dan botol dan sarung tangan karet dan cawan petri.

Dr Mario

Mario pada dasarnya adalah medis, bakteri, virus, dan obat-obatan

Lebih jauh UI harus memiliki gaya grafis yang mirip dengan elemen permainan . Bola simbol kimia berwarna solid dan bulat. Papan latar / permainan yang Anda pilih memiliki gaya seni yang sepenuhnya berbeda dengan elemen gameplay. Field adalah foto yang jelas. Logamnya sangat detail, sedangkan bola-bola kimianya halus dan relatif tidak terperinci.

bobobobo
sumber
8

Satu hal yang mulai saya sadari sangat penting: penggunaan kontras yang tepat.

Lihatlah gambar pertama itu. Sangat kontras di semua tempat! Langit cerah, cakrawala gelap, lalu rumput jauh cerah, lalu dasarnya gelap. Latar belakang ubin sangat bervariasi antara sangat terang dan sangat gelap. Semua ini adalah non-informasi. Kekacauan visual. Bagian-bagian penting yang sebenarnya - lingkaran - ditenggelamkan oleh semua perubahan kontras.

Sekarang lihat gambar kedua. Latar belakangnya gelap dan relatif monoton. Ada batas terang di sekitar seluruh lapangan bermain. Latar belakang ubin sebagian besar gelap, dengan garis-garis putih tipis di lokasi-lokasi penting. Tiba-tiba Anda benar-benar dapat melihat puzzle, karena itu salah satu hal yang paling kontras di sekitar.

Secara pribadi, saya masih akan sedikit men-tweak - saya akan membuat lapangan bermain terlihat lebih baik juga. Garis-garis putih untuk menunjukkan pembagian grid itu penting, tetapi otak manusia benar-benar bagus dalam mengekstrapolasi fitur lurus, dan itu bisa menjadi jauh lebih gelap dan bahkan sedikit putus.

Hal besar yang membuat saya keluar dari UI itu adalah bilah bawah. Itu cerah, ada di wajah Anda, dan sulit untuk membaca teksnya. Bit terakhir itu penting - alasan mengapa sulit untuk membaca teks, sekali lagi, karena kontras. Kami membaca teks sebagian dengan mencari tepi huruf, tetapi sayangnya surat-surat itu berbaur dengan baik dengan bagian bar bawah.

Apa yang akan saya lakukan: Rejigger bilah bawah agar cocok dengan latar belakang utama, dalam hal kontras. Buat batas yang lebih ringan antara itu dan latar belakang utama untuk mengetahui fakta bahwa itu terpisah. Kemudian singkirkan sebagian besar teks. "Berlian" bisa menjadi berlian yang sebenarnya. "Atoms left" dapat menjadi tampilan bergambar beberapa atom. "Waktu yang tersisa" bisa menjadi jam pasir atau arloji atau arloji saku. "Selanjutnya" dapat sepenuhnya hilang - Anda mengatakan "Anda harus bermain untuk melihat atom mana yang Anda dapatkan", tetapi itu adalah mekanik permainan yang menjengkelkan. Ubah menjadi setumpuk atom di sebelah kanan, duduk di sabuk konveyor usang, dengan sedikit petunjuk mesin visual yang mana yang berikutnya dalam garis itu. Tada! Teka-teki ditingkatkan, antarmuka ditingkatkan, semuanya terlihat kurang berantakan.

Jika Anda lakukan perlu menggunakan teks, ada dua cara untuk kontras jaminan. Pertama, letakkan teks Anda pada sesuatu yang kontrasnya rendah. Jika latar belakangnya gelap, gunakan teks terang. Jika latar belakangnya terang, gunakan teks gelap. Jika Anda tidak bisa melakukan itu (dan terkadang Anda tidak bisa), jangan ragu untuk menggunakan efek cahaya luar. Ini cara yang bagus untuk memberikan kontras perbatasan yang tepat, apa pun teks Anda.

Saat Anda bermain dengan antarmuka, buka editor gambar, tukar ke monokrom, dan coba dua hal: deteksi buram, dan tepi. Ketika UI Anda monkrom kabur, visi Anda harus secara otomatis condong ke bidang-bidang penting. Saat deteksi tepi, area penting harus disorot. Contoh:

Pertama, kabur Kedua, kabur

Bandingkan keduanya. Yang pertama hampir tidak dapat dibaca - tentu saja, beberapa permata terlihat, tetapi banyak dari mereka tidak. Pada yang kedua, kotak menonjol langsung, seperti halnya kotak dialog. Meskipun hanya ada satu permata di papan tulis, Anda dapat langsung melihat di mana itu.

Pertama, ujung Kedua, ujung

Yang pertama menekankan tepi grid secara besar-besaran. Beberapa permata hampir tidak terlihat. Yang kedua menekankan yang masih (dan lebih dari yang saya pribadi akan), tetapi juga menekankan batas teka-teki yang sangat kuat, dan permata secara signifikan lebih (meskipun masih tidak sempurna) terlihat.

Metode ini bukanlah obat mujarab dengan cara apa pun, tetapi dapat membantu Anda melacak hal-hal yang harus diperbaiki. Perlu diingat bahwa penglihatan manusia didasarkan pada batas dan kontras, dan rancang UI Anda agar dapat dibaca oleh manusia.

ZorbaTHut
sumber
1
Contoh yang bagus. Kontras adalah satu pertimbangan, ketajaman yang lain. Satu lagi yang saya lihat banyak adalah saturasi - itu adalah umum untuk elemen latar belakang menjadi desaturated relatif terhadap elemen foreground (seperti dalam kehidupan nyata, karena efek atmosfer), dan ini membantu memfokuskan mata pada apa yang relevan.
Kylotan
Saya berharap saya bisa memberikan ini lebih dari +1. Skala abu-abu tidak hanya dengan filter ini membuat masalah yang rata-rata pengguna mungkin langsung jelas, tetapi juga dapat membuatnya lebih mudah untuk melihat masalah bagi mereka yang memiliki gangguan penglihatan atau buta warna - selalu baik untuk memeriksa bahwa UI Anda dapat dibaca di skala abu-abu sebagai ubin merah di samping ubin hijau mungkin langsung terlihat jelas bagi Anda atau saya, tetapi jika mereka sama dalam skala abu-abu, mereka mungkin bergabung bersama untuk teman duokromatik kami.
theheadofabroom
6

(Aku akan datang pada ini dari perspektif teori warna)

Saya pikir pertanyaan Anda bukan tentang bagaimana membuat GUI yang menarik, saya pikir Anda benar-benar tunjukkan adalah "Bagaimana saya memilih pengalaman yang ingin saya berikan kepada pemain saya?"

Dan ini sebagian besar merupakan jawaban psikologis. Anda menyebutkan memilih warna biru atau hijau atau merah, dan ini bukan tentang warna, ini tentang emosi yang Anda rasakan ketika Anda melihatnya.

Jika Anda memiliki permainan yang berwarna merah (latar belakangnya berwarna merah, pemain mengenakan warna merah atau menggunakan potongan permainan merah, font-fontnya semuanya bisa dibaca dengan warna merah) bagaimana menurut Anda perasaan Anda jika Anda memainkan ini permainan? Dan bahkan tidak masalah apa gamenya.

Anda akan merasa seperti permainan itu sangat marah atau semacam permainan Hari Kasih Sayang.

Di sinilah proses pengambilan keputusan masuk. Jika Anda ingin pemain Anda merasa seperti mereka sedang melakukan percobaan sains dalam permainan kimia Anda, mungkin membuat semuanya bersih dan sederhana. Mungkin sesuatu yang menekankan warna putih.

Jika Anda ingin pemain Anda merasa seperti mereka melakukan semacam pekerjaan manufaktur, di mana mereka merasa seperti turun dan kotor dengan ilmu pengetahuan, maka mungkin gambar kedua Anda, atau menekankan warna kuning dan hitam bersama-sama.

Jika Anda ingin pemain Anda merasa bahwa mereka menyatu dengan chemistry, seperti itu adalah perpanjangan dari diri mereka sendiri dan semua makhluk hidup, maka gambar pertama Anda bisa menjadi awal yang baik. Penekanan pada biru muda dan hijau muda dan nada alami seperti cokelat.

Itu benar-benar turun ke emosi mentah yang Anda harapkan pemain Anda rasakan.

OghmaOsiris
sumber
5

Jawaban singkat: Tidak ada jawaban singkat.

Desain adalah bidang besar, dengan banyak buku, artikel, dan seperti yang disebutkan, perpustakaan yang membahas pertanyaan ini. Skema warna, font, gaya, tata letak, penggunaan ruang putih, ruang negatif, tekstur, warna dan artinya dalam budaya yang berbeda, mengapa komik tidak baik dan tidak boleh digunakan. Ada kursus, buku, blog, makalah penelitian, dan situs web yang didedikasikan untuk hal-hal semacam ini. Tidak akan ada jawaban sederhana untuk ini, karena pertanyaannya banyak bertanya.

Yang mengatakan: Terus terang, pilihan terbaik Anda adalah menyewa seorang desainer untuk membantu Anda. Jika itu di luar anggaran Anda, bertemanlah dengan desainer untuk membantu. Jika itu tidak mungkin, Anda mungkin harus melakukannya sendiri untuk sementara waktu.

Demikian beberapa tips. Untuk skema warna, gunakan sesuatu seperti Desainer Skema Warna . Luangkan waktu untuk belajar tentang bagaimana warna bekerja bersama, dan umumnya, cobalah hanya memilih beberapa warna, jangan berlebihan. Batasnya harus sekitar 3 warna.

Untuk font, well, ada seluruh artikel dan makalah penelitian (inilah satu tentang serif vs sans serif ). Sekali lagi, aturan umum adalah memilih, paling banyak, dua font. Pilihan yang baik adalah memilih font yang bukan default, tetapi tetap terlihat bagus. Jika itu pilihan, Helvetica itu cukup bagus, tetapi ada banyak yang bagus di luar sana.

Untuk gaya dan / atau tema, yang ini lebih sulit untuk dijawab. Saya pikir tip terbesar di sini adalah konsisten dengan gaya Anda . Jangan mencoba untuk memadukan alam dengan scifi, atau garis seni samar dengan model 3d res res. Ini sebagian besar berarti menemukan satu seniman untuk melakukan SEMUA seni, atau melakukannya sendiri (dalam kasus perusahaan besar, inilah sebabnya ada pemimpin seni). Tema adalah sesuatu yang harus Anda mainkan, kecuali jika Anda memiliki tema tertentu sebelum memulai. Sejujurnya, itu mungkin berubah seiring waktu dan Anda memiliki lebih banyak permainan. Peluangnya cukup bagus sehingga tema akan berubah seiring berjalannya waktu.

Secara keseluruhan, sementara desain dapat diajarkan, beberapa orang hanya ... tidak begitu mahir (seperti pemrograman). Di sinilah memiliki teman desain untuk membantu sangat berguna.

thedaian
sumber
+1 untuk tidak memadukan gaya. Saya benar-benar mengambil kursus desain sebagai bagian dari double-major saya, tetapi itu masih tidak membantu saya memilih mengapa biru vs hijau vs merah vs ...
ashes999
Jawaban DeM0nFiRe melakukan pekerjaan dengan baik yang meliputi bagaimana memilih tema. Tema, sementara itu, penting untuk desain keseluruhan, dan akan membantu Anda memutuskan mengapa biru vs hijau vs merah vs merah muda cerah. Ada baiknya memeriksa artikel / buku tentang teori warna, aturan, dll. Berikut adalah artikel tentang aturan warna yang ditemukan melalui google: writedesignonline.com/resources/design/rules/color.html
thedaian
1
Secara umum, pilihan warna (dan segala sesuatu yang berhubungan dengan desain) membutuhkan latihan dan waktu. Membantu mendapatkan masukan dari orang lain juga, karena mereka biasanya dapat memberi tahu Anda jika kombinasi berfungsi atau tidak (meskipun hanya seseorang yang memiliki mata untuk desain yang dapat memberi tahu Anda alasannya )
thedaian
Ya, saya pikir sangat penting untuk menekankan bahwa Anda tidak tiba-tiba bangun dan belajar desain. Ini adalah sesuatu yang Anda pelajari melalui pengalaman.
DeM0nFiRe
"Beberapa orang ... tidak begitu mahir dalam hal itu" .. Itu sangat benar. Saya menganggap diri saya seorang programmer yang sangat baik, tetapi saya benar-benar gagal dalam mendesain dan meskipun saya secara bertahap menjadi lebih baik, kemajuannya sangat lambat. Ini selalu mengganggu saya banyak karena tidak membiarkan saya menjadi "independen", kecuali untuk hal-hal seperti pengembangan server (yang sebenarnya adalah area favorit saya, tetapi saya ngelantur).
Thomas Bonini
2

Diedit:

Ok, saya sudah menulis ulang ini, sekarang saya mengerti pertanyaan dengan lebih baik.

Alasan saya bingung adalah karena Anda mencoba memberikan paralel dalam tulisan, tetapi contoh yang Anda miliki tidak paralel sama sekali. Desain UI adalah masalah presentasi. Isi buku adalah tentang substansi yang sebenarnya.

Jadi, melihat desain UI sebagai pertanyaan presentasi, Anda harus memikirkan apa yang ingin Anda presentasikan. Maksud saya, tentu saja Anda mencoba menyajikan permainan Anda, tetapi apa lagi? Apakah Anda ingin terlihat profesional? Menyenangkan? Gelap? Cahaya?

Sebagai contoh, saya akan melihat dua gambar yang Anda poskan, dan memberi tahu Anda tayangan yang saya dapatkan dari mereka.

Yang pertama, ada beberapa aspek jelas yang bisa kita lihat. Ini lebih ringan dari gambar kedua, tentu saja. Tambahkan ke fakta bahwa Anda memilih gambar bidang dengan kedalaman (karena bidang miring dari penampil) dan perasaan itu adalah salah satu yang jauh lebih luas. Rasanya lebih bebas, rasanya lebih ringan hati.

Ketika Anda melihat gambar kedua, tentu saja, jauh lebih gelap. Ini juga memiliki latar belakang yang merupakan gambar datar tegak lurus terhadap garis pandang penonton, menghilangkan rasa kedalaman yang terus menerus dari gambar pertama. Tambahkan bahwa satu-satunya isyarat kedalaman yang sebenarnya berasal dari bayangan pada pelapisan berlian, dan itu membawa gambar latar belakang itu sangat dekat dengan kamera. Semua ini ditambahkan untuk memberikan kesan yang lebih gelap, lebih klaustrofobik padanya.

Jadi sekarang, apa yang dapat Anda lakukan dengan kedua tema tersebut? Nah, tema pertama adalah sesuatu yang bisa bagus jika yang ingin Anda lakukan adalah membuatnya terasa lebih kasual. Ini memberikan semacam perasaan seperti apa yang pemain lakukan saat ini dengan potongan-potongan permainan tidak semua yang terjadi di dunia. Gambar kedua memberi lebih banyak rasa urgensi. "Dunia yang dikenal" dari gim ini jauh lebih kecil, dan lebih menekankan pada apa yang dilakukan pemain.

DeM0nFiRe
sumber
Tidak benar-benar menjawab pertanyaan saya. Saya tidak punya masalah merancang game, mekanik, cerita, latar belakang, dll. Tetapi masalah yang lebih kecil seperti tema, pilihan skema warna, font, gaya, dll. (Bahkan setelah jurusan ganda dalam CS dan desain). Saya benar-benar tidak memiliki pedoman "mengapa X dan bukan Y" dalam hal tampilan dan nuansa secara keseluruhan. Itu yang saya cari. Saya telah mengedit pertanyaan saya untuk menjelaskan dan menyederhanakan.
ashes999
Ok, saya menulis ulang posting saya sesuai
DeM0nFiRe
Jawaban yang bagus, tetapi tidak menjawab pertanyaan saya - bagaimana menyatukan tema dan mencari tahu apa yang harus dilakukan untuk detail kecil seperti mengetahui latar belakang yang digunakan. Game kimia hanyalah sebuah contoh.
ashes999
2
Jawabannya masih berlaku. Hal pertama yang harus Anda lakukan adalah memutuskan apa yang ingin Anda presentasikan. Mengapa X dan bukan Y adalah karena X lebih baik dalam menyajikan Z. Anda harus memutuskan apa itu Z, maka Anda dapat mempelajari mengapa X lebih cocok daripada Y. Anda bertanya kepada kami tentang memutuskan bagian-bagian individual. Anda tidak dapat memutuskan masing-masing bagian sampai Anda memutuskan keseluruhan.
DeM0nFiRe
ini seharusnya jawaban Anda :)
ashes999
1

Apakah ini benar-benar tentang 'membuatnya cantik'? Itu hal yang subjektif, dan saya pikir screenshot pertama terlihat lebih baik daripada yang kedua.

Memilih tema sebenarnya bukan ilmu roket - Anda tahu konten kunci atau tujuan permainan Anda, dan dapat menyimpannya di depan pikiran Anda ketika memilih setiap aspek lain untuk mengikutinya.

Kylotan
sumber
Lihat hasil edit saya tentang memilih biru vs. hijau. Bukan hanya temanya, saya bisa menangani temanya; itu adalah keputusan sewenang-wenang yang membuat saya, seperti skema warna.
ashes999
4
Saya pikir Anda sedang mencari jawaban gaya programmer untuk pertanyaan gaya artis. :) Saya tidak berpikir mereka akan berpikir pada tingkat rendah seperti "biru vs hijau" ketika memilih skema warna. Sebagai gantinya mereka akan memilih seluruh skema warna pelengkap, sebagian didasarkan pada preferensi pribadi dan mungkin pada kepatuhan terhadap tema permainan, jika tema itu secara intrinsik menyarankan skema warna.
Kylotan
Saya tidak peduli tentang biru vs hijau. Saya peduli "Inilah cara Anda memutuskan biru vs hijau: ..."
ashes999
1
Maksud saya adalah mereka tidak memutuskan antara biru atau hijau. Mereka biasanya bekerja pada tingkat yang lebih tinggi untuk itu, memilih seluruh skema berdasarkan estetika, daripada membuat keputusan individu pada detail. Lagipula itu pengalaman saya tentang seniman.
Kylotan
1

Satu hal yang tampaknya tidak disebutkan oleh orang lain sejauh ini: tanyakan beberapa orang yang akan memainkan permainan untuk umpan balik mereka. Desainer UI menghabiskan banyak waktu untuk menunjukkan desain kepada pengguna dan mencari tahu apa yang benar atau salah dengan mereka, apakah mereka mendesain game, pengolah kata atau dek penerbangan.

calum_b
sumber