Ikhtisar Desainer UI

Setelah berhasil membuat aplikasi, Anda akan diarahkan ke Tab UI Designer.

Perancang UI di AppMaster dirancang agar ramah pengguna, memungkinkan Anda membuat halaman aplikasi web yang menakjubkan dengan mudah.

Melalui antarmuka drag-and-drop yang intuitif, Anda dapat mendesain halaman web dan mengisinya dengan konten dengan lancar, sehingga menghilangkan kebutuhan akan keterampilan pengkodean tingkat lanjut.

Perancang UI dibagi menjadi empat bagian utama untuk berinteraksi dengan pengguna:

1. Bilah Alat Kiri
2. Panel Atas
3. Panel bawah
4. Area Kanvas
5. Panel Properti

Bilah Alat Kiri

Bilah alat di sisi kiri menawarkan alat untuk menyusun situs web Anda. Dengan mengklik ikon yang terletak di bagian atas sidebar ini, panel berikut akan ditampilkan:

• Daftar Elemen UI
• Pohon Elemen
• Pohon Halaman
• Pohon Tata Letak
• Manajer Aset

Daftar Elemen UI (pintasan: 1 )

Daftar Elemen UI menyediakan semua elemen yang dapat ditambahkan ke area kanvas dengan menyeret dari panel.

Elemen UI disusun ke dalam kategori berdasarkan tujuannya, sehingga memudahkan navigasi dan menemukan widget yang sesuai untuk aplikasi Anda.

Untuk mengakses elemen dengan cepat, Anda dapat menggunakan bilah Pencarian di bagian atas panel.

Pohon Elemen (pintasan: 2 )

Dari Pohon Elemen , Anda dapat mengelola dan mengatur semua komponen yang ditempatkan pada halaman yang dipilih di aplikasi web Anda.

Di sini, Anda dapat berinteraksi dengan elemen berikut:

• memindahkan item antar pohon dengan menyeret,
• mengganti nama komponen,
• mengubah status visibilitas elemen di kanvas (sembunyikan/tampilkan).

Gunakan bilah Pencarian di bagian atas panel untuk elemen pencarian cepat di pohon.

Pohon Halaman (pintasan: 3 )

Pages Tree memungkinkan Anda mengatur dan mengelola halaman situs Anda. Anda dapat membuat halaman atau folder baru di sini.

Di Pages Tree Anda dapat menduplikasi atau menghapus halaman atau folder.

Gunakan bilah Pencarian di bagian atas panel untuk halaman pencarian cepat atau folder di pohon.

Daftar Tata Letak (pintasan: 4 )

Pohon Tata Letak membantu mengelola tata letak halaman Anda. Seperti di Pages Tree, Anda dapat menduplikasi atau menghapus tata letak.

Gunakan bilah Pencarian di bagian atas panel untuk tata letak pencarian cepat di pohon.

Manajer Aset (pintasan: 5 )

Manajer Aset memfasilitasi pengunggahan dan pengorganisasian aset (seperti dokumen, gambar, dan animasi) untuk penggunaan situs web Anda.

Semua aset yang Anda upload selama pengembangan akan disimpan di Asset Manager dan dapat digunakan kembali tanpa perlu diupload ulang.

Anda juga dapat menghapus aset apa pun yang tidak lagi diperlukan.

Bilah Atas

Bilah Atas menyediakan serangkaian pengaturan tampilan tambahan. Mulai dari sisi kiri, di samping tombol menu, dan meluas ke kanan, Anda memiliki seperangkat alat berikut:

• Dokumen Saat Ini: menampilkan halaman atau tata letak yang sedang Anda kerjakan.
• Breakpoint: ikon breakpoint memungkinkan Anda beralih di antara breakpoint yang berbeda untuk melihat pratinjau dan mengubah tampilan situs Anda di berbagai ukuran perangkat.
• Undo dan Redo: tombol Undo dan Redo memungkinkan Anda membalikkan atau menerapkan kembali tindakan yang telah Anda buat di Designer, seperti menerapkan gaya atau menghapus elemen. Juga tersedia pintasan: untuk membatalkan tindakan - CRTL/⌘+Z dan untuk mengulangi tindakan - CTRL/⌘+SHIFT+Z .

Bilah Bawah

Panel Bawah memungkinkan Anda memperbesar atau mengubah ukuran tampilan halaman.

Di sisi kiri panel, Anda dapat mengatur resolusi halaman khusus dengan mengatur tinggi dan lebar kanvas Anda.

Di sisi kanan, Anda dapat mengontrol skala:

• Memperbesar atau memperkecil
• Tetapkan skala dalam persentase
• Tetapkan ukuran sebenarnya
• Sesuaikan jendela saat ini dengan area yang terlihat

Kanvas

Kanvas adalah ruang kerja interaktif Anda. Di sinilah Anda dapat terlibat dengan komponen halaman. Anda dapat memilih elemen, mengubah posisinya, dan mengedit konten langsung di halaman.

Selain itu, Anda juga dapat menyalin ( CRTL/⌘+C ) dan menempelkan ( CRTL/⌘+V ) elemen antara halaman dan aplikasi atau menduplikasi elemen dalam halaman saat ini ( CRTL/⌘+D ).

Panel Properti

Panel Properti di sisi kanan Desainer memungkinkan Anda menyesuaikan tampilan visual dan perilaku elemen, tata letak, atau halaman yang dipilih.

Panel Properti terdiri dari 4 panel utama:

• Panel penampilan
• Panel opsi tambahan (opsional)
• Panel Pertanyaan Media
• Panel Logika Bisnis

Pada header panel, Anda dapat mengganti nama item yang dipilih dengan mengklik nama item, membaca deskripsi, atau menghapus item dengan mengklik ikon Sampah.

Panel Penampilan

Panel Penampilan memungkinkan Anda mengakses konten dan properti statis yang ditampilkan dari elemen yang dipilih. Anda dapat memasukkan atau memilih nilai-nilai ini di kolom terkait, dan gaya akan segera diterapkan ke elemen Anda di kanvas.

Jika tidak ada elemen yang dipilih pada kanvas, panel ini akan menampilkan pengaturan halaman atau tata letak saat ini.

Panel Opsi Tambahan

Panel Opsi Tambahan ditujukan untuk elemen yang memerlukan data atau opsi pengaturan tambahan.

Anda dapat mengatur sumber data atau memasukkan opsi secara manual bergantung pada komponen yang dipilih.

Panel Pertanyaan Media

Panel Kueri Media memungkinkan Anda mengganti properti item untuk setiap titik henti sementara yang ditentukan.

Panel Logika Bisnis

Panel Logika Bisnis menyediakan semua pemicu untuk sebuah elemen dan memungkinkan Anda membuat interaksi elemen saat pemicu diaktifkan.