Cara memproteksipe aplikasi seluler dengan Origami Studio

Sep 12, 2025
Bagaimana caranya

Di dunia di mana pengguna memiliki harapan tinggi dari pengalaman mereka di web dan seluler, prototipe dan evaluasi pengguna adalah kunci. Sekarang umum untuk secara progresif mengulangi prototipe dengan kesetiaan yang semakin tinggi, dan berkembang pengalaman pengguna Industri telah tumbuh di sekitar serangkaian kegiatan kritis ini. Pada akhirnya, mendapatkan perangkat lunak tepat pada tahap prototipe menghemat waktu dan / atau uang nanti.

  • 10 Alat Prototyping Top

Ada banyak pendekatan yang dapat Anda ambil untuk membuat prototyping, dan banyak alat di luar sana untuk membantu. Salah satu yang terbaru di blok adalah Origami Studio , dikembangkan oleh Facebook dan tersedia gratis untuk MacOS.

Origami Studio, yang sebenarnya memulai hidupnya sebagai plugin untuk Kuartz Composer (bahasa pemrograman visual dalam lingkungan pengembangan Xcode MacOS) sebelum menjadi alat mandiri, telah mendapatkan banyak perhatian selama setahun terakhir.

Ini bukan hanya karena dibangun oleh pengembang nama besar, tetapi juga karena kombinasi daya dan kesederhanaan yang dibawanya untuk mengembangkan prototipe interaktif kesetiaan tinggi, interaktif.

Ikuti langkah-langkah ini untuk menemukan seberapa mudah Anda dapat menggunakan Origami Studio untuk membangun prototipe.

01. Prototipe baru

Start by creating a new iPhone 8 prototype

Mulailah dengan membuat prototipe iPhone 8 baru

Kami akan membuat prototipe untuk aplikasi seluler yang akan memungkinkan kami untuk menggesek gambar kucing dan 'seperti' beberapa dari mereka. Setelah kami menginstal Origami Studio, kami akan membuat prototipe iPhone 8 baru dari layar splash.

02. Menambahkan Layers.

Kita dapat mulai menambahkan beberapa lapisan ke prototipe kita langsung. Dalam hal ini, kami akan menambahkan logo yang diposisikan di bagian atas layar. Kami menambahkan layer menggunakan tombol + di kanan atas dan memilih 'Layer Gambar'. Kami kemudian dapat mengubah ukuran dan memposisikannya dengan tepat dengan menyorot dan memodifikasi properti layer. Setelah merek kami, kami juga akan menambahkan gambar jantung di bagian bawah layar untuk berfungsi sebagai tombol 'Suka' kami.

03. Menciptakan interaksi

For interactions you'll need to create a patch

Untuk interaksi Anda harus membuat tambalan

Kita perlu membuat tombol hati kita menanggapi interaksi pengguna. Anda akan melihat bahwa di jendela Pratinjau, kursor berubah untuk mewakili sentuhan pada perangkat seluler. Untuk menanggapi hal ini, kita perlu membuat 'tambalan', yang pada dasarnya merupakan fungsi dalam origami yang mengambil input dan menghasilkan output. Klik dua kali area abu-abu kosong untuk memunculkan daftar tambalan baru, dan cari 'interaksi'. Tempatkan tambalan Anda dan itu akan muncul di layar.

04. Menghubungkan interaksi ke Lapisan

Change the patch properties so that it only responds when you click in the right place

Ubah properti patch sehingga hanya merespons ketika Anda mengklik di tempat yang tepat

Saat ini, tambalan Anda akan merespons menyentuh di mana saja pada prototipe. Uji dengan mengklik dan Anda akan melihat properti 'bawah' dan 'ketuk' berubah secara real time. Jika Anda memilih properti 'layer' di tambalan, Anda dapat menautkannya ke lapisan yang berisi gambar jantung, dan sekarang hanya akan merespons klik pada area tertentu itu.

05. Animasi

