Company of Heroes 3'te UX/UI Genel Bakış

Herkese selamlar, ben Erman. Company of Heroes 3’ün UX (Kullanıcı Deneyimi) Dizayn Direktörüyüm. Takımın diğer üyeleri ise Sean ve Kevin. Bizler RTS ve özellikle CoH’u seven tutkulu tasarımcılarız. Bizim sesimizi sizler çok sık duymasanız da, bizler sizden geri dönüş almayı ve resmi Company of Heroes Discord kanalındaki sohbetlerinizi takip etmeyi seviyoruz. Ayrıca Pre-Alpha Preview oynanan pek çok yayın izledik, bu da direkt ilk elden oyuncuların arayüzümüz ile nasıl etkileşime geçtiğini görmemiz için bir fırsat sağladı. Pek çok not aldık!

Bugünün gönderisi için, UX ekibinden gelen bazı önemli yeni tasarım çalışmalarına dayanan UX hedefimizi ana hatlarıyla anlatmak istedim.

Kendi kısmımızı bitirdikten sonra, UI (Kullanıcı Arayüzü) Sanat Direktörümüz Bernard’ın da size anlatacakları olduğu için bu gönderinin bir bölümünü paylaşacağız.

UX Hedefi

CoH3 için basit, temiz, modüler, tanıdık ve oyuncu merkezli arayüzler tasarlamak istedik. Seneler boyunca CoH1 ve CoH2 UXleri için pek çok geri dönüş aldık. Her zaman tüm oyunun UX’ini nasıl geliştirebileceğimizi ve onu eski oyuncularımız için nasıl tanıdık hale getirebileceğimizi ve aynı zamanda da yeni oyuncuların oyuna girip oynamasını nasıl kolaylaştırabileceğimizi arıyoruz.

Ayrıca, hem UX tasarımcılarının hem de UI sanatçılarının birbirlerini çalışmalarıyla bilgilendirmesini sağlayarak Relic’te yeni bir şey deniyoruz. Bunlar birbirinden ayrı ancak birbiri ile ilişkili disiplinlerdir. UX tasarımcıları, size oyuncu merkezli etkileşim tasarımı sunmak adına oyun tasarımcılarımızla da yakın işbirliği içinde çalışıyorlar.

Oyunumuz için devam eden bazı UX tasarımlarından bahsedelim. Bu çalışmanın bir kısmını Pre-Alpha Preview’da görebilirsiniz ancak bu çalışmanın daha çok erken bir halidir ve nihai durumunu yansıtmamaktadır. Bununla birlikte, yine de yeni hedefimizle ilgili görüşlerinizi almak istiyoruz.

Seçim Kartı

Yakın zamanda, CoH 3’ün gerçek zamanlı strateji bölümlerinde temel oynanış mekaniğimiz olan seçim kartı için bir geçiş yaptık. Seçim kartı, oyuncuya seçilen nesne hakkında üst düzey bilgileri iletmek için kritik öneme sahiptir.

Seçimimizi, oyuncunun seçtiği nesne hakkında önemli bilgileri görebileceği ancak oyuncu daha detaylı bilgi almak istediği hedefin üzerine imlecini getirdiğinde daha da ayrıntılı bir dökümü görebileceği bir yoldan yana kullandık.

Olay Kuyruğu

Sefer haritası olay kuyruğu (bildirim sistemi) tasarımı, oyuncunun çok dikkatini dağıtmadan olabildiğinde fazla bilgiyi oyuncuya vermek için tasarlandı. Bu bildirimler bazı önemli detayları içerdiğinden, oyuncunun bildirime tıklamadan ne olduğunu anlayabilmesini sağlar. Örnek olarak bir ikmal aldığınızda bu bildirim, ne tür bir ikmal aldığınızı gösterir. Benzer şekilde bir bölük satın aldığınızda, bölük hazır olduğunda, hangi limanda olduklarını ve hatta bölüğün ne tip olduğunu bile gösterir.

Bildirimlerin bazıları oyuncu harekete geçene kadar ekranda kalırken, bazıları da süre bazlıdır. Ertesi güne geçildiğinde tüm bildirimler temizlenir. Oyuncu her zaman zil ikonuna tıklayarak bildirim paneline erişebilir ve önemli bildirimleri görebilir.

Dünya Haritası

Dinamik sefer haritası ayrıca kendi taktiksel haritasını da içerecek ya da bizim deyimimizle Dünya Haritası. Bu harita sefer sırasında oyuncunun tüm İtalya harekat alanına hızlı erişimini sağlar. Buradan tüm bölükleri, tüm kaynak noktalarını, hedef/görev konumlarını ve ele geçirilebilir bölgeleri görebileceksiniz. Ayrıca Dünya Haritasında herhangi bir yere tıklayarak sefer haritası görüşüne geri dönebilirsiniz.

