Prototipe dengan Mudah – Tutorial Studio InVision

Kecuali Anda tertidur selama paruh pertama tahun 2018, Anda mungkin sangat menyadari antisipasi yang terburu-buru dalam komunitas desain interaktif menjelang rilis aplikasi InVision Studio. InVision terkenal karena suite plugin Sketch dan Photoshop mereka seperti Craft, dan karena menjadi platform masuk untuk dengan cepat mengubah desain antarmuka statis menjadi prototipe yang dapat diklik dan dibagikan. Dalam langkah berani tahun lalu, mereka mengumumkan pengembangan perangkat lunak desain digital mereka sendiri untuk bersaing dengan favorit industri seperti Sketch dan Figma.

Produk ini digembar-gemborkan sebagai revolusioner dan membuat beberapa janji penting untuk alur kerja desain-ke-prototipe yang mulus, fungsionalitas interaksi yang kompleks, animasi transisi yang menakjubkan—dan itu akan gratis. InVision mengeluarkan beberapa video teaser dan demo yang cukup menarik untuk membuat para desainer bersemangat. Antisipasi meningkat lebih jauh karena rilis beta awal didorong kembali lebih dari beberapa kali di awal tahun.

Karena semakin banyak desainer mulai bermain-main dengan perangkat lunak, semakin banyak tutorial dan panduan bermunculan untuk menunjukkan dasar-dasar alat desain antarmuka aplikasi. InVision juga telah membuat beberapa miliknya sendiri untuk mengonfigurasi pengguna ke dasar-dasar InVision Studio.

Meskipun rilis akses awal mendapatkan tinjauan yang beragam, Studio memiliki beberapa fitur menarik dan banyak potensi. Tutorial ini ditujukan untuk memandu pengadopsi awal melalui dasar-dasar pembuatan prototipe InVision Studio dan menambahkan beberapa animasi prototipe dasar.

Buat prototipe interaktif dengan transisi animasi yang apik dalam waktu singkat dengan mengikuti tutorial InVision Studio ini!

Tur Nikel di Ruang Kerja InVision Studio

Sebagian besar Studio harus akrab dengan desainer UI dan siapa saja yang telah menggunakan perangkat lunak desain digital seperti Sketch. Sebagian besar ruang kerja meminjam isyarat dari UI Sketch, dengan halaman rumah panel sisi kiri, lapisan, dan grup; panel sisi kanan untuk inspektur; dan toolbar kontekstual di bagian atas.

Anda juga akan menemukan banyak alat yang sama, meskipun beberapa fungsi diberi nama yang berbeda. Misalnya, "simbol" Sketsa disebut komponen di Studio.

Panel Interaksi

Untuk tujuan tutorial ini, kami akan berfokus pada pemanfaatan alat interaksi untuk membuat hotspot interaktif antar layar dan membuat transisi yang mulus di antara mereka. Banyak keajaiban akan terjadi di "panel interaksi" di sisi kanan ruang kerja Studio.

Cara sederhana untuk membuat interaksi adalah dengan memilih lapisan atau grup pemicu dan tekan "c" pada keyboard (atau klik ikon petir di bilah alat atas), yang memulai cambuk pick biru untuk memilih layar tujuan. Studio kemudian akan meminta desainer untuk memilih isyarat atau masukan pengguna yang memicu acara dan untuk memilih antara serangkaian transisi prasetel atau transisi "gerakan".

Animasi Studio InVision

Ada banyak elemen untuk desain interaksi yang hebat, tetapi penggunaan transisi animasi dan interaksi mikro yang benar dalam antarmuka pengguna lebih dari sekadar penutup jendela.

Mereka meningkatkan kegunaan dan dapat berarti perbedaan antara produk yang dicintai dan kekacauan yang membingungkan.

Sepanjang tutorial ini, kami menggunakan kombinasi transisi preset dan transisi gerakan untuk membuat prototipe aplikasi kami. Transisi preset cukup mudah dan akan familiar bagi pengguna platform prototipe online InVision.

