Pelajari Cara Membuat Prototipe dalam Atom

Prototipe harus menjadi cara yang cepat dan mudah untuk mendapatkan inspirasi dalam desain Anda. Tidak lagi disebut sebagai cara untuk memercikkan sihir gerak atau desain yang terlalu banyak, prototipe adalah alat komunikasi. Baik berkomunikasi dengan pemangku kepentingan, manajer desain atau pengguna, prototipe yang baik membantu untuk mengkomunikasikan keputusan desain dan menguji ide.

Prototype kami 

Dalam tutorial ini kami akan membuat sebuah prototipe "boarding pass" dasar dalam atom, Anda dapat melihat pratinjau di sini . Prototipe dimulai dengan negara yang memuat sebelum Anda Untuk menelusuri Anda dan melihat kode QR asrama. Untuk membuat prototipe ini kita akan menggunakan komponen interaktif, data, variabel dan transisi halaman. Tidak perlu khawatir! Saya akan membantu Anda melalui setiap langkah.

Berikut adalah demo dari apa yang akan kami buat:

Tutorial Assets

Ada beberapa hal yang Anda perlukan untuk diikuti:

1. Atomic account: memulai percobaan gratis (ada juga rencana gratis).
2. Aset desain: Ini adalah file di mana Anda akan menemukan aset desain dan membuat prototipe Anda.
3. Data Source: File Google Sheet dengan data yang kita akan menggunakan dalam prototipe kami.
4. Atomic iOS App: men-Download aplikasi dari App Store untuk menguji prototipe Anda pada telepon Anda.

Jika setiap saat sepanjang tutorial Anda memiliki pertanyaan, jangan ragu untuk menjangkau saya (@femkesvs), atau tim dukungan atom (@we_are_atomic) on Twitter.

Ayo!

1. Salin Assets ke Akun Kamu

Saya telah membuat sebuah contoh file dengan aset yang Anda akan perlu untuk membuat prototipe Anda. Berkas contoh ini lengkap dengan aset kita akan menggunakan, serta komponen pra-dibangun.

Anda dapat mengakses aset di sini. Untuk menggunakan aset Anda harus menyalin prototipe ke account Anda. Anda dapat melakukan ini dengan mengklik Copy & Edit di kanan bawah dan kemudian pilih sebuah proyek yang Anda ingin menyalinnya ke dalam. Saya sarankan membuat proyek baru untuk tutorial ini.

2. Upload Data ke Atomic

Sebelum kita mulai menciptakan prototipe kami kita harus terlebih dahulu menambahkan sumber data untuk atom. Saya telah mengumpulkan Google Sheet dengan beberapa data dasar yang kita akan menggunakan dalam prototipe kami.

Anda dapat mengakses data di sini. Dengan sumber data terbuka, kepala ke File > Tambahkan ke My Drive (Anda akan memerlukan akun Google untuk ini).

Selanjutnya, dengan proyek Anda terbuka di atom, pilih Data tab. Dari sini Klik Import Data, dan menemukan sumber data melalui pencarian. Sekali terletak pilih sumber data. Anda akan melihat atom yang memuat data ke dalam proyek Anda. Sumber data ini sekarang dapat diakses dan digunakan dalam setiap prototipe dalam proyek.

Kita sudah siap!

3. Creating the Loading State

Mari kita mulai perakitan prototipe kami dengan menciptakan negara loading. Kita akan melakukannya dengan menciptakan transisi kustom dan berbasis waktu halaman tindakan.

