Arabirimler 101: Güzelleştirmek


23

Vahşi doğada yayımladığım birkaç oyun yaptım. Tekrar tekrar karşılaştığım belirli bir sorun var ve bu oyunun arayüzünün / temasının konusu.

Oyununuzun görünüm ve hissi ve arayüzü hakkında keyfi olmayan, tutarlı kararlar verebilirsiniz?

Örneğin, Silverlight kimyası temelli oyunumun bir versiyonunda, bu UI ile sonuçlanan doğal, peyzaj tarzı bir görünüme sahip olmak için (kötü?) Bir karar verdim:

Değer 0.1, çim, kayalar ve gökyüzü ile dolu.

Sonra daha sonraki bir yineleme ile daha akıllı oldum ve daha "makineyle" grungy bir görünüm ve his elde ettim, bu da (son kullanıcı arayüzünde) sonuçlandı:

Değerlik son sürüm daha makine gibi ve aşınmış görünüyor

Kesinlikle, kullanıcı arayüzündeki zevkimin yineleme yoluyla geliştiğini söyleyeceğim. Ancak bu, başlangıçta birçok keyfi kararın ve ardından yapılan bir çok kararın sonucuydu.

Oyununuzu nasıl düzenleyeceğinizi anlamanın daha iyi bir yolu var mı?


Yazıda paralellik vermek için, bir fantezi / bilim kurgu romanı yazarken tanımlamanız gereken birçok unsur var. Nesneleri / yaratıkları / yerleri / vb. Rasgele icat edebilmenize rağmen, birkaç dakika otururken alanı, bölgeyi, gezegeni veya evreni tasarlarken çok daha tutarlı bir dünya elde edersiniz. Sonra her şey güzel bir şekilde birbirine uyuyor ve kendinize “ bu evrende bu işlerin nasıl işleyeceğini sorabilirsiniz”.

Düzenleme: Bunu iyi açıklamadım gibi görünüyor. Aşırı soruyu basitleştireyim: Bir başlık ekranı oluşturmam gerektiğinde (arka plan, yazı tipleri, tenli düğmelerle) nasıl görünmeleri gerektiğine nasıl karar verebilirim? Yeşil mi mavi mi? Grunge mı değil mi? Yuvarlak veya düz? Serif veya sans-serif?

Bu soruyu al ve bir bütün olarak oyununa patlat. İşlerin nasıl görünmesi gerektiğini nasıl anlarsın? Onları tutarlı ve keyfi olmayan hale getirmek için hangi süreci kullanıyorsunuz?

Ekran görüntülerine tekrar bak. Çimenlere / gökyüzüne / kayalara sıkışmış olabilirdim, ama metal kimyasal reaksiyonlar ve atomlar fikrine daha uygun görünüyordu.


Bu sorunun bir format veya oyuna ya da platforma özgü olmadığını açıklığa kavuşturmak istiyorum (2B oyunlar hariç); inşa edebileceğiniz tüm oyunlara özgüdür.
ashes999

8
İlk olarak, düzenlemeniz yorumumdan üç dakika sonra gerçekleşti . İkincisi, hala “Nasıl iyi bir tasarım anlayışı geliştiririm?” Diye soruyorsunuz. Pek çok kitap, tüm derece programları ve evet, bunu yapmanıza yardımcı olabilecek ux.stackexchange.com bile var - ancak burada bir düzine paragraf paragrafı bile başlayamaz .

1
"Bu modda! Bu modda, sen ..."
Daniel Pendergast

1
@ Her şey: Zaten böyle şeylere adanmış bir UXSE var.

5
UI! = Grafik Tasarımı. Yukarıdaki örneklerin her ikisi de farklı grafik temalarla aynı kullanıcı arayüzüne sahip.
DampeS8N

Yanıtlar:


15

Çakışan stillerin var gibi gözüküyor.

Bu kullanıcı arayüzlerine Peggle, Ultima Underworld, Diablo 3, Starcraft 2 ve Gran Turismo 5'ten bakın.