Aturan yang mengatur cara kerja transisi gerakan antar layar sedikit lebih misterius. Meskipun ada banyak pertimbangan desainer yang jelas diperhitungkan dalam membangun alat—misalnya, penautan otomatis elemen antar layar—dibutuhkan beberapa percobaan dan kesalahan untuk mencapai efek tertentu saat menambahkan gerakan ke transisi. Semoga tutorial ini akan membantu desainer menjadi sedikit lebih nyaman bereksperimen dengan apa yang ditawarkan InVision Studio.

Hal-hal yang Perlu Diingat

Studio menjanjikan banyak fungsi cerdas seputar animasi. Misalnya, dapat membuat transisi gerak antara objek yang diduplikasi dari satu artboard ke artboard lainnya saat terhubung melalui interaksi. Desainer kemudian dapat mengubah animasi ini sesuai keinginan untuk mencapai beberapa easing yang indah dan efek gerakan lainnya. Mempelajari eksentrisitas cara kerjanya saat mencoba mentransisikan tumpukan objek dalam urutan tertentu dapat membutuhkan kesabaran dan beberapa latihan.

Transisi gerak bekerja paling baik dengan objek di artboards yang telah diduplikasi satu sama lain. Fitur animasinya "pintar" karena mengenali objek duplikat dengan nama layer yang sama, jadi berhati-hatilah untuk tidak menghapus atau mengganti nama layer kunci di antara layar (yang merupakan cara yang sangat mudah untuk merusak animasi yang bagus).

Perlu diingat bahwa Studio masih dalam masa pertumbuhan, jadi desainer harus siap menghadapi banyak bug. Misalnya, tombol "pratinjau" meluncurkan pratinjau interaktif prototipe, tetapi terkadang interaksi tidak memicu sama sekali, dalam hal ini Anda perlu menyimpan dan membuka kembali file.

Saat mempelajari perangkat lunak, saya memiliki lebih dari satu file yang anehnya merusak dirinya sendiri—menghapus semua artboard dan membuat semua panel alat tidak dapat diakses. Saya telah melaporkan bug, dan telah belajar untuk menyimpan beberapa versi file saya agar tidak kehilangan terlalu banyak pekerjaan.

Akhirnya, selalu membantu untuk diatur. Saat membuat prototipe di platform apa pun, apakah itu Studio atau Sketch atau Marvel, melacak objek dan label lapisan akan menghemat waktu dan frustrasi—terutama jika Anda bekerja dengan tim atau menyerahkan file di beberapa titik. Catat urutan lapisan dan kelompok lapisan saat membangun interaksi; ini sering membuat perbedaan besar dalam mencapai efek animasi yang diinginkan.

Tutorialnya!

Mari kita mulai! Jika Anda belum melakukannya, buka InVision Studio untuk mengunduh versi akses awal aplikasi Studio. Setelah Anda memiliki InVision Studio di komputer Anda, unduh file tutorial di sini. Setelah Anda meluncurkan perangkat lunak Studio, pilih untuk membuka file dari mana pun Anda menyimpannya.

Langkah 1: Buka File dan Lihat

Prototipe interaktif ini akan digunakan untuk aplikasi seluler tentang seniman modern dari akhir abad ke-19 hingga awal abad ke-20. Semua layar telah dibuat sebelumnya menggunakan duplikasi artboard yang cermat, yang diperlukan untuk penggunaan yang tepat dari fitur transisi gerak.

Hirarki memiliki 3 tingkat kedalaman, mulai dari "Rumah", lalu ke bio masing-masing artis, dan akhirnya turun ke korsel empat contoh karya seniman. Anda akan melihat bahwa artboard "Beranda" memiliki ikon kecil sebuah rumah, yang menunjukkan artboard awal untuk prototipe.

Tutorial akan fokus pada pembuatan jalur navigasi sederhana yang menghubungkan ketiga tingkat kedalaman ini. Kami akan menggunakan alat interaksi dan transisi Studio untuk membuat prototipe terasa seperti aplikasi yang benar-benar interaktif.

Langkah 2: Hubungkan Ubin Artis ke Biodata Artis

