Tentang Kursus ini
Dalam kursus ini, kita akan mempelajari seluk beluk ProtoPie, dari teknik dasar hingga pembuatan prototipe tingkat lanjut. Kami akan memulai kursus dengan alur kerja yang solid dan teknik prototipe cepat untuk membuat prototipe kerja yang dapat dipratinjau di perangkat Anda. Kemudian, kita akan mendalami teknik animasi dan interaksi kompleks yang benar-benar akan meningkatkan desain Anda. Kursus ini bukan hanya tentang alatnya, tetapi juga tentang mempelajari cara mendesain aplikasi, menghidupkannya, dan mendapatkan banyak tip dan trik di antaranya. Seperti kebanyakan alat prototyping, Anda harus agak akrab dengan alat desain untuk dapat memahami konsep inti dari prototyping.
1. PENGANTAR PROTOPI
Ada banyak teknik untuk dipelajari di ProtoPie. Kami akan memulai seluruh kursus dengan memahami semua kemampuannya dan dalam konteks apa itu harus digunakan untuk tim Anda. Versi 4 hadir dengan banyak fitur baru seperti Komponen, Kendala dan berbagai peningkatan.
2. PROTOTIPE CEPAT
Sama seperti kebanyakan alat prototyping, Anda dapat dengan cepat membuat prototipe cepat yang menavigasi ke setiap layar aplikasi Anda, dengan transisi layar preset seperti Memudar, pop, Geser Masuk, Geser Keluar dan Balik. Pelajari dasar-dasar ProtoPie, dimulai dengan konfigurasi, pemicu, dan respons. Kami akan membuat prototipe sederhana dengan 6 layar yang diimpor dari Sketch.
3. MULAI ANIMASI URUTAN
Membuat animasi yang mengikuti urutan tertentu dengan anggun bisa memakan waktu. Ini juga merupakan teknik yang semakin populer yang ditemukan di banyak aplikasi web dan seluler populer. Di bagian ini, kita akan mempelajari cara mengatur waktu dan penundaan animasi untuk membuat sesuatu yang menyenangkan.
4. SERET DAN LEPASKAN
Gerakan seperti Menyeret, Mencubit, Tekan lama dan Sentuhan 3D mudah dibuat di ProtoPie. Anda dapat mengatur animasi seperti Pindah, Skala dan Putar 3D yang bereaksi dengan baik terhadap gerakan tersebut.
5. BERALIH DENGAN KETENTUAN
Sering kali, Anda ingin mengubah status animasi yang berbeda bolak-balik. Kondisinya sempurna untuk skenario itu dan mereka membutuhkan sedikit waktu untuk menyiapkannya. Contoh yang bagus adalah sakelar PADA/MATI yang sering Anda lihat di iOS dan Android. Berdasarkan posisi X dari sebuah layer, Anda dapat mengatur status visual dan animasi yang sesuai.
6. TRANSISI LAYAR
Transisi animasi antar layar menjadi umum, terutama di iOS 13. Misalnya, Apple App Store memungkinkan Anda mengetuk thumbnail dan itu akan dengan anggun bertransisi ke layar detail tanpa memutus alurnya. Untuk mencapainya, kita perlu menggunakan batasan dan layer Shape asli dengan benar.
7. TARIK UNTUK MELEPASKAN
Setelah Anda berada di layar Detail, kita akan mempelajari cara membuat beberapa gerakan menarik yang bertransisi kembali. Kami akan menggunakan Tarik untuk mendeteksi kemajuan perilaku pemberhentian dan kemudian menganimasikannya.
8. VARIABEL GULIR HALAMAN
Menggulir adalah bagian penting dari desain aplikasi apa pun. Dengan kemajuan perilaku itu bersama dengan Ketentuan, Anda dapat melakukan animasi yang menarik.
9. MASUKKAN DAN KIRIM
Membuat pengalaman Masuk dengan masukan dan pengiriman tidak mungkin dilakukan untuk sebagian besar alat pembuatan prototipe. Ini biasanya membutuhkan pengkodean. Dengan ProtoPie, Anda dapat dengan mudah mencapai ini dengan Ketentuan dan Formula. Selain itu, kita akan mempelajari cara membawa file GIF atau Film ke prototipe Anda.
10. RANTAI DAN SEret 3D
ProtoPie tidak hanya untuk seluler. Anda juga dapat mendesain untuk berbagai ukuran perangkat, seperti iPad dan MacBook. Di bagian ini, kita akan mempelajari cara melakukan interaksi Drag dan menerapkan rotasi 3D menggunakan Chain. Rantai memungkinkan Anda untuk menerapkan rentang nilai dari satu ke yang lain.
11. FORMULA DAN DETEKSI
Formula memungkinkan Anda mencampur dan mencocokkan variabel dan properti objek. Misalnya, Anda bisa mendapatkan tinggi Rectangle dan menunjukkan angka itu di dalam layer Teks. Karena Rectangle tumbuh saat diseret, jumlahnya akan berubah secara dinamis saat Anda berinteraksi dengannya.
12. ANIMASI JANGKAUAN DAN KARTU
Rentang seperti Kondisi tetapi sebagai Pemicu. Anda dapat mengatur kondisi Rentang berdasarkan Y dan jika cocok, maka akan memicu animasi atau Lompatan. Ini bisa berguna misalnya, saat animasi dianggap selesai, Lompat ke layar lain.
13. VARIABEL DAN DETEKSI MOUSE
Anda dapat menyimpan data di seluruh prototipe Anda dengan menggunakan variabel. Variabel-variabel tersebut dapat diubah dari pemicu dan tanggapan. Variabel dapat digunakan di semua layar. Ini dapat membuat prototipe hampir sedalam yang dibuat dalam kode.
14. PENGUJIAN SENSOR DAN PERANGKAT
ProtoPie adalah satu-satunya alat pembuatan prototipe yang memungkinkan Anda menggunakan sensornya, termasuk Akselerometer, kedekatan, sentuhan 3D, dan lainnya.