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

Pelajari Cara Membuat Prototaip dalam Atom

by
Difficulty:BeginnerLength:LongLanguages:

Malay (Melayu) translation by Fariz Alfarizki (you can also view the original English article)

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, desain pengurus atau pengguna, prototipe yang baik membantu untuk mengomunikasikan desain keputusan dan menguji ide.

Prototaip kami

Dalam tutorial ini kami akan membuat prototaip "dasar masuk" dasar dalam atom, Anda dapat melihat preview di sini . Prototaip bermula dengan negara yang memuatkan sebelum anda Untuk menelusuri anda dan melihat asrama QR kod Untuk membuat prototip ini kita akan menggunakan komponen interaktif, data, variable dan transition halaman.Tidak perlu khawatir! Saya akan membantu anda melalui setiap langkah.

Berikut adalah demo dari apa yang akan kami buat:

Aset Tutorial

Ada beberapa perkara yang anda perlukan untuk diikuti:

  1. Akaun atom : memulakan percobaan percuma (ada juga rencana percuma).
  2. Aset design: Ini adalah file di mana anda akan menemukan desain aset dan membuat prototipe anda.
  3. Sumber Data : Berkongsi Lembaran Google dengan data yang akan kami gunakan dalam prototaip kami.
  4. Atom IOS App : men-Download aplikasi dari App Store untuk menguji prototaip anda pada telefon anda.
httpsatomicio
Atomic.io

Jika setiap saat sepanjang tutorial anda mempunyai pertanyaan, jangan ragu untuk melangkau saya ( @femkesvs ), atau atom sokongan pasukan ( @we_are_atomic ) di Twitter.

Ayo!

1. Salin Assets ke Akaun Kamu

Saya telah membuat satu contoh fail dengan aset yang anda perlukan untuk membuat prototaip anda. Berkas contoh ini lengkap dengan aset kita akan menggunakan, serta komponen pra-dibangun.

copygif

Anda boleh mengakses aset di sini . Untuk menggunakan aset Anda harus menyalin prototip ke akaun anda. Anda boleh melakukan ini dengan mengklik Salin & Edit di bawah kanan dan kemudian pilih satu projek yang anda ingin menyalinnya ke dalam. Saya sarankan membuat projek baru untuk tutorial ini.

2. Muat naik Data ke Atom

Sebelum kita mula membuat prototaip kita kita perlu terlebih dahulu menambah data sumber untuk atom. Saya telah mengumpulkan Google Sheet dengan beberapa asas data yang akan kami gunakan dalam prototaip kami.

Anda boleh mengakses data di sini . Dengan data sumber terbuka, ketik ke Fail> Tambah ke Drive Saya (Anda akan memerlukan Google account untuk ini).

Selanjutnya, dengan projek anda terbuka di atom, pilih tab Data . Dari sini klik Import Data , dan cari data sumber melalui pencarian. Sekali terletak pilih data sumber. Anda akan melihat atom yang memuat data ke dalam projek anda. Sumber data ini kini boleh diakses dan digunakan dalam setiap prototaip dalam projek.

Kita sudah siap!

3. Mencipta Negeri MemuatkanMari kita mulakan

pemasangan prototipe kita dengan mewujudkan negara loading. Kita akan melakukannya dengan membuat transisi kustom dan berdasarkan waktu halaman tindakan.

