Axure RP - Panduan Cepat

Kata prototypingsangat umum dan relevan bagi orang-orang dalam Pengembangan Perangkat Lunak serta pengembangan Arsitektur. Kalau bicara perkembangan arsitektur, di Mesir, ada prototipe Piramida Agung Giza. Ini dibangun dengan (tentu saja) versi yang lebih kecil untuk mengambil persetujuan atau persetujuan dari penguasa.

Contoh kecil namun bermakna ini secara tepat menggambarkan tujuan prototipe. Menurut Wikipedia, prototipe adalah, "Versi pertama atau awal dari perangkat atau kendaraan yang darinya bentuk lain dikembangkan."

Untuk dunia pengembangan perangkat lunak, definisi dapat diadaptasi sebagai, versi awal dari sebuah halaman, layar, atau fungsionalitas, yang mendukung pengembangan lainnya dengan memvisualisasikan elemen layar secara efektif dan menampilkan interaksi. Definisi ini mencakup bagian paling kritis, interaksi.

Dalam pengembangan perangkat lunak, untuk mengembangkan sebagian dari fungsionalitas atau fungsi lengkap itu sendiri, diperlukan investasi yang cukup besar dalam hal waktu dan upaya. Ini adalah proses tanpa akhir untuk mengembangkan, memvalidasi, dan memperbaiki masalah sesuai umpan balik dari klien.

Sebagian besar perusahaan pengembang perangkat lunak menginginkan proses ini secepat mungkin. Oleh karena itu, mereka tidak melanjutkan upaya dan investasi waktu dari semua anggota tim. Sebaliknya, mereka membuat langkah cerdas dengan mempekerjakan insinyur Pengalaman Pengguna (UX), yang memiliki keahlian untuk memvisualisasikan fitur tertentu. Ini membuat mereka berada di kursi pengemudi saat mengembangkan produk.

Intinya, prototyping diperlukan untuk mensimulasikan dan memvisualisasikan kebutuhan perangkat lunak sejak awal pengembangan. Proses ini akhirnya menjadi bermanfaat bagi perusahaan pengembangan perangkat lunak dan klien karena mengurangi hal yang tidak diketahui dalam fitur, sehingga memberikan arah yang benar untuk pengembangan.

Fase Tepat untuk Pengembangan Prototipe

Di era pengembangan perangkat lunak profil tinggi saat ini, ada banyak kemajuan dalam tabel siklus hidup pengembangan perangkat lunak secara keseluruhan. Kemajuan tersebut berasal dari aspek teknologi serta peran / posisi anggota tim tertentu dalam siklus hidup. Salah satu posisi tersebut sudah mulai mendapatkan daya tarik, yang disebut insinyur UX.

Seorang insinyur UX dilengkapi dengan seperangkat keahlian, yang bermanfaat bagi pelanggan. Dengan menggunakan teknik atau langkah yang berbeda untuk mengenal pelanggan dengan lebih baik, insinyur UX dapat memahami apa yang diharapkan pengguna dari produk perangkat lunak tertentu.

Biasanya, ketika proses pengumpulan persyaratan berlangsung, perusahaan teknologi sekarang melibatkan insinyur UX untuk keluar ke pasar guna memahami apa yang dibutuhkan pengguna. Dengan tren terbaru Desain Web Responsif dan Pendekatan Mobile-First untuk pengembangan perangkat lunak, mungkin ada sejumlah area yang ingin mereka fokuskan perhatiannya. Seorang insinyur UX menggunakan proses seperti Wawancara Pengguna, Survei Pasar untuk mengetahui denyut nadi audiens yang dituju.

Proses ini memakan waktu dan juga penting, karena memberikan jalan yang jelas bagi produk perangkat lunak untuk melihat kesesuaiannya di pasar. Langkah-langkah ini digunakan saat mengumpulkan persyaratan perangkat lunak dan memperolehnya. Ini adalah fase yang ideal, karena mengurangi biaya pengembangan secara keseluruhan. Namun, ketika produk perangkat lunak sudah matang, tahap penelitian UX dapat diperkenalkan untuk mengukur kelangsungan peningkatan yang dibuat.

Bagi para insinyur UX, proses memahami basis pengguna mereka tidak hanya terbatas pada mendapatkan masukan dari pelanggan atau percakapan terkait. Ada beberapa langkah menarik yang perlu mereka ambil untuk memahami apa yang diinginkan pengguna. Pekerjaan sebenarnya dimulai ketika mereka agak jelas tentang apa yang mungkin diharapkan pengguna dari produk perangkat lunak.