Pergi ke artboard pertama. Luangkan waktu sejenak untuk memperluas grup layer "Artist Tile 1." Anda akan melihat tiga grup bersarang: satu untuk nama artis, satu untuk gambar unggulan, dan lapisan ketiga berisi "Teks Bio".

Melihat layar artboard, grup lapisan ketiga tidak langsung terlihat karena cara Studio menangani transisi gerakan—yang akan kita dapatkan sebentar lagi. Buat catatan saja untuk saat ini.

Pilih grup layer yang berisi semua elemen ini: "Artist Tile 1." Dengan grup ini dipilih, tekan "c" pada keyboard Anda (atau klik ikon petir di bilah alat atas) untuk memulai alat interaksi. Kursor Anda akan diikuti oleh cambuk pick biru untuk memilih layar tujuan interaksi Anda.

Pilih artboard segera di sebelah kanan berjudul "Artist Bio 1" dan Anda akan diminta untuk memilih pemicu dan jenis transisi. Untuk pemicu, pilih "Ketuk," lalu pilih "Gerakan" sebagai transisi. Anda kemudian dapat memilih durasi transisi. Mari kita atur transisi ini menjadi 2 detik dan tekan "Simpan."

Klik tombol putar untuk melihat pratinjau prototipe. Apakah Anda melihat cara benda bergerak di sepanjang layar dan bagaimana lapisan bio meluncur turun dari bawah gambar? Selamat—Anda telah membuat transisi interaksi yang cukup apik!

Langkah 3: Hubungkan Tombol Kembali ke Layar Beranda

Sekarang kita harus memberi pengguna cara untuk kembali ke layar beranda. Masuk ke artboard “Artist Bio 1” dan pilih komponen “btn_back” di pojok kiri atas. Buat pemicu di sini dengan menekan "c" dan memilih artboard "Beranda".

Sekali lagi, mari atur pemicu ke "Ketuk", interaksi ke "Gerakan", dan durasi menjadi 2 detik. Klik Pratinjau dan nikmati transisi buka dan tutup yang apik yang baru saja Anda buat. Perhatikan bagaimana animasi yang dipicu dengan menutup ubin adalah kebalikan dari animasi yang dimainkan saat membuka ubin.

Langkah 4: Hubungkan Galeri

Jika Anda memperhatikan nama layer di artboard pertama dan kedua, Anda mungkin memperhatikan bahwa mereka identik. Ini karena, seperti yang disebutkan sebelumnya, animasi Studio secara otomatis menautkan lapisan duplikat dari satu artboard ke artboard berikutnya jika mereka memiliki nama yang sama. Mengubah nama lapisan ini akan memutus tautan animasi dan transisi akan default ke fade sederhana—terutama menantang bagi mereka yang terobsesi dengan label lapisan yang bermakna.

Kami ingin menerapkan satu lagi transisi gerakan yang rapi untuk membuka galeri gambar korsel. Artboard berjudul “Artist 1 - Image 1” berisi elemen yang diduplikasi dari artboard “Artist Bio 1”, ukurannya diubah untuk menampilkan lebih banyak contoh gambar.

Mulailah dengan mengklik layer “Artist Bio 1” untuk memilih grup “Featured Image”. Ini akan menjadi pemicu untuk membuka galeri. Buat interaksi "Ketuk" di sini menghubungkan ke artboard pertama di galeri dan pilih "Gerakan." Kali ini, atur durasinya menjadi sedikit lebih cepat: 1 detik.

Untuk membuat transisi yang bagus untuk menutup galeri, cukup pilih layer tombol tutup di artboard “Artist 1 - Image 1” dan hubungkan kembali ke artboard “Artist Bio 1”, dengan pengaturan yang sama seperti sebelumnya.

Pratinjau animasi ini dan kagumi betapa bagusnya transisi prototipe dari layar bio artis ke korsel gambar dan kembali. Kami sekarang telah menghubungkan navigasi melalui tiga tingkat hierarki aplikasi kami!

Langkah 5: Hubungkan Semua Gambar Galeri

