Gamasutra: Sisi Yuan’ın Blogu – (UX Design)Bilgi ve ifadesinin dengelenmesi

Aşağıdaki blog yazısı, aksi belirtilmedikçe, Gamasutra topluluğunun bir üyesi tarafından yazılmıştır. İfade edilen düşünce ve görüşler, Gamasutra veya ana şirketine değil, yazara aittir. 01 Oyun Arayüzü Arayüzünün Bilgi Düzeyi ve Etkileyiciliği Oyun Arayüzü Arayüzü Bilgi Düzeyi, kullanıcıların etkili bilgi edinmeleri için önemlidir. Oyun arayüzünde bilgi sunumunun mantıksal yapısını yansıtır. Bu tür bilgi yapısıyla başa çıkmak için görsel efekt ve görsel yöntem, oyun görevlerinin tamamlanmasını, psikolojik deneyimi ve bilgi iletişiminin verimliliğini etkileyecektir. Bilgi tasarımı, tasarımın karmaşık bilgileri sunmak için net ve anlaşılması kolay hale getirdiği kavramı ifade eder. İnternetteki bilgi miktarı çok büyük ve kullanıcının zamanı sınırlı olduğundan, oyun tasarımcıları bir oyunun daha göz alıcı olmasını istiyor. Kullanıcıları yakalamak için, kullanıcı arayüzünü ve bilgilerin nasıl sunulacağını araştırmalı ve geliştirmeliyiz. Oyun kullanıcı arayüzünün tasarımı, mobil arayüzün “kapsayıcısının” sınırlamasından kaçamaz. Bilgi hacmi, konteynerin taşıyabileceğinden çok büyükse, bilgi yapısı karmaşık hale gelecek ve kullanıcıların kavramları anlaması için daha uzun zamana ihtiyacı olacaktır. Bu nedenle tasarımcıların, kullanıcıların bir konsept oluşturma süresini kısaltmak için makul bir bilgi mimarisi tasarlamaları gerekir. Tersine, bilgi miktarı küçükse ve kap bu miktarda bilgiyi barındırabiliyorsa, bilgi mimarisi o kadar basit olacak ve kullanıcının bir kavram oluşturma süresi o kadar kısa olacaktır. Öyleyse, ifade ve bilgi dikkate alındığında ne tür bir bilgi yapısı ve seviyesi mükemmeldir? “Mükemmel Bilgi Düzeyi” esas olarak şu iki özelliğe sahiptir: 1. Anahtar bilgi ile ikincil bilgi arasında orta düzeyde kontrast 2. Bilgi ve modüllerin açık hiyerarşisi. 02 Görsel tasarım ve sunum yöntemleri Daha iyi görsel sunum için bilgi hiyerarşisi nasıl tasarlanır? 1. Arayüzlerin eleman boyutunu planlayın İlk aşamada, tasarımcının doğru elemanları ve bilgileri seçmesi ve iç mantığını planlaması gerekir. Görsel öğelerin boyutunu ve konumunu düzenleyerek ve planlayarak, bilgilerin önemi görsel olarak yansıtılabilir ve bu da kullanıcının gözlerini yönlendirebilir. Bu nedenle tasarımcılar, degradenin boyutunu değiştirerek eleman bilgi katmanları oluşturabilir. Birinci düzey başlıklar veya temel bilgiler için, yazı tipi boyutunu ve kalınlığını uygun şekilde artırabiliriz, bu da insanların arayüzün önemli noktalarını bir bakışta kavramasını sağlar. Çoğu durumda, renk, kelime ağırlığı, ışık ve karanlık yardımı ile ayrım yapılabilir. Renk kontrastını arka planla yapmak için daha kalın bir yazı tipi ve daha canlı renkler ile daha önemli metni büyütebiliriz. 2. Odağı vurgulamak için grafikler ekleyin Bazen bir sayfada çok sayıda katman olduğunda veya bazı tasarım özellikleriyle kısıtlandığında, yazı tipi boyutu ve ağırlığının değişmesi katmanları ayırt edemez. Sayfanın odağını vurgulamak için değişen öğeler ekleyebiliriz. 3. Bilgiyi ayırt etmek için renk kullanın İyi renk uyumu genellikle tasarımcının estetiğine bağlıdır. Ancak, makul renk eşleştirme yasaları ve renk eşleştirme metodolojisinin desteğiyle makul renk eşleştirme mevcut olmalıdır. Aydınlık veya karanlık ve sıcak veya soğuk renk, bilgi hiyerarşisini ayırt etmeye yardımcı olabilir. Arayüzün bilgi hiyerarşisi yeterince güçlü olmadığında, arayüzün görsel hiyerarşisini nasıl iyileştirebileceğinizi düşünebilirsiniz. Renk, yukarıda bahsedilen büyüklük ve mesafeye ek olarak, bir bilgi aktarım aracı olarak görsel hiyerarşinin düzenlenmesinde de bir ölçüde rol oynayabilir. Renk sadece alanı bölmek için etkili bir araç değil, aynı zamanda kullanıcıların duygularını da etkili bir şekilde etkileyebilir. Kırmızı gibi sıcak renkler insanları heyecanlandırırken, mavi gibi soğuk renkler kullanıcıları sakinleştirebilir. Farklı renk kombinasyonları, UI bilgilerinin etkileyiciliğini artırabilir. Bu nedenle, makul renk kullanımı, bilgi hiyerarşisinin inşasında daha belirgin etkiler üretebilir. İnce bir hiyerarşi oluşturmak için UI öğelerine farklı renkler yerleştirilebilir. Örneğin, beyaz ve gri gibi renkler, diğer renklerle kontrast oluşturmak için genellikle geniş alanlar için arka plan renkleri olarak kullanılabilir. Renk, bilgi organizasyonunda ve kişilik ifadesinde de rol oynayabilir. Özel öğelerde (düğmeler, hata mesajları veya köprüler gibi) göz alıcı zıt renkler kullanmak, kullanıcıların daha fazla dikkatini çekecektir. Aşağıda renk eşleştirme için bazı ipuçları verilmiştir. bir. Renk dengesini sağlamak için en iyi oran olan %60 %30 %10 ilkesini takip edin. Alanın %60’ında ana rengin ve alanın %30’unda yardımcı renklerin kullanılması, ana rengin çok fazla olmasından kaynaklanan görsel yorgunluğu dengeleyebilir; Alanın geri kalan %10’u, daha az önemli olan ancak farklılaşmaya ihtiyaç duyan vurgu rengi içindir. Gerçek kullanıcı arayüzü tasarımında, daha fazla sayıda renk kullanmamız gerekir, ancak 7 tondan fazla olmamalıdır (7 renk değerinin olmadığını unutmayın). Her ton, zengin renk eşleşmesini bozmak için doygunluğunu, parlaklık değişikliklerini de kullanabilir. b. Doğadan ilham alın Doğadaki yaygın renkler gibi insanların aşina olduğu renkleri kullanmaya çalışın. Doğadan ilham alan renk şeması doğaldır ve tasarımınızı kullanıcının estetiğine daha uygun hale getirebilir. Sanat, çok değerli ve değerlendirilmeye değer bir kaynak olan doğanın doğrudan yansımasıdır. c. Tek renkli renk uyumu Ana renk olarak birkaç nötr renkle bir renk kullanın. d. Bitişik renk eşleştirme Eşleştirmek için renk halkasında mavi ve yeşil, kırmızı ve turuncu, sarı ve turuncu gibi bitişik renkleri seçin. e. Düşük doygunluk renk şeması “Morandi renkleri” olarak da bilinen yüksek derecede gri olan renkleri seçin. f. Tamamlayıcı renk uyumu Genellikle geniş bir alanda benzer renklerin ve küçük bir alanda tamamlayıcı renklerin kullanılması kullanıcıların dikkatini çekmeye yardımcı olabilir. Veya soğuk ve sıcak renk eşleştirmesi kullanmak, işi zengin ve renkli hale getirir. g. Okunabilirlik herhangi bir tasarımda önemli bir faktördür Renkler, özellikle metinle uğraşırken net ve okunması kolay olmalıdır. Bu nedenle kontrast, görsel efekt için kritik öneme sahiptir; çok az kontrast, arayüzün gri ve bulanık görünmesine neden olur. Net karşıtlık genellikle iki renk kutbu kullanır, beyaz kelimelerle siyah kağıt veya siyah kelimelerle beyaz kağıt. İçeriği renkli arka planlarda net hale getirmek için gri metin yerine saf beyaz veya yüksek parlaklıktaki metni eşleştirmeniz gerekir. Ayrıca metne yakın tamamlayıcı renklere ve parlaklığa sahip renkli arka planlardan kaçınmaya da dikkat etmelisiniz, çünkü bu iki eşleşme bir “titreme efekti” üretecek, halenin görsel bir etkisini yayarak oyuncuların okumasını zorlaştıracaktır. Son derece doygun renkler insanların dikkatini çekme eğilimindedir. Kısacası, vurgulamak istediğiniz bilgiler, renk kontrastı kullanılarak, ton değiştirilerek, doygunluk artırılarak veya kontrast artırılarak bilgi katmanlaştırılarak ayırt edilebilir. 4. Görüşü yönlendirmek için daha büyük boşluklar Birbirinden alakasız iki öğeyi ayırmak istiyorsanız, ayırıcı kullanmak doğal mıdır? Elbette, ancak bu yaklaşım daha fazla bilgi gürültüsü getirir ve genel hiyerarşiyi etkileyebilir. Beyaz boşluk veya negatif boşluk kullanmak çok daha rahat olurdu. Gestalt ilkeleri arasında, benzer konumlardaki öğeleri bir bütün olarak ele alma eğiliminde olduğumuzu ifade eden yakınlık ilkesi vardır. Ve araştırmalar, yakın mesafeye sahip projelerin, benzer şekillere/renklere sahip projelere göre bir bütün olarak düşünülme olasılığının daha yüksek olduğunu doğruladı. Elemanlar birbirine belirli bir dereceye kadar yakın olduğunda, tamamen farklı özelliklere sahip olsalar bile, onları birbirleriyle ilişkili olarak düşünmeye daha meyilliyiz. Bu ilke arayüz tasarımında da kullanılabilir. Farklı modülleri uygun şekilde ayırmak, bilgi modülleri arasındaki ayrımı daha belirgin hale getirir. Ayrıca, hiyerarşi oluşturmak için gölgeler ve bölücüler kullanın ve öğeleri yalıtmak için beyaz boşluk kullanın. İçerik bloğunun çok monoton olduğunu düşünüyorsanız, bu bloğun görsel özelliklerini tasarım amacınıza göre geliştirebilirsiniz. İçerik alanının bir tarafına bir renk çubuğu eklemek, bu bloğun içeriğine duygular verirken görsel nitelikleri iyileştirebilir. Renk çubuğu, iletmek istediği görsel bilgiye bağlı olarak tek renk veya gradyan olabilir. Renk çubuğu da işlevsel olabilir. Tabii ki, bu büyük ölçüde nispeten düz sayfalarda kullanılır ve sayfanın kendisi zaten süslüyse daha az kullanışlıdır. 5. Dinamik dönüştürmeyi kullanma Birçok oyun arayüzü, kullanıcı deneyimini geliştirmek için özel animasyon efektleri ekler. Bazı senaryolarda, özel efektlerin kullanılması, oyunun oyuncularla iyi bir şekilde etkileşime girmesini sağlar. Sürekli sayfalarda dinamik geçiş efektlerinin kullanılması, kullanıcıların deneyim rotasını hatırlamasını kolaylaştırabilir ve yumuşak hareket geçiş efektleri, kullanıcıların kullanırken veya oynarken daha tutarlı bir deneyim yaşamasını sağlar. Mükemmel oyun kullanıcı arayüzü, ifadeyi vurgularken bilgi modüllerinin ve arayüz seviyelerinin netliğini sağlar. Tasarım yaparken, bilgi arasındaki mantıksal ilişkiyi sıralamak ve grafik öğeler, renk şemaları ve dinamik özel efektler aracılığıyla arayüzün ifadesini geliştirmek gerekir.

About admin

Check Also

Overwatch’ın McCree’si, adaşı Blizzard’dan kovulduktan sonra adını değiştirecek

Eski bir Blizzard çalışanının adını taşıyan Overwatch kovboy kahramanı McCree, yakında adını değiştirecek. Onun adaşı, …

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

wordpress tema