Setelah beberapa data tersedia tentang bagaimana pengguna memahami perangkat lunak yang akan datang atau peningkatan dalam perangkat lunak yang ada, insinyur UX kembali ke ruang kerjanya untuk merancang antarmuka pengguna untuk mereka. Secara tradisional atau sebagai pendekatan umum, ketika seseorang mengatakan desain, itu berarti perangkat lunak seperti Adobe Photoshop, CorelDraw, atau bahkan Microsoft Paint. Terkadang, untuk kembali ke pengguna dengan sangat cepat, desainer UX menggunakan pena dan kertas tua yang bagus untuk mendesain antarmuka.

Namun, bagi desainer UX, memberikan kualitas dalam mendesain Antarmuka Pengguna berarti lebih dari sekadar menampilkan desain yang mengagumkan. Pengalaman Pengguna tidak hanya terdiri dari bagaimana pengguna melihat antarmuka tetapi juga bagaimana pengguna berinteraksi dengannya. Alat perangkat lunak yang disebutkan di atas dan sejenisnya di pasar hadir dengan rangkaian fitur mereka sendiri. Sungguh merupakan tugas yang membosankan bagi insinyur UX untuk memilih perangkat lunak yang sesuai yang akan memungkinkan - curah pendapat, merancang, dan mendapatkan umpan balik.

Masukkan Axure, perangkat lunak yang sedang tren untuk mendesain antarmuka dan interaksi pengguna yang indah. Axure telah ada sejak hampir satu dekade untuk memungkinkan insinyur UX mendapatkan detail pembuatan prototipe perangkat lunak dengan mudah. Axure, bersama dengan alat pembuatan prototipe, memiliki komunitas yang kuat yang berkontribusi pada dunia UX dengan banyak contoh dan interaksi yang terampil.

Di level yang lebih tinggi, berikut adalah fitur-fitur yang ditawarkan oleh Axure -

Pembuatan Diagram dan Dokumentasi
Pembuatan prototipe yang efektif dengan Konten Dinamis
Arus Bersyarat
Animasi yang indah untuk meningkatkan interaksi
Tampilan Adaptif
Dukungan di Windows dan Mac

Untuk menjelajahi daftar fitur rinci yang disediakan oleh Axure, silakan kunjungi https://www.axure.com. Untuk instruksi penginstalan, ikuti linkhttps://www.axure.com/download.

Untuk pembuatan prototipe cepat, Axure RP menyediakan berbagai alat dan teknik, yang selalu membantu insinyur Analis / Pengalaman Pengguna untuk memvisualisasikan tujuan akhir.

Dengan komunitas yang kuat selalu tersedia untuk membantu, Axure RP menjadi alat pilihan bagi penggemar dan praktisi UX.

Setelah Anda menginstal Axure, Anda akan disajikan dengan antarmuka seperti yang ditunjukkan pada tangkapan layar berikut.

Layar ini akan selalu ditampilkan saat startup sampai Anda memilih untuk tidak menampilkannya.

Di layar ini, Anda memiliki opsi berikut -

Mulai File Baru di Axure
Buka proyek Axure yang sudah ada

Sekarang mari kita buat file baru dengan Axure.

Saat Anda mengklik tombol "NEW FILE", Anda akan disajikan layar berikut untuk membuat prototipe baru.

Seperti terlihat pada gambar di atas, ruang kerja dibagi menjadi 6 bagian.

Pages
Libraries
Inspector
Outline
Masters
Area Desain

Mari kita bahas bagian ini satu per satu.

Halaman

Bagian ini menunjukkan halaman yang sedang Anda kerjakan. Halaman-halaman ini ditampilkan dalam struktur pohon default sebagai berikut. Halaman beranda memiliki halaman anak berikut.

Rumah

Page 1

Page 2

Page 3

Anda dapat melanjutkan dengan struktur yang diberikan atau Anda dapat mengubahnya sesuai kebutuhan Anda. Untuk melakukannya, klik kanan pada salah satu halaman, kemudian Anda akan disajikan dengan opsi seperti - Tambah, Pindahkan, Hapus, Ganti Nama, Gandakan, dll.

Seperti kebanyakan alat berbeda yang tersedia, bagian ini memungkinkan Anda untuk berinteraksi dengan halaman dalam prototipe Anda. Anda dapat menggunakannya untuk merencanakan layar dalam prototipe yang dimaksudkan.

Panel Perpustakaan

Di panel perpustakaan, sebagian besar kontrol yang diperlukan untuk prototipe tersedia. Kontrol umum yang tersedia di bagian ini adalah - Box, Image, Placeholder, Buttons, dll. Axure RP menyediakan sekumpulan kontrol UI yang dikategorikan menurut area aplikasinya.

Seperti yang ditunjukkan pada gambar di atas (a), perpustakaan memiliki kategori sebagai - Umum, Formulir, Menu dan Tabel, dan Markup. Semua kategori ini diperluas saat Anda membuka aplikasi. Untuk kenyamanan, ini diciutkan di tangkapan layar ini.

