Tutorial Pembingkai: 7 Interaksi Mikro Sederhana untuk Meningkatkan Prototipe Anda

Selamat datang di angsuran kedua dari seri tutorial Framer kami. Pada artikel terakhir, kita mempelajari tentang dasar-dasar penggunaan Framer dalam mode Desain, serta bagaimana menulis beberapa kode sederhana untuk membuat desain kita menjadi hidup. Dalam bagian ini, kita akan fokus menggunakan Framer untuk membuat interaksi mikro dan transisi animasi. Kami akan membahas cara membuat tujuh interaksi yang berguna untuk prototipe Anda.

Mengapa Anda Harus Membuat Prototipe Interaksi Kecil?

Gerakan halus, perubahan status, dan transisi halus membantu pengguna memahami cara menggunakan antarmuka Anda dengan memberi mereka umpan balik tentang tindakan tertentu. Seringkali, transisi ini akan menggemakan analog dunia nyata (seperti menggeser kontrol sakelar) atau menggunakan pola interaksi perangkat yang umum (seperti tap-to-expand). Dalam tutorial ini, kita akan fokus pada interaksi yang menambahkan sentuhan akhir pada antarmuka untuk memandu pemahaman dan memicu kesenangan pada pengguna.

Lihatlah contoh-contoh di bawah ini. Desainer di seluruh dunia menciptakan interaksi mikro ini dalam berbagai produk.

7 Prototipe

Dalam tutorial ini, saya akan memberi Anda gambaran umum tentang setiap interaksi mikro dan beberapa cuplikan kode. Kami akan menggunakan beberapa teknik berbeda, sehingga Anda dapat memilih salah satu yang paling sesuai dengan produk Anda. Tidak ada cara yang "benar" untuk membuat apa pun di dalam Framer Studio—seperti yang saya sebutkan di artikel saya sebelumnya, Framer memberi Anda banyak kebebasan untuk berkreasi sesuai keinginan Anda.

Pernahkah Anda melihat interaksi seperti ini sebelumnya? Tentu, Anda punya! Anda melihatnya setiap hari di ponsel cerdas Anda. Saatnya untuk membuat Anda sendiri.

1. Tombol tindakan

Tombol aksi sering kali mewakili aksi utama layar saat ini. Terkadang berisi beberapa tindakan di dalamnya. Kami akan membuat interaksi untuk kasus kedua. Unduh prototipe yang berfungsi di sini: https://framer.cloud/ShBnH

Langkah 1: Buat tiga tombol berbentuk lingkaran

Untuk memulai, buat satu tombol utama berbentuk lingkaran dengan ikon di dalamnya dan dua tombol kecil yang ditempatkan di bawah tombol utama. Jangan lupa untuk menandai semua lapisan ini sebagai interaktif dalam mode desain (dengan indikator target).

Langkah 2: Rancang dua status untuk semua lapisan

Buat dua status berbeda untuk layer. Gunakan kode di bawah ini untuk membuat tombol yang lebih kecil bergerak di atas tombol utama dan untuk memutar ikon 45°:

 button_1.states.a = y: 427 x: 246 width: 64 height: 64 button_2.states.a = y: 330 x: 246 width: 64 height: 64 icon.states.a = rotation: 45

Langkah 3: Tambahkan acara

Untuk membuat prototype ini dianimasikan, kita harus menambahkan event. Setelah mengetuk tombol aksi, ubah status semua lapisan:

 button.onTap -> button_1.stateCycle() button_2.stateCycle() icon.stateCycle()

Langkah 4: Animasi musim semi

Pada titik ini, animasi terlihat sangat mekanis. Untuk menambahkan sentuhan manusia, kami akan menambahkan animasi pegas untuk semua lapisan:

 button_1.animationOptions = curve: Spring(tension: 170, friction: 12) button_2.animationOptions = delay: 0.05 curve: Spring(tension: 170, friction: 12) icon.animationOptions = curve: Spring(tension: 250, friction: 5)

Tombol aksi siap digunakan!

2. Sakelar interaktif

Langkah-langkah di bawah ini akan memungkinkan Anda untuk membuat interaksi sakelar Anda sendiri. Unduh prototipe yang berfungsi di sini: https://framer.cloud/ieypV

Langkah 1: Rancang taman bermain sakelar

Anda hanya memerlukan dua hal: sakelar itu sendiri, yang berisi setidaknya dua lapisan (latar belakang dan titik), dan beberapa lapisan untuk dianimasikan setelah menggunakan sakelar.

Langkah 2: Buat status

