it-swarm.asia

Paradigma UI untuk editor tata letak bersarang

Saya memiliki aplikasi yang dengan editor tata letak, agak mirip dengan editor WinForms di Visual Studio - dengan penempatan widget drag-and-drop, panel properti, dll.

Saya menambahkan opsi untuk memiliki nested layout, di mana widget "NestedLayout" yang ditempatkan (Layout B pada gambar) dapat mewakili seluruh tata letak lainnya.

Sketch of nested layout editor

Jenis antarmuka apa yang akan Anda rekomendasikan untuk memungkinkan pengguna mengedit tata letak bersarang ini? Bekerja langsung dalam bingkai yang ada akan terlalu rumit, karena banyak layar real estat sudah akan digunakan oleh sisa tata letak tingkat atas.

Kemungkinan mungkin termasuk memuat memaksimalkan tata letak bersarang di editor atas (mungkin dengan semacam transisi zooming), muncul editor baru di atas, dll.

Pernahkah Anda melihat contoh aplikasi editor yang menangani skenario semacam ini secara efektif?

6
kpozin

Refleks pertama saya ketika disajikan dengan layar di atas adalah dengan mengklik dua kali pada tata letak bersarang untuk mengeditnya. Saya setuju dengan Anda bahwa memiliki pengguna mengedit tata letak bersarang di bingkai yang ada bukanlah solusi yang tepat dan itu bisa menjadi sangat membingungkan bagi pengguna Anda.

Saya akan menyajikan tata letak bersarang, sepenuhnya diterjemahkan, dalam keadaan abu-abu atau pudar dan menampilkan pesan pada mouse di atas yang menjelaskan cara mengeditnya (mis. "Klik dua kali untuk mengedit"). Saya juga akan memilih membuka editor kedua di atas yang pertama daripada memaksimalkan tata letak bersarang dengan efek zoom. Saya menemukan bahwa efek pembesaran, meskipun cukup pintar, dapat dengan mudah membingungkan beberapa pengguna - Anda harus sangat berhati-hati dengan UI sehingga mereka tidak bertanya-tanya apa yang baru saja terjadi dan mengapa semua widget mereka menghilang secara tiba-tiba.

3
Tania Gobeil

Pernahkah Anda melihat bagaimana alat desain web WYSIWYG menangani iframe? Biasanya iframe (atau objek tersemat lainnya) digambarkan sebagai objek non-interaktif yang harus diklik dua kali atau diaktifkan untuk membuka editor untuk objek tertentu. Dalam kasus iframe, saya ingat alat-alat seperti Dreamweaver memunculkan panel properti yang memungkinkan Anda mengakses halaman sumber iframe dari sana.

Ini mungkin bukan kegunaan terbaik, tetapi tergantung pada audiens Anda, mengikuti konvensi WYSIWYG mungkin merupakan panggilan yang baik.

Anda mungkin juga akan menetapkan harapan tergantung pada bagaimana Anda merender NestedLayout di kontrol orang tua Anda. Jika dirender sepenuhnya, pengguna mungkin berharap dapat berinteraksi dengannya. Tetapi jika itu hanya bingkai dengan ikon yang menunjukkan statusnya sebagai "widget" atau objek yang disematkan, itu mungkin memiliki efek yang berbeda. Coba uji keduanya dalam mockup interaktif kesetiaan tinggi untuk melihat apa yang dilakukan orang. Ini akan bagus untuk menguji dengan uji kegunaan jarak jauh yang didasarkan pada skenario pengujian tertentu seperti "Berinteraksi dengan NestedLayout" atau apalah!

2
Rahul

Lihatlah IntelliJ IDEA Java IDE. Ia memiliki editor yang sangat bagus untuk formulir GUI dengan tata letak bersarang, mendukung pengeditan drag-and-drop yang dapat digunakan.

1
extropy

Pertimbangkan mewakili yang dapat digunakan kembali * kontrol * s. Jadi, Anda akan mengedit tata letak kedua sebagai tata letak yang sama sekali baru, tetapi di tab/jendela lain dari perancang, seperti user control di Visual Studio. Jika pengguna tidak membutuhkan banyak ruang, itu tidak akan peduli dengan real estat layar yang lebih kecil (mungkin itu hanya akan berisi beberapa tombol saja).

0
Camilo Martin

Pada awalnya saya akan menambahkan jawaban yang mirip dengan beberapa di atas, flash misalnya abu-abu dan mengunci konteks terlampir jika Anda mengklik dua kali pada objek majemuk. Tapi kemudian saya menyadari bahwa dalam hal desain Anda tergantung pada aplikasi Anda, Anda mungkin tidak ingin membuatnya terlalu mudah untuk mengedit "Layout B". Jika apa yang Anda tunjukkan dalam contoh Anda adalah apa yang biasanya dilakukan dalam editor GUI, itu menyiratkan bahwa semua yang kita lihat di layar adalah dalam satu Objek. Membuat tata letak bersarang yang mudah diedit akan mempromosikan penambahan fungsionalitas yang lebih banyak ke objek yang satu ini, menyebabkan tata letak A mengandung semua widget.

Menempatkan penghalang lembut untuk mengedit tata letak bersarang pada akhirnya akan menyebabkan pengguna memecah implementasi dan karenanya membuat objek enkapsulasi yang lebih baik yang lebih mudah untuk ditangani.

Misalnya. Qt Designer memungkinkan Anda mengedit konten setiap tab jendela di dalam editor gui, jika Anda tidak hati-hati Anda akan mendapatkan implementasi dari jendela yang melakukan pekerjaan semua tabnya. Yang benar-benar bukan hal yang baik.

0
Harald Scheirich

Adobe Flash

Anda dapat memiliki komposisi (disebut Simbol dalam Flash), yang dapat berinteraksi dengan Anda. Di dalam komposisi ini Anda dapat memiliki lapisan dan komposisi lainnya. Pengalamannya agak buruk karena Flash sangat lambat untuk dikerjakan dan memiliki UI yang terlalu rumit dengan tombol yang ditempatkan di tempat yang salah dan tidak memiliki pintasan. Tapi itu titik awal yang bagus untuk inspirasi.

Beberapa jenis campuran antara Interface Builder, World Craft dan Adobe Flash akan bergetar untuk mengedit komposisi bersarang.

0
neoneye