Bangun prototipe dengan Adobe XD

Dalam desain web kontemporer dan aplikasi sering ada saat-saat ketika interaksi tidak membuka halaman atau layar baru. Pendekatan modern untuk membuat konten interaktif membutuhkan transisi antara elemen antarmuka desain sehingga pengguna terkejut dan kagum dengan pengalaman mengubah konten. Ini semua terjadi pada layar atau halaman yang sama, tanpa penyegaran. Merancang interaksi semacam ini dan menyempurnakannya untuk bekerja dengan baik dapat memakan waktu, tetapi ada baiknya dilakukan sebelum menulis kode Anda.

Inilah yang dikeluarkan Adobe XD selama beberapa bulan terakhir pengembangan yang benar. Buat konten dalam satu status pada satu layar, pindahkan konten itu ke status baru di layar baru dan cukup pilih opsi 'Auto-Animate' untuk transisi. Semua konten yang sama di kedua layar secara otomatis menghidupi dari satu posisi ke posisi lainnya. Jika Anda tidak ingin semua konten terlihat di kedua layar, buat konten tidak terlihat pada yang pertama dan akan transisi ke tempatnya.

Cari tahu tentang perangkat lunak Adobe lainnya seperti Adobe Dimension. .

• 8 Prototipe Esensial dan Alat Bangun

Di sini kami akan menunjukkan kepada Anda cara membuat prototipe aplikasi yang melakukan ini (untuk lebih Cara Membuat Aplikasi Tutorial, lihat kumuh kami yang terbaik). Dan melampaui itu, fitur baru XD memungkinkan pengguna untuk mengontrol interaksi dengan suara mereka. Kami akan mengeksplorasi ini sebagai fitur desain dan bagaimana aplikasi dapat berbicara kembali ke pengguna juga, yang dapat memberikan beberapa peluang desain yang menarik.

Unduh file proyek untuk tutorial ini.

01. Memulai proyek

Jika Anda tidak memiliki Adobe XD, Anda dapat mengunduh dan menginstalnya sini . Setelah instalasi selesai, buka perangkat lunak dan layar sambutan akan memungkinkan Anda untuk memilih ukuran layar untuk diunduh. Dalam hal ini pilih iPhone 6/7/8, karena itu ukuran yang tepat untuk proyek ini, tetapi Anda akan melihat ada beragam ukuran yang tersedia.

02. Impor gambar pertama

Ada berbagai cara untuk mengimpor gambar, tetapi dalam instance pertama ini pergi ke file & gt; Impor. Pilih folder 'Aset' dari file proyek dan gambar pertama yang diimpor akan menjadi 'sky.png'. Tempatkan di bagian atas layar dan pindahkan hanya beberapa piksel ke bawah.

03. Tempatkan kabin

Gambar selanjutnya untuk desain akan menjadi 'kabin.png'. Cukup impor ini dengan cara yang sama seperti yang Anda lakukan pada langkah sebelumnya dan kemudian letakkan untuk mengisi layar. Akhirnya, impor gambar 'pohon.png' dan letakkan di bagian bawah layar dengan pohon-pohon di atas danau.

04. Bawa logo

Alasan gambar-gambar itu adalah lapisan terpisah sehingga ketika transisi dibuat antara layar yang dapat mereka pindahkan secara terpisah. Buka menu File dan pilih Impor. Kali ini pilih 'logo.ai', yang merupakan gambar vektor. Tempatkan gambar ini di bagian tengah atas layar.

05. Tambahkan lingkaran

Pilih alat lingkaran dan gambar lingkaran hanya sedikit lebih besar dari logo. Di panel properti di sebelah kanan, lepaskan stroke dan buat latar belakang hitam. Pilih blur latar belakang dan kurangi kecerahan ke -30 sehingga lingkaran masih hitam.

06. Susun ulang grafik

