Axure RP - Interaksi Dasar

Bab ini akan membawa Anda melalui interaksi dasar yang disediakan oleh Axure saat mendesain layar.

Tujuan Axure RP adalah untuk memungkinkan prototipe interaktif. Sekarang, saat membuat prototipe interaktif, selalu ada peringatan untuk membuat prototipe yang terlalu interaktif. Inilah alasan mengapa, masuk akal untuk memulai dengan satu interaksi penting pada satu waktu, untuk melakukan sprint melalui sisa halaman yang tersedia.

Interaksi Axure

Interaksi adalah istilah yang diciptakan untuk elemen fungsional yang mengubah wireframe statis menjadi prototipe interaktif yang dapat diklik. Untuk membuatnya menjadi pendekatan sederhana terhadap interaksi, Axure menghilangkan kebutuhan untuk membuat kode prototipe dengan menyediakan antarmuka untuk mendefinisikan struktur dan logika.

Saat membuat prototipe HTML, Axure RP mengubah interaksi menjadi kode nyata (HTML, CSS dan JavaScript). Ini bertindak sebagai katalis untuk menunjukkan desain dan interaksi yang diinginkan pada halaman.

Biasanya, interaksi akan dimulai dengan Wheninteraksi sedang terjadi. Misalnya, saat halaman dimuat di browser, saat pengguna mengklik salah satu elemen, dll.

Kemudian muncul pertanyaan, Wheredi layar, interaksi sedang berlangsung. Ini bisa berupa elemen layar sederhana seperti persegi panjang, yang ingin kita ubah menjadi tombol yang dapat diklik untuk tujuan menu (contoh ditampilkan nanti).

Terakhir, ada deskripsi Whatsedang terjadi dalam interaksi. Mari kita pertimbangkan pemuatan halaman saat browser memuat halaman; Anda cukup memilih tayangan slide tertentu untuk memulai atau memperbesar gambar saat masuk ke layar.

Peristiwa Axure

Peristiwa di Axure bisa terdiri dari dua jenis, dipicu oleh dua jenis peristiwa.

Halaman dan Acara Tingkat Master

Saat halaman dimuat, ada banyak kejadian yang terjadi untuk mengambil informasi desain, konten, dan karenanya, penyelarasan setiap elemen di layar. Karena peristiwa ini berlangsung selama pemuatan halaman awal, Anda dapat menganggap bahwa peristiwa ini akan berulang pada setiap pemuatan halaman. Berikut adalah beberapa contoh Peristiwa Tingkat Halaman dan Master.

OnPageLoad
OnWindowResize
OnMouseMove
OnAdaptiveViewChange

Peristiwa Level Objek atau Widget

Mari kita pertimbangkan, kita telah membuat halaman dan widget tombol tertentu di halaman tersebut. Sekarang, untuk berinteraksi dengan widget tombol ini, mungkin dengan sentuhan (pada prototipe seluler) atau klik mouse. Berikut adalah beberapa contoh Peristiwa Level Objek atau Widget.

OnClick
OnMouseEnter
OnDrag
OnDrop
OnMouseHover

Kasus

Seperti dibahas di bab sebelumnya, di bagian properti halaman, interaksi widget tertentu dapat dirancang. Ini disebutcases. Interaksi tertentu dapat menjadi dasar dari banyak kasus.

Mari kita pertimbangkan contoh, untuk memahami ini lebih baik.

Contoh: Prototipe Sumbu - Tampilkan Menu saat Mengarahkan Mouse

Untuk memulai dengan contoh ini, buat file baru dengan mengklik New dibawah File Menu atau menggunakan tombol pintas Ctrl + N.

Dalam contoh ini, kita akan mendesain yang sederhana Menu Barseperti yang terlihat di sebagian besar produk perangkat lunak. Struktur menu akan memiliki elemen menu berikut dan submenu di bawahnya masing-masing.

File

New
Open
Save
Close

Edit

Cut
Copy
Paste
Find
Replace

View

Tampilkan Bilah Status
Toolbar
- Toolbar Utama
- Styling Toolbar

Help

Mulai
Menggunakan Bantuan
Apa ini

Untuk memulai, seret dan lepas Classic Menu – Horizontaldi bidang desain. Anda akan menemukannya di Libraries → Menus and Tables. Beri nama kontrol sebagai MenuBarExample. Mari kita buat elemen ini dengan lebar 300 px dan tinggi 30 px. Posisikan pada 100 pada sumbu X dan pada 30 pada sumbu Y. Anda dapat menyesuaikan nilai-nilai ini di bawah tab Style di bawah bagian Inspector di sebelah kanan.

