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

Wireframe Pertama Anda Dengan Adobe XD

by
Difficulty:BeginnerLength:ShortLanguages:

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

Final product image
What You'll Be Creating

XD (Reka Bentuk Pengalaman) adalah penyelesaian sehenti Adobe untuk mereka bentuk pengalaman pengguna untuk web dan mudah alih. Dalam tutorial ini, saya akan menunjukkan kepada anda cara menggunakannya sebagai alat penyahtekan untuk aplikasi mudah alih atau laman web anda yang seterusnya.

Kami akan merekabentuk aplikasi hipotetikal mudah, yang dipanggil 'Bucket' yang akan membolehkan pengguna melihat dan menambah senarai baldi kehidupan mereka (aka 'Perkara yang harus dilakukan sebelum saya mati').

Ikuti bersama-sama untuk mengetahui perkara-perkara penting yang melibatkan projek anda sendiri.

1. Mulakan dengan Berfikir Melalui Idea Anda

Reka Bentuk Pengalaman Pengguna adalah disiplin yang luas tetapi, untuk skop artikel ini (dan untuk mana-mana pereka baru), saya ingin anda mengikuti satu prinsip sahaja: melakukan satu perkara (dan lakukannya dengan baik!) Di setiap skrin anda wireframe dan reka bentuk.

Untuk membuat susun atur reka bentuk dan aliran pengguna-centric, fikirkan pengguna teras perlu anda cuba untuk memenuhi pada mana-mana skrin dan memberi tumpuan kepada cara yang paling mudah dan paling berkesan untuk melakukan itu. Ia adalah kesilapan rookie untuk memerah terlalu banyak ciri ke skrin tunggal. Sebaliknya, berhati-hati menambah lebih banyak lapisan fungsi apabila pengalaman utama berada di tempat.

Petua: untuk melihat contoh yang baik dalam tindakan, lihat aplikasi Shopify POS yang memudahkan proses mengintegrasikan kedai dalam talian dengan luar talian.

Untuk aplikasi Bucket kami, kami akan melayari laman log masuknya, skrin yang menunjukkan senarai semasa, dan skrin untuk menambah item baharu.

2. Pilih Saiz Skrin

Apabila anda menyalakan Adobe XD, ia akan menggalakkan anda memilih saiz skrin. Untuk tutorial ini, kami akan memilih dimensi iPhone 6/7/8 (375 x 667) tetapi anda boleh dengan mudah memulakan dengan iPad, Web atau saiz Custom.

Default screen size options in Adobe XD

Anda tentu saja boleh memulakan dengan melakar idea anda (amalan biasa untuk kebanyakan pereka) tetapi saya sendiri mendapati ia berguna untuk mereka bentuk dalam persekitaran yang dimaksudkan dari awal. Jika anda merancang untuk skrin 1920x1080, lebih sukar untuk mendapatkan skala skala yang tepat dari lakaran.

Sebaik sahaja anda membuat pilihan anda, anda akan disambut oleh ruang kerja XD dan kanvas baru dalam saiz yang anda pilih.

3. Buat Papan Kekunci Duplikat

Kami akan mula dengan membuat salinan papan artikulasi.

Kami akan melancarkan tiga skrin, jadi buat dua papan artik lagi dengan memilih fungsi artboard dari panel kiri dan klik di mana sahaja di sebelah papan iklan pertama anda.

Sebagai alternatif, anda juga boleh klik artboard pertama untuk memilihnya dan kemudian pergi Edit> Duplikat.

Anda boleh menamakan semula skrin dengan mengetik dua tajuk lalai, boleh dilihat di sebelah kiri atas setiap artboard.

Duplicated artboards in Adobe XD

4. Objek Mudah

Untuk skrin pertama, kami akan mempunyai pemegang tempat untuk logo dan dua butang untuk mendaftar (untuk pengguna yang tidak berdaftar) dan melog masuk (untuk yang berdaftar).

Pilih alat Teks dari anak tetingkap di sebelah kiri dan klik di mana sahaja yang anda mahu pada papan iklan pertama untuk mula menulis. Kami memerlukan pemegang tempat untuk logo aplikasi supaya saya bermula berhampiran dengan bahagian atas, tetapi anda boleh menggerakkannya seperti yang dikehendaki dengan mengklik dan mengheret. Untuk teks itu sendiri, anda hanya boleh memasukkan 'Logo' buat masa sekarang. Mana-mana grafik untuk logo berjenama boleh pergi ke sini kemudian dalam proses reka bentuk.

Di bawah teks logo, gunakan alat Teks sekali lagi untuk menulis 'log masuk' dan 'mendaftar' di atas satu sama lain (tetapi biarkan ruang yang cukup untuk menarik bulatan di sekelilingnya).

Pilih alat Ellipse dari anak tetingkap kiri dan tarik seret dan menarik di sekeliling butang anda. Anda juga boleh menyalin dan menampal bulatan pertama anda.