Pertama, pilih komponen loading dari halaman aset untuk menyalin (CMD-C dan paste (CMD-V) untuk Halaman 1. Itu akan menjadi besar, dan daripada mengubah, posisi itu ke dalam posisi awal.

Kemudian salin elemen pemuatan Anda hanya ditempatkan pada halaman 1, kali ini paste pada halaman 2. Reposisi ke dalam keadaan akhir (diputar searah jarum jam 75° sehingga pesawat diposisikan off sisi kanan kanvas).

Untuk membuat transisi kita, naik kembali ke halaman 1. Di panel properti kanan Anda akan melihat bagian yang bernama Page Actions. Klik tombol ditambah dan kemudian menetapkan sebagai berikut:

• Membuat sesuatu terjadi: setelah waktu yang ditetapkan
• Menunggu: 0
• Pergi ke: Halaman 2
• Motion: Custom transisi
• Meredakan: Kemudahan in-out
• Durasi: 2000

Mari kita melihat pratinjau dan melihat transisi kita dalam aksi-Anda harus melihat pesawat meluncur dari kiri ke kanan selama dua detik. Rapi!

Untuk mengambil lebih lanjut Anda dapat juga menyalin dan menyisipkan logo terbang ke halaman 1 dan halaman 2 (di bawah pemuatan komponen di panel halaman dan ditempatkan di belakang). Pastikan Anda mengikuti teknik yang sama menempatkannya di yang mulai dan mengakhiri posisi pada setiap halaman. Anda mungkin harus menyesuaikan urutan lapisan Anda untuk membuatnya tampak dari belakang.

Akhirnya kita akan perlu untuk membuat suatu tindakan yang akan membawa pengguna secara otomatis ke halaman 3 dari halaman 2. Pada halaman 2 menambahkan tindakan timed halaman lain. Kali ini kita akan menggunakan pengaturan berikut:

• Membuat sesuatu terjadi: setelah waktu yang ditetapkan
• Menunggu: 1000
• Go to: Home
• Motion: Slide up
• Meredakan: Kemudahan in-out
• Durasi: 300

Tip: jika Anda ingin mengubah waktu dua elemen menghidupkan Anda dapat melakukannya Advanced Motion Timeline.

4. Memahami Components

Selanjutnya, unsur-unsur yang diperlukan untuk halaman 3 copy dan paste mereka ke halaman 3. Anda akan perlu untuk melakukan sedikit penyesuaian untuk muat elemen pada halaman yang diperlukan dan menata ulang.

Hampir semua unsur yang dibutuhkan untuk Halaman ini adalah komponen.

Sepatah Kata Tentang Komponen

Komponen dalam atom adalah seperti simbol. Setiap komponen dapat disunting dan digunakan kembali seluruh proyek. Setiap suntingan yang dibuat untuk komponen akan diperbarui dalam setiap contoh. Komponen dapat juga interaktif dan mengandung beberapa Serikat simbol. Hal ini sangat mudah untuk struktur prototipe Anda.

Mari kita tambahkan beberapa interaktivitas ke komponen boardingPasses. Untuk membuka komponen, klik dua kali pada komponen ikon pada panel lapisan di sebelah nama lapisan. Setelah terbuka, Anda akan melihat tiga halaman; salah satu yang mewakili setiap penerbangan. Untuk sekarang melewati ini identik, segera kita akan mengubah ini.

Kita tahu bahwa pengguna memiliki tiga penerbangan dan kami ingin mereka untuk dapat menggesek melalui masing-masing. Ada juga sebuah ikon kode QR yang, ketika berinteraksi dengan, seharusnya memunculkan kode pass asrama mereka.

Jika Anda melihat pada panel lapisan Anda akan melihat setiap halaman adalah instance dari komponen yang disebut "boardingCard". Mari kita membuka komponen boardingCard sekarang untuk melihat bagaimana data telah diterapkan.

5. Menggunakan Data

Komponen boardingCard adalah komponen tertanam dalam komponen. Hal ini memungkinkan kita untuk membuat simbol kartu yang dapat digunakan kembali sementara menampilkan set data yang berbeda.

Dengan komponen boardingCard terbuka Anda akan melihat dua halaman; Bagian depan dan belakang pass. Ini adalah dimana data yang diberikan kepada elemen teks individu.

Pilih teks ABC dan lihatlah Properti teks. Anda akan melihat berikut:

• Content: Set dari data kolom
• Data: Mewarisi dari orang tua
• Column: keberangkatan-kode

Kemudian jika Anda melihat Google Sheet dimana data ini ditarik dari, Anda akan melihat sebuah kolom yang berjudul "departure-code". Ini berarti bahwa elemen teks ABC akan menampilkan data apapun yang ditampilkan di kolom "departure-code".

Semua teks dinamis di komponen ini telah ditetapkan untuk Inherit from parent. Hal ini memungkinkan kita untuk link ke lembar data pada tingkat grup, dan karena itu menampilkan dan memilah-milah data baris. Kita akan mendapatkan ini segera.

6. Menambahkan Flip Interaction

Selanjutnya kami akan menyiapkan transisi halaman berbasis untuk bergantian di antara pass dan kode QR. Di halaman depan komponen boardingCard tekan H untuk membawa alat hotspot. Kemudian, menarik hotspot atas ikon kode QR di halaman depan.

Hotspot memungkinkan Anda untuk menentukan daerah-daerah yang interaktif prototipe Anda. Dengan hotspot Anda dipilih, di bawah panel interaksi mengatur yang berikut ini:

• Gesture: Klik atau tekan
• Go to: > Next page
• Motion: Flip
• Easing: Ease in-out
• Duration: 300MS

Kemudian, pada halaman belakang, buat hotspot lain (H) yang akan membawa kita kembali ke halaman depan. Saat ini menarik lebih dari ikon close dan mengatur yang berikut ini:

• Gesture: Klik atau tekan
• Go to: > Halaman sebelumnya 
• Motion: Flip
• Easing: Ease in-out
• Duration: 300MS

Waktu untuk menguji interaksi Anda! Di sudut kanan bawah, tekan tombol pratinjau. Preview mode memungkinkan Anda menguji transisi Anda dan berinteraksi dengan Anda prototipe melalui hotspot. Coba mengklik pada kartu QR atau menutup ikon; kartu harus flip antara kedua negara. Anda dapat menutup pratinjau dengan menekan X.

Memiliki kartu boarding ini sebagai komponen interaktif memungkinkan kita untuk memilih data yang ditampilkan secara dinamis, tanpa harus membuat beberapa negara dan interaksi.

7. Menghubungkan Data untuk Parent

Untuk kembali, klik tombol back ungu di sebelah kiri atas. Sekarang Anda harus kembali dalam komponen boardingPasses. Dalam komponen ini kami memiliki tiga tiket yang saat ini menampilkan data yang sama. Mari kita update ini sekarang.

Ingat bagaimana dalam komponen boardingCard, data ditetapkan untuk Inherit from parent?  Dalam kasus ini the parents adalah contoh komponen.

Pada penerbangan 1 halaman Pilih contoh boardingCard. Dalam component properties meninggalkan State seperti itu. Di bawah Data, pilih sumber data dan memastikan Row diatur ke baris 1. Contoh sekarang harus menampilkan data dari baris pertama dari lembar data.

Jika Anda beralih baris Anda akan melihat bahwa data ditampilkan update. Mari kita tetap pada baris 1 untuk sekarang, namun penerbangan 2 dan penerbangan 3 set ini untuk menunjukkan data dari baris 2 dan baris 3 masing-masing.

8. Menambahkan Swipe Gestures

Untuk memungkinkan pengguna untuk men-swipe melalui tiket pesawat mereka kita akan perlu untuk mengatur beberapa babatan interaksi.

Membuat dan menarik hotspot (H) di sisi kanan flight 1 page (pastikan Anda meninggalkan beberapa ruang di bagian atas untuk hotspot atas ikon tutup di halaman belakang boardingCard komponen, dan bahwa tidak menutupi kode QR di halaman depan). Untuk membuat gerakan menggesek, gunakan pengaturan berikut:

• Gesture: Swipe left
• Swige distance: 200
• Go to: > Next page
• Motion: Push Left
• Easing: Ease in-out
• Duration: 300MS

Melakukan hal yang sama pada flight 2 page, dan tambahkan hotspot kedua di side left flight 2 dan flight 3 page yang ditetapkan untuk Push Right dan Push Left sebaliknya. Merasa bebas untuk tekan Preview untuk menguji dan berinteraksi dengan komponen, dan menyesuaikan pengaturan babatan Anda sesuai.

9. Buat sebuah variabel

Untuk menyelesaikan pembangunan prototipe kami harus membuat dan menggunakan variabel. Variabel ini akan memungkinkan kami komponen untuk berbicara satu sama lain sementara mempengaruhi negara mereka.

Kami akan membuat variabel akan digunakan untuk memperbarui titik kemajuan yang berdasarkan mana boarding pass yang ditampilkan.

Untuk membuat variabel, tekan V untuk membuka Variables Modal. Di sini klik Create New Variable dan ketik "flightDisplayed" ke dalam bidang Nama. Biarkan nilai default kosong.

Besar, Anda memiliki variabel Anda mengatur! Dekat modal variabel dengan menekan X atau escape diri pada keyboard Anda.

10. Menggunakan Variabel

Menavigasi kembali ke prototipe. Jika kita melihat pratinjau sekarang dari halaman rumah, Anda harus dapat menggesek antara kartu dan juga berinteraksi dengan kode QR.

Sementara kita sekarang dapat menggesek melalui Tiket, ada beberapa hal yang perlu mengkonfigurasi untuk mempengaruhi titik kemajuan untuk memperbarui berdasarkan perkembangan boarding pass.

Untuk melakukan ini, membuka komponen boardingPasses. Pada halaman 1 Mari kita membuat tindakan Halaman berikut:

• Setelah waktu yang ditetapkan
• Wait: 0
• Set: flightDisplay (variabel)
• To: value...
• Value: 1

Ulangi ini di halaman 2 dan 3, daftar nilainya diatur ke 2 atau 3 untuk halaman yang Anda buka. 

Kami secara efektif diberitahu boardingPass komponen untuk memperbarui nilai flightDisplayed variabel, tergantung pada penerbangan (halaman) ditampilkan. Kita sekarang dapat menggunakan nilai ini untuk mempengaruhi keadaan titik kemajuan.

Berikut adalah bagaimana: kembali ke prototipe dan membuka komponen progressDots.

Anda akan melihat tiga halaman (States) bernama 1, 2 dan 3. Penamaan ini sesuai dengan nilai-nilai yang ditetapkan dalam variabel flightDisplayed. Sangat penting bahwa nama-nama Halaman ini cocok set nilai.

Kembali ke prototipe, pilih komponen progressDots, dan:

1. Di bagian komponen di panel properti, buka dropdown State.
2. Pilih flightDisplayed variabel.

Kita sekarang sudah terhubung komponen progressDots dengan flightDisplayed variabel. Ini berarti bahwa ketika nilai perubahan nilai variabel, progressDots komponen akan menampilkan halaman yang cocok dengan nilai variabel.

Cobalah melihat pratinjau prototipe Anda sekarang, berinteraksi dengan boarding pass dengan menggesekkan dan melihat jika titik-titik kemajuan memperbarui.

Terakhir, Anda dapat menghapus atau memindahkan halaman aset untuk memastikan pratinjau bersama terbuka pada halaman awal yang tepat. Untuk menghapus halaman, pilih menu hamburger di halaman thumbnail dan klik delete page.

Tip : Lihat apakah Anda dapat mengetahui cara mendapatkan komponen promoCard untuk memperbarui statusnya berdasarkan penerbangan yang ditampilkan. Anda akan ingin membuat variabel baru yang disebut cardDisplayed. 

Ta-da! 

Di sana Anda memilikinya! Aplikasi Boarding Pass Anda sendiri.Jika Anda mengunduh Aplikasi iOS, coba buka prototipe dan berinteraksi dengannya di iPhone Anda; seharusnya terasa seperti yang asli. 

Lakukan dengan baik untuk mengikuti tutorial ini hingga akhir. Anda sekarang harus memiliki pemahaman menyeluruh tentang cara membuat prototipe Anda sendiri dalam Atom.  Jika Anda memiliki aset dalam Sketch, Anda dapat mengimpornya menggunakan Plugin Atomic untuk Sketsa , atau merancang secara native dalam Atom jika Anda mau. 

Pertanyaan? Komentar Tinggalkan di bawah atau hubungi saya di Twitter (@femkesvs).