Kami telah melakukan sebagian besar transisi gerakan yang perlu kami lakukan, dan sekarang akan mulai menggunakan beberapa preset animasi untuk galeri lainnya.

Pola interaksi di sini bagi pengguna kami untuk membolak-balik korsel gambar ini akan menjadi gerakan menggesek yang sudah dikenal. Kabar baiknya adalah bahwa bagian terakhir ini cukup sederhana dan tidak akan memakan waktu sama sekali menggunakan preset animasi Studio.

Pilih artboard “Artis 1 - Gambar 1” dan buat interaksi yang mengarah ke artboard berikutnya, “Artis 1 - Gambar 2.” Kali ini, atur pemicu ke "Gesek ke Kiri." Untuk transisi, pilih "Preset" dan pilih "Push Left" dari drop-down.

Untuk membuat interaksi terbalik, pilih artboard “Artist 1 - Gambar 2” dan hubungkan ke artboard sebelumnya, hanya kali ini menggunakan gerakan “Swipe Right” dan transisi “Push Right”.

Ulangi pola ini dengan beberapa artboard berikutnya, sambungkan artboard untuk Gambar 2 ke Gambar 3, dan Gambar 3 ke Gambar 4. Mudah!

Untuk membuatnya lebih realistis, mari tutup loop antara Gambar 1 dan Gambar 4. Pilih artboard untuk Gambar 4 dan hubungkan ke Gambar 1. Pilih pemicu "Gesek ke Kiri" dan transisi "Tekan ke Kiri" seperti yang Anda lakukan untuk gambar berikutnya dalam seri. Hubungkan artboard Gambar 1 ke Gambar 4 dengan kebalikan dan presto—Anda telah membuat galeri perulangan!

Terakhir, pilih masing-masing komponen “btn_close” di artboard galeri gambar dan tautkan kembali ke bio artboard. Anda dapat memilih transisi mana pun yang Anda suka di sini, tetapi saya memilih "Tekan ke Kanan".

Sekarang Anda memiliki jalur navigasi yang cukup berurutan untuk dipamerkan. Klik pratinjau dan cobalah; prototipe Anda harus bekerja sangat mirip dengan gif di awal tutorial ini. Beri diri Anda tepukan yang layak di punggung.

Langkah 6: Ulangi

Sekarang setelah Anda menautkan semua layar untuk contoh artis pertama dengan interaksi yang apik, ulangi langkah-langkah untuk dua set layar lainnya di file tutorial. Mereka diatur dengan cara yang sama dan ini akan menjadi praktik yang baik untuk membiasakan diri dengan cara kerja Studio.

Langkah selanjutnya

Semoga tutorial ini memberikan pengenalan beberapa fitur keren dari pembuatan prototipe InVision Studio. Saat memahami Studio, Anda harus mencoba mengubah transisi menggunakan alat animasi tingkat lanjut. Bereksperimenlah dengan alat lain di ruang kerja, dan coba ikuti beberapa tutorial InVision Studio lainnya di luar sana. Dengan latihan, Anda bisa menjadi salah satu ahli desain InVision Studio terdepan.

Anda mungkin menemukan beberapa bug atau perilaku tak terduga di sepanjang jalan, tetapi begitulah sifat mencoba perangkat lunak baru. Orang-orang di InVision sangat responsif terhadap umpan balik dan pasti akan terus meningkatkan Studio, menjadikannya lebih stabil dan berguna.

Studio adalah alat yang menyenangkan untuk dicoba—dan tidak ada alasan untuk tidak bereksperimen dengan alat pembuatan prototipe aplikasi gratis. Meskipun tidak mungkin menggantikan perangkat lunak masuk seperti Sketch di komunitas desain saat ini, ia memiliki banyak potensi.

Bacaan lebih lanjut di Blog Desain Toptal:

• Sempurnakan Proses Desain UX Anda – Panduan untuk Desain Prototipe
• Kekuatan Figma sebagai Alat Desain
• Membuat Prototipe dengan Data Nyata - Tutorial Pembingkai
• Panduan Dasar untuk Kegunaan Seluler
• Praktik Terbaik dan Kesalahan Desain Aplikasi Seluler