Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Prototyping

Prototyping Aplikasi Kebugaran dengan Pixate

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Sap (you can also view the original English article)

What You'll Be Creating

Dalam tutorial ini, saya akan mengajarkan Anda cara membuat prototipe animasi dari desain aplikasi seluler Anda. Prototipe akan terlihat dan terasa seperti aplikasi nyata di ponsel Anda; Anda akan dapat menavigasi dan menggulir melalui desain Anda, menggunakan gerakan dan animasi khusus.

Di akhir tutorial ini, Anda akan dapat membuat versi prototipe animasi dari semua desain aplikasi menggunakan Pixate. Mari kita mulai!

Tutorial aset

Untuk tutorial ini Anda akan membutuhkan tiga hal untuk diikuti:

Mengapa Gunakan Pixate?

Dalam pandangan saya, Pixate adalah alat terbaik yang tersedia bagi para perancang untuk membuat prototipe aplikasi seluler animasi yang berfungsi penuh secara fungsional, tanpa menulis satu baris kode pun.

Tidak seperti alat prototyping lainnya, seperti Flinto, atau Marvel, Pixate memungkinkan Anda memisahkan lapisan dan menanamkan interaksi, seperti Seret, Ketuk, Ketuk Ganda, Gulir, Cubit, dan lainnya.

Prototipe itu sendiri ada di web. Selama tutorial ini kami akan menggunakan versi web Pixate, tetapi kami akan mendapatkan hasil akhir dalam aplikasi asli di telepon kami, yang memberikan pengalaman fluid yang luar biasa.

1. Proyek Pixate Baru

Sebelum kami dapat mulai membuat prototipe pertama kami, kami harus menyiapkan proyek baru di Pixate.

Langkah 1

Setelah Anda masuk ke akun Anda, klik tombol New Project, lalu pilih opsi New Prototype.

Create a new prototype

Langkah 2

Di sini kita dapat memilih jenis perangkat khusus yang kami rancang. Dalam hal ini, mari pilih iPhone 6, karena kami merancang aplikasi kebugaran untuk perangkat tertentu dalam Sketch.

Select the target device

Catatan: kami juga dapat memilih ukuran layar smartwatch seperti Apple Watch, LG G Watch, atau Moto 360.

2. Mengimpor Aset untuk Pixate

Pixate memungkinkan kami menganimasikan setiap objek dalam prototipe kami, berdasarkan berbagai peristiwa dan interaksi, seperti pemuatan layar, ketuk, ketuk dua kali atau gulir. Ini juga berarti bahwa kita harus mengekspor secara terpisah elemen-elemen yang ingin kita animasikan dalam prototipe kita.

Langkah 1

Mari kita buka file Sketch kita dan mulai mengekspor setiap elemen satu per satu. Jika Anda melihat prototipe akhir, Anda dapat melihat bahwa dalam kasus "GO screen" saya secara terpisah mengekspor bilah navigasi, bilah tab, setiap kolom dari ramalan cuaca dan lingkaran sasaran.

Exporting the assets in Sketch

Anda harus mengekspor dalam PNG, karena itu adalah kunci untuk memiliki lapisan transparan.

Tip: selalu fokus pada satu layar dalam satu waktu. Pada titik ini dalam proses, Anda hanya harus mengekspor lapisan "GO screen", sehingga akan lebih mudah untuk bekerja dengan dan memodifikasi hal-hal di mana saja jika diperlukan.

Langkah 2

Mengimpor aset dalam Pixate adalah masalah menyeret dan menjatuhkan file PNG yang diekspor ke jendela browser:

Importing the assets in Pixate

Langkah 3

Sekarang, saatnya untuk membangun kembali layar kami di Pixate. Pekerjaan ini dapat dilakukan lebih cepat jika kita mengacu pada panel Inspektur baik di Pixate dan Sketch. Saat ini terjadi, kita hanya perlu menyalin dan menempelkan nilai X dan Y dari setiap elemen.

Inspector panel for perfect aligning

Catatan: perlu diingat bahwa desain Sketsa kita dibuat dengan resolusi @ 2x, sementara di Pixate kita bekerja dengan resolusi @ 1x. Ini berarti bahwa kita harus membagi setiap nomor dari Sketch oleh 2 sebelum menerapkan ke Pixate.

