Antarmuka 101: Membuatnya Cantik

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:

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

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.

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 seperti pin-ball di semua elemen UI-nya. Semuanya meter, tuas, nozzle, loncatan.

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

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

Futuristik, ramping, sederhana, minimal (protos)

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.

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.

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:

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.

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.

(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.

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.

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.

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.

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.