Her bir UI'nin temasında nasıl tutarlı olduğuna dikkat edin .

Peggle

Peggle, tüm UI öğelerinde olduğu gibi pin topudur. Her şey bir metre, bir kol, bir meme, bir sıçrama tahtası.

Ultima yeraltı

Ultima Underworld UI öğeleri demir / çelik, iksirler, sırt çantaları, haritalar vardır. Macera zamanı.

Diablo III

Ultima yeraltı dünyasına benzer (aslında UW'ye dayanıyor gibi görünüyor)

Starcraft 2

Fütüristik, şık, basit, minimal (protos)

Gran Turismo 5

Araba iç

Görüyorsunuz, ilk tasarımınız tamamen tutarsız ve yazılmamış. Açık bir alanın oyununuzla ne ilgisi var? Aynı metal arka plan için de geçerli. Oyun tahtası için bir laboratuvar tezgahı ve şişeler, şişeler ve lastik eldivenler ve petri kapları içeren bir kimya laboratuvarı arka planı deneyin.

Dr Mario

Dr. Mario çok temelde tıbbi, bakteri, virüs, tıp temalı

Ayrıca , kullanıcı arayüzü, oyun öğeleri için benzer şekilde tasarlanmış grafiklere sahip olmalıdır . Kimyasal sembol toplar yuvarlak ve hafifçe derecelendirilmiş düz renklerdir. Seçtiğiniz arka planlar / oyun tahtası tamamen oyun unsurlarına benzemeyen sanat stillerine sahip. Alan canlı bir fotoğraftır. Metal çok ayrıntılı, kimyasal toplar ise pürüzsüz ve göreceli olarak düzensizdir.


8

Farketmeye başladığım bir şey çok önemli: kontrastın doğru kullanılması.

Şu ilk resme bak. Her yerde kontrast! Gökyüzü parlak, ufuk karanlık, sonra uzaktaki çimen aydınlık, sonra alt karanlık. Döşemeli arka plan çılgınca aşırı parlak ve aşırı karanlık arasında değişir. Bunların hepsi bilgi değil. Görsel dağınıklık. Asıl önemli parçalar - daireler - tüm kontrast değişikliklerle boğuluyor.

Şimdi ikinci resme bak. Arka plan karanlık ve nispeten monoton. Tüm oyun alanının etrafında parlak bir sınır var. Döşemeli arka plan çoğunlukla karanlık, önemli yerlerde ince beyaz çizgiler var. Birden bulmacayı görebiliyorsunuz çünkü etraftaki en zıtlıklardan biri.

Şahsen, ben hala biraz tweak olurdu - Ben oyun alanı da daha grungier görünmesini sağlar. Izgara bölümlerini göstermek için bu beyaz çizgiler önemlidir, ancak insan beyni düz özellikleri öne çıkarmakta gerçekten iyidir ve bunlar daha koyu ve hatta biraz parçalanmış olabilir.

Beni bu kullanıcı arayüzünden uzaklaştıran en büyük şey alt çubuktur. Parlak, yüzünüzde ve metni okumak zor. Bu son bit önemlidir - metni okumak zor nedeni yine kontrast yüzündendir. Metinleri kısmen harflerin kenarlarını arayarak okuruz, ancak harfler maalesef alt çubuğun kısımlarıyla iyi uyum sağlar.

Ne yapardım: Kontrast açısından ana arka plana iyi uyacak şekilde alt çubuğu yeniden ayarlayın. Ayrı olduğu gerçeğini aşmak için ana arka plan arasında daha hafif bir sınır oluşturun. Sonra metnin çoğundan kurtulun. "Elmas" gerçek bir elmas olabilir. "Kalan atomlar" birkaç atomun fotografik görüntüsü olabilir. "Kalan süre" bir kum saati veya kol saati veya cep saati olabilir. “Sonraki” tamamen yok olabilir - “hangi atomları aldığınızı görmek için oynamak zorundasınız” diyorsunuz, ama bu can sıkıcı bir oyun teknisyeni. Sağdaki atom yığınına çevirin, çırpıda bir konveyör bandın üzerine oturtun, sıradaki satırın sonunu gösteren görsel bir makine ipucuyla. Tada! Bulmaca geliştirildi, arayüz geliştirildi, her şey daha az karmaşık görünüyor.

Eğer varsa do metni kullanmak gerekir, garanti kontrast için iki yol var. İlk önce, metninizi düşük kontrastlı bir şeye yerleştirin. Koyu renkli bir arka planı varsa açık metin kullanın. Açık renkli bir arka planı varsa, koyu renkli metin kullanın. Bunu yapamıyorsanız (ve bazen de yapamazsınız), dış ışıma etkisini kullanmaktan çekinmeyin. Metniniz ne olursa olsun, doğru kenarlık kontrastını sağlamanın harika bir yoludur.

Arayüzlerle oynadığınızda, bir görüntü düzenleyici açın, tek renkli olarak değiştirin ve iki şeyi deneyin: bulanıklık ve kenar algılama. Kullanıcı Arabiriminiz monkrom bulanık olduğunda, görüşünüz otomatik olarak önemli alanlara yönelmelidir. Kenar algılama konumundayken, önemli alanlar vurgulanmalıdır. Örnekler:

İlk olarak, bulanık İkincisi, bulanık

Bu ikisini karşılaştırın. Birincisi neredeyse okunamıyor - tabii, bazı mücevherler görülebilir, ancak birçoğu görünmüyor. İkincisinde, iletişim kutusu gibi, ızgara anında göze çarpıyor. Gemide sadece bir mücevher varken, nerede olduğunu anında görebilirsiniz.

İlk, kenar İkinci, kenar

İlki, ızgara kenarlarını büyük ölçüde vurgular. Mücevherlerin bazıları neredeyse görünmez. İkincisi, hala (ve şahsen benim yaptığımdan daha fazlasını) vurgulamaktadır, fakat aynı zamanda bulmacanın sınırını çok kuvvetli bir şekilde vurgulamaktadır ve değerli taş daha belirgin (yine de mükemmel olmasa da) görünürdür.

Bu yöntem herhangi bir yöntemle her derde deva değil, düzeltilmesi gereken şeyleri izlemenize yardımcı olabilir. İnsan vizyonunun kenarlara ve kontrastlara dayandığını unutmayın ve kullanıcı arayüzünüzü insanlar tarafından okunabilecek şekilde tasarlayın.


1
Güzel örnek Kontrast bir husustur, başka bir netlik. Çok gördüğüm bir diğer şey de doygunluk - arka plan elemanlarının ön plan elemanlarına göre (atmosferik etkilerden dolayı gerçek hayatta olduğu gibi) doymamış olması yaygındır ve bu, göze neyin ilgili olduğuna odaklanmasına yardımcı olur.
Kylotan

Keşke bunu bir + 1'den daha fazla verebilseydim. Bu filtrelerle yalnızca gri tonlama yapmak, ortalama bir kullanıcının anında daha belirgin olabileceği sorunları ortaya çıkarmakla kalmaz, aynı zamanda görme bozukluğu veya renk körlüğü sorunu olanlar için sorunları görmeyi kolaylaştırır - kullanıcı arayüzünüzün okunup okunmadığını kontrol etmek her zaman iyidir Yeşil bir döşemenin yanındaki kırmızı bir döşeme olarak gri tonlama, sizin veya benim için hemen açık görünebilir, ancak gri tonlamada aynı olsaydı, iki renkli dostlarımız için bir araya gelebilirler.
thedodofabroom

6

(Buna renk teorisi perspektifinden geleceğim)

Bence sorunuzun ilgi çekici bir GUI yapması ile ilgili olmadığını düşünüyorum, bence gerçekten işaret ettiğiniz şey "Oyuncularıma vermek istediğim deneyimi nasıl seçerim?"

Ve bu çoğunlukla psikolojik bir cevaptır. Mavi, yeşil veya kırmızı seçmekten bahsediyorsunuz ve bu gerçekten renklerle ilgili değil, renklerin görünce hissettiğiniz duyguları ile ilgili.

Eğer kırmızı bir oyununuz varsa (arka plan kırmızı renktedir, oyuncu kırmızı giyiyor veya kırmızı bir oyun parçası kullanıyorsa, yazı tiplerinin tümü okunabilir bir kırmızıdır) Bu oyunu oynadıysanız nasıl hissedersiniz? oyun mu? Oyunun ne olduğu bile önemli değil.

Sen ediyorum hissetmek oyun ya çok kızgın ya da Sevgililer Günü çeşit oyun gibi.

Karar verme sürecinin başladığı yer burasıdır. Oyuncunuzun kimyasal oyunda bir bilim deneyi yaptığını hissetmesini istiyorsanız, belki de her şeyi temiz ve basit hale getirin. Belki beyaz rengi vurgulayan bir şey.

Oyuncunuzun bir tür üretim işi yapıyormuş gibi hissetmesini istiyorsanız, bilimle, kirlendiklerini sanıyorlarsa, belki ikinci fotoğrafınız ya da sarı ve siyah renklerini vurgulayarak.

Oyuncunuzun, kimsenin kimyada olduğu gibi hissetmesini istiyorsanız, kendisinin ve tüm canlıların bir uzantısı gibi, o zaman ilk fotoğrafınız iyi bir başlangıç ​​olabilir. Açık mavi ve açık yeşil ve kahverengi gibi doğal tonlara vurgu.

Gerçekten de oyuncunuzun hissetmesini beklediğiniz ham duyguya iniyor.


5

Kısa cevap: Kısa cevap yok .

Tasarım, tonlarca kitap, makale ve daha önce de bahsedildiği gibi bu soruyu kapsayan kütüphanelerden oluşan büyük bir alandır . Renk şeması, yazı tipleri, stilleri, düzeni, beyaz boşluk kullanımı, negatif boşluklar, dokular, renkler ve farklı kültürlerdeki anlamları, çizgi romanların neden kötü olduğunu ve asla kullanılmaması gerektiğini. Bu tür şeyler için kurslar, kitaplar, bloglar, araştırma makaleleri ve web siteleri var. Soru çok sorduğundan, bunun için basit bir cevap olmayacak.

Dedi ki: Açıkçası, en iyi seçenek size yardımcı olacak bir tasarımcıyı işe almak. Bu bütçenizin dışındaysa, yardım etmek için bir tasarımcıyla arkadaş olun. Bu mümkün değilse, bir süre yalnız gitmeniz gerekebilir.

Yani birkaç ipucu. Renk şemaları için, Renk Şeması Tasarımcısı gibi bir şey kullanın . Renklerin birlikte nasıl çalıştığını öğrenmek için biraz zaman harcayın ve genellikle sadece birkaç renk seçmeye çalışın , denize girmeyin. Sınır yaklaşık 3 renk olmalıdır.

Yazı tipleri için pek çok araştırma makalesi ve makalesi var (işte serif ile sans serif hakkında biri .) Yine, genel kural en fazla iki yazı tipi seçmektir. İyi bir seçim, varsayılan olmayan, ancak yine de güzel görünen bir yazı tipi seçmektir. Bu bir seçenekse, Helvetica oldukça hoş, ama dışarıda pek çok iyi kişi var.

Stil ve / veya tema için, bunu cevaplamak daha da zordur. Bence buradaki en büyük ipucu, tarzınla tutarlı olmak . Res 3D poli modelleriyle doğayı scifi ya da kabataslak hat sanatıyla karıştırmaya çalışmayın. Bu, çoğunlukla TÜM sanatı yapacak bir sanatçı bulmak veya kendiniz yapmak anlamına gelir (büyük şirketler söz konusu olduğunda, bu yüzden bir sanat lideri vardır). Tema, başlamadan önce aklınıza koyulmuş bir tema yoksa, birlikte oynamanız gereken bir şeydir. Dürüst olmak gerekirse, zaman geçtikçe değişebilir ve oyunda daha fazla işiniz olur. Aslında, temanın gelişim sürecinde değişeceği oldukça iyi.

Genel olarak, tasarım öğretilebilir olsa da, bazı insanlar sadece ... o kadar iyi değil (programlama gibi). Bu, yardımcı olmak için bir tasarım arkadaşına sahip olmanın kullanışlı olduğu yerdir.


Stilleri karıştırmamak için +1. ... Aslında benim çift anadal parçası olarak tasarım dersleri aldı, ama o hala beni niye mavi vs yeşil vs Kırmızı vs seçim yardımcı olmaz
ashes999

DeM0nFiRe'nin cevabı, bir temanın nasıl seçileceğini kapsayan iyi bir iş çıkarır. Bu arada tema genel tasarım için önemlidir ve neden mavi ve yeşil ile kırmızı ile parlak pembenin arasında karar vermenize yardımcı olacaktır. : It yetmeyecek makalelere göz atarak / renk teorisi, kuralları vb Burada yaklaşık kitaplar renk kuralları hakkında bir makale google aracılığıyla tespit edilmiş olmasıdır writedesignonline.com/resources/design/rules/color.html
thedaian

1
Genel olarak, renk seçimi (ve tasarımla ilgili her şey) pratik ve zaman alır. Diğer insanlardan da girdi elde edilmesine yardımcı olur, çünkü genellikle bir kombinasyonun işe
yarayıp yaramadığını

Evet, bir gün aniden uyanıp, tasarım öğrenmemenizi vurgulamanızın kesinlikle önemli olduğunu düşünüyorum. Bu deneyim yoluyla öğrendiğiniz bir şey.
DeM0nFiRe

"bazı insanlar sadece ... bu işte iyi değil" .. Bu çok doğru. Kendimi son derece iyi bir programcı olarak görüyorum, ancak tasarım konusunda gerçekten başarısız oluyorum ve kademeli olarak daha iyi olmama rağmen ilerleme oldukça yavaş. Bu beni her zaman çok rahatsız etti çünkü sunucu gelişimi gibi şeyler haricinde "bağımsız" olmama izin vermiyor (ki bu aslında en sevdiğim alan, ama ben dalıyorum).
Thomas Bonini

2

REDAKTE:

Tamam, bunu tekrar yazdım, şimdi soruyu daha iyi anlıyorum.

Kafamı karıştırmamın sebebi yazılı olarak bir paralel vermeye çalıştığındır, fakat sahip olduğun örnek tamamen paralel değildir. Bir kullanıcı arayüzünün tasarımı bir sunum sorunudur. Bir kitabın içeriği asıl madde ile ilgilidir.

Dolayısıyla, UI tasarımına bir sunum sorusu olarak bakarken, sunmak istediğinizi düşünmeniz gerekir. Yani, elbette oyununu sunmaya çalışıyorsun, peki ya başka? Profesyonel görünmesini ister misin? Eğlence? Karanlık? Işık?

Örnek olarak, gönderdiğiniz iki resme bakacağım ve size onlardan aldığım izlenimleri anlatacağım.

İlki, bakabileceğimiz bazı belirgin yönleri var. Tabii ki ikinci görüntüden daha hafiftir. Bunu, derinlikli bir alan görüntüsünü (alan görüntüleyiciden uzaklaştığında) seçtiğiniz ve hissi çok daha geniş olan bir gerçekliğe ekleyin. Daha özgür hissediyor, daha hafif yürekli hissediyor.

İkinci resme baktığınızda, elbette, çok daha karanlık. Aynı zamanda, ilk görüntünün sahip olduğu sürekli derinlik hissini ortadan kaldırarak, izleyicinin görüş hattına dik düz bir görüntü olan bir arka planı vardır. Yalnızca gerçek derinlik ipuçlarının elmas kaplamadaki gölgelemeden geldiğini ve bu arka plan görüntüsünün kameraya çok yakın olmasını sağlayın. Bütün bunlar, daha koyu, daha klostrofobik bir his vermek için bir araya getiriyorlar.

Peki şimdi, iki tema ile ne yapabilirsiniz? İlk tema, yapmak istediğin şeyin kendini daha rahat hissetmesini sağlamaksa iyi olabilecek bir şey. Şu anda oyuncunun şu an yaptığı gibi, oyun parçaları dünyada olan biten bir şey değil. İkinci görüntü, daha fazla aciliyet duygusu verir. Oyunun "bilinen dünyası" çok daha küçük ve oyuncunun ne yaptığı üzerinde daha fazla durur.


Sorumu gerçekten cevaplamıyor. Oyunu, mekaniği, hikayeyi, arka planı vb. Tasarlamada sorunum yok; tema, renk şeması seçimi, yazı tipleri, stil vb. Genel görünüm ve his açısından "neden X ve Y olmasın" konusunda hiçbir yönergem yok. Peşinde olduğum şey bu. Açıklığa kavuşturmak ve basitleştirmek için sorumu değiştirdim.
ashes999

Tamam, buna göre
yazımı

Harika cevap, ancak sorumu cevaplamıyor - temanın nasıl birleştirileceği ve hangi arka planın kullanılacağını bilmek gibi küçük ayrıntılar için ne yapılması gerektiği. Kimya oyunu sadece bir örnekti.
ashes999

2
Cevap hala geçerli. Yapmanız gereken ilk şey, neyi sunmaya çalıştığınıza karar vermektir. Neden X ve Y değil, X'in Z'yi sunmakta daha iyi olduğu içindir. Z'nin ne olduğuna karar vermelisin, o zaman X'in neden Y'den daha iyi uyduğunu öğrenebilirsin. Tek tek parçalara bütünüyle karar verene kadar karar veremezsiniz.
DeM0nFiRe

bu sizin cevabınız olmalı :)
ashes999