Bu, oyunun RTS bölümlerinden taktik haritamızın daha basit bir versiyonu olarak işlev görecek. Amacı, tüm seferiniz için daha yüksek düzeyde bir bilgi görünümü sağlamak olduğundan oyuncular Dünya Haritasında komutlar veremezler.

Bir bölük göstergesinin üzerine geldiğinizde, o birim hakkında daha ayrıntılı bilgi içeren seçim kartını açacaksınız. Ayrıca, herhangi bir kesilmiş ikmal hattını veya düşmanın aktif ikmal hatlarını da görebileceksiniz. Kaynak noktalarının üzerine gelindiğinde, konumun ikmal durumu ve ikmalin menşei seçim kartlarında gösterilir. Ne yapmak istediğinize karar verdikten sonra, emirlerinizi vermek üzere dinamik sefer görünümüne dönmek için Dünya Haritasında gitmek istediğiniz yere tıklamanız yeterlidir.

Oyuncular hedef penceresine geçtiği zaman tüm hedefleri ve yan hedefleri görebileceklerdir. Ayrıca, görev özetlerini görmek için bu hedeflerden herhangi birinin üzerine gelebilirsiniz.

Taktiksel Duraklatma

Bu derin dalıştaki kendime ayrılan bölümü tamamlamak adına, taktiksel duraklatma için UX’i tasarlamaya nasıl yaklaştığımıza dair hızlı bir genel bakış vermek istiyorum.

Tek oyunculu oyunda taktiksel duraklatma, oyuncunun oyunu duraklatmasına ve tüm birimlerine birden fazla emir verebilmesine ve bu sayede stratejik kararlar almak için daha fazla zamana sahip olabilmesini sağlar. Taktiksel duraklatma için UX hedefi, yeni RTS oyuncularının türe girerken karşılaştıkları zorluğu ele almaktı. CoH gibi RTS oyunlarının hızlı temposu ve çoklu görev özellikleri, bu tür oyunları ve mekaniklerini ilk kez deneyimlerken büyük bir engel olabilir. Taktiksel duraklatma, yeni oyunculara biraz rahatlık sağlamak ve kendi hızlarında tek oyunculu oyundan keyif almalarını sağlamak içindir. Ek olarak, yetenekli oyuncular bile oyunu duraklatabilmenin ve savaş alanını daha iyi değerlendirebilmesi için birimlerinin sıralı komutlarını görebilmenin değerini bilmelidir.

Tek Bir Birim Komutları

Bu örnekte, seçilen birime komutlar verilmiştir ve bu birim göstergesinde bir simge ile gösteriliyor. Bu simgenin oyun birimi kontrolünde (kısaca veya OBK, ekranın sol alt kısmındaki canlı ve kontrolünüz altındaki birimlerin gösterildiği satır) de görüntülenmesi gerektiğini unutmayın.

Oyuncu bir başka birim seçtikten sonra bile bu simge hem birim göstergesinin üzerinde hem de OBK’da gözükmeye devam edecektir.

Çoklu Birim Komutları

Bu örnekte, seçilen birimlere toplu/grup komutları verilmiştir ve sonuç olarak göstergelerinde ve OBK’da “bekleyen grup eylemleri” simgesini gösterir.

Geri Çekilme

Taktiksel Duraklatma sırasında oyuncu geri çekilme seçeneğini seçerse şunlar gerçekleşir:

Bir geri çekilme komutu simgesi, Taktik Sırasına eklenir. Bu simge, Geri Çekilmenin bir “son eylem” olduğunu belirtmek için farklı bir görsele sahip olmalıdır.
Bir “son işlem” olmanın anlamı, oyuncu şunlardan biri gerçekleşene kadar ek komutlar veremeyecektir:
Geri çekilme tamamlandı.
Geri çekilme iptal edildi. (ayrıntılar için aşağıdaki komutları iptal etme bölümüne bakın)
Geri Çekilme komutundan sonra Taktik Sırasında kalan “boş yuva” arayüzü, şu anda daha fazla eylemin sıraya alınamayacağını belirtmek için kaybolmalıdır.
Geri çekilme simgesi oyun ortamında Taktik Sırasındaki önceki komutun hemen sağında görünmelidir (bu örnekte oyuncunun Saldır-İlerle komutuydu).
Geri Çekil komutu Sıradaki ilk komutsa, geri çekilme simgesi ünite göstergesinin hemen sağında görünmelidir.

Sıralı Çoklu Komut İptali

Sıradaki ikinci komutu vurgulamak için imlecinizi üzerine getirdiğinizde, birlikte iptal edileceklerini belirtmek için yalnızca ikinci ve üçüncü komutlar vurgulanır.