Sekarang lingkaran perlu bergerak di belakang logo. Pilih Objek & GT; Atur dan kirim ke belakang. Seperti pada produk Adobe lainnya, itu juga Cmd / ctrl + [ untuk memindahkan grafik ke belakang dalam urutan lapisan. Menggunakan braket kotak kanan, sementara itu, akan membawa objek ke depan dalam urutan.

07. Jatuhkan mic

Sekarang impor gambar 'mic.ai' dan ubah ukuran gambar agar relatif kecil. Tempatkan ini di bagian bawah layar. Gambarlah lingkaran di sekitar ini dan hapus centang pada isian sehingga dihapus. Kemudian buat stroke putih dan dua piksel lebar. Posisi itu di sekitar gambar 'mic'.

08. Pesan Teks

Gunakan alat teks untuk menambahkan kata 'berbicara untuk mencari di bawah mikrofon. Buat teks putih dan ubah ke Helvetica Neue Condensed Black. Di kiri bawah layar klik ikon panel aset untuk membukanya. Dengan teks yang dipilih di layar, klik ikon '+' di sebelah 'Gaya Karakter' untuk menyimpan format ini untuk teks.

09. Bergabunglah dengan grup

Pilih ikon Panel Layer di kiri bawah layar. Di layar, pilih teks 'pencarian' dan Shift-click. untuk menambahkan lingkaran dan ikon mic. Pergi ke objek dan pilih grup. Di panel layer ganti nama grup ini 'Search'. Ini berguna untuk memberi nama grup, terutama saat menghidupkan ini.

10. Kelompokkan logo

Sama seperti pada langkah terakhir, pilih logo dan lingkaran kabur di sekitarnya, lalu grup bersama. Di panel layer, ganti nama seluruh kelompok 'logo' sehingga mudah diidentifikasi jika Anda perlu mengedit ini lagi nanti. Untuk saat ini desain untuk layar pertama selesai.

11. Elemen tambahan

Meskipun layar pertama selesai, masih ada lebih banyak elemen desain yang perlu ditambahkan. Ini adalah bagaimana animasi dibuat dengan mengubah posisi elemen antara layar. Pergi ke Alat Rectangle dan tahan Bergeser Untuk menambahkan kotak di layar, membuat perbatasan putih.

12. Impor yang berbeda

Sekarang buka folder untuk aset melalui sistem operasi Anda. Pilih gambar 'cabin1.png' dan seret ini langsung ke alun-alun yang Anda buat pada langkah sebelumnya. Ini akan secara otomatis ditutup di dalam ini. Klik dua kali untuk mengedit posisi gambar dan pastikan kabin terlihat di alun-alun.

13. Tambahkan label

Menggunakan alat teks, tambahkan label 'kabin hutan' di bawah teks dan gunakan panel aset untuk menata teks dalam gaya yang disimpan dari Langkah 8. Pilih gambar dan label dan grup bersama. Beri nama grup 'Kabin Kiri' di panel Layers.

14. Gandakan grup

Biasanya mengulangi elemen antarmuka adalah pekerjaan yang sempurna untuk alat 'Ulangi kisi'. Namun, ini akan membutuhkan animasi spesifik, yang tidak berfungsi dengan kisi berulang. Pilih grup gambar dan teks, lalu salin dan tempel agar ia berada di sebelah yang asli, dan tambahkan gambar 'Cabin2.png' sebagai gantinya.

15. Ganti nama lalu salin lagi

Ubah teks ke 'kabin salju', dan di panel Layers nama 'kabin kanan' ini. Pilih kabin kiri dan kanan dan duplikat, posisikan duplikat di bawah ini dan perbarui teks dan gambar mereka dengan 'Cabin3.png' dan 'Cabin4.png'. Kelompok keduanya bersama-sama dan beri nama kelompok 'kabin bawah'.

16. Judul teks

Tambahkan teks ke halaman dengan hasil pencarian teks untuk kabin '. Berikan jenis huruf Rockwell ini dan simpan ini ke gaya karakter di panel aset. Sekarang posisikan kelompok 'Lower Cabin' tepat di bagian bawah layar dan ambil penampilan ke nol sehingga tidak terlihat di layar ini.

17. Mengubah Opacity.

Sekarang pilih kabin kiri dan kanan, pindahkan ke bagian bawah layar dan ambil slider tampilan ke nol. Ulangi lagi untuk teks pencarian. Ketika kita pindah ke layar lain, ini semua akan menghidupkan ke posisi baru mereka. Di panel layer, pindahkan 'kabin kiri' di atas semua kelompok kabin lainnya.

18. Gandakan layar

Pilih artboard dengan mengklik namanya, lalu klik dua kali artboard dan ubah nama menjadi 'rumah'. Salin dan tempel artboard dan ganti nama 'pencarian'. Sekarang pilih logo dan pindahkan hingga hampir dari layar, lalu kurangi penampilannya ke nol.

19. Pindahkan latar belakang

Pilih gambar langit dan sedikit sedikit di layar. Pilih gambar kabin dan pindahkan sampai kabin berada di bagian atas layar. Kemudian klik pada gambar pohon dan pindahkan ke kabin. Akhirnya, pilih grup 'Search' dan kurangi penampilan ke nol.

20. Elemen baru muncul

Pilih hasil pencarian di panel layer dan bawa penampilannya hingga 100. Pindahkan di layar. Ulangi ini untuk kabin kiri, kabin kanan dan kabin bawah. Gunakan alat pena untuk menggambar tombol kembali sederhana dan menambahkan lingkaran di sekitarnya. Buat latar belakang kabur dan ambil kecerahannya ke -30.

21. Lengkapi tombol Kembali

Pilih panah belakang dan lingkaran, grup bersama dan beri nama 'tombol kembali' di panel layer. Beralih ke mode 'Prototipe' dengan menekan 'Prototipe' di kiri atas antarmuka XD. Pilih homescreen, seret panah biru ke layar pencarian dan panel pop-up akan muncul.

22. Perintah suara

Ubah pelatuk ke suara dan ketikkan kata 'pencarian' sebagai perintah suara untuk mengontrol ini. Ubah tindakan untuk menghidupkan dan mereda secara otomatis untuk mengambil. Buat durasi 1.5s. Di layar pencarian klik pada tombol Kembali dan seret panah biru kembali ke layar 'Home'. Cukup ubah pelatuk untuk mengetuk.

23. Uji prototipe

Di kanan atas antarmuka XD adalah tombol putar. Klik ini dan prototipe yang berfungsi sekarang akan muncul di layar. Di beranda Anda harus menahan spasi saat Anda berbicara 'pencarian' perintah suara '. Ketika Anda melepaskan Space Bar, ia akan membawa Anda ke layar berikutnya dan menghidupkan antarmuka grafik ke posisinya.

24. Kembali

Setelah transisi berjalan, Anda dapat menekan tombol kembali untuk kembali ke homescreen. Tutup prototipe dan klik pada layar pencarian, lalu klik panah biru ke kanan (jangan seret). Ubah pemicu ke waktu, buat tunda 0s dan atur tindakan ke pemutaran bicara. Buat hasil pencarian pidato untuk kabin yang tersedia.

25. Konfirmasi Pidato

Uji ini sekarang dengan tombol putar untuk mendengar konfirmasi suara pencarian. Tutup prototipe ketika Anda sudah mencoba ini. Layar lain akan dibuat, jadi mari klik kembali pada tampilan 'Desain' di kiri atas antarmuka XD. Klik pada layar pencarian dengan mengklik nama, dan kemudian salin dan tempel.

26. Menskala gambar

Ganti nama layar baru 'kabin'. Klik dua kali gambar untuk layer 'KIRI KIRI'. Ubah ukuran pegangan sudut sehingga mengisi layar, lalu reposisi gambar di dalamnya sehingga mencakup layar itu. Klik pada teks hasil pencarian dan ambil tampilan ke nol untuk menghapusnya dari tampilan.

27. Elemen layar baru

Klik dua kali teks 'kabin hutan' karena merupakan bagian dari grup. Memperbesar ukuran teks menjadi 26 piksel dan memindahkannya sedikit di layar. Tambahkan teks ke layar dalam media helvetica Neue pada ukuran 14 piksel dan atur menjadi putih untuk menonjol ke latar belakang. Tambahkan garis putih dengan alat garis di bawah judul.

28. Buat tombol

Gunakan alat persegi panjang untuk menggambar persegi panjang di layar di bagian bawah desain. Seret di pegangan pegangan untuk memberikan bagian bundar bentuk ini. Tambahkan kata 'cadangan' ke ini, menggunakan gaya karakter yang disimpan di panel aset untuk Helvetica Neue dalam Condensed Bold.

29. Pindah ke mode prototipe

Semua elemen desain ada di tempat sekarang untuk seluruh desain aplikasi. Pindah ke mode 'Prototipe' dengan mengklik kata 'prototipe' di sudut kiri atas. Di layar Pencari klik pada kelompok gambar dan teks 'kabin hutan. Seret pegangan biru dari sini ke layar 'kabin'.

30. Pengaturan Animasi

Di panel pop-up untuk transisi antara layar, pilih Ketuk sebagai pelatuk, lalu buat tindakan secara otomatis. Tetap mereda sebagai jepret tetapi mengurangi durasi ini menjadi 0,6s. Ini memastikan bahwa animasi tidak menyeret - pergerakan layar pertama ke layar kedua memiliki banyak gerakan yang membutuhkan transisi yang lebih lama.

31. Tautkan tombol Kembali

Sekarang pilih tombol kembali dari layar akhir dan seret panah biru dari ini kembali ke layar 'Pencarian'. Semua pengaturan dari transisi sebelumnya harus diingat. Anda sekarang siap untuk melanjutkan dan menguji ini dengan mengklik tombol putar.

32. Animasi otomatis

Apa yang akan Anda lihat dengan animasi otomatis sekarang adalah bahwa gambar mengembang untuk mengisi layar, dan elemen-elemen yang tidak lagi diperlukan akan memudar sementara teks baru akan memudar. Sebaliknya terjadi ketika kembali. Ini memberikan cara yang baik untuk melihat otomatis-animasi bekerja di tiga layar.

33. Simpan proyek

Secara default proyek Anda harus secara otomatis menyimpan ke cloud kreatif, tetapi merupakan ide yang baik untuk menyimpan salinan ke hard drive Anda sendiri jika ada masalah. Klik File & GT; Simpan, ubah lokasi ke komputer Anda sendiri dan beri nama proyek dengan nama yang sesuai.

34. Berbagi Proyek

Inti dari prototipe adalah untuk menguji proyek pada orang lain. Untungnya ada tombol berbagi di kanan atas antarmuka XD yang membuat ini menjadi mudah. Klik tombol Bagikan, dan di menu Drop yang muncul pilih opsi Bagikan untuk ditinjau.

35. Publikasikan Prototipe.

Di layar berikutnya Anda diberitahu bahwa dukungan otomatis-otomatis belum tersedia untuk web, tetapi akan segera hadir. Klik Buat tautan publik dan kemudian klik tautan di kanan atas untuk mengunjungi tautan publik di browser web. Anda harus menahan spasi untuk menggunakan perintah suara dengan prototipe.

36. Versi video

Prototipe lain dapat dibagikan dengan merekam antarmuka dalam aksi. Klik tombol Bagikan dan pilih Rekam video. Ini akan membuka jendela, dan ketika Anda menutup ini, Anda akan diminta untuk menyimpan rekaman layar sebagai file MP4, yang juga merupakan cara yang berguna untuk membagikan prototipe Anda.

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

Artikel terkait:

• Desain Aplikasi Seluler: Panduan Pemula
• Cara Membuat Aplikasi dengan Vue.js
• Dapatkan Grips dengan Onboarding App Mobile