3. Mengaktifkan Layar GO

Mari buka aplikasi Pixate di iPhone kita, di mana kita dapat melihat bahwa desain kita mulai menyatu. Mulai sekarang, setiap kali kita mengubah sesuatu di aplikasi web, itu akan secara otomatis disinkronkan ke telepon kita.

Langkah 1

Setelah memilih kolom pertama dari ramalan cuaca, kita dapat melihat jenis animasi yang tersedia di sisi kiri di browser kita. Mari seret & lepaskan Fade animation ke sisi yang berlawanan, bilah sisi kanan.

Fade animation

Langkah 2

Sekarang, kita harus menentukan kapan kita ingin animasi ini muncul. Atur nilai Berbasis ke * SCREEN *, Loaded.

Based on rules

Ini berarti bahwa animasi kita akan diputar tepat setelah layar pertama dimuat, yang terjadi segera ketika kita menjalankan prototipe.

Langkah 3

Karena tujuan kami adalah untuk memudarkan efeknya, mari kita setel opasitas awal menjadi 0% pada panel Properti, dan menjadi 100% pada panel Animasi.

Opactiy tips

Langkah 4

Di bagian bawah panel Animasi kita juga dapat mengatur kurva pelonggaran, durasi dan nilai penundaan.

Anda harus mengatur durasi antara 0,2-0,4 detik, tetapi tidak ada cara official di sini, jadi saya mendorong Anda untuk bermain dengan nilai-nilai ini sampai Anda merasa mereka benar.

Different easing curves

Catatan: dalam prototipe saya, saya lebih suka menggunakan animasi yang sedikit lebih lambat, sehingga Anda dapat melihatnya dengan lebih jelas. Dalam proyek nyata, saya akan merekomendasikan gerakan yang lebih cepat dan lebih halus.

Langkah 5

Sekarang mari pilih kolom kedua dari ramalan cuaca dan tetapkan animasi Fade yang sama persis seperti yang kita lakukan sebelumnya, dengan hanya satu perbedaan: kali ini tetapkan animation delay menjadi sekitar 0,1-0,3s. Dengan cara ini animasi akan diputar secara berurutan.

Animation delay for sequence playing

Lanjutkan dengan metode yang sama untuk semua elemen yang Anda ingin tambahkan animasi Fade, tetapi jangan lupa untuk terus meningkatkan nilai penundaan animasi.

Langkah 6

Sekarang mari siapkan interaksi antara lingkaran di bagian sasaran. Agar dapat menggulir secara horizontal di antara gawang, kita harus mengimpornya sebagai tiga file PNG terpisah.

Creating a new layer in Pixate

Setelah menempatkannya pada posisi yang benar, mari buat layer baru di Pixate; diperlukan untuk mengaktifkan gulir horizontal. Pada panel Properties pastikan Anda mengatur penampilan ke Tidak ada set gambar. Sebelum kita menambahkan interaksi apa pun ke lapisan ini, kita akan menambahkan file cincin tujuan PNG ke lapisan baru pada panel Layers. Dalam istilah sederhana, ini mirip dengan alat Grup dalam Sketsa.

Group layers in Pixate
Drag interaction

Sekarang kita dapat menambahkan interaksi Drag ke layer baru ini dan mengatur Horizontal scrolling dengan posisi minimum: -255pt dan posisi maksimum: 120pt pada panel Animasi.

Setting up horizontal scrolling

Langkah 7

Untuk efek memantul kecil selama gulungan horizontal, saya membuat animasi khusus dengan kondisi khusus. Untuk memulai, tambahkan Move animation ke lapisan terbaru, yang berisi semua lapisan cincin.

Sekarang, di panel Animations tetapkan Based on nilai ke Goal settings dan Drag Release.

Drag on release

Untuk kondisi IF pertama, saya menggunakan rumus berikut: goal_settings.x> -255 && goal_settings.x <-67, yang berarti bahwa jika posisi lapisan grup tujuan (ID lapisan: goal_settings) lebih tinggi dari -255 pt dan lebih kecil dari -67 pt, itu akan memindahkan sisi kiri layer ke titik -67 pt.

Custom if conditions