Yetenekler

Dikey hareket bileşenine (fırlatılan nesneler) sahip yetenekler, oyuncuya birimlerinin havaya bir nesne fırlattığını göstermek için seyahat yollarını bir yay şeklinde göstermelidir.

Hedef pininde, yeteneğin hedeflendiği yeri belirtmek için yetenek simgesi görüntülenecektir.

Diğer yetenekler sadece normal seyahat hattı kullanıcı arayüzünü kullanmalıdır (aşağıdaki örnekte yetenek simgesinin de bir el bombası olduğu gerçeğini göz ardı edin. Sadece fırlatılabilirlerin ve diğer yeteneklerin taktiksel duraklamada nasıl görüneceği arasındaki farkı göstermek istiyoruz.)

Harita Dışı Yeteneklerin Hedeflemesi

Oyuncular, gerçek zamanlı oyun sırasında olduğu gibi, taktik duraklatma sırasında da harita dışı bir yeteneği hedefleyebilir.

Grup Komutları Tekil Komutların Yerine Geçer

1. Bu örnekte, oyuncu tek bir piyade birimini seçmiş. Bu birimin Taktik Sırasında iki hareket komutu mevcut.

2. Oyuncu şimdi ise üç birimi de seçmiş (kare içine alıp seçerek, shift ile seçerek ya da grup ataması kullanılarak). 3 birim de seçili olduğu için, Taktik Sırası arayüzü, üç birimin de göstergesini içeren boş bir sıraya dönüşür. Ve oyuncuya bir grup komutu vermenin gruptaki herhangi bir birime önceden atanmış olan tüm bireysel komutların üzerine yazacağını bildiren bir metin kutusu gözükür.

3. Oyuncu şimdi gruba iki hareket komutu verdi. Bu komutlar, Taktik Sırasında tek bir kez görünürken, ortamdaki her bir birim için ayrı seyahat hatları ve hedef işaretleri görüntülenir. Birim göstergelerindeki “bekleyen komutlar” simgesinin, bu birimlerin bekleyen grup komutları olduğunu yansıtacak şekilde güncellendiğini unutmayın.

Umarım, UX ekibinin bir özelliğin tasarımına nasıl yaklaştığını gösteren bu örneği beğenmişsinizdir. Kullanıcı arayüzü sanat hedefimizi tartışmak için işleri Bernard’a teslim etmeden önce kısa bir soru sormak istedim:

CoH 1 veya CoH 2’nin menülerinde veya arayüzünde herhangi bir işlem yapmanızı veya istediğiniz komutu vermenizi engelleyen herhangi bir şey var mıydı? Vermek istediğiniz bir komut, görmek istediğiniz bir etkileşim ya da UX ve UI’da yapmak isteyip de yapamadığınız herhangi bir şey?

Çok teşekkür ederim ve geri bildiriminizi duymak için sabırsızlanıyorum!

——————————

Herkese selamlar, ben Bernard. Company of Heroes 3’ün Arayüz Tasarım Direktörüyüm. UI sanat ekibimiz ben, Tony ve Sanat Direktörümüz Tristan’dan oluşuyor. CoH3’de size yeni bir arayüz deneyimi getirdiğimiz için heyecanlıyız. UX ve oyun ekiplerimizle yakın bir şekilde çalıştık ve franchise için aldığımız yeni tasarıma güveniyoruz ve umarız bizim hedefimizi beğenirsiniz.

DUYGU PANOSU

İlk tartışmayı başlatmak için çok önemli olduğundan ve bu yılki ön uçta (front end) ne görmek istediğimizi belirlediğimizden önce bir ruh hali panosu hazırladık. Ön uç, menüler, ilk arayüz ve oyuncu bir sefer veya maç başlatmadan önceki genel sunum olarak adlandırdığımız şeydir. Esasen, deneyimleri sırasında “ön”lerinde görecekleri ve etkileşime girecekleri şey.

TV programı girişleri, filmler, diğer oyunlar ve daha fazlası dahil olmak üzere ilham almak için çeşitli kaynaklara baktık. Savaşın stilize edilmiş bir tonunu yakalayan Kodachrome görüntülerden büyük bir etki aldık.

Tema

CoH 3 için temamızı tanımlayan üç unsur

1: IŞIKLI MASA

Işıklı masa, üzerine yerleştirilmiş fotoğraf filmlerini veya sanat eserlerini incelemek için kullanılan bir görüntüleme cihazıdır. Kendi kendine ayakta duran bir ışık kutusunun yatay bir formu, yarı saydam bir kapak ve az ısı yayan floresan ışıklar aracılığıyla nesnenin alttan eşit şekilde aydınlatılmasını sağlar. Işık tablosu efekti, birincil bilgi ve görüntüleri görüntülemek için arka planımız olacaktır. Dolu filmden tasarım ipuçları, içerik için pencereler/paneller olarak kullanılacaktır (ayrıca Baş Üstü Göstergesi’de (HUD)).