Apakah Anda ingat dari artikel pertama cara mendesain status langsung di Framer Studio? Rancang status Anda sesuka Anda, atau gunakan pengaturan saya:

 dot.states.a = x: 50 backgroundColor: "rgba(5,106,161,1)" switch_bg.states.a = backgroundColor: "rgba(0,136,205,1)" icon.states.a = opacity: 0 circle.states.a = x: 37 y: 183 width: 301 height: 301 circle_1.states.a = x: 20 y: 166 width: 337 height: 337

Langkah 3: Tambahkan acara

Untuk membuat prototipe berfungsi, kita harus menambahkan acara ke sakelar. Setelah mengetuk sakelar, kami akan mengubah status semua lapisan:

 switch_1.onTap (event, layer) -> dot.stateCycle() switch_bg.stateCycle() circle.stateCycle() circle_1.stateCycle() icon.stateCycle()

Langkah 4: Sesuaikan waktunya

Untuk membuat semuanya lebih alami, sesuaikan waktu dan penundaan semua status:

 dot.animationOptions = time: 0.2 switch_bg.animationOptions = time: 0.2 circle_1.animationOptions = time: 0.5 curve: Spring circle.animationOptions = time: 0.5 delay: 0.05 curve: Spring icon.animationOptions = time: 0.5 curve: Spring

Sekarang prototipe kami selesai!

3. Daftar item tindakan menggesek

Ini adalah interaksi umum untuk menghapus, mengarsipkan, atau menyimpan item dari daftar. Geser ke kiri atau kanan, dan item akan dihapus. Unduh prototipe di sini: https://framer.cloud/rzMWP

Langkah 1: Buat prototipe dalam mode Desain

Anda dapat menggunakan desain Anda sendiri, jika Anda mau. Anda hanya perlu menjaga struktur lapisan yang sama. Seperti yang Anda lihat pada gambar di atas, semua item daftar memiliki tombol "undo" di bawahnya.

Langkah 2: Jadikan item dapat diseret

Untuk membuatnya tetap sederhana, kami akan membuat interaksi hanya untuk item daftar pertama. Pertama, buat item daftar dapat diseret: item.draggable = true .

Kemudian kunci sumbu vertikal: item.draggable.vertical = false .

Siapkan batasan area yang dapat diseret: item.draggable.constraints

Dan terakhir atur ukurannya ke item size: size: item .

Ini adalah bagaimana seluruh kode terlihat:

 item.draggable = true item.draggable.vertical = false item.draggable.constraints = size: item

Sekarang Anda dapat menggesek ke kiri dan ke kanan, dan item akan selalu kembali ke posisi semula.

Langkah 3: Buat status

Selanjutnya, buat status untuk item daftar saat dihapus. Saya cukup memindahkannya ke luar layar menggunakan sumbu x.

 item.states.a = x: -360

Langkah 4: Ubah status setelah menggesek

Terakhir, kita harus membuat trigger untuk memulai interaksi. Saat kita menyeret item ke sisi kiri layar, item itu harus dihapus. Kode akan terlihat seperti ini:

 item.onMove -> if item.x < -70 item.stateCycle("a")

Dalam hal ini, kami menggunakan pernyataan "jika". Kode di atas pada dasarnya mengatakan, ketika kita memindahkan layer item lebih dari 70px, maka ubah status item menjadi 'a.' Anda dapat membaca tentang pernyataan if dalam dokumentasi Framer Studio: https://framer.com/getstarted/programming/#conditional

Langkah 5: Batalkan tindakan setelah ketuk

Kita hampir selesai dengan interaksi ini. Satu-satunya yang tersisa adalah membatalkan tindakan ini:

 item_bg.onTap -> item.stateCycle("default")

Anda harus terbiasa dengan kode ini dari tutorial sebelumnya.

Langkah 6 (opsional): Sesuaikan waktu animasi

Jika mau, Anda dapat menyesuaikan waktu animasi:

 item.animationOptions = time: 0.75 curve: Spring

4. Pemuat tombol

Ini adalah interaksi yang sangat berguna untuk tindakan yang memerlukan waktu pemuatan atau waktu tunggu bagi pengguna. Saat kami membuat interaksi ini, Anda akan mempelajari cara mengelola banyak animasi yang terjadi satu per satu. Unduh prototipe di sini: https://framer.cloud/FxmHN

Langkah 1: Buat prototipe dalam mode Desain

Buat tombol sederhana dengan empat sublapisan: bilah kemajuan dan tiga ikon untuk status berbeda. Saya merancang tombol saya dengan ikon unggah yang terlihat, bilah kemajuan di bagian bawah dengan lebar 0, dan dua ikon tersembunyi lainnya.

Langkah 2: Tambahkan acara

Seluruh prototipe ini dapat dibuat tanpa menulis satu baris kode pun, hanya dengan menggunakan fitur kode otomatis Framer.

Pertama, tambahkan acara. Kami akan memicu seluruh interaksi dengan ketukan pada lapisan tombol:

