Yapılarınızı Wireframe'inize

Kablolarınızı Kablolayın işlemi, UI'nizin iletişim kanallarını tasarlamak için yapılandırma ve akışınızı tasarlama sürecidir. Bu öğretici adımlarındaki kritik adım, UI elemanlarınızın düzenlenmesini, acı noktalarını keşfetmeyi ve oyuncu deneyiminizi geliştirme

örnek lazer etiketi deneyimi.rbxl dosyasını referans olarak kullanarak, kullanıcı arayüzü öğelerinizi ekranda nasıl yapılandıracağınızı gösteren bu kısım kullanıcı arayüzü öğelerinizi gösteren bir bölümdür, bu bölümde aşağıdaki yönlendirmelere de dahil edilmiştir:

• Oyuncularınızın deneyiminizde başarılı olmaları için mantıksal olarak görsel bir yapıyla yönlendirmek için görsel bir yapıyı planlıyoruz.
• Roblox'un çekirdek UI ve dokunmatik denetimlerUI elemanlarınızın yapısını incelemek için temel şekillere sahip bloklar oluşturuyor.
• Oyuncuların hedeflerine ulaşmak için yapması gereken gerekli eylemleri hesaba katmak için kullanıcı akışlarını geliştiriyor.

Bu bölümü tamamladıktan sonra, sanat tarzınıza ve kafalıklarınıza uygun Studio'daki UI'nizi nasıl inşa edeceğinizi öğreneceksiniz.

Bir Görsel Hiyerarşisi Planla

Görsel bir hiyerarhi, önceliklerine göre UI elemanlarını vurgulayan bir organizasyon yapısıdır. Bir görsel hiyerarhi planı, deneyiminizdeki farklı iş akışları için görsel bir hiyerarhi oluşturmak önemlidir, çünkü oyuncuların hedeflerine ulaşmasını hızlı şekilde sağlar, bu da hızlı şekilde ilerlemez.

Etkin görsel hiyerarşiler oyuncuları, ekranda doğal olarak göründüğüne göre oyun oynama gereksinimlerini yerine getirmeleri gereken yerlerine göre oyun oynama gereksinimlerini yerine getirmelerine yardımcı olur. Örneğin, örnek laser etiketi deneyiminin görsel hiyerarşisi, oyuncuları harita üzerinde ilerletirken etiket oyuncularını takip etmeleri gereken aşağıd

1. Deneyimin hedefi hakkında bilgi.
2. Blaster hakkında bilgi.
3. oyuncudurumu hakkında bilgi.

Bu kategorilerin her biri ekranda son tasarım özelliklerindeki yerleşim onların öncelik sırasını gösterir:

• İlk kategori oyunun kazanılmasındaki en önemli etkenleri içeriyor, bu yüzden oyunu kazanma konusunda en önemli olanları içeriyor.
• İkinci kategori, ekran alanının ortası yakınındaki ekran alanının çoğunu alır çünkü oyuncuların ilgisini 3D alanındaki eyleme çekmek için merkezi nokta olarak hareket ettirir ve oyunu oynamak için en önemli olanıdır.
• Üçüncü kategori yüzler çünkü oyuncular oynanışoynarken dikkatlerini dağıtmadan bu periferal bilgileri okuyabilirler.

Bazı deneyim türleri için, oyun sırasında oyuncuya önemli olan tek bir kategori bilgiyi göstermeniz yeterlidir, çünkü oyunun ilk kişi tarafından atışçı deneyimleri için, oyuncular aynı anda birden fazla kategoriye ait bilgiyi görmelidir, böylece takım

Kendi deneyiminizdeki iş akışları için bir görsel hiyerarşi planladığınızda, takip edilenkonuları göz önünde bulundurun:

