Persiapan dengan prototyping di Adobe XD

Feb 6, 2026
Bagaimana caranya

Karena permintaan para profesional desain UX terus tumbuh, desainer mencari alat yang mudah digunakan yang cukup kuat untuk menciptakan prototipe berkualitas tinggi, tetapi itu terasa akrab dengan alat yang sudah mereka gunakan setiap hari.

Adobe XD. (Pratinjau) Apakah hanya itu, memungkinkan pengguna untuk dengan mudah membuat, mengedit, dan mensosialisasikan prototipe untuk desain seluler, semuanya dalam satu program. Fitur-fitur baru sedang dikerjakan sepanjang waktu, tetapi, untuk saat ini, tutorial cepat ini akan membantu Anda memulai dengan prototyping di Adobe XD.

01. Buat prototipe dari wireframe

Creating prototypes is easy with Adobe XD

Membuat prototipe mudah dengan Adobe XD

Untuk membuat prototipe dari wireframe, ikuti langkah-langkah sederhana ini:

  • Klik Prototipe di tab Atas atau Perintah
  • Klik perintah A untuk menunjukkan interaksi, lalu klik Pratinjau untuk menghubungkan prototipe
  • Klik melalui layar prototipe untuk melihat keseluruhan navigasi dan transisi mempengaruhi

02. Menciptakan interaksi.

To create an interaction from one screen to another select an object and drag the blue arrow to the art board you want to link to

Untuk membuat interaksi dari satu layar ke layar lain pilih objek dan seret panah biru ke papan seni yang ingin Anda tautkan

Hal pertama yang akan Anda lihat adalah ikon tombol rumah biru di kiri atas layar, yang menunjukkan layar beranda. Anda dapat mengubahnya dengan mengklik judul yang berbeda dan kemudian mengklik ikon rumah abu-abu yang dilampirkan ke layar yang ingin Anda menjadi layar beranda baru Anda.

Untuk membuat interaksi dari satu layar ke layar lain Pilih objek dan seret panah biru ke papan seni yang ingin Anda tautkan. Anda dapat menghapus interaksi dengan mengklik panah biru dan menyeretnya ke ruang kosong. Ketika Anda membuat interaksi, kotak dialog secara otomatis memberi Anda opsi pada menentukan segue, jenis pelonggaran dan durasi. Command Click dapat dengan mudah melakukan ini dari prototipe.

Perintah Tekan ENTER untuk pratinjau. Tanpa menutup jendela pratinjau, Anda dapat mengedit dengan mengklik panah biru untuk interaksi dan berubah dari sana

03. Berbagi Prototipe.

Publish to share online by simply clicking share online in the upper right corner of the screen

Terbitkan untuk berbagi online dengan hanya mengklik Bagikan secara online di sudut kanan atas layar

Dengan jendela pratinjau masih terbuka, ketuk Rekam dan klik melalui interaksi pada prototipe Anda. Setelah Anda selesai mencatat lagi dan menyimpan file film ke desktop Anda. Ketika kolega melihat file film ada tanda visual untuk menunjukkan hotspot tempat Anda mengklik saat merekam.

Anda juga dapat mempublikasikan untuk berbagi online dengan hanya mengklik Bagikan secara online di sudut kanan atas layar, ketikkan judul di ruang yang disediakan dan seret gambar dari Finder ke dalam ruang yang disediakan untuk membuat panel pratinjau dan kemudian buat tautan. Adobe XD secara otomatis membuat tautan yang dapat dibagikan yang dapat dilihat di browser web apa pun. Spidol secara otomatis menunjukkan hot spot jika review tidak mengklik pada periode waktu yang ditentukan.

Anda juga dapat meninjau pada perangkat seluler dengan menempelkan tautan yang sama ke browser seluler Anda. Indikator visiual tidak muncul saat menguji pada perangkat seluler untuk memberikan pengalaman yang lebih realistis.

Jika Anda menyimpan URL di layar beranda, ikon akan secara otomatis muncul sebagai gambar pratinjau thumbnail yang Anda pilih sebelumnya

Anda dapat membuat perubahan yang diperlukan dalam Adobe XD. Untuk berbagi versi yang direvisi, cukup klik Bagikan lagi. Anda akan diberikan opsi untuk memperbarui tautan asli, atau membuat tautan baru. Untuk mengelola tautan. Klik Kelola tautan melalui Akun Aset Cloud Kreatif Anda. Semua protip disimpan secara online di bagian Premtipe Anda untuk manajemen yang mudah.

Kata-kata: Demian Borba

Demian Borba adalah manajer produk untuk Adobe XD. .

Bagaimana caranya - Artikel Terpopuler

Desainer Afinitas: Cara Menggunakan Efek dan Gaya

Bagaimana caranya Feb 6, 2026

(Kredit Gambar: Serif) Dengan alat vektor dan raster digabungkan, Perancang afinitas adalah alternatif..

Ilustrasi peta: panduan langkah demi langkah

Bagaimana caranya Feb 6, 2026

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..

cat kelinci nakal dalam cat air

Bagaimana caranya Feb 6, 2026

Setelah mempelajari zoologi, binatang, dan margasatwa selalu menjadi hasrat besar bagi saya dan saya tidak pernah bosan melukisnya. Kami cukup beruntung untuk tinggal di pedesaan Lincolnshire..

Buat karakter Anda muncul dengan warna dan cahaya

Bagaimana caranya Feb 6, 2026

Saya sangat suka bekerja dalam warna, apakah itu masuk Photoshop CC. atau melukis secara tradisional dengan cat ai..

Cara membuat logo retro dengan perancang afinitas

Bagaimana caranya Feb 6, 2026

Mudah digunakan dan dengan sejumlah alat kreatif di bawah sabuknya, perancang afinitas adalah alternatif yang bagus untuk ..

Buat Meteor Shower dalam 3DS MAX

Bagaimana caranya Feb 6, 2026

Jika Anda ingin membuat mandi meteor 3D untuk adegan atau proyek, Anda dapat dengan mudah membuat mandi meteor fotorealistik dala..

Buat ilustrasi sederhana untuk web

Bagaimana caranya Feb 6, 2026

Saya duduk, memainkan beberapa musik, meredupkan lampu dan membuka laptop saya. Saya punya banyak hal yang harus dilakukan. Dalam..

Gambar tulang dan otot yang akurat

Bagaimana caranya Feb 6, 2026

Anatomi adalah subjek yang sangat besar dan membutuhkan perpaduan informasi ilmiah dan kepraktisan artistik. Misalnya, Anda memer..

Kategori