Perpustakaan umum termasuk bentuk dasar, tombol, teks judul, Hot Spot, panel Dinamis, dll.

Dengan Axure RP, untuk semua persyaratan pembuatan prototipe Anda, hadir kontrol yang sangat efektif yang disebut Hot Spot. Dengan menggunakan kontrol ini, Anda dapat memberikan interaksi klik ke hampir semua kontrol di UI. Contoh akan diberikan di halaman selanjutnya.

Di perpustakaan formulir, seperti namanya, Kotak Daftar, Kotak Centang, tombol radio, area teks, dan kontrol bidang teks disertakan. Untuk mendesain formulir input pengguna, Anda dapat menggunakan kontrol dari bagian ini di bawah pustaka.

Menu dan tabel memiliki struktur tradisional. Struktur seperti itu, mungkin dalam bentuk horizontal atau vertikal, tersedia di pustaka ini yang disebut Menu dan tabel.

Terakhir, namun tidak kalah pentingnya, hadir pustaka Markup, yang mencakup perekat, penanda, dan panah. Biasanya, ini akan digunakan untuk penjelasan dalam prototipe Anda.

Area Desain

Ini adalah taman bermain sebenarnya bagi para insinyur UX. Ruang ini akan digunakan untuk membuat prototipe sesuai kebutuhan Anda. Untuk memulainya, lihat area yang disorot dengan nomor 6 di tangkapan layar berikut.

Di area ini, Anda dapat menarik dan melepas kontrol yang Anda inginkan dari perpustakaan. Mari kita buat bilah menu cepat menggunakan perpustakaan.

Contoh - Menu Bar

Dari perpustakaan, di bawah Menu dan Tabel, seret Menu Klasik - Kontrol horizontal ke area desain.

Setelah Anda menyeret kontrol di area desain, Anda akan melihat layar berikut.

Seperti yang ditunjukkan pada layar di atas, Axure RP cukup cerdas untuk menampilkan teks yang dimaksudkan dalam menu. Mengingat ini adalah menu bar, Axure RP secara otomatis membuat File, Edit dan View sebagai menu di kontrol.

Seperti yang ditunjukkan oleh panah, bagian inspektur menampilkan properti kontrol. Gunakan bagian ini untuk membuat nama bagi kontrol Anda untuk identifikasi unik, saat membuat prototipe yang kompleks.

Mari kita beri nama untuk kontrol ini sebagai TestMenu. Kami akan menggunakan nama ini dalam contoh selanjutnya.

Properti Halaman

Saat merencanakan prototipe, masuk akal untuk memiliki gagasan yang jelas tentang pengguna dan karenanya perangkat tempat prototipe akan dipamerkan / dilihat. Untuk pengalaman terbaik dalam berinteraksi dengan prototipe, Axure telah menyediakan fitur untuk menyetel properti halaman.

Seperti yang ditunjukkan pada gambar di atas, area yang dilambangkan dengan angka 3 adalah bagian properti halaman. Di bagian ini, Anda akan dapat melihat dropdown interaksi dan sub-bagian Adaptif.

Mari kita bahas bagian ini secara rinci.

Interactions sectionberurusan dengan kemungkinan interaksi (kasus) dengan halaman. Seperti yang Anda lihat, kasus interaksi OnPageLoad menangani peristiwa saat halaman dimuat. Di sebagian besar prototipe, para insinyur UX lebih suka memasang animasi untuk membuat kesan pertama. Peristiwa khusus untuk menampilkan animasi ini biasanya dipicu pada kasus OnPageLoad.

Demikian pula, kasus lain termasuk - OnWindowResize, OnWindowScroll. Di menu tarik-turun, Peristiwa Lainnya, Anda dapat melihat kasus lain yang didukung untuk mengonfigurasi interaksi yang terkait dengan halaman.

Dengan Adaptive section, Axure RP masuk ke dalam desain web yang responsif. Saat ini, merancang pengalaman untuk situs web saja tidak cukup, seiring dengan ini, bisnis lebih memilih situs seluler untuk berdampingan dengan situs web.

Halaman yang sama, seperti yang dilihat dari ukuran layar dan tata letak yang berbeda membentuk tampilan adaptif yang berbeda. Biasanya, tampilan adaptif dirancang untuk ponsel dan tablet. Axure menyediakan fitur tampilan adaptif ini, sehingga para insinyur UX dapat menguasai aspek responsif dari prototipe langsung dari awal.

Panel Inspektur untuk Widget

Panel Interaksi Widget adalah bagian terpenting di Axure. Anda dapat melihat panel ini dengan mengklik widget mana saja di area desain.

Perhatikan contoh item menu yang kita gunakan di bagian sebelumnya. Pilih item menu bernama TestMenu dan amati bagian yang disorot di tangkapan layar berikut.