A pop animation will give users a bit of visual feedback

Animasi pop akan memberi pengguna sedikit umpan balik visual

Sekarang kami ingin memiliki sesuatu terjadi ketika interaksi kami memicu. Buat tambalan lain, kali ini 'animasi pop'. Ini digunakan untuk membuat efek semir. Tinggalkan properti apa adanya untuk saat ini, tetapi kami akan membuat tautan antara output ketukan interaksi yang kami buat sebelumnya dan input angka dari animasi pop baru kami. Kami melakukan ini dengan mengklik dan menyeret di antara lingkaran kecil di sebelah masing-masing. Jika Anda mengklik hati sekarang, sekarang Anda akan melihat interaksi memicu perubahan dalam output 'kemajuan' dari animasi pop.

06. Transisi

You can change the extent to which objects change size when they're clicked

Anda dapat mengubah sejauh mana objek berubah ukuran saat diklik

Hal berikutnya yang kita butuhkan adalah tambalan transisi. Ini akan memungkinkan kita untuk menentukan nilai rendah dan tinggi untuk bergerak antara sebagai perubahan keluaran kemajuan animasi pop. Kami kemudian dapat menautkan nilai output transisi ke properti skala dari lapisan gambar jantung untuk memberi tahu origami untuk mengubah ukurannya ketika diklik. Anda sekarang harus menemukan bahwa mengklik hati menyebabkannya menghidupkan perubahan singkat dalam ukuran. Namun, itu tidak benar, karena itu muncul kembali normal.

07. Switch.

Use switch patches to toggle objects between different states

Gunakan Switch Patch untuk beralih objek antara negara yang berbeda

Beralih patch adalah cara origami untuk beralih di antara dua negara bagian. Inilah yang kami inginkan untuk tombol 'Suka' kami. Input yang diteruskan ke patch switch dapat membalikkan antara 'pada' dan 'off' menyatakan, yang kemudian dapat diteruskan sebagai output ke tambalan berikutnya. Mari kita buat saklar baru dan letakkan di antara interaksi dan animasi pop. Anda kemudian harus dapat mengklik hati untuk mengaktifkannya antara negara-negara kecil dan besar.

08. Perilaku yang lebih kompleks

By experimenting with patches you can add more complex behaviour to your prototype

Dengan bereksperimen dengan tambalan, Anda dapat menambahkan perilaku yang lebih kompleks ke prototipe Anda

Selamat! Anda sekarang telah membuat fitur interaktif pertama Anda, menggunakan tambalan paling umum yang akan Anda temukan menggunakan waktu dan waktu lagi. Kami dapat menambahkan lebih banyak tambalan untuk menciptakan perilaku yang lebih kompleks. Mari kita buat lapisan jantung berwarna berbeda tepat di belakang yang sekarang, lalu tambahkan tambalan baru keduanya untuk skala secara bersamaan, dan memodifikasi opacity dari lapisan asli kita sehingga dibuat terlihat. Sekarang, ketika Anda mengetuk hati, itu akan beralih lebih besar dan lebih kecil, tetapi juga tampak berubah warna.

09. Carousel.

It's time to bring on all the cats

Sudah waktunya untuk membawa semua kucing

Untuk menyelesaikan prototipe kami, mari tambahkan carousel gambar dengan kucing yang ingin kami izinkan pengguna 'disukai'. Untuk melakukan ini, pertama-tama kita perlu menambahkan sekelompok lapisan. Setiap gambar akan menjadi lapisan yang terpisah, dengan semakin offset x koordinat sehingga mereka pada dasarnya duduk berdampingan secara berukuran dengan hanya satu yang terlihat di layar pada satu item.

10. Menggesekkan Kiri dan Kanan

Follow these steps to add a classic swiping action to your carousel

Ikuti langkah-langkah ini untuk menambahkan tindakan menggesek klasik ke korsel Anda