Ini adalah kode yang ditulis oleh Framer untuk Anda:

 button.onTap (event, layer) ->

Langkah 3: Desain animasi

Kami akan menggunakan fitur kode otomatis Framer untuk mendesain semua animasi:

Saya telah merancang empat animasi dengan waktu yang berbeda:

• Animasi pertama adalah mengubah lebar bilah kemajuan.
• Yang kedua menyembunyikan ikon unggah dengan opacity.
• Yang ketiga berputar dan menampilkan ikon loader.
• Yang terakhir menunjukkan dan menskalakan ikon centang.

Berikut adalah kode yang ditulis Framer untuk masing-masing animasi ini:

 # change progress bar width progress.animate width: 247 options: time: 1.4 curve: Bezier.ease # hide upload icon upload.animate opacity: 0.00 y: 39 options: time: 0.2 curve: Bezier.ease # show and rotate loader icon load.animate opacity: 1.00 rotation: 360 options: time: 1 curve: Bezier.ease # show and scale check icon done.animate opacity: 1.00 scale: 1.4 options: time: 0.2 curve: Bezier.ease delay: 1.00

Langkah 4: Setel ulang memuat animasi

Seperti yang mungkin Anda perhatikan, kami tidak menyembunyikan ikon pemuat setelah animasi selesai. Untuk menyelesaikan prototipe ini, picu animasi lain menggunakan peristiwa ini: load.onAnimationEnd ->

 load.animate opacity: 0.00 options: time: 0.2 curve: Bezier.ease

5. Tarik untuk menyegarkan

Hampir setiap produk dengan daftar di dalamnya menggunakan jenis interaksi ini. Pengguna menarik seluruh daftar untuk menyegarkannya. Ini sangat mudah untuk dibuat. Unduh prototipe di sini: https://framer.cloud/DgMDw

Langkah 1: Rancang daftar sederhana dengan ikon segarkan

Kita bisa langsung masuk ke mode desain. Kami membutuhkan dua hal: daftar dan ikon segarkan. Hal penting di sini adalah menyembunyikan ikon segarkan dengan opacity dan meletakkannya di daftar kami:

Langkah 2: Buat Komponen Gulir

Kami ingin membuat daftar kami dapat digulir. Untuk melakukan ini, gunakan komponen gulir dan tambahkan lapisan daftar ke dalamnya:

 scroll = new ScrollComponent size: Screen scrollHorizontal: false list.parent = scroll.content

Langkah 3: Buat ikon segarkan terlihat

Buat status sederhana untuk ikon:

 icon.states.a = opacity: 1

Langkah 4: Tambahkan acara setelah menarik ke bawah

Daftar kami dapat digulir sekarang. Itu berarti ketika kita menggulir ke atas atau ke bawah, seluruh konten gulir bergerak pada sumbu 'y'. Dengan pengetahuan ini, kita dapat membuat acara:

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a")

Sekali lagi kami menggunakan pernyataan "jika". Jika daftar ditarik ke bawah (digerakkan pada sumbu y) lebih dari 180px, kami akan memicu tindakan. Dalam hal ini, kami akan menganimasikan dua lapisan: daftar dan ikon segarkan.

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a") list.animate y: 210 options: time: 1 curve: Bezier.ease refresh.animate rotation: 360 options: time: 1

Kami menggunakan "animate" untuk memindahkan daftar ke bawah 210px dan memutar ikon refresh 360°.

Langkah 5: Setel ulang semua status

Prototipe hampir berfungsi, tetapi kita harus mengatur ulang semua lapisan setelah animasi penyegaran. Untuk melakukan ini, kita akan menggunakan event setelah animasi berakhir:

 icon.onAnimationEnd ->

Kami menganimasikan rotasi ikon segarkan kembali ke posisi semula, dan dengan menggunakan siklus status, kami menyetel ulang daftar dan status latar belakang ikon:

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a") list.animate y: 210 options: time: 1 curve: Bezier.ease refresh.animate rotation: 360 options: time: 1 icon.onAnimationEnd -> refresh.animate rotation: 0 list.stateCycle("default") icon.stateCycle("default")

Itu dia!

6. Menyeret interaksi

Pernahkah Anda memperhatikan bahwa saat Anda menyeret item ke dalam aplikasi, selalu ada sesuatu yang terjadi dengan item itu sendiri? Terkadang item menyusut, mungkin item lain kabur, atau opacity berubah. Mari kita pelajari cara membuat interaksi semacam ini. Unduh prototipe yang berfungsi di sini: https://framer.cloud/YstiW

Langkah 1: Rancang kisi sederhana dengan ubin

Buat kisi ubin, dan pastikan mereka berada di dalam elemen induk.