Untuk animasi saya menggunakan kurva Spring easing dengan friction value 25 dan tegangan 600.

Kondisi IF kedua saya adalah: goal_settings.x <= -67 && goal_settings.x> -255, lalu pindahkan sisi kiri layer ke -255 pt.

Spring easing curve

Kondisi ketiga adalah: goal_settings.x> -67 && goal_settings.x <150, lalu pindahkan sisi kiri layer ke 150 pt.

Terakhir, tetapi tidak sedikit, pernyataan IF terakhir adalah: goal_settings.x <150 && goal_settings.x> -67, yang akan menggerakkan sisi kiri layer ke -67 pt.

Catatan: Saya tahu ini terlihat sedikit rumit untuk pertama kalinya, tetapi saya mendorong Anda untuk menyalin & menempelkan solusi saya dan mencobanya, lalu ubah sesuatu dan coba lagi. Kondisi saya tidak sempurna, sehingga Anda bahkan dapat meningkatkan dan menyesuaikannya, sampai mereka merasa tepat untuk Anda.

Langkah 8

Seperti yang kita lakukan dengan lingkaran tujuan, mari buat layer baru lainnya dan letakkan setiap lapisan yang kita miliki sejauh ini. Kami hanya mengelompokkan lapisan "GO screen" sekarang.

Challenges screen

4. Layar Animating the Challenges

Sebelum kita mulai mengimpor dan membangun kembali layar “Challenges” di Pixate, kita harus membuat layer baru, yang akan berfungsi sebagai layer grup untuk setiap elemen di layar ini. Mari letakkan ini tepat di sebelah "GO screen" tanpa padding atau celah apa pun di antara mereka.

Langkah 1

Setelah kita mengimpor dan membangun kembali layar kita, lapis demi lapis, kita perlu mengatur gulungan vertikal untuk kartu tantangan.

Vertical scrolling

Mari buat layer baru tanpa latar belakang gambar dan tambahkan layers kartu kita ke sana. Gulungan vertikal bahkan lebih mudah daripada gulir horizontal, karena satu-satunya hal yang harus kita lakukan adalah menambahkan interaksi Gulir ke lapisan baru ini.

Langkah 2

Untuk melihat “Challenges screen” di iPhone kita juga, kita harus kembali ke "GO screen" dan menambahkan layer persegi panjang baru di bagian atas tombol Challenges pada tab bar.

Navigating between different screens

Atur tampilan ke tanpa isi gambar dan tambahkan Tap interaction. Sekarang mari kembali, pilih lapisan grup Tantangan kita, yang berisi setiap elemen pada “Challenges screen” dan tambahkan Move animation ke dalamnya.

Move animation in navigation

Satu-satunya hal yang masih harus kita lakukan, adalah mengatur acara Based on pada tombol yang baru-baru ini kami tambahkan ke "GO screen" kami dengan Tap interaction dan tetapkan Move to nilai ke 0 pt. Kemudian ketika kita menekan tombol tantangan pada "GO screen", lapisan kelompok Tantangan akan pindah ke tempatnya yang semestinya.

Langkah 3

Untuk menganimasikan kartu tantangan, kita akan menggunakan dua animasi, Fade dan Move, pada saat yang bersamaan. Pastikan Anda telah menetapkan tombol Based on nilai ke tombol Tantangan.

Animating the challenges cards

Untuk animasi Fade, kami menggunakan teknik yang sama seperti pada layar GO, jadi mari kita menetapkan Opacity menjadi 0% pada panel Properties dan Fade to nilai hingga 100% pada panel Animations. Untuk durasi saya menggunakan 0.5s dengan delay 0.2s.

Catatan: jangan lupa untuk terus meningkatkan nilai penundaan untuk setiap kartu.

Animasi kedua kami adalah Move animation. Sama seperti dalam kasus animasi Pudar, mari tetapkan tombol Based on nilai ke tombol Tantangan dan gunakan durasi dan penundaan animasi yang sama persis seperti dalam kasus animasi Fade. Sekarang, atur nilai Move to Top menjadi 10px, yang akan memindahkan kartu tantangan kita ke atas 10px, ketika animasi dimulai.

Move to top animation