Ön uç boyunca ‘Lightboard teması’ kullanılacaktır. Askeri ve fotoğrafik katmanlı beyaz arka plan, illüstrasyonlar ve harita görüntüleri ile arka plana dahil edilecektir. Pencereler ve paneller ‘film’ özelliklerini paylaşacak. Vurgular ve kullanıcı göstergeleri için Kodachrome renkleri kullanılacaktır.

2: KODACHROME

Her biri bir ana renge duyarlı üç emülsiyonun tek bir film bazında kaplandığı Kodachrome süreci, Leopold Godowsky Jr. ve Leopold Mannes’in buluşuydu, iki müzisyen, fotoğraf araştırmalarında çalışan bilim adamlarına dönüştü. Bu film tarzı, ön uç ve HUD boyunca arka plan ve kahraman görüntüleri için kullanılacaktır. Siyah Beyazdan Kodachrome’a renklendirme/geçişler baştan sona görülecek ve Renk Paletimiz de Kodachrome örneklemesinden alınacaktır.

3: PARALAKS

Paralaks (Eski Yunanca παράλλαξις ̶ paralaksi, ‘değişim’ anlamına gelir), iki farklı bakış açısı boyunca bakıldığında bir nesnenin görünen pozisyonundaki bir yer değiştirme veya farktır ve bu iki çizgi arasındaki eğim açısı veya yarı açısı ile ölçülür. Tüm içerik katmanlara yerleştirilecek ve bilgilerin ayrılmasını göstermek için bunlara paralaks etkisi uygulanacaktır.

Ön uç, paralaks etkisini oluşturmak için Z ekseninde ofset koordinatlarına sahip katmanlar içerecektir. İçeriğin ana gövdesi, sonraki katmanlarda arkasında destekleyici içerikle birlikte ilk katmanda yaşamalıdır. Derinlik eklemek için sonraki katmanlara katman efektleri (bulanıklaştırma gibi) uygulanacaktır. Katman 1’deki bilgiler, hiçbir katman efekti uygulanmadan her zaman net olmalıdır. (Yukarıdaki mockup henüz tamamlanmamıştır).

Renk Paleti

CoH 3’ün ön uç paleti için bir Kodachrome renk standardı seçtik. Kodachrome Renkli film İkinci Dünya Savaşı’nda nadirdi. Çatışma sırasında çekilen fotoğrafların çoğu siyah beyazdı ve renkli fotoğrafçılık hâlâ nispeten yeni bir teknikti. Biraz renk vermek istedik ve Kodachrome spektrumu mükemmel bir uyum sağladı.

Not: Bunlar eski mockuplar ve Alpha öncesi veya son oyunda mevcut kullanıcı arayüzünün göstergesi değildir.

HUD

HUD (Baş Üstü Göstergesi), Film ve Kodachrome görüntüleri dahil olmak üzere ön uçtan öğeler içerecektir. HUD’ın hedefleri, daha fazla oyun içeriği göstermek için açık ve kısa olmaktır.

Hâlâ HUD’da 3D öğeleri temsil etmenin daha iyi yollarını araştırıyoruz (askerler ve komut kartı öğeleri).

Ön uçtan HUD’a geçiş sırasında süreklilik göstermek önemlidir, bu nedenle film gibi öğeleri oyunda panel olarak kullanmak üzere aktaracağız.

Mevcut HUD sanat tarzımız hakkında ne düşünüyorsunuz? Mevcut hedefimiz hakkında herhangi bir yorumunuz veya sorunuz var mı?

Göstergeler

Göstergelere yeni bir yaklaşım getirerek onlara daha net ve kesin bir sunum sağlıyoruz. Simgeler ve renkler artık kalın çizgiler ve kontrast renklerle kullanılacak. UI sanat ekibi hâlâ mümkün olan en iyi deneyimi sunmak için çalışıyor. Tüm tasarımlar hâlen devam etmektedir.

CoH 3 için en yeni Gösterge stilleri hakkında ne düşünüyorsunuz? CoH 1 veya CoH 2 Göstergelerinde özellikle iyi çalıştığını düşündüğünüz herhangi bir şey var mıydı? Veya CoH 1 veya CoH 2 Göstergeleri, dahil edilmesi gerektiğini düşündüğünüz herhangi bir şeyi gözden kaçırdı mı? CoH 3 Göstergelerinin mevcut durumu ve yaklaşımı hakkında herhangi bir yorumunuz veya ek sorunuz varsa bize bildirin.