Seperti yang Anda lihat di bawah tab Properties, ada interaksi yang berbeda seperti OnMove, OnShow, OnHide dan OnLoad. Ini khusus untuk kontrol Menu secara keseluruhan.

Sekarang, klik File dari kontrol menu.

Anda akan melihat perubahan dalam jenis interaksi di panel Properti Widget. Selain itu, memberikan fleksibilitas untuk memberi nama item menu ini. Mari kita ambil kasus OnClick sebagai contoh.

OnClick- Kasus OnClick mendefinisikan perilaku kontrol, saat Anda mengklik kontrol saat menjalankan prototipe. Ini memungkinkan berbagai interaksi seperti navigasi halaman, popup menu, dll.

Notes Pane- Di panel inspektur itu sendiri, ada sub-bagian yang disebut Catatan. Di panel catatan, Anda akan dapat menambahkan poin-poin tertentu untuk diingat, untuk kontrol pilihan Anda.

Poin-poin ini akan menjadi jelas setelah kita mempelajari contoh di bab berikutnya.

Kisi dan Panduan

Untuk prototipe dengan tingkat kualitas dan presisi maksimum, insinyur UX membutuhkan kemampuan untuk menyelaraskan / memposisikan kontrol dengan kontrol lain.

Misalnya, anggap Anda ingin menampilkan popup login. Jika popup ini akan ditampilkan tepat di tengah layar, Anda memerlukan dimensi layar secara keseluruhan. Selain itu, untuk menyejajarkan persis di tengah layar, Anda harus memiliki kisi untuk menyelaraskannya dengan benar.

Axure menyediakan fitur Kisi dan Panduan, sehingga Anda dapat menggunakan area desain Anda secara efektif.

Untuk melihat Grids and Guides tersedia, klik kanan pada area desain, dan menu konteks yang ditunjukkan pada screenshot berikut akan muncul.

Sekarang, mari kita pahami opsi yang tersedia.

Grid- Tiga opsi pertama yang ditampilkan di menu konteks dikaitkan dengan kisi. Mereka adalah Show Grid, Snap to Grid, dan Grid Settings.

Show Grid- Saat Show Grid diaktifkan, Anda akan dapat melihat grid pada area desain seperti yang ditunjukkan pada gambar layar berikut. Ini sangat berguna dalam menyelaraskan kontrol dengan kontrol lain di layar.

Snap to Grid- Saat Snap to Grid diaktifkan, kontrol secara otomatis akan terpasang sesuai dengan grid yang ada di sekitarnya. Anda akan dapat melihat perilaku ini ketika Anda akan menyeret kontrol dan itu akan menempel pada grid di dekatnya.
Grid Settings- Lebih banyak pengaturan yang terkait dengan Kisi ada dalam dialog ini. Seperti yang ditunjukkan pada tangkapan layar berikut, jarak antara kisi, jenis kisi, dll. Akan tersedia dalam dialog ini. Anda dapat memilih kisi persimpangan tipe, sesuai kenyamanan Anda.

Guides - Dalam menu konteks seperti yang ditunjukkan pada tangkapan layar berikut, opsi setelah pemisah pertama terkait dengan panduan.

Kami akan membahas opsi yang biasanya digunakan untuk Panduan.

Show Global Guides- Panduan ini akan terlihat saat Anda menyeret dari penggaris horizontal dan vertikal di area desain. Cobalah sendiri!
Show Page Guides- Panduan juga tersedia di tingkat halaman. Panduan ini dibuat saat Anda menyeretnya dari penggaris vertikal dan horizontal. Mereka lebih umum daripada Panduan Global. Memiliki panduan halaman meningkatkan fleksibilitas desain di tingkat halaman.
Show Adaptive Guides- Saat mendesain halaman untuk tampilan adaptif yang berbeda, ada baiknya untuk memiliki panduan adaptif yang sudah disiapkan. Opsi ini memungkinkan visibilitas panduan adaptif, yang akan digunakan untuk menyelaraskan objek di berbagai tampilan adaptif.
Snap to Guides- Saat menyusun elemen layar yang berbeda di area desain, fungsionalitas ini memungkinkan objek untuk diikat ke panduan. Ini berguna saat Anda menempatkan objek tertentu di layar dan mengaturnya sehubungan dengan objek lainnya.

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 mengkode 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 katalisator 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.

Ini melengkapi contoh.

Anda dapat mencoba interaksi berikut sebagai tugas cepat.

Properti OnClick dengan menggunakan widget tombol.

Banyak dari pendekatan pengembangan perangkat lunak, ketika datang ke pengembangan antarmuka pengguna, menggunakan teknik umum - Membuat Master.