Karena pada akhir animasi, setiap kartu tantangan akan 10px ke atas, kita harus memindahkannya 10px ke bawah pada kanvas Pixate kita.

5. Bagian Tantangan Pencarian

Langkah 1

Mari buat layer baru sekali lagi, yang akan berisi bagian tantangan Browse. Seperti dalam kasus bagian Tantangan saya, mari tambahkan Scroll interaction ke situ.

Browse challenges scroll interaction

Langkah 2

Untuk dapat beralih di antara tantangan Saya dan Jelajahi bagian tantangan, kita harus membuat layer baru di bagian atas judul tantangan Browse, yang akan berfungsi sebagai tombol. Setel fill layer ke No image set dan tambahkan Tap interaction.

Tap interaction for navigation on the screen

Sekarang, jika kita kembali ke lapisan lapisan tantangan Browse (dibuat pada langkah sebelumnya) kita dapat menambahkan Fade animation ke dalamnya berdasarkan tombol baru ini. Jadi sampai kita menekan tombol Telusuri tantangan, opacity dari bagian tantangan menelusuri adalah 0%, dan setelah ketukan, itu akan menjadi 100%.

Langkah 3

Sebagai langkah terakhir, saya menambahkan Scale and Fade animation ke bilah kemajuan garis waktu di bagian Telusuri tantangan.

Scale and Fade animation

Catatan: jangan lupa untuk menggunakan durasi animasi dan nilai penundaan yang sama untuk animasi Fade and Scale.

6. Mengaktifkan Layar Kegiatan

Sebelum kita mulai menganimasikan “layar Aktivitas” kita harus mengulangi beberapa langkah yang dilakukan dalam kasus “Layar tantangan” juga.

Langkah 1

Mari buat layer baru tepat di samping “Challenges screen” tanpa padding apa pun. Lapisan ini akan menjadi lapisan grup untuk elemen pada “Activities screen”.

Activities screen

Langkah 2

Sekarang mari kembali ke "GO screen" kita dan buat layer baru di bagian atas tombol Aktivitas pada bilah tab. Tambahkan Tap interaction ke lapisan baru ini.

Activities button

Kembali ke lapisan grup Aktivitas kami dan tambahkan Move interaction ke sana berdasarkan tombol baru kita.

Langkah 3

Sekarang tambahkan Fade animation ke setiap hasil di layar Aktivitas dengan animation duration 0,4s dan animation delay 0,1s di antara hasilnya.

Displaying the results

Catatan: jangan lupa untuk mengatur nilai Based on "Activities button", yang kita tempatkan pada "GO screen".

Langkah 4

Buat layer grup lain dan tempatkan setiap sesi latihan di dalamnya, kecuali yang pertama. Kami akan membutuhkan ini untuk Move down animation, karena bergerak ke bawah hanya satu lapisan jauh lebih mudah, daripada bergerak ke bawah enam atau tujuh lapisan sekaligus.

Move down animation of a group

Sekarang tambahkan Tap interaction ke sesi latihan pertama, lalu tambahkan Move animation ke lapisan grup yang baru saja kita buat. Pada panel Animations tetapkan Based on nilai ke sesi latihan pertama dan tambahkan nilai Move to Top sekitar 277pt. Saat kami mengetuk sesi latihan pertama, semua yang lain akan bergerak turun di layar.

Based on values

Langkah 5

Untuk tampilan detail olahraga, saya hanya menggunakan animasi Fade dan Move berdasarkan mengetuk sesi latihan pertama.

Detailed activites veiw

Pada awalnya, hanya memudar dan bergerak di latar belakang, lalu grafik dan akhirnya angka spesifik dan detail dari latihan.

Graph animation

Anda harus bermain di sini sedikit dengan durasi animasi dan penundaan.

Selamat!

Kau awesome! Anda baru saja membuat prototype Pixate animasi khusus yang berfungsi penuh pertama Anda. Setelah mengikuti tutorial ini, saya harap Anda lebih percaya diri dalam menggunakan Pixate untuk prototipe aplikasi seluler.

Saya ingin tahu pendapat Anda tentang tutorial ini dan merasa bebas untuk mengajukan pertanyaan apa pun di komentar, saya akan berada di sini untuk membantu dan menjawabnya.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.