1

Bu gerçekten 'güzel yapmak' ile mi ilgili? Bu öznel bir şey ve ilk ekran görüntüsünün ikinciden daha iyi göründüğünü düşünüyorum.

Bir tema seçmek gerçekten roket bilimi değildir - oyununuzun temel içeriğini veya amacını biliyorsunuz ve onunla gitmek için diğer her yönü seçerken bunu aklınızın önünde tutabilirsiniz.


Maviye karşı yeşili toplama hakkındaki düzenlemelerime bakın. Bu sadece tema değil, temayı idare edebilirim; Renk şeması gibi, beni elde eden keyfi kararlar.
ashes999

4
Sanatçı tarzı sorulara programcı tarzı cevaplar aradığınızı düşünüyorum. :) Bir renk şeması seçerken "mavi vs yeşil" gibi düşük bir seviyede düşüneceklerini sanmıyorum. Bunun yerine, kısmen kişisel tercihlere ve belki de oyunun temasına bağlı kalmaya dayalı bir tamamlayıcı renk şeması seçeceklerdir, eğer bu tema kendinden bir renk şeması önerirse.
Kylotan

Maviye karşı yeşile umrumda değil. "
Maviye

1
Demek istediğim, mavi ya da yeşil arasında karar vermedikleri. Genellikle, detaylar üzerine bireysel kararlar vermek yerine, estetik bir temele dayanarak tüm planları seçerek, daha üst düzeyde çalışıyorlar. Zaten bu benim sanatçı deneyimim.
Kylotan

1

Şu ana kadar kimsenin bahsetmediği bir şey var: oyunu oynayacak olan bazı kişilere geri bildirimlerini isteyin. UI tasarımcıları, kullanıcılara tasarımları göstermek ve bir oyun, bir kelime işlemci veya bir uçuş güvertesi tasarlayıp tasarlamadıkları konusunda kendileri için neyin doğru veya yanlış olduğunu bulmak için çok zaman harcıyorlar.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.