Master adalah wireframe yang dapat digunakan kembali, yang akan dibuat sekali dan digunakan secara ekstensif setelahnya pada halaman-halaman berikutnya. Dengan Axure RP, saat kita membuat halaman master, perubahan yang dibuat pada halaman ini akan diterapkan ke halaman tempat halaman itu digunakan. Karenanya, ini mengurangi banyak waktu untuk komponen yang umum untuk semua halaman.

Untuk memulai dengan Master, Anda dapat fokus pada bagian Master (ditandai sebagai 5) seperti yang disorot pada gambar layar berikut.

Gunakan bagian master ini untuk -

Atur master prototipe dengan menambahkan, menghapus, atau mengedit halaman / folder master.
Pilih master tertentu untuk diedit.

Panel Dinamis

Di Axure RP, seperti yang telah kita lihat di bab sebelumnya, ada status berbeda yang terkait dengan widget yang diberikan. Untuk mengkonsolidasikan / mengatur status widget atau kumpulan widget tertentu, kita membutuhkan wadah / placeholder. Panel dinamis berfungsi sebagai wadah / placeholder untuk status widget.

Biarkan kami memahami panel dinamis dengan lebih baik menggunakan sebuah contoh. Kami akan melanjutkan dari contoh bilah menu kami.

Penambahan dalam contoh ini akan menjadi area gambar dan tombol di bawah bilah menu. Gunakan Placeholder widget untuk area gambar dan tombol di bawah widget umum. Beri nama placeholder sebagai ImageAreaPlaceholder, tombol sebagai showImageButton.

Juga, mari kita tambahkan bilah menu ke master. Klik kanan pada bilah menu dan klik Convert to Master. Kotak dialog akan muncul meminta nama untuk master. Tambahkan nama sebagai menuBarMaster.

Seperti yang ditunjukkan pada gambar di atas, bilah menu berubah menjadi merah muda dan entri untuk master telah ditambahkan.

Sekarang, mari kita buat panel dinamis. Konteks panel dinamis adalah, Anda ingin mengontrol visibilitas area gambar berdasarkan klik tombol Show Image. Memiliki panel dinamis akan memungkinkan fleksibilitas area gambar.

Mari kita lihat cara membuat panel dinamis. Klik kanan pada Image Area, akan muncul menu konteks, pilih Convert to Dynamic Panel.

Panel dinamis akan berada di bawah Outline: Page. Juga di bawah Inspektur, ini menunjukkan panel dinamis. Beri nama panel dinamis sebagai showImageDynamicPanel. Nama untuk panel dinamis ini akan diperbarui di bawah Garis Besar: bagian Halaman.

Di area desain, klik kanan pada panel dinamis Tampilkan Gambar untuk melihat menu konteks. Pilih Set Hidden, panel dinamis akan menghilang dari layar.

Panel dinamis dapat diakses dengan mengklik dua kali di bawah Outline: Page.

Sekarang, mari kita berikan event klik ke tombol tersebut. Klik tombol Show Image, di bawah Inspector → Properties, klik dua kali interaksi OnClick.

Seperti yang ditunjukkan pada screenshot di atas, klik Show / Hide under Widgets. Ini secara otomatis akan menampilkan widget yang tersedia untuk mengkonfigurasi tindakan. Centang pilih showImageDynamicPanel. Klik OK.

Sekarang, klik Preview. Pada layar pratinjau, klik Tampilkan Gambar. Interaksi lain untuk sebuah tombol akhirnya dibuat.

Pada bab ini, kita akan membahas logika kondisional yang digunakan dalam Axure RP.

If - Then - Else in Axure

Sama seperti alat pemrograman lainnya, Axure juga mendukung logika kondisional untuk membuat interaksi yang ditingkatkan dalam prototipe. Setelah Anda terbiasa dengan bagaimana Anda dapat memberikan interaksi, memberikan logika kondisional ke interaksi adalah tingkat berikutnya.

Berikut ini adalah alur sederhana dan ringkas untuk logika kondisional -

Jika, widget / layar tertentu diklik
Kemudian, lakukan tindakan / interaksi tertentu
Atau, pertahankan / ubah status widget atau layar

Untuk memahami ini lebih baik, mari kita lanjutkan alur dari contoh sebelumnya. Untuk tujuan ini, kami harus mengenal Condition Builder.

Pembangun Kondisi

Klik dua kali interaksi apa pun, misalnya OnClick. Anda akan dapat melihat Editor Kasus seperti yang ditunjukkan pada tangkapan layar berikut.

Klik tombol - Tambahkan Kondisi di dekat Nama Kasus. Ini akan ditampilkan di bawah di kotak dialog.

Seperti yang ditunjukkan di bawah Deskripsi, pembuat kondisi akan membuat aliran If-Then-Else sesuai kondisi yang dipilih di bagian kondisi.

Mari kita buat kondisi pada tombol ini.

