web-gelistirme-sc.com

İç içe düzen düzenleyici için UI paradigması

Bir düzen düzenleyiciyle, Visual Studio'daki WinForms düzenleyicisine biraz benzeyen bir uygulama var - sürükle ve bırak widget yerleşimi, özellik paneli vb.

Ben yerleştirilmiş bir "NestedLayout" widget (Düzen B) tüm diğer düzeni temsil edebilir iç içe düzenleri, seçeneği ekliyorum.

Sketch of nested layout editor

Kullanıcının bu iç içe yerleşimleri düzenlemesine izin vermek için ne tür bir arayüz önerirsiniz? Mevcut çerçevede doğrudan çalışmak çok zahmetli olurdu, çünkü ekranın birçoğu üst düzey düzenin geri kalanı tarafından zaten kullanılıyor olacaktır.

Olasılıklar, üst düzenleyicide iç içe yerleşimi en üst düzeye çıkarmak (belki de bir çeşit yakınlaştırma geçişiyle), yukarıda yeni bir düzenleyici açmak vb.

Bu tür bir senaryoyu etkili bir şekilde ele alan editör uygulamalarına örnek gördünüz mü?

6
kpozin

Yukarıdaki ekranla sunulduğunda ilk refleksim, düzenlemek için iç içe yerleşime çift tıklamak olacaktır. Kullanıcının mevcut çerçevedeki iç içe yerleşimi düzenlemesinin doğru çözüm olmadığını ve kullanıcılarınız için oldukça kafa karıştırıcı olabileceğini kabul ediyorum.

Yuvalanmış düzeni, tamamen oluşturulmuş, gri veya soluk bir durumda sunacak ve fare üzerinde nasıl düzenleneceğini açıklayan bir mesaj görüntüleyeceğim (örneğin, "Düzenlemek için çift tıklayın"). Ayrıca, iç içe yerleşimi yakınlaştırma efekti ile en üst düzeye çıkarmak yerine, ilkinin üstünde ikinci bir düzenleyici açmayı tercih ederim. Yakınlaştırma efektinin, oldukça zeki olsa da, bazı kullanıcıları kolayca karıştırabildiğini görüyorum - kullanıcı arayüzüne çok dikkat etmelisiniz, böylece ne olduğunu ve tüm widget'larının neden aniden kaybolduğunu merak etmiyorlar.

3
Tania Gobeil

WYSIWYG web tasarım araçlarının iframe'leri nasıl ele aldığını gördünüz mü? Genellikle iframe (veya başka bir katıştırılmış nesne) etkileşimli olmayan bir nesne olarak tanımlanır; bu, söz konusu nesnenin düzenleyicisini getirmek için iki kez tıklamak veya etkinleştirmek zorundadır. İframe'lerde, Dreamweaver gibi iframe'in kaynak sayfasına oradan erişmenizi sağlayan bir özellik bölmesini açtığım araçları hatırlıyorum.

En iyi kullanılabilirlik olmayabilir, ancak kitlenize bağlı olarak, WYSIWYG sözleşmelerini takip etmek iyi bir çağrı olabilir.

Ayrıca, ana denetiminizdeki NestedLayout biçimini nasıl oluşturduğunuza bağlı olarak da beklentiler belirlersiniz. Tamamen oluşturulmuşsa, kullanıcılar onunla etkileşimde bulunmayı bekleyebilir. Ancak, yalnızca "widget" veya katıştırılmış nesne olarak durumunu temsil eden bir simgeye sahip bir çerçeve ise, bunun farklı bir etkisi olabilir. İnsanların ne yaptığını görmek için her ikisini de yüksek kaliteli interaktif bir maketle test etmeyi deneyin. Bu, "NestedLayout ile etkileşime geçin" gibi belirli bir test senaryosuna dayalı uzaktan kullanılabilirlik testiyle test etmek harika olurdu!

2
Rahul

IntelliJ IDEA Java IDE'ye bakın. İç içe yerleşimli GUI formları için oldukça kullanışlı bir sürükle ve bırak düzenlemesini destekleyen çok güzel bir düzenleyiciye sahiptir.

1
extropy

Yeniden kullanılabilir * kontrol * s temsil etmeyi düşünün. Böylece ikinci düzeni tamamen yeni bir düzen olarak düzenlersiniz, ancak tasarımcının başka bir sekmesinde/penceresinde, örneğin user control Visual Studio'da. Kullanıcı bu kadar alana ihtiyaç duymazsa, daha küçük ekranlı gayrimenkulleri umursamaz (belki de yine de birkaç düğme içerir).

0
Camilo Martin

İlk başta, yukarıdakilerden bazılarına benzer bir cevap ekleyecektim, örneğin bir gri nesneye çift tıklarsanız, flash gibi griler çıkarır ve çevreleyen bağlamı kilitler. Ama sonra fark ettim ki, tasarım açısından uygulamanıza bağlı olarak "Düzen B" yi düzenlemeyi çok kolay hale getirmek istemeyebilirsiniz. Örneğinizde gösterdiğiniz şey genellikle bir GUI düzenleyicide yapılanlarsa, ekranda gördüğümüz her şeyin bir Nesne'de olduğu anlamına gelir. İç içe düzenleri düzenlemeyi kolaylaştırmak, bu nesneye gittikçe daha fazla işlevsellik eklenmesini teşvik ederek A düzeninin tüm widget'ları içermesine neden olur.

İç içe yerleştirilmiş düzenleri düzenlemeye karşı hafif bir engel koymak, sonunda kullanıcının uygulamayı parçalamasına ve dolayısıyla daha kolay kapsüllenmiş nesneler oluşturmasına neden olur.

Örneğin. Qt Designer, gui düzenleyicisinin içindeki bir pencerenin her sekmesinin içeriğini düzenlemenize izin verir, eğer dikkatli değilseniz, tüm sekmesinin işini yapan bir pencere uygulaması elde edersiniz. Bu gerçekten iyi bir şey değil.

0
Harald Scheirich

Adobe Flash

Etkileşime girebileceğiniz kompozisyonlarınız (Flash'taki Semboller olarak adlandırılır) olabilir. Bu kompozisyonların içinde katmanlar ve diğer kompozisyonlar olabilir. Deneyim biraz kötü çünkü Flash ile çalışmak çok yavaş ve yanlış yerlere yerleştirilmiş düğmelerle aşırı karmaşık bir kullanıcı arayüzüne sahip ve kısayollar eksik. Ama ilham için harika bir başlangıç ​​noktası.

Interface Builder, World Craft ve Adobe Flash arasındaki bir çeşit karışım, iç içe kompozisyonları düzenlemek için sallanır.

0
neoneye