Gunakan Objek> Susun> Hantar ke Kembali untuk meletakkan bulatan di belakang teks dan bukan di atasnya. Sebagai alternatif, anda boleh memilih kalangan secara individu dan menggunakan bahagian Rupa di dalam anak panah kanan untuk mengalih keluar isi mereka, untuk kesan yang sama.

Wireframe for first screen Sign In

XD, seperti produk Adobe yang lain, mempunyai panduan automatik yang akan membantu anda meletakkan sebarang elemen. Jika anda ingin menukar koordinat yang tepat, anda boleh memilih mana-mana elemen dan menggunakan anak tetingkap kanan untuk menukar kedudukannya (serta saiz dan putaran).

5. Keajaiban Grid Ulangan

Untuk skrin senarai kami, kami akan menggunakan ciri XD yang dipanggil Grid Ulang. Jika perwigatan anda melibatkan elemen ulangan atau senarai kandungan, ciri Ulang Grid membolehkan anda melakukan itu sambil membuatnya mudah untuk membuat perubahan yang mengemas kini secara automatik merentas seluruh grid.

Gunakan alat Rectangle dari anak panah kiri untuk menarik persegi panjang 150px x 150px dan kemudian gunakan alat Isi dari anak tetingkap kanan untuk mewarna kelabu terang untuk menunjukkan ini adalah pemegang tempat imej. Tambah kapsyen di bawahnya menggunakan alat Teks. Pilih kedua-duanya bersama-sama dan buat salinan di sebelahnya untuk membuat baris kandungan.

Anda boleh menggunakan teks pemegang tempat (seperti pereka piawai, Lorem Ipsum) untuk senarai kandungan anda tetapi saya ingin menambah sentuhan keperibadian kepada walaupun wireframes saya kerana berbuat demikian akan membantu saya merasai pengalaman keseluruhan dari perjalanan. Sekarang senarai baldi kami mempunyai item seperti 'Menaiki belon udara panas' dan 'Lawati Paris'.

Sekarang pilih semua elemen dalam barisan anda bersama-sama dan klik pada Ulang Grid di panel kanan (atau Objek> Ulang Grid). Garis hijau dan slider hijau akan muncul di sekeliling pilihan anda, membolehkan anda memperluaskan senarai kandungan anda ke mana-mana arah (menegak dalam kes kami). Buat masa ini, klik dan seret cukup lama untuk hanya membuat satu lagi baris (walaupun anda sudah tentu boleh pergi lebih jauh).

The Repeat Grid feature at work in Adobe XD

Anda boleh menggunakan alat Teks sekali lagi untuk menulis mesej selamat datang (seperti dalam imej di bawah) dan salin-paste salah satu butang dari skrin pertama untuk menukarkannya semula untuk butang 'tambah' (klik dua kali pada teks untuk mengubahnya ). Anda juga boleh menukar teks untuk mana-mana item dalam grid anda.

Wireframes for the first two screens in Adobe XD

6. Berlatih Dengan Lebih Banyak Teks dan Bentuk

Akhirnya, mari kita melengkapkan skrin untuk pengguna kami untuk menambah item baru ke senarai baldi mereka.

Pengulangan adalah kunci untuk mempelajari konsep-konsep baru, jadi mari kita ulangi beberapa kemahiran yang telah kita gunakan. Gunakan alat Teks untuk menulis item yang sedang dijalankan ('Pergi ke Coachella' dalam imej di bawah) dan, secara pilihan, masukkan bar menegak dari papan kekunci anda di hujung teks untuk menjadikannya kelihatan seperti kursor (dan berkomunikasi bahawa teks ini sedang dimasukkan oleh pengguna).

Gunakan alat Teks dan Rectangle, seperti sebelum ini, untuk menambah unsur-unsur lain dalam artboard ini. Menukis semula butang dari skrin sebelumnya untuk butang 'selesai' yang akan membolehkan pengguna selesai menambah item baru.

All three wireframes in Adobe XD

Dan itu sahaja-kini anda boleh menyemak 'belajar bagaimana untuk melengkung' dari senarai baldi anda!

7. Kongsi Kerja Anda (Pilihan)

Adobe XD membolehkan anda dengan cepat dan mudah berkongsi apa sahaja yang anda bekerjasama dengan kolaborator dan mana-mana pihak berkepentingan yang lain.

Jika anda bekerja pada aplikasi atau laman web untuk pelanggan, anda boleh berkongsi pautan ke projek reka bentuk dengan mereka dengan memilih File> Share> Publish Prototype. Ini sepenuhnya sukarela, tetapi kerjasama adalah bahagian penting dalam wireframing, jadi jangan takut untuk berkongsi apa yang telah anda lakukan dan dapatkan maklum balas.

Kesimpulannya

Wireframing adalah latihan yang sempurna untuk mempelajari alat Adobe XD, dan kami hanya menutup dasar-dasar dalam tutorial ini. Untuk lebih banyak sumber pembelajaran mengenai subjek ini, semak pautan di bawah.

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