Baskı altında okunabilirlik
Bir savaş ekranı aynı anda geri sayımı, yıldız göstergesini, üç ganimet sayacını ve altı asker kartını taşıyor. Bunların hiçbiri, oyuncunun o an ihtiyaç duyduğu dokunma hedefiyle yarışamaz.
Mobil Oyun Arayüzü · Konsept ve Sanat Yönetimi
Emberfall
Emberfall, Clash of Clans tarzı bir mobil üs kurma oyunu için kendi başıma başlattığım bir konsept. On ekran, belgelenmiş bir bileşen kütüphanesi ve izometrik bir dünya; elmas ikonundan köyün kendisine kadar her görsel, dışarıdan tek bir dosya almadan Figma içinde üretildi.
Proje
Hakkında
Emberfall bir brief olarak değil, bir soru olarak başladı: Ortada ne bir illüstratör, ne bir 3D aşaması, ne de hazır bir görsel varken tek bir tasarımcı eksiksiz bir oyun arayüzünü nereye kadar götürebilir?
Cevap, arkasında kendi kurgusu olan bir üs kurma strateji oyununa dönüştü. Oyuncular volkanik adalarda yaşayan Forge Lord'lar; kayadan cevher çıkarıyor, asker yetiştirmek için ember yakıyor ve kara elmas için birbirlerine akın düzenliyor. On ekran, açılıştan mağazaya kadar döngünün tamamını kapsıyor.
Projenin kapsadıkları
- Oyun Arayüzü
- Sanat Yönetimi
- Tasarım Sistemi
- Prosedürel İllüstrasyon
- Figma
Kendime Koyduğum
Üç Problem
Ne müşteri vardı ne de bir talep, o yüzden önce kendi kısıtlarımı yazdım. Bu noktadan sonra çıkan her şeyi bu üçüne göre değerlendirdim.
İllüstrasyonsuz derinlik
Casual oyun arayüzleri kalınlık yanılsamasıyla yaşar. Elimde ne 3D render ne de çizilmiş görsel vardı; derinliğin tekrarlanabilir bir gradyan ve gölge dizisinden gelmesi gerekiyordu.
Devredilmeye hazır
Sadece düz görseller olarak var olan bir konseptin bir ekip için hiçbir değeri yok. Token'lar, bileşenler ve boşluk kuralları dosyanın üstüne düşülmüş notlar değil, dosyanın içindeki gerçek nesneler olmalıydı.
“Bir yüzeyin neden üstte daha açık olduğunu açıklayamıyorsam, o yüzey yanlıştır.”
Paleti Açıklayan
Bir Dünya
Emberfall volkanik adalarda geçiyor. Oyuncular kayadan cevher çıkarıyor, asker yetiştirmek için ember yakıyor ve kara elmas için birbirlerine akın düzenliyor. Kurgu netleşince palet kendi kendini yazdı: oyuncunun sahip olduğu her şey için soğuk mor taş, enerji için sıcak ember ışığı, ödül için altın.
-
Altın
Kayadan çıkarılıyor. Binaların ve duvarların bedelini ödüyor. Oyunun ödül rengi, bu yüzden asla arka plana dönüşmüyor.
-
Ember
Aşağıdan borularla çekilen erimiş yakıt. Asker yetiştiriyor ve yükseltiyor. Isı ya da üretim olan her yerde kullanılıyor.
-
Kara Elmas
Kraterde oluşan nadir kristal. Zaman satın alıyor. Sadece premium anlara ayrıldı; böylece oyuncu onu anında okumayı öğreniyor.
Yön veren kelimeler
- volkanik
- oyulmuş taş
- sıcak kenar ışığı
- ağır ve dokunulası
- kol mesafesinden okunur
- ince çizgi yok
Işık Her Zaman
Yukarıdan Gelir
Kuralı, tek bir şey çizmeden önce yazdım. Yükselen her yüzeyin üstünde bir parlaklık bandı, çevresinde koyu bir kenar, üst dudağında parlak bir iç çizgi ve altında yumuşak bir gölge var. Çukurda kalan her yüzeyde ise tam tersi.
Bundan sonra paneller, butonlar, hap şeklindeki etiketler ve çipler tek tek karar vermeyi gerektirmedi. Uygulanacak tek bir tarif ve buna uymayan her şeyi reddetmek için tek bir gerekçe vardı.
Tek bir panelin kuruluşu
01 Düz dolgus2 düz renk, başka hiçbir şey yok
02 Temel gradyanüstte s3, altta s1
03 Koyu kenar2.5px ink çizgi, içeride
04 Üst parlaklıkbeyaz yüzde 44’ten yüzde 3’e
05 İç dudakiç gölge, beyaz yüzde 40
06 Düşen gölgey4 blur10 artı y1 blur2
Yükseklik skalası
e1çip ve rozet
e2kart ve buton
e3panel ve tepsi
e4modal ve ekran
glowbirincil aksiyon
wellgömülü yuva
Altı özellik, tek bir sıra, istisnasız. Aynı tarif 17px'lik bir sayaç rozetinden tam ekran bir tepsiye kadar ölçekleniyor; arayüzün tamamının tek bir malzeme gibi okunmasının sebebi bu.
Yirmi Altı Token,
Yedi Rol
Oyundaki her renk, görev tanımı olan bir Figma değişkeni. Rampalar açıktan koyuya doğru ilerliyor; böylece bir gradyan, elle seçilmiş iki hex değeri yerine yan yana iki token olarak yazılabiliyor.
Yüzey: oyuncunun sahip olduğu taş
- ink#0A0712
- vd#100B1C
- night#171129
- s1#241B3C
- s2#322549
- s3#453361
- s4#5C4680
- mist#BDB2D8
- dim#8B7FA8
- w#FFFFFF
Altı vurgu rampası, her birine bir görev
GoldÖdül ve birincil aksiyon
- g1#FFE7A3
- g2#FFC24D
- g3#E8951C
- g4#A65A0A
GreenOnay ve ilerleme
- e1#7BE87A
- e2#3FBF52
- e3#1F8A3C
- e4#0E5C29
RedSaldırı ve tehlike
- r1#FF8FA3
- r2#F2445F
- r3#B01F3C
- r4#6E0F26
GemPremium para birimi
- a1#DDB0FF
- a2#A855F7
- a3#7326D6
- a4#47128C
EmberIsı ve kaynaklar
- m1#FFD07A
- m2#FF8A3D
- m3#D9541E
AzureBüyü ve deneyim
- z1#A8E6FF
- z2#38BDF8
- z3#0C7FB8
Altın hiçbir zaman metnin arkasına geçmez
O, ödül rengi. Arka plana dönüştüğü anda ödül anlamını kaybediyor.
Yeşil sadece onaylar
Yetiştir, topla, yükselt, bağışla. Bunların dışında hiçbir şeyin yeşil olmasına izin yok.
Kırmızı sadece saldırır ya da uyarır
Saldırı butonuyla teslim ol butonu aynı rengi paylaşıyor ve bu bilinçli bir tercih.
Elmas para demek
Ekranda mor görünüyorsa işin içinde gerçek para ya da premium para birimi var demektir.
İki Yazı Karakteri,
Her Birine Bir Görev
Lilita One, oyuncunun bir bakışta okuduğu her şeyi taşıyor: başlıklar, sayaçlar, buton etiketleri. Montserrat ise gerçekten okunması gereken her şeyi. Başka hiçbir karaktere izin yok.
Başlıklar 64'ten 24'e, sayaçlar 28'den 17'ye, buton etiketleri 26'dan 12'ye iniyor; hepsi bir gradyanın üzerinde ayakta kalabilsin diye daima 2.5px dış çizgiyle. Etiketler geniş harf aralığıyla 9-15 arasında Black, gövde metni 14-19 arasında Medium. Oyunun hiçbir yerinde 9px'in altına inen bir şey yok.
Köşe yarıçapı skalası
- 10rozet
- 12çip
- 14yuva
- 16buton
- 20kart
- 26tepsi
- 30ekran
Sağdan ve soldan 16px ekran boşluğu, grid ve listelerde 12-14, kart içinde 8 ve yükselen her yüzeyde 2.5px kenar çizgisi. Bu dört sayı yerleşimin tamamını karşılıyor.
İki Bileşen,
Tek Kural Seti
Sadece her ekranda tekrar eden iki parça gerçek bileşene dönüştü. Geri kalan her şey, sayıları sabitlenmiş belgelenmiş bir desen; bu da dosyayı hafif tutuyor ve varyant enflasyonunu daha başlamadan durduruyor.
-
HUD / üst bar390 × 104
Oyuncu rozeti ve dört sayaç. Tam genişlikte bir barın üzerinde oturmak yerine dünyanın üzerinde havada duruyor.
-
Nav / alt bar390 × 108
Üs, ordu, klan ve mağaza; ortada barı bölen yükseltilmiş saldırı aksiyonuyla.
Altı buton durumu
Yükselt, hemen al, saldır, elmas kullan, iptal ve kilitli. Her ekran yedincisini icat etmek yerine bu sıradan seçiyor.
Binalar Çizilmedi,
Yazıldı
Köy bir illüstrasyon değil. Figma içinde küçük bir izometrik rutin yazdım: bir grid hücresi, bir taban alanı, bir yükseklik ve bir palet alıyor; karşılığında görünen üç yüzeyi, üst kenarlar boyunca bir kenar ışığını ve yumuşak bir temas gölgesini döndürüyor.
Çatılar, kubbeler, sancaklar ve toplama baloncukları da aynı mantıkla çalışıyor. Bu yüzden bütün bir köyü yeniden boyamak, ikinci bir çizim değil, bir palet parametresi meselesi.
Tek bir bloğun anatomisi
- Üst yüzeyEn açık ton. Işığın doğrudan çarptığı tek yüzey burası.
- Sağ yüzeyOrta ton ve alt yarısında ışık düşüşü için yumuşak bir siyah gradyan.
- Sol yüzeyEn koyu ton, aynı gradyan. Üst yüzeyden daima iki ton uzakta, asla bir ton değil.
- Kenar ışığıİki üst kenar boyunca yüzde 95 ve 50 opaklıkta 1.6px'lik bir çizgi. Kalınlık hissini veren şey tam olarak bu.
- Temas gölgesiTaban alanının altında üst üste iki elips. Onlar olmadan binalar havada duruyor.
Aynı rutin, yeniden boyanmış hâli
Aradaki fark bir illüstrasyon değil, bir palet parametresi. Rutinin var olma sebebi tam olarak bu.
Tonu Belirleyen
İki Ekran
Oyuncu bir oyunun nasıl hissettirdiğine ilk altı saniyede karar veriyor. Açılış ekranı kurguyu taşıyor. Üs ekranı ise arkasında koca bir dünya hareket ederken okunaklı kalmak zorunda.
- Fotoğraf değil, katmanlı gökyüzüSekiz gradyan durağı, üç sıradağ silüeti, bulanıklaştırılmış bir krater parıltısı ve alttan bir karartma katmanı. Her katman düz bir vektör şekli, bu yüzden ekranın tamamı hafif kalıyor.
- HUD havada duruyorHiçbir şey tam genişlikte bir barın üzerinde oturmuyor. Hap şeklindeki göstergeler kendi gölgelerini dünyanın üzerinde taşıyor; bu da köyü okunaklı tutuyor ve kameraya alan bırakıyor.
- Ekran başına tek bir yüksek sesli butonKöşedeki yeşil aksiyon inşa etmek, navigasyondaki yükseltilmiş kırmızı ise saldırmak için. Oyuncudan hiçbir zaman bağıran iki buton arasında seçim yapması istenmiyor.
On Ekran,
Tek İskelet
Üst bar, içerik kolonu, alt navigasyon. Her ekranda aynı üç bölge; onuncu ekranın bir gün yerine bir saat sürmesinin sebebi de bu.
Yanımda Götürdüğüm
Üç Şey
Kuralı piksellerden önce yaz
Işık tarifini tanımlamak yirmi dakikamı aldı ve sonrasında yüzlerce küçük tartışmadan kurtardı. Oyundaki her yüzeye o tek paragraf karar verdi; her şeyin tek bir malzeme gibi okunmasının sebebi de bu.
Auto layout bir doğruluk aracı
Onu bir kolaylık olarak görmeyi bıraktım. Her ekran sabit boşluklara sahip tek bir kolona dönüştüğünde üst üste binme ve kayma ihtimali imkânsıza indi; koca bir bölümü, altındaki hiçbir şeyi kontrol etmeden taşıyabilir hâle geldim.
Üretilen görsel farklı ölçekleniyor
Köy bir çizim değil bir rutin olduğu için, düşman üssü bana ikinci bir illüstrasyona değil tek bir palete mal oldu. Bir sonraki projeye ilk taşıyacağım şey bu olacak.
- 10
- Tasarlanan ekran
- 26
- Renk değişkeni
- 6
- Buton durumu
- 0
- Dışarıdan alınan görsel