• Eğer aynı kategorilerden UI öğelerini ekranınız boyunca birbirine katarsanız, oyuncular neye bakacaklarını bilmez. Oyuncuların deneyiminizde ilerlemesine yardımcı olmak için, aynı kategoriden UI öğelerini birbirine katın .
• Ekranda bir kerede çok fazla kategori varsa, oyuncular dikkat etmesi gereken bilgileri bilmeyebilir. Çöp kategorileri ile dolu oyuncuları önlemek için, UI öğelerini kapsayıcı olarak göster .
• Aynı şekilde, kategori başına çok fazla UI öğesi varsa, oyuncuları bir eylemi veya işlemi nasıl tamamlayacağını anlamalarından alıkoyabilir. Bu nedenle, ideal etkileşim emirleriniz için görsel vurgusu sağlamak için sanat tarzınızı kullanmak önemlidir. uygun etkileşim emirleriniz için görsel vurgusu sağlamak için sanat tarzınızı kullanmak önemlid

Örnek lazer etiketi deneyiminin görsel hiyerarşisini ayrıntılı bir şekilde değerlendirmek için şu tabloyu göre:

UI Elemanlarında Blok

Görsel hiyerarşisi içinde olduğunuzdan belli UI elemanlarını gözden geçirmek için temel şekilleri kullanarak bireysel UI öğelerine blok yapabilirsiniz. Bu süreç, tüm ekran boyutlarınden oluşan kullanıcının deneyimine etkili olmak için tasarımınızı gerektiren yerleri gösterir, böylece mobil, tablet, diz

Başlamadan önce, Roblox'un ana UI'sini dikkate alarak özelleştirilen UI elemanlarınız için kaç ekran alanı olduğunu bulmalısınız. Örneğin, varsayılan olarak, Roblox her deneyimde şu UI elemanlarını gösterir:

• Deneyim içindeki oyuncuların bir listesi.
• Karakterin sağlık çubuğu.
• Karakterin sırt çantası.
• Bir sohbet penceresi.
• Bir yakalama düğmesi.
• Karakter emotes'i popup menüsü.

Eğer kendi deneyiminizin oyun envantergereksinimlerini karşılamayan bu elemanlardan herhangi birini devre dışı bırakabilirsiniz tasarruf etmek için ekran alanı içinizin kendi özel UI'nüz için kaydetmek için. Örneğin, özel laser etik

Roblox'un ana kullanıcı arayüzüne ek olarak, Roblox'un varsayılan dokunmatik denetimleriçin gerekli ekran alanını da dikkate almalısınız. Örneğin, oyuncular bir mobil cihaz kullanarak deneyiminize eriştiğinde, ekranın sol alt kısmında bir sanal başparmak gösterilir ve aşağ

Roblox'un oyun oynanışı için gerekli olan temel UI elemanlarının her ikisi de touch denetimlerde dahil olarak, özelleştirilmiş UI elemanlarınızı bir tasarım da bloklayabilirsiniz ki bu, tüm cihazlar arasında adaptif bir şekilde kullanılabilir. Bu önemlidir, çünkü bu, UI'nuzu güncellemeniz gerekti

Bu yöntemi göstermek için, özelleştirilmiş UI elemanlarındaki örnek lazer etiketi deneyiminin bloklarını gösteren iki görüntüyü inceleyin. Her iki görüntü de şunları içerir:

• Tasarımın son tasarıma ulaşana kadar kolayca tekrar geçmesine izin verdiği için özelleştirilen UI'yi temsil etmek için temel şekiller.
• Renkli bir arka plan çevresinin olmadan gözün takip etmesini sağlayan gri çizim renkleri
• Ekranda ne kadar alanı kapladığını görmek için sohbet penceresinin ve aktif oyuncuların listesinin açık olmasını ve chat penceresinin genişliğini ayarlamayı.
• Mobil cihazlar için gerekli olmayanlar için bir alan.

Bu şekilde yapılandırmalarınızı tasarlarken, kaç tane UI öğesi ekranda aynı anda bulunabileceğini düşünürken geleceğe yatırım yapıyorsunuz, tüm potansiyel yapılar için oyuncuların cihazları ve iş akışlarına göre geleceğe yatırım yapıyorsunuz.

Yerleşimleriniz için UI elemanlarını bloklamak, takip edilendikkate alın:

• Bloklarınız UI'nızda nerede ve nasıl bloğunuz kullanıcı arayüzünüzün yapısını etkileyebilir. Denge ve düzeni hedef alın sayı ve büyüklüğündeki özelleştirici UI elemanlarınızın yanındaki Roblox'un ana UI'sinde.
• Bazı mobil ve tablet cihazlarının alt köşelerinden uzak olan UI ile etkileşim kurmak rahatsız veya imkansızdır. Etkileşimli öğeleri doğal dinlenme pozisyonunun yakınındaki kolay erişilebilir bölgelere yerleştirin yakınındaki thumbs için doğal dinlenme pozisyonunun yakınında.
• Oyuncular çevrenizde dolaştığında 3D alanı ekranınızın üzerindeki UI'nizden rahatsız edici olabilir. Test yaplayın aranızdeki UI elemanlarınızın temiz ve okunabilir kalması için farklı arka planlar üzerinde UI'nizin bir dizi olası yönlendirmelerini test edin. For more information on what to consider as you design and block in your UI elements for multiple devices, see Yerleştirme ve Boyutlandırma - Cross-Platform Faktörleri .

Kullanıcı Akışlarını Geliştir

Bir kullanıcı akışı, oyuncuların bir deneyimde bir görevi tamamlamak için izleyebileceği yolların bir koleksiyonu, bir silah seçmek, bir öğeyi satın almak veya bir karakteri iyileştirmek gibi. Kullanıcı akışları genellikle oyuncuların görevi başlatmasını beklediğiniz yerden baş

Aşağıdaki akış şeması, bir oyuncu bir deneme laser etiketi deneyimine giriş ve oynama işlemini gösterir. Bir oyuncu açılışı başarıyla açtığında,

Oyuncuların deneyiminizde yapabileceği her şey için kullanıcı akışları geliştirmek önemlidir, çünkü bunu takip edenlerin görevleri tamamlamasını değerlendirebilir ve nerede ve nasıl istediklerini öngörebilirsiniz. Örneğin, eğer ek geleneksel laser etiketi deneyim için ek geleneksel kullanıcı akışları geliştirirseniz, o

• Son koşulun yerine geldiğinden önce bir turu bırakın?
• Bir takıma katılırken oyundan ayrılmak mı?
• Bir turun ortasında bir telefon almak mı?
• 15 saniyeden az bir süre için tur bağlantılarını kesmek mi?

Tüm potansiyel eylemleri görselleştirerek, oyuncuların görevleri tamamladığında veya senaryolar oyunculara etkileyebilecek olan senaryoları göz önünde bulundurarak, oyununuzun UI elemanlarının yerleşimini daha iyi belirleyebilirsiniz ve ardından tasarımlarınızı Studio'da uygulamadan önce ayarları yapabilirsiniz. E

Kendi deneyiminiz için kullanıcı akışlarını geliştirirken takip edilenşeyleri dikkate alın:

• Oyuncuların deneyiminizde yapmasını istediğiniz şey ve onların yapmasını istediği şeyler kesinlikle farklı olabilir. En iyisi, bir dizi oyuncu türüyle yerleşimlerinizi test edin para hedeflerine ulaşmak için istedikleri yolları anlayışı sağlamak için.
• Akış çizgileri, diyagramda birden fazla senaryoyu birden bire yakalamaya çalıştığında okumak zorlaşabilir ve etkisiz hale gelir. Diyagramda her görevi birden fazla senaryoyu yakalamaya çalıştığında, akış çizgilerini birincil görevi olarak birden fazla görevi yakalama sınırlandırır.
• Etkileşim modları, oyuncuların dokunmatik denetimler, oyun konsolları veya bilgisayar farlarını kullanıyor olup olmadığına bağlı olarak değişir. Eğer birden fazla cihaz için tasarlıyorsanız, her cihaz için benzersiz kullanıcı akışları geliştirin , böylece ağrı noktalarını belirleyebilir ve iş akışlarını basitleştirebil

Kablolarınızın tasarımını tamamladıktan sonra Studio'ya geçin ve UI'nizi hayata geçirin.