01 03
Pembaruan Atomic.io Terbaru Termasuk Kontainer yang Dapat Digulir
Beberapa bulan yang lalu saya menunjukkan bagaimana atomic.io dapat digunakan untuk gerakan prototipe . Salah satu poin penting yang saya buat dalam artikel itu adalah "menunjukkan gerakan" daripada meninggalkannya pada imajinasi klien atau tim adalah penting. Bahkan, ini menjadi sangat penting sehingga kategori baru alat UX / UI muncul di layar. Mereka termasuk - Apple Keynote, Edge Animate dari Adobe, After Effects dan UXPin , untuk beberapa nama. Anak baru di blok tersebut adalah Atomic.io yang dalam versi beta terbuka ketika saya pertama kali menulis tentang produk tersebut.
Hal yang rapi tentang beta terbuka adalah mereka memberikan kesempatan kepada pembuat perangkat lunak untuk mengumpulkan umpan balik pengguna pada set fitur, termasuk fitur yang hilang, dan kemudian menambahkannya ke aplikasi dan menguji mereka sebelum rilis komersial. Dalam kasus atom, satu fitur yang sangat saya lewatkan adalah kemampuan untuk menggulir konten secara vertikal atau horizontal. Ini dapat mencakup hal-hal seperti kartu, slide show atau hampir semua pengguna akan menggesek atau menyeret dalam batas antarmuka aplikasi atau situs.
Ini pasti merupakan subjek yang banyak diminta oleh pengguna karena wadah yang dapat digulir hanya diperkenalkan ke aplikasi bulan ini dan, saya akui, membuat konten yang dapat digulir dalam prototipe itu mati sederhana untuk diaktifkan.
Begini caranya ...
02 03
Cara Membuat Konten Bergulir Vertikal dalam Atom
Anda harus terlebih dahulu mendaftar untuk uji coba gratis 30 hari dan, pada akhir periode itu, Anda akan disajikan dengan tiga paket harga.
Hal pertama yang perlu Anda ketahui adalah semua pekerjaan yang akan Anda lakukan adalah di browser dan aplikasi ini ditujukan secara ketat di Google Chrome. Setelah Anda masuk, Anda akan dibawa ke halaman Proyek . Untuk membuka aplikasi, klik tombol Proyek Baru .
Ketika antarmuka muncul Anda akan melihat ada sejumlah alat, kemampuan untuk menambahkan halaman dan lapisan ke halaman, artboard dan, di sebelah kanan, panel properti yang sensitif terhadap konteks.
Dalam contoh ini, saya mulai dengan preset iPhone 5 yaitu 320 x 568.I kemudian buka folder yang berisi gambar yang akan digulir dan menyeretnya ke kanvas. Mereka secara otomatis ditambahkan ke proyek dan Anda dapat melihat mereka berada di lapisan individu jika Anda mengklik tab Lapisan . Saya kemudian memilih alat Panah (Pilihan), memilih gambar dan menyeretnya ke posisi baru untuk menambahkan beberapa ruang di antara mereka. Saya kemudian memilih semua gambar dan mengklik tombol Distribute Vertically pada bilah alat. Ini secara merata menempatkan gambar.
Langkah selanjutnya adalah memilih semua konten yang akan digulir dan baik klik tombol Container atau pilih Buat Kontainer Gulir dari tombol Grup pop down. Setelah penampung dibuat - Anda akan melihatnya di panel Lapisan - klik penampung dan seret pegangan bawah ke atas ke bagian bawah kanvas . Klik tombol Preview di bagian bawah panel Properties dan ini akan meluncurkan jendela browser. Gunakan roda gulir mouse Anda untuk menggulir konten. Untuk kembali ke proyek Anda, klik tombol Edit di kanan bawah jendela browser.
03 03
Cara Membuat Konten Gulungan Horizontal dalam Atom
Pengguliran horizontal sama mudahnya.
Dalam hal ini, menyeret serangkaian gambar ke kanvas dan saling menempelkan satu sama lain. Dengan gambar yang dipilih, saya kemudian klik tombol Align Top untuk memastikan semuanya sejajar satu sama lain.
Saya kemudian menekan tombol Shift dan memilih setiap layer di panel Layers. Dengan gambar yang dipilih, saya mengklik tombol Container dan , di panel Properties, dipilih secara Horizontal di area Behaviors.
Saya kemudian menguji proyek di jendela Browser dengan mengklik tombol Preview.
Meskipun saya telah menunjukkan cara membuat versi individual pengguliran Vertikal dan Horizontal, selama Anda meletakkan konten yang dapat digulir dalam penampung, Anda dapat memiliki wadah ini di area layar yang terpisah. Misalnya, laman web dapat memiliki konten yang bergulir secara vertikal di sisi menu dan konten yang bergulir secara horizontal dalam tampilan slide di halaman yang sama. Bahkan, sebuah wadah dapat memiliki gulir vertikal dan horizontal untuk item seperti pemetik gambar yang memiliki selusin thumbnail.
Untuk mempelajari lebih lanjut tentang fitur ini di atomic.io lihat:
- Pengumuman Blog
- Menggulirkan tutorial wadah
- Masking menggunakan Kontainer
- Pemecahan Masalah Kontainer Bergulir