Elbette anlıyorum, sen Indie'sin. Veya kariyer değiştirmek. Ya da okuldan yeni çıkmış - ya da herhangi bir sayıda yasal olarak iyi mazeret. Tabağınızda çok şey var ve modern dünyanın en karmaşık sanat formlarından birinde ustalaşmak için neredeyse yeterli zamanınız yok .
Bilmeliyim ki, oyunlarda ve uygulamalarda uzmanlık sahibi arkadaş canlısı mahalle UI Tasarımcısı, Yönetmeni ve Mentoruyum. UI UX Design'da kim-bilir-kaç öğrenciye rehberlik ederek, öğretemediğim öğrencilere cömertçe geri vermek istedim (henüz!). Bu yüzden bilinen en akıllıca formatta bazı bilge kelimeleri bir araya getirdim: madde işaretleri; her acemi, indie ve Up-And-Comer'ın bariz hatalardan kaçınmasına ve kendi başlarına yepyeni hatalar yapmasına yardımcı olmaya hazır!
Tasarımcı arkadaşlarıma bir not: Hayır. Seni orada durduracağım. Evet, bu yönergelerin başka yolları, düşünceleri, istisnaları vb. Vardır. Bu, tasarımcı olmayanlar içindir; Kendinizi bir Bauhaus çölünde kaybolmuş bulursanız bir Hayatta Kalma Rehberi. Bu kurallar, inanılmaz bir kullanıcı arayüzü tasarımcısını şekillendirmek anlamına gelmez - sadece dünyayı korkunç derecede korkunç bir hale getirin.
Açılış Sayfası / Ana Menü Nova Blitz (PC, Dragon Foundry) için tasarladığım
- Kötü Tipografi
- Bir Sans Serif seçin (“ince bitler” içermeyen fontlar). Özellikle mobil ekranlarda daha iyi okuyorlar
- 2 yazı tipiyle çalışın: Başlık yazı tipi ve Gövde yazı tipi. Başlık yazı tipi, başlıklar (!) Ve alt başlıklar olarak idareli kullanılmalıdır. Bir gövde yazı tipi nispeten sıkıcı olmalı ve yoğun paragraflarda ve küçük boyutlarda iyi okunmalıdır
- Yeni başlayanlar için bir kılavuz olarak, en fazla 2 yazı tipi boyutu seçin ve tüm ekranlarınızda tutarlı kalın. Optimal olarak Başlık yazı tipiniz için özel olarak iki boyut ve gövde yazı tipi için özel olarak iki boyut seçin. En kötü durum ortamınızdaki en kötü metin alanlarınıza göre uygun bir yazı tipi boyutu belirleyin!
- Uzun metin alanlarını çift satırlı hale getirerek çözün. Programlı bir şeyden daha basit bir çözüm. Çeviri mi? Almanca genellikle herhangi bir İngilizce karşılığının iki katı uzunluktadır, bu nedenle dizelerin en az iki katına çıkması fikri etrafında çalışın .
- Şüpheye düştüğünüzde sola yaslayın. Doğru gerekçelendirme seni Sanat Okulunda öldürür ya da daha kötüsü ...
Zombie Gunship Survival (mobil, Limbic Games) için hazırlanmış Üs Yapı HUD'si
HUD tasarımı, tıpkı tipografi gibi, sedefli güzelliği ve uçsuz bucaksız korkularla dolu bir okyanustur. Her öğrenciye ve her geliştirme ekibine söylediğim gibi, "Gönderilene kadar HUD üzerinde çalışacağız".
Ve biz yapıyoruz. Her. Tek. Zaman.
Bu nedenle, HUD'ların müthiş bir takdirine (ve ilkel dehşetine) sahip olarak, yıllarınızın çok ötesinde bir Tasarımcı gibi okumanızı sağlayacak düzeltebileceğiniz birkaç şey var:
- İnce çizgiler yok! Hareket ısındığında bunlar kolayca kaybolur ve mobil cihazlarda neredeyse yarı saydam hale gelirler
- Kırmızı HUD yok! Kırmızı, geçersiz veya koşullu olarak okur ve kırmızıyı bir uyarı olarak kullanmadan görsel bir dil oluşturmaya çalışırken bir Sisifan zamanınız olur.
- Önemli bilgilerin ekran gürültüsünden ayrılmasına yardımcı olmak için kayan metin olmamasına, arkasında bir şekil veya tasarımla desteklemeye çalışın. Yapamaz mısın? Arka plandan çizmek için kayan metin alanlarının çevresine ince bir kontur veya gölge ekleyin. Kalın bir sans serif kullanıyorsunuz, değil mi?
- Oyunun hareket halindeyken bir videosunu çekin ve mümkün olduğunca erken bir zamanda HUD'nizi onun üzerine yerleştirin ( özellikle tel kafes aşamasında bile !). İşteyken her zaman HUD'nin nasıl hareket halinde ve telaşlı, renkli bir eylemde çalıştığını görmeye çalışırım. Hiçbir zaman hiçbir HUD statik olarak var olmayacak, bu yüzden video gerçekçi koşullar altında çok daha hızlı prototip oluşturmama yardımcı oluyor.
My Health Bar Explorations for Wasteland 3 (PC ve konsol, inXile ve Microsoft)
Tasarımcılarımı seviyorum, onları ölesiye seviyorum - ama aynı zamanda işlerinin olabildiğince insanca ekrana yansıtmak olduğunu düşündüklerine inanıyorum (The Great Kitchen Sink School of Applied Design). Yanınızda parmak sallayan bir UX Tasarımcısı yoksa, muhtemelen "Bu bilginin% 100'ü alakalı ve gereklidir, kahretsin!" birkaç kez tuzağa düşürün. Bundan kaçınmanın birkaç yolu:
- Ekranda görüntülemek istediğiniz her şeyi yazın ve en çoktan en az önemli olana doğru bir sayı değeri atayın. Bu sizin Hiyerarşiniz, UX tasarımında kritik bir kavramdır. Listenizdeki öğeleri, en yüksek değer, daha düşük değerlere göre daha fazla gayrimenkul ve öneme sahip olacak şekilde sıralayın. Sayısal öneminizin üzerine inşa edin. Ağaçlar asla yapraklarla başlamaz - siz de yapmamalısınız. Tasarımınızın kökeni, hayati öncelikleriyle başlayın ve temellerinizin üzerine inşa edin.
- "Kaydolma" bilgilerine, yani yalnızca bir kullanıcı talep ettiğinde mevcut olan bilgilere sahip olun. Bu şunlar olabilir: yalnızca bilgi ilgili olduğunda ortaya çıkan görüntüler (güncellemeler veya kazanılan deneyim). X süresinden sonra kaybolan bilgiler (eylemsiz HUD, başarı kilometre taşları). Tek bir seçenek düğmesinin (üç nokta veya hamburger menü düğmeleri) altında garip üçüncül seviye işlevleri bile gizleyebilirsiniz.
- Arayüzünüzün büyük bölümlerini kaldırmaya başlayın ve test edin. Veya tam tersini deneyin ve en temel 3 unsurla başlayın ve ondan inşa edin. Mutlu olmak için ekranda ne kadar az ihtiyacınız olduğuna gerçekten şaşıracaksınız. Ayrıca, ekranda ne kadar az şey varsa, estetik veya lojistik olarak hepsini bozma şansınızın o kadar az olduğunu keşfedeceksiniz. Minimalizm, projeleri ve hayatları kurtarır.
Wasteland 3'ün Kabuk Menüsü için birçok tel çerçeveden biri (PC ve konsol, inXile ve Microsoft)
Tutarlı bir ızgara sistemi, okuyucuların bilgileri temiz ve hızlı bir şekilde ayrıştırmasına yardımcı olur. Yeni Tasarımcılar , beklediğiniz tüm fırtınalı sonuçlarla nesneleri göz küresi ile yerleştirme eğilimindedir . Öğeleri rahat kenar boşlukları olan dar bir ızgara üzerine yerleştirmek, her ekranın kristal netliğinde okunmasını sağlayacaktır. Genel olarak:
- Şüpheye düştüğünüzde, Altın Oran 3'lerinde boşluk bırakın . ⅓ ile ⅔'yi eşleştirmek, Rönesans'tan çok önce çekici bir kural olmuştur; artık bayatlayacağını düşünmek için bir sebep yok.
- Metniniz bir şeklin içindeyse, çevresinde rahat bir boşluk bıraktığınızdan emin olun. Bunun için görsel parçalara sahip değilseniz, metninizin bir şeklin kenarına kadar uzanmadığından veya onu geçmediğinden emin olun. Bunun açık olacağını düşünürdünüz, ama ... işte buradayız.
- Ekranınızı hamburger gibi yatay dilimler açısından kavramsallaştırın (Üstbilgileriniz ve Altbilgileriniz bile ekmek olarak düşünülebilir). Bu sadece duyarlı tasarım için iyi bir uygulama değil, aynı zamanda hem tasarımcı hem de zayıf kodlayıcı için bilgileri bölümlere ayırmaya yardımcı oluyor.
Call of Duty Advanced Warfare için Clan Wars Uygulaması için mobil mockup (mobil, Sismik Oyunlar, Beachhead Studios ve Activision)
Renk Teorisi, her Tasarımcının sezdiği bir beceridir. Ancak renkten etkilenenler için, kırmızı bir sağlık çubuğunun bir şekilde yanlış kırmızı olabileceği veya bir uygulamanın mavi başlığının fazla "kurumsal" olabileceği fikri şaşırtıcı görünebilir. Bununla birlikte, bir arayüzdeki renk, herhangi bir kod satırı kadar önemlidir. Ayrıca, sadece birkaç gün önce çok zarif görünen renkten bağımsız bir tel kafesi de mahvedebilir, bu yüzden dikkatli olun:
- Renklendirilecek 3 boyut vardır: Parlaklık, Ton ve Doygunluk. Parlaklık, kendin çözebilirsin. Ton, rengin ders kitabındaki tanımıdır (yeşil, maviye karşı maviye karşı) ve Doygunluk, rengin ne kadar yoğun veya soluk olduğudur (böcek öldürücü maviye karşı Paskalya yumurtası mavisi). Çoğu Hintliler, patladıklarını sanarak çılgınca doygun renkler seçme eğilimindedir, ancak bir restorandaki bir güvercin gibi dikkatlerini dağıtırlar. Önce bir rengin parlaklığı ve doygunluğuyla oynayın - ne yaptığınızı anlayana kadar, ince kalmasını sağlayın.
- Göz, artan çekicilik sırasına göre şu şeylere çekilir: canlı renkler, yüksek kontrast, yüzler. Göze liderlik etmek, bir başlangıç noktası oluşturmak veya belirli alanlardan uzak durmak için hiyerarşinizi güçlendirin. Karanlığa ve daha derin doygunluğa sahip çıkartmaları veya arka planları geri çevirin. Parlaklık, yüksek kontrast, avatarlar ve portreler vb. İle önemli alanları çevirin.
- Bir kez daha, bir UI için ana renk olarak asla kırmızıyı kullanmayın. Her zaman geçersiz veya koşullu olarak okunur ve kırmızı renk olmadan tüm bir arabirimi koşullu veya uyarı olarak oluştururken iyi şanslar.
- Özellikle gezinme birden çok yerde görünüyorsa, yalnızca gezinme için bir renk ayırın. Saldırgan bir şekilde aşikar olması gerekmez, ancak izleyicinin bir ekrandan diğerine nasıl geçtiği konusunda tutarlı olmalısınız. Geometride çevreleyen gezinme, "tıkla beni" anlatımının ana sayfasına yönlendirilmesine de yardımcı olur.
Mobil oyunlar için bir mesajlaşma sistemi için Benim Spekülatif Wireframe
Bunu daha önce duyduysan söyle bana. Pinterest'tesiniz veya Google bulabildiğiniz her türlü kullanıcı arayüzü ekranını kapıyorsunuz. Bu sulu kapışma festivalinde beğendiğiniz bir arayüz bulup haykırıyorsunuz, "Neden, bu arayüz ihtiyaçlarım için mükemmel, sadece bunu kopyalayacağım ve dertlerim bitecek!"
Bunların dışında sorunlar hücresel mitozdan sonra gitmek üzere.
Bir arayüzü kopyalayıp yapıştırdığınızda, çok özel bir sorunu çözmek için birkaç Yeteneğin gerekli olduğu ayları, muhtemelen yıllar süren iyileştirmeyi hesaba katmazsınız . Sadece sizinkiyle doğrudan bağlantılı görsel bir soruya başkasının cevabını alıyorsunuz.
Ve bu, önce tekniğe odaklanmanın klasik, muhtemelen klasik hatasıdır. Burada tam olarak ifade edilmesi zor nedenlerden dolayı, başkasının arayüzünü kelimesi kelimesine kopyalamak her zaman sorunlara yol açar, özellikle de bunların hepsinin çalışmasını sağlayan mantıksal ve sanatsal temelleri anlamadığınızda. Büyük hırsızlık tasarımı yapmak yerine, çok daha değerli bir şey yakalayın: daha iyi bir süreç:
- Önce fikirlerinizi çizin. Bu, işimin Kavramsallaştırma aşaması olarak biliniyor, burada tüm "düşük asılı meyve" düzeyindeki sorunların ne olduğunu çözüyorum. Projenin temel sorunları, tuhaflıkları ve zorlukları etrafında temel "yapı iskelesi" oluşturana kadar çizim yapın
- Tel kafes. Bunu yapmanın pek çok yolu var, çünkü çoğunlukla eskizler ve son sanat arasında bir aracı oluyor. Tel çerçeveyi bir TV yemeği olarak düşünün: her bölüm, et, sebzeler ve ayakkabıcı için bölümlere ayrılmış ve özel olarak boyutlandırılmış yemeğin farklı bir bölümü içindir ... Bu aşama yanıtları artırır ve daha da iyi sorular sorar.
- Sanat pasosu. Tel kafes aşaması saygın bir titizlikle yapıldıysa, Art Pass'teki mükemmel piksel sanatıyla Tellerinizi kolayca boyayabilirsiniz (bu nadiren olur). Bu nedenle, tel kafes yaptığınızda, onu son boyutlara mümkün olduğunca yakın kurduğunuzdan ve oyuna mümkün olduğunca erken bir biçimde attığınızdan emin olun. Gerçek test laboratuvarda olmaz - sahada olur.
Rage için tasarladığım Envanter Kabuğu Menüsü (PC ve konsol, iD Yazılımı)
Ve hey - test etmekten bahsetmişken, bu sonuncusu, herkesin işini biraz yapmadan işini yapamayan bir adam olarak kalbime yakın ve değerli. Ve işte birçok şapka giyen adam olduğum hakkında bildiğim kirli sır:
UI adamınız / galeriniz makul derecede yetenekliyse ve tasarımınızı gerçekleştirmek için uğraşıyorsa - bu kötü bir tasarımdır . Tam dur. UI / UX'ten tasarım sorunlarını geriye doğru nasıl düzelteceğiniz aşağıda açıklanmıştır:
- Oyunlar için, envanter sisteminiz büyük bir alan gerektiriyorsa, kendinize oyuncunun her 5 dakikada bir, her saat ve oyunsonuna göre ne kadar ganimet aldığını sorun. Filtreler ve diğer yaşam kalitesi iyileştirmelerini dahil ettiniz mi? Envanter yönetimiyle kimse eğlenmez - önce oyuncunun can sıkıntısını azaltmak için oyunu dengelediğinizden emin olun!
- Ekranda uyarılar veya durum efektleri gibi değişken sayıda öğe gösteriyorsanız, ortalama olarak kaç tane var? Max kaç tane olabilir? Eğlenceli gerçek: Midway Games'te bir blackjack mini oyunu yapmak zorunda kaldım. Ortalama Blackjack eli etrafında 2-3 kartları ... ama kesinlikle 4 ası, 4 ikişer ikişer alabilirsiniz 4threes ... şimdi sen tek bir sistem yapmaya Dünya bitmeyen istisnalar için hesaplar olduğunu!
- Uygulamalar için, insanlar ilk 5 saniye içinde mi düşüyor? Uzun yük veya gelecek kötü şeylerin habercisi olan bir iniş ekranı olabilir. Ücretsiz uygulamalar ve oyunlar inanılmaz miktarda kaç ya da savaş tepkisi yaratır ve finansal taahhütleri olmadığında insanların bu kadar kolay kapatıldıklarına şaşıracaksınız. İlk 5 saniyeyi önceliğiniz yapın, ardından sonraki 5 saniyeyi, ardından sonraki…
- Oyunlar için, oyuncularınız çok ölüyorsa, zorluk bu olmayabilir. Geri bildirim zayıf olabilir. Düşük can ve cephane için güçlü sinyalleriniz var mı? Görsel ipuçlarının yanı sıra ses var mı, örneğin bir klibin sesi daha düşük madde işaretleriyle daha boş geliyor mu? Oyuncu zayıflatıcı bir etkiye maruz kaldı mı ve bundan haberi yok mu? Çok fazla bilgi mi gösteriyorsunuz ve sonuç olarak kimse okumuyor mu?
Shadowrun: Hong Kong'da (PC, Harebrained Schemes) sanat geçişi yan yana karşılaştırması
Hiçbir Tasarımcı bir ada değildir. İyi olanlar, tasarım hakkında bilinmesi gereken her şeyi bilemeyebilecekleri varoluşsal dehşetten önce kendilerini alçakgönüllüyorlar. Bu yüzden ağ oluşturuyoruz, devam etmekte olan çalışmaları sergiliyoruz ve belki de en şok edici - yardım istiyoruz.
- Çalışmanızı kimsenin test etmesini veya eleştirmesini sağlayamazsanız, kendi başınıza bazı perspektifleri sentezlemeniz gerekir. Yeni gözlerle geri dönebilmek için projelerinizden birkaç saat uzaklaşmayı öğrenin. Bu kadar hızlı hareket etmeyi bırakırsanız, kendinizi yaratıcı bir çıkmazdan kaç kez kurtaracağınıza şaşıracaksınız.
- Çalışmanıza bakmak için herhangi bir beceri düzeyinde başka bir Creative edinin. Sanat eserleriniz (UI) için her türlü eleştiriyi tartmanız gerekirken, yalnızca alanınızdaki ve beceri seviyenizin üzerindeki Sanatçıların en iyi tavsiyeye sahip olduğunu varsayın. Mimariniz (UX) için, "Ama bu kullanılabilir mi?" Sorusuna herkesin geçerli bir cevabı olduğunu varsayın. Yine karşılaştırma yapmak gerekirse, "Ama bu sanat mı?" Diye sorulduğunda çok az kişi ciddiye alınmalıdır.
- Bir Akıl Hocası, Danışman edinin - seninle aynı yolu bilen ve aynı yolda yürüyen herkes . İstişare karşı sezgisel veya hatta bilemeyiz avantajlarını sağlamak size sidestep sorunları yardımcı olabilir için biliyorum. Akıl hocaları, birkaç ay içinde size yıllarca çalışmanızı sağlar. Ayrıca sizi pratik rehberlikle bir kariyere hazırlarlar ve hatta bir portföyü ahırda büyütmenize ve devam etmenize yardımcı olurlar. Mentor olduğumda, son dersim genellikle en dokunaklı olanıdır, bu yüzden işte burada: harita yoksa, yerlilere sorun!