Hal terakhir yang perlu kita lakukan untuk membuatnya bekerja memungkinkan gesekan kiri dan kanan untuk menggulir korsel. Kami melakukan ini dengan membuat interaksi gulir untuk menautkan ke grup Layer Carousel (bukan gambar individual). Interaksi mengeluarkan koordinat X yang kemudian dapat kita tautkan ke properti X korsel untuk memindahkannya. Di antaranya, kami akan menambahkan tambalan klip, yang dapat digunakan untuk membatasi nilai untuk memastikan kami tidak menggulir ke koordinat di luar tepi korsel.

11. Langkah Selanjutnya

Now you've learned the basics you can add more advanced features

Sekarang Anda telah mempelajari dasar-dasar Anda dapat menambahkan fitur yang lebih canggih

Itu dia. Anda telah membuat aplikasi yang sangat mendasar. Anda juga dapat menggunakan Origami Studio bawaan 'bingkai' untuk menempatkannya ke latar belakang perangkat, yang dapat membantu memberikan hasil akhir profesional. Sekarang Anda terbiasa dengan dasar-dasar menggunakan tambalan, Anda dapat mulai membuat perilaku yang lebih maju. Ada banyak panduan di situs web Origami Studio, yang menjelaskan cara menerapkan fungsionalitas populer yang biasa terlihat dalam aplikasi.

Artikel ini awalnya diterbitkan dalam edisi 270 dari desainer web Majalah Desain Web Kreatif. Beli masalah 270 di sini atau berlangganan desainer web di sini .

Artikel terkait:

  • Tren yang akan membentuk desain aplikasi pada tahun 2018
  • 3 Cara atas untuk Membangun Prototipe Situs Web
  • Semua yang perlu Anda ketahui tentang mockup, wireframes, dan prototipe

Bagaimana caranya - Artikel Terpopuler

Ilustrasi peta: panduan langkah demi langkah

Bagaimana caranya Sep 12, 2025

Ilustrasi peta telah memiliki kebangkitan nyata selama beberapa tahun terakhir. Alternatif yang menarik untuk peta Google kering, peta yang diilustrasikan dapat diisi dengan detail karakter d..

Hentikan bot dengan Google Recaptcha

Bagaimana caranya Sep 12, 2025

(Kredit Gambar: Masa Depan) Keeping Bots Selalu adalah permainan angka - Sayangnya, ketersediaan pustaka pembelajaran..

Buat animasi kendaraan dengan iClone 7

Bagaimana caranya Sep 12, 2025

Membuat animasi atau Film 3D Melibatkan kendaraan dengan roda dapat menyajikan beberapa komplikasi, karena gerakan..

Putar ilustrasi 2D ke dalam seni 3D

Bagaimana caranya Sep 12, 2025

Perjalanan saya untuk membuat Seni 3d. memulai beberapa tahun yang lalu ketika saudara saya menyuruh saya untuk me..

Cara Memilih dengan Alat Lasso Photoshop

Bagaimana caranya Sep 12, 2025

Pilihan adalah salah satu tugas paling vital yang akan Anda pelajari untuk dikuasai Photoshop CC. . Pilihan yang baik akan memberikan realisme pada suatu gambar, belum lagi keb..

Bangun aplikasi desain material dengan Angular 2

Bagaimana caranya Sep 12, 2025

Bahan sudut adalah kerangka kerja komponen UI yang mengimplementasikan spesifikasi desain material Google untuk angular 2 - imple..

Cara membuat lampu lava dengan keyshot

Bagaimana caranya Sep 12, 2025

Ada sesuatu yang aneh memuaskan tentang lampu lava. Cahaya yang menenangkan dan berwarna-warni dan memikat gumpalan lilin yang me..

Cara merancang promo untuk merek imajiner

Bagaimana caranya Sep 12, 2025

Saat mendesain merek, apakah itu yang sudah mapan atau startup yang Anda ambil memimpin kreatif, konsistensi di semua titik sentuh adalah kuncinya. Sangat penting bahwa desain ..

Kategori