Kami ingin menampilkan tombol sembunyikan gambar, setelah panel dinamis terlihat. Kami membuat panel dinamis terlihat pada klik tombol Show Image pada contoh sebelumnya. Sekarang, mari kita buat tombol lain Sembunyikan Gambar terlihat.

Tutup pembangun kondisi, dan kembali ke area desain.

Sisipkan tombol Sembunyikan Gambar dari Perpustakaan di bawah perpustakaan umum. Untuk mengulangi, praktik terbaiknya adalah memberi nama elemen UI tepat setelah Anda memasukkannya di area desain.

Klik kanan tombol Hide Image dan klik Set Hidden. Tombol akan disembunyikan dari area desain seperti yang ditunjukkan pada gambar layar berikut.

Sekarang, mari kita kembali ke interaksi untuk tombol Show Image.

Pertama, di bawah interaksi tombol Tampilkan Gambar, klik dua kali Kasus 1, Anda akan dapat melihat editor kasus. Gunakan tindakan Show / Hide, untuk memilih hideImageButton dan mengatur visibilitasnya untuk ditampilkan.

Demikian pula, menggunakan tindakan Perlihatkan / Sembunyikan, pilih showImageButton dan setel visibilitasnya untuk disembunyikan.

Kami telah mengatur visibilitas tombol Sembunyikan Gambar sehingga ketika kami mengklik tombol Tampilkan Gambar, tombol tersebut akan ditampilkan.

Kondisi lengkap akan seperti yang ditunjukkan pada screenshot berikut.

Mari kita bangun kondisinya.

Di bawah area desain, klik tombol Sembunyikan Gambar. Dari bagian Inspector, klik Add Case.

Di bawah Tambahkan Kasus, klik tombol Tambahkan Kondisi. Sesuai latar belakang yang disediakan sebelumnya, buat kondisi yang ditetapkan menggunakan nilai dropdown di Condition Builder.

Secara sederhana, dengan kondisi di atas, kami memeriksa apakah panel dinamis showImageDynamicPanel terlihat atau tidak

Sekarang, mari kita rancang interaksi untuk tombol Hide Image, konfigurasikan sebagai berikut -

Pilih Perlihatkan / Sembunyikan tindakan.
Pilih widget showImageDynamicPanel.
Setel visibilitas ke Sembunyikan.

Demikian pula, ulangi latihan untuk menampilkan showImageButton dan menyembunyikan hideImageButton.

Setelah selesai, klik OK untuk menutup Editor Kasus.

Kemudian, klik Pratinjau untuk melihat perubahan yang telah dilakukan.

Hasil yang berhasil akan seperti yang ditunjukkan pada screenshot berikut.

Ketika tombol Show Image diklik -

Saat tombol Sembunyikan Gambar diklik -

Hingga saat ini, kami telah memperkenalkan fitur dasar Axure untuk interaksi. Namun, akan ada banyak skenario dunia nyata, di mana prototipe harus cerdas. Dengan kata cerdas, prototipe perlu mendeteksi status widget tertentu untuk melakukan tindakan / memicu perilaku tertentu.

Contoh umum dari interaksi semacam itu adalah menyetel warna tombol. Ini membutuhkan insinyur UX untuk memakai topi pemikiran dan membawa desain prototipe ke tingkat berikutnya.

Menggunakan Variabel di Axure

Variable, menurut definisi, adalah singkatan dari faktor yang dapat bervariasi atau berubah. Di Axure, kita dapat menggunakan variabel untuk mewakili atau mengidentifikasi status widget / interaksi.

Contoh tipikal akan menyimpan nilai data saat mentransfer data dari satu halaman ke halaman lainnya. Untuk menjaga agar contoh tetap sederhana dan jelas, mari kita pertimbangkan skenario di mana kita perlu menunjukkan status widget tertentu.

Melanjutkan contoh terakhir kita, mari kita pertimbangkan bahwa kita ingin menunjukkan berapa kali gambar itu ditampilkan.

Inilah cara kami melakukannya -

Kami akan membuat variabel untuk memulai hitungan ke 0.
Pada klik tombol Show Image, kami akan menaikkan nilai variabel ini.
Tampilkan nilai di label teks.

Untuk contoh ini, kami akan membuat teks di bawah Panel Dinamis. Teks akan terbaca - Gambar ditampilkan 0 kali.

Critical- Penting agar label dipecah menjadi tiga. Harap ikuti nama label dan teks yang tercantum dalam tabel.

Label Nama	Teks Label
imageLabel	Gambar ditampilkan
countLabel	0 (nol dalam digit)
timesLabel	Waktu

Ini diperlukan karena kami ingin mengontrol nilai countLabel untuk setiap klik tombol Tampilkan Gambar.

Mari kita definisikan variabel terlebih dahulu.

