Arabirimler 101: Güzelleştirmek

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:

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ı:

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.

Ç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, tüm UI öğelerinde olduğu gibi pin topudur. Her şey bir metre, bir kol, bir meme, bir sıçrama tahtası.

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

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

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

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

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:

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.

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

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

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.

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.

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.

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