Di akhir prosedur di atas, Anda akan dapat melihat hasil akhirnya seperti yang ditunjukkan pada tangkapan layar berikut.

Mari kita tambahkan nama ke judul menu di bagian Inspektur juga. Klik setiap judul menu dan amati bagian inspektur. Jika nama tidak diberikan ke bilah menu tertentu, namanya akan berubah menjadi (Nama Item Menu).

Beri nama menu File sebagai FileMenu.

Hal yang sama berlaku untuk Edit sebagai EditMenu dan Lihat sebagai ViewMenu.

Untuk mengonfirmasi apakah nama telah diberikan, klik setiap menu dan konfirmasi di bawah Inspektur: Item Menu. Anda akan dapat melihat nama dan bukan (Nama Item Menu).

Sekarang, sesuai kebutuhan kami, mari kita selesaikan bilah menu dengan menu Bantuan. Klik kanan judul bilah menu - Lihat, Anda akan melihat menu konteks. Klik Tambahkan Item Menu Setelah.

Item menu kosong akan muncul. Klik dua kali item menu yang kosong, dan masukkan judul menu sebagai Bantuan. Ulangi prosedur tersebut, berikan nama di bawah Inspector: Menu Item Name. Setelah selesai, Anda akan melihat area desain sebagai berikut.

Selanjutnya, mari kita merancang interaksi untuk Menu File.

Klik judul bilah menu File dan amati Inspector: Menu Item.

Seperti yang disorot pada gambar di atas, amati tab Properties.

Di bawah tab Properties, kami akan membuat interaksi untuk File Menu.

Sangat mudah untuk menambahkan submenu ke menu. Klik kanan pada menu File, di menu konteks yang muncul, klik Add Submenu.

Note - Kami juga dapat menghapus submenu dengan mengulangi langkah yang sama, dan mengklik Hapus Submenu.

Setelah submenu ditambahkan, submenu kosong akan muncul. Klik dua kali setiap item menu dan berikan nama seperti - Baru, Buka, Simpan.

Klik kanan pada item submenu terakhir dan tambahkan satu item submenu lagi. Beri nama sebagai Close.

Merupakan praktik yang baik untuk memberi nama semua item submenu di bawah bagian Inspektur juga. Ini membantu mereferensikan mereka dalam keseluruhan proses desain Anda.

Saat mendesain bagian ini, perhatikan bahwa setiap kali kita mengklik bagian lain dari area desain, submenu akan menghilang. Kita perlu mengklik item menu File untuk melihat submenu.

Mari kita bicara tentang interaksi - Hover. Interaksi ini memiliki perilaku unik yang dipicu, saat penunjuk mouse diarahkan ke elemen tertentu. Di Axure, interaksi ini secara otomatis diimplementasikan dengan Menu Klasik - Horizontal.

Untuk melihat interaksi beraksi, klik tombol Pratinjau di toolbar. Axure akan membuka pratinjau di browser default.

Arahkan kursor ke menu File. Submenu akan ditampilkan seperti yang ditunjukkan pada gambar layar berikut.

Jika kita melihatnya secara obyektif, kita baru saja menggunakan Axure untuk membuat interaksi yang kompleks, seperti mengarahkan kursor ke item menu. Dalam pengkodean HTML biasa, ini akan memakan waktu hampir 1 hingga 1,5 jam.

Sebagai tugas, selesaikan menu lainnya untuk submenu mereka.

Sekarang, mari kita dengan cepat membuat interaksi pada submenu Tutup di bawah menu File. Kami akan menyorotnya dengan warna merah saat diarahkan. Untuk melakukannya, klik kanan pada submenu Tutup. Klik Gaya Interaksi…

Di bawah tab MouseOver, centang pilih Fill Color dan pilih warna merah. Axure akan segera menampilkan pratinjau di area desain. Dengan asumsi bahwa Terapkan ke bagian Menu yang Dipilih dan semua submenu dipilih, itu akan menyorot seluruh menu dengan warna merah.

Klik Item Menu yang Dipilih saja. Sekarang centang pilih Font Color dan pilih warna putih untuk font. Pratinjau akan segera diperbarui.

Klik OK untuk menyelesaikan penyiapan ini.

Klik Pratinjau lagi untuk melihat interaksi beraksi.