Kami membutuhkan variabel, yang akan dikontrol saat tombol diklik. Variabel dalam terminologi Axure ini adalah - Variabel Global. Untuk menentukan variabel global, klik Proyek di bilah menu, lalu klik Variabel Global. Kotak dialog akan terbuka seperti yang ditunjukkan pada tangkapan layar berikut.

Klik ikon hijau plus (+) untuk menambahkan variabel global. Mari kita sebut variabel global kita -varDynamicPanel. Nilai defaultnya adalah0.

Dengan interaksi tombol Tampilkan Gambar, klik dua kali Kasus 1. Tambahkan tindakan lain. Seperti yang ditunjukkan pada tangkapan layar berikut, aksinya adalahSet Text on countLabel to [[varDynamicPanel + 1]].

Memilih label teks ke suatu nilai cukup mudah. Mari kita lihat bagaimana mendapatkan nilai dari panel dinamis.

Seperti yang ditunjukkan oleh langkah 4 pada tangkapan layar di atas, klik fx tombol dan kotak dialog berikut akan terbuka.

Di bawah area teks pertama, masukkan string berikut.

[[varDynamicPanel + 1]]

Klik OK.

Sekarang, kita perlu memastikan bahwa variabel diperbarui setelah setiap klik tombol.

Dalam kotak dialog editor kasus, di bawah tindakan, pilih Variabel → Tetapkan Nilai Variabel.

Pilih varDynamicPanel sebagai variabel.

Setel variabel untuk mengambil nilai dari teks pada widget sebagai countLabel dari opsi yang tersedia.

Tutup Editor Kasus dengan mengklik OK. Kemudian klik tombol Preview.

Setelah menampilkan / menyembunyikan gambar sebanyak empat kali, berikut adalah hasil di layar preview.

Sekarang setelah Anda memahami berbagai interaksi dan peristiwa yang mungkin terjadi di Axure, Anda mungkin ingin memperluas pekerjaan Anda untuk meminimalkan upaya di masa mendatang.

Misalnya, contoh pertama dengan Menu Klasik - Horizontal, pernah ada dalam versi Sumbu sebagai kombinasi dari berbagai widget yang tersedia. Artinya, Axure berevolusi seiring waktu untuk mengakomodasi widget yang sering digunakan dalam bentuk singlewidget library.

Konsep pustaka widget berlaku lebih menonjol dalam tim UX yang besar. Beberapa organisasi menyimpan widget yang disetujui untuk teknisi UX berikutnya di repositori pusat.

Jadi, singkatnya, Perpustakaan Widget Axure adalah kumpulan widget khusus yang disimpan dalam satu file. Jenis file untuk Perpustakaan Widget Axure adalahRPLIB.

Jenis Perpustakaan Widget

Perpustakaan Built-in Axure

Perpustakaan ini dapat diakses dari panel Perpustakaan. Perpustakaan ini tidak dapat diperbarui / dihapus. Untuk sebagian besar kebutuhan pembuatan prototipe yang kompleks, pustaka bawaan Axure datang untuk menyelamatkan.

Pustaka terdiri dari 17 widget aliran unik, yang digunakan terutama untuk pembuatan diagram. Juga, ada 25 widget di pustaka wireframe.

Fungsi singkat pustaka disajikan di Bab 3 - Antarmuka Pengguna.

Perpustakaan Kustom Axure

Komunitas Axure, yang tumbuh dari hari ke hari, memiliki banyak koleksi pustaka yang dibuat pengguna. Anda dapat mengunjungi mereka di -https://www.axure.com/support/download-widget-libraries.

Para profesional UX dari seluruh dunia, yang berkomitmen untuk membuat komunitas ini berkembang, mengirimkan pekerjaan mereka pada tautan di atas.

Anda dapat mengunduh perpustakaan dari situs web dan menambahkannya ke Axure menggunakan opsi Muat Perpustakaan di bawah perpustakaan. Selain itu, Anda dapat langsung mengunduh pustaka dari antarmuka aplikasi itu sendiri.

Seperti yang ditunjukkan pada layar di atas, kami memiliki menu konteks, tempat Anda dapat mengunduh berbagai pustaka seperti yang ditawarkan https://www.axure.com/support/download-widget-libraries. Anda juga dapat membuat perpustakaan Anda sendiri, yang akan berguna saat membuat kontrol berulang untuk prototipe tertentu.

Instruksi lengkap untuk mengunduh / memuat perpustakaan tersedia di: https://www.axure.com/support/reference/widget-libraries.

Saat menggunakan widget khusus dari salah satu perpustakaan yang Anda muat, seret dan lepas di area desain yang mirip dengan widget bawaan. Jika widget menyertakan variabel atau gaya kustom, fileImport Wizard dialog akan menandai dependensi tersebut.

Di antara dependensi tersebut, Anda mungkin memperhatikan ada gaya tertentu yang tidak kompatibel yang menyertai pustaka widget yang diimpor. Anda dapat memilih untukCancel dan impor hanya widget atau klik Finish tombol untuk mengimpor seluruh paket.