Pertama, pilih pemuatan komponen dari laman aset untuk menyalin (CMD-C dan tampal (CMD-V) untuk Halaman 1. Itu akan menjadi besar, dan daripada mengubah, kedudukan itu ke dalam kedudukan awal

.Kemudian salin elemen pemuatan anda hanya ditempatkan di halaman 1, kali ini paste di halaman 2. Reposisi ke dalam keadaan akhir (diputar searah jam suntikan 75 ° sehingga pesawat diposisikan dari kanvas kanan sebelah).

page-action-1gif

Untuk membuat kami transisi, naik kembali ke halaman 1. Di panel hak kanan anda akan melihat bahagian bernama Page Actions . Klik tombol ditambah dan kemudian tetapkan sebagai berikut:

  • Membuat sesuatu berlaku: selepas masa ditetapkan.
  • Menunggu: 0
  • Pergi ke: Halaman 2
  • Usul: Transisi kustom
  • Meredakan: Kemudahan dalam keluar
  • Durasi: 2000

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

Untuk mengambil lebih lanjut Anda juga boleh menyalin dan menyisipkan logo terbang ke halaman 1 dan halaman 2 (di bawah komponen pemuatan di halaman panel dan ditempatkan di belakang). Pastikan anda mengikuti teknik yang sama menempatkannya di yang memulakan dan mengakhiri posisi pada setiap halaman. Anda mungkin perlu menyesuaikan susunan lapisan untuk membuatnya kelihatan dari belakang.

Akhirnya kita akan perlu untuk membuat sesuatu tindakan yang akan membawa pengguna secara automatik ke halaman 3 dari halaman 2. Pada halaman 2 menambah tindakan halaman lain waktu. Kali ini kita akan menggunakan tetapan berikut

  • :Membuat sesuatu berlaku: selepas masa ditetapkan
  • Menunggu: 1000
  • Pulang ke rumah
  • Gerak: Slaid
  • Meredakan: Kemudahan dalam keluar
  • Durasi: 300

Petua : jika anda ingin mengubah masa dua elemen menghidupkan Anda dapat melakukan Advanced Timeline Motion .

4. Memahami Komponen

Selanjutnya, elemen-elemen yang diperlukan untuk halaman 3 salinan dan tampal mereka ke halaman 3. Anda akan perlu untuk melakukan sedikit penyesuaian untuk memuat elemen pada halaman yang diperlukan dan menyusun semula.

Hampir semua elemen yang dibutuhkan untuk halaman ini adalah komponen.

Sepatah Kata Tentang Komponen

Komponen dalam atom adalah seperti simbol. Setiap komponen boleh disunting dan digunakan semula keseluruhan projek. Setiap suntingan yang dibuat untuk komponen akan diperbaharui dalam setiap contoh. Komponen boleh juga interaktif dan mengandung beberapa simbol Syarikat. Ini sangat mudah untuk membina prototaip anda.

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

.Kita tahu bahawa pengguna mempunyai tiga penerbangan dan kami ingin mereka dapat menggesek melalui masing-masing. Ada juga kod ikon QR yang, ketika berinteraksi dengan, seharusnya memunculkan kod pass asrama mereka.

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

5. Menggunakan Data

Component boardingCard adalah komponen tertanam dalam komponen. Hal ini membolehkan kita untuk membuat simbol card yang dapat digunakan semula sementara menampilkan satu set data yang berbeza.

Dengan komponen boardingCard terbuka anda akan melihat dua halaman; Bahagian depan dan belakang pas. Ini adalah data yang diberikan kepada elemen teks individu.

Text Properties
Data yang mewarisi daripada ibu bapa

Pilih ABC teks dan lihat teks Properti . Anda akan melihat perkara berikut:

  • Kandungan: Tetapkan dari kolom data
  • Data: Mewarisi dari orang tua
  • Lajur: keberangkatan-kod

Kemudian jika anda melihat Google Sheet di mana data ini ditarik dari, Anda akan melihat kolom yang berjudul "kode keberangkatan".Ini bermakna bahawa teks teks ABC akan memaparkan apa-apa data yang dipaparkan di dalam "kod berlepas".

Semua teks dinamik dalam komponen ini telah ditentukan untuk Menjadi dari ibu bapa . Hal ini membolehkan kita untuk memaut ke data lembaran pada kumpulan tingkat, dan oleh itu memaparkan dan memilah-baris data. Kita akan mendapat ini segera.

6. Menambah Interaksi Flip

Selanjutnya kami akan menyediakan transisi laman berasaskan untuk bergantian di antara pass dan QR code. Di laman depan komponen boardingCard tekan H untuk membawa hotspot alat.Kemudian, menarik hotspot atas ikon kod QR di depan halaman.

Hotspot membolehkan anda untuk menentukan kawasan prototaip interaktif anda. Dengan hotspot anda dipilih, di bawah panel interaksi mengatur yang berikut ini:

  • Gerak isyarat: Klik atau tekan
  • Pergi ke:> Halaman seterusnya
  • Gerakan: Flip
  • Pelonggaran: Mudah keluar
  • Tempoh: 300MS

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

  • Gerak isyarat: Klik atau tekan
  • Pergi ke:> Halaman sebelumnya
  • Gerakan: Flip
  • Pelonggaran: Mudah keluar
  • Tempoh: 300MS

Waktu untuk menguji interaksi anda! Di sudut kanan bawah, tekan pratinjau. Mod pratonton membolehkan anda menguji transisi anda dan interaksi dengan prototaip anda melalui hotspot. Cuba mengklik pada QR kad atau tutup ikon; kad harus flip antara kedua negara.Anda boleh menutup pratinjau dengan menekan X.

Mempunyai papan tulis ini sebagai komponen interaktif membolehkan kita memilih data yang ditampilkan secara dinamis, tanpa harus membuat beberapa negara dan interaksi.

7. Menghubungkan Data untuk Ibu Bapa

Untuk kembali, klik butang belakang ungu di sebelah kiri atas.Sekarang anda perlu kembali dalam boardingPasses komponen.Dalam komponen ini kami mempunyai tiga tiket yang saat ini menampilkan data yang sama. Mari kita kemas kini ini sekarang.

Ingat bagaimana dalam boardingCard komponen, data ditetapkan untuk Menjadi dari ibu bapa ? Dalam kes ini, orang tua adalah contoh komponen.

Pada penerbangan 1 halaman Pilih contoh boardingCard. Dalam sifat komponen meninggalkan Negara seperti itu. Di bawah Data , pilih data sumber dan pastikan Row diatur ke baris 1. Contoh sekarang harus memaparkan data dari baris pertama dari data lembar

.Jika anda beralih baris anda akan melihat bahawa data dipaparkan kemas kini. Mari kita tetap pada baris 1 untuk sekarang, namun penerbangan 2 dan pesawat 3 ini ditetapkan untuk menunjukkan data dari baris 2 dan baris 3 masing-masing.

8. Menambah gerak isyarat swipe

Untuk membolehkan pengguna untuk meleret melalui tiket pesawat mereka kita akan perlu untuk mengatur beberapa interaksi babatan.

Membuat dan menarik hotspot (H) di sebelah kanan penerbangan 1 halaman (pastikan anda meninggalkan beberapa ruang di bahagian atas untuk hotspot atas tutup ikon di belakang halaman boardingCard komponen, dan bahawa tidak menutup QR kod di depan halaman). Untuk membuat gerakan menggesek, gunakan tetapan berikut:

  • Gerak isyarat: Leret ke kiri
  • Jarak jauh: 200
  • Pergi ke:> Halaman seterusnya
  • Gerakan: Tekan Kiri
  • Pelonggaran: Mudah keluar
  • Tempoh: 300MS

Melakukan hal yang sama pada penerbangan 2 halaman, dan tambah kedua hotspot di sebelah kiri 2 penerbangan dan 3 halaman penerbangan yang ditetapkan untuk Push Right dan Push Kiri sebaliknya. Merasa bebas untuk tekan Preview untuk menguji dan interaksi dengan komponen, dan menyesuaikan pengaturan yang sesuai dengan anda.

9. Buat satu variasi

Untuk menyelesaikan prototaip pembangunan kami harus membuat dan menggunakan variables. Variabel ini akan membolehkan kami komponen untuk bercakap dengan satu sama lain sambil mempengaruhi negara mereka.

Kami akan membuat variasi akan digunakan untuk memperbaharui titik kemajuan yang berdasarkan mana papan masuk yang dipaparkan.

Untuk membuat variasi, tekan V untuk membuka Variabel Modal . Di sini klik Buat Pembolehubah Baru dan ketik "FlightDisplayed" ke dalam nama lapangan . Biarkan nilai lalai kosong.

Besar, anda mempunyai variable yang anda set! Dekat modal modal dengan menekan X atau melepaskan diri pada keyboard anda.

10. Menggunakan Variabel

Menavigasi kembali ke prototaip. Jika kita melihat pratinjau sekarang dari halaman rumah, anda harus dapat menggesek antara kad dan juga berinteraksi dengan QR kode.

Sementara kita sekarang boleh menggesek melalui tiket, ada beberapa hal yang perlu dikonfigurasi untuk mempengaruhi titik kemajuan untuk memperbaharui berdasarkan perkembangan boarding pass.

Untuk melakukan ini, buka komponen boardingPasses. Pada halaman 1 Mari kita buat tindakan Laman berikut:

  • Setelah masa ditetapkan
  • Tunggu: 0
  • Tetapkan: flightDisplay (variable
  • Kepada: nilai ...
  • Nilai: 1

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

Kami dengan senang hati diberitahu komponen boardingPass untuk memperbaharui nilai penerbangan Variasi yang dipaparkan, bergantung pada penerbangan (halaman) dipaparkan. Kita sekarang boleh menggunakan nilai ini untuk mempengaruhi keadaan titik kemajuan.

Berikut adalah cara: kembali ke prototaip dan membuka kemajuan komponen.

Anda akan melihat tiga halaman (Negeri) bernama 1, 2 dan 3. Ini adalah sama dengan nilai yang ditentukan dalam penerbanganDisplayed variable. Sangat penting bahwa nama-nama Halaman ini cocok dengan nilai set.

Kembali ke prototaip, pilih kemajuan komponenDot, dan:

  1. Di bahagian komponen di panel property, buka Dropdown State
  2. Pilih variasi Ditampilkan penerbangan.

Kita sekarang sudah dihubungkan dengan kemajuan komponenDot dengan variableDisplayed penerbangan. Ini bermakna bahawa apabila perubahan nilai nilai berubah, komponen progressDots akan memaparkan halaman yang cocok dengan nilai yang berubah.

Cobalah melihat pratinjau prototaip anda sekarang, berinteraksi dengan pas masuk dengan menggesekkan dan melihat jika titik-titik kemajuan memperbarui.

Terakhir, anda boleh menghapuskan atau mengalihkan aset halaman untuk memastikan pratonton bersama terbuka pada halaman awal yang tepat. Untuk menghapus halaman, pilih hamburger menu di halaman thumbnail dan klik padam halaman .

Petua : Lihat apakah anda boleh mengetahui cara mendapatkan promoCard komponen untuk memperbarui statusnya berdasarkan penerbangan yang ditampilkan. Anda akan ingin membuat baru yang dinamakan cardDisplayed.

Ta-da!

Di sana anda memilikinya! Aplikasi Pelancongan Pas Anda sendiri.Jika anda mengunduh Aplikasi iOS, cuba buka prototaip dan interaksi dengannya di iPhone anda; seharusnya terasa seperti yang asli.

Lakukan dengan baik untuk mengikuti tutorial ini hingga akhir. Anda kini perlu mempunyai pemahaman menyeluruh tentang cara membuat prototaip anda sendiri dalam Atom. Jika anda mempunyai aset dalam Lakaran, anda boleh mengimpornya menggunakan Plugin Atomic untuk Sketsa , atau merancang secara asli dalam Atom jika anda mau.

Soalan? Komen Tinggalkan di bawah atau hubungi saya di Twitter ( @femkesvs ).

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.