Berbagi teknologi

Tutorial Axure: Produksi Interaktif Menu Laci Samping Aplikasi

2024-07-08

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Hari ini saya akan menunjukkan cara menggunakan menu laci di Axure. Di menu laci, dua efek interaktif perlu dicapai, yaitu:

Interaksi satu

Efek penskalaan item menu level 1 dan level 2 di menu laci

Logika implementasi: mengatur status peralihan panel dinamis dan implementasi "dorong/tarik yang asli".

Interaksi 2

Mengganti status item menu yang dipilih

Logika penerapan: Mengatur status yang dipilih dalam tampilan tambahan

Mari kita lihat langkah implementasinya:

Interaksi 1: Efek penskalaan item menu level 1 dan level 2 di menu laci

Langkah 1

1. Seret panel dinamis dan sesuaikan ukuran panel dinamis.

2. Klik dua kali panel dinamis, atur nama panel dinamis: "Menu 1", tambahkan 2 status panel dinamis, masing-masing diberi nama: Ciutkan, Perluas

Langkah 2

1. Klik dua kali keadaan terlipat untuk masuk ke halaman status "terlipat".

2. Seret persegi panjang ke dalam halaman dan atur namanya menjadi "Menu 1-Collapse". Ubah ukuran Menu 1 dan masukkan teks "Menu 1".

3. Tarik gambar panah drop-down dan sesuaikan ukurannya

Langkah 3

Tambahkan gaya mouseover dan seleksi "Menu 1-Collapse", dan atur warna font: biru dan warna isian: abu-abu muda.

Langkah 4

Kasus penggunaan saat mengatur klik mouse pada persegi panjang "Menu 1-Collapse":

Pilih tindakan "Ganti Status Panel", atur "Menu 1" untuk beralih ke status "Diperluas", dan pilih atribut "Komponen Dorong/Tarik".

Langkah 5

1. Salin konten status "ciutkan" panel dinamis ke halaman status "diperluas".

2. Di halaman status "Perluas", ubah nama persegi panjang menjadi "Menu 1-Perluas".

Interaksi 2: Mengganti status item menu yang dipilih

Langkah 6

1. Salin "Menu 1-Perluas" sebagai submenu, ubah teks nama komponen, dan beri nama: Submenu 1

2. Atur event klik mouse pada submenu 1, pilih tindakan "Set Selected", dan konfigurasikan komponen saat ini yang akan dipilih.

Langkah 7

1. Salin beberapa submenu secara berkelompok, ubah teksnya dan beri nama masing-masing.

2. Setelah memilih beberapa submenu, atur nama grup pilihan: 1

Pratinjau untuk melihat efeknya.