Langkah 2: Gunakan loop "untuk" untuk menargetkan semua ubin

" for loop" mungkin terdengar menakutkan, tetapi sebenarnya sederhana. Jika Anda tidak terbiasa dengan for loop, Anda dapat membaca sedikit latar belakang terlebih dahulu: https://framer.com/getstarted/programming/#loops-and-arrays

Kami akan menggunakan for loop untuk menargetkan semua ubin di dalam grid kami:

 for item in grid.subLayers

Dengan baris kode sederhana ini, Anda menargetkan semua lapisan di dalam lapisan kisi.

Langkah 3: Buat ubin bisa diseret

Jadikan setiap item di dalam kisi dapat diseret:

 for item in grid.subLayers item.draggable = true

Langkah 4: Rancang status seret

Semua item harus memiliki status saat sedang diseret. Anda harus memulai dari kode, tetapi nanti Anda akan dapat mengedit status ini di Editor Lapisan:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)'

Langkah 5: Seret acara

Kita harus membuat acara untuk memicu status yang berbeda saat item sedang diseret. Acara pertama akan memicu tindakan saat kita mulai menyeret:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a")

Saya menggunakan this.bringToFront() untuk memastikan item selalu di atas lapisan lainnya.

Pemicu kedua akan mengatur ulang status item:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a") item.onDragEnd -> this.sendToBack() this.stateCycle("default")

Pada titik ini, kami memiliki prototipe yang berfungsi.

Langkah 6 (opsional): Mainkan dengan pengaturan waktu

Interaksi selalu terjadi sepanjang garis waktu. Ada baiknya untuk menyesuaikan timeline untuk mencapai efek yang sempurna:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a") item.onDragEnd -> this.sendToBack() this.stateCycle("default") item.animationOptions = time: 0.3 curve: Spring

7. Beberapa tombol "suka" (lanjutan)

Dalam prototipe ini, kami akan menggunakan teknik yang lebih canggih untuk menunjukkan kepada Anda cara berbeda dalam menargetkan lapisan di Framer Studio, yang akan membangun interaksi yang lebih responsif dengan waktu yang lebih singkat. Jika Anda tidak terbiasa dengan pengkodean dasar, saya mendorong Anda untuk membaca artikel ini terlebih dahulu: https://blog.framer.com/code-less-achieve-more-with-arrays-in-framer-c43594d13d59

Untuk interaksi ini, kami akan melewati bagian desain dan menggunakan prototipe yang saya buat khusus untuk artikel ini: https://framer.cloud/SZMCH

Langkah 1: Buat array

Lihatlah struktur lapisan di dalam Framer Studio:

Kami memiliki "tombol" di dalam "baris" di grup "daftar". Kami akan membuat interaksi pada lapisan tombol, jadi kami harus menargetkannya. Tapi pertama-tama, kita harus menemukan semua layer baris dan meletakkannya di dalam array:

 rows = list.children buttons = []

Saya juga telah membuat larik kosong untuk semua lapisan "tombol": buttons = [] .

Langkah 2: Tambahkan sublayer ke array

Mari kita mulai dari "untuk loop":

 for i in rows buttons.push(i.children[0])

Untuk menambahkan layer ke dalam array, kita akan menggunakan: buttons.push() . Ini berarti bahwa kita meletakkan lapisan pertama dari setiap grup "baris" di dalam sebuah array.

Langkah 3: Buat status dan acara

Sekarang kita akan membuat status untuk tombol "suka" kita, dan menambahkan acara ke tombol tersebut sambil mengetuk:

 for i in buttons i.states.a = scale: 1.2 hueRotate: -80 i.onTap -> this.stateCycle() i.animationOptions = time: 0.3 curve: Spring

Anda dapat menggunakan teknik ini untuk membuat ulang semua prototipe sebelumnya dan membuatnya lebih kompleks.

Catatan Akhir

Saat Anda membuat interaksi mikro, Anda berfokus pada detail terkecil. Anda dapat membuat animasi yang dipicu oleh semua jenis tindakan dan membuatnya benar-benar sempurna. Perlu diingat bahwa ada ratusan cara untuk membuat prototipe yang sama, dan Anda harus menggunakan metode yang sesuai dengan keahlian dan kebutuhan desain produk Anda.

• • •

Bacaan lebih lanjut di Blog Desain Toptal:

• eCommerce UX – Tinjauan Praktik Terbaik (dengan Infografis)
• Pentingnya Desain yang Berpusat pada Manusia dalam Desain Produk
• Portofolio Desainer UX Terbaik – Studi Kasus dan Contoh yang Menginspirasi
• Prinsip Heuristik untuk Antarmuka Seluler
• Desain Antisipatif: Cara Membuat Pengalaman Pengguna yang Ajaib