Setelah Anda menyeret dan melepaskan widget ke wireframe Anda, contoh khusus itu tidak lagi terkait dengan perpustakaan widget aslinya. Karenanya, pengeditan dan perubahan yang dilakukan pada widget di pustaka widget yang diimpor tidak diterapkan ke salah satu contoh widget ini di file proyek Anda, bahkan setelah Anda menyegarkan pustaka. Yakinlah, setelah diimpor, Anda dapat memanfaatkan widget di perpustakaan yang diimpor tanpa mengkhawatirkan pembaruan yang berlangsung di perpustakaan widget yang sama seperti yang tersedia secara online.

Menggunakan RPLIB

Menggunakan file Perpustakaan Axure RP cukup mudah. Saat Anda mengunduh pustaka, ikon untuk file pustaka (.rplib) dibedakan dengan jelas dari file prototipe Axure RP (.rp). Misalnya, seperti yang terlihat pada tangkapan layar berikut.

Mekanisme agar ini bekerja - Anda dapat mengimpor dokumen Bingkai Gambar iOS di Demo Bingkai Gambar iOS.

Pustaka ini dapat digunakan untuk beberapa proyek dan pembaruan dalam file pustaka akan tersedia setelah Anda menyegarkan pustaka dari menu konteks. Seperti yang disorot sebelumnya, ini sangat berguna saat mengerjakan proyek tim dan mendistribusikan perpustakaan dengan cara ini.

Axure RP 8 mendukung kolaborasi dengan fitur - Proyek Tim. Fitur ini tidak hanya bermanfaat bagi tim terdistribusi tetapi juga untuk satu pengguna. Manfaat bagi pengguna tunggal adalah kemampuan untuk membuat pembuatan versi pada pekerjaan yang sedang berlangsung.

Bekerja dengan Proyek Tim

Dalam skenario Proyek Tim, setiap anggota tim memiliki salinan proyek di komputer mereka. Proyek ini akan disinkronkan dengan repositori bersama. Repositori bersama ini terhubung ke anggota tim lainnya.

Setelah seharian bekerja, setiap anggota tim akan membuat elemen baru, memeriksa file, dan umumnya mengedit proyek. Check Out adalah istilah yang umum digunakan untuk menunjukkan pekerjaan yang sedang berlangsung untuk file tertentu.

Perubahan tidak akan tercermin dalam repositori bersama sampai anggota tim memeriksa semua elemen mereka yang diperiksa. ItuManage Team Project konsol menyediakan semua anggota tim dengan tampilan real-time dari status ketersediaan elemen yang dikelola oleh sistem.

Tampilan ini memberikan detail elemen yang diperiksa oleh anggota tim lain.

Mulai proyek tim

Untuk bekerja dengan atau membuat proyek tim, buka menu Tim. Klik Tim lalu pilih Buat Proyek Tim dari File Saat Ini. Layar berikut muncul.

Opsi yang tersedia untuk menyelenggarakan proyek tim adalah - menggunakan AxShare dan SVN. Kami akan membahas AxShare di bagian selanjutnya. SVN adalah Sistem Pengendalian Versi yang umum digunakan, yang menyediakan server untuk menghosting dokumen Anda.

Ikuti panduan di layar untuk membuat proyek tim dan kemudian Anda akan dapat mulai berkolaborasi dengan satu file Axure di seluruh tim / menggunakannya untuk penyimpanan historis Anda sendiri.

Berbagi Axure

Ketika datang untuk menampilkan prototipe Anda, ada beberapa pilihan yang tersedia sesuai lingkungan tempat Anda berada. Metode yang paling umum digunakan untuk mengekspor prototipe Anda adalah dengan menggunakan Axure Share (alias AxShare).

Dengan Axure Share, kapabilitas kolaborasi berikut dimungkinkan.

Prototipe dapat dihosting di Axure Share dan dibagikan dengan anggota tim / klien yang terlibat.
Dengan fitur diskusi / komentar, Anda bisa mendapatkan masukan saat bepergian tentang prototipe dalam pembuatan.

Setelah Anda siap dengan prototipe, Anda dapat mengunggah prototipe ke AxShare menggunakan Publikasikan → Publikasikan ke Axure Share. Kotak dialog berikut akan ditampilkan.

Anda harus membuat akun di AxShare.com untuk maju. Jika Anda sudah memiliki akun, Anda dapat menggunakan opsi 'Masuk' untuk masuk dan mengunggah pekerjaan Anda ke AxShare .

Data yang diunggah ada dalam HTML, CSS, dan JavaScript. Setelah diunggah, Anda diberikan tautan, yang dapat Anda berikan kepada pemangku kepentingan / tim yang dituju.