() translation by (you can also view the original English article)
XD (pengalaman desain) adalah Adobe satu-stop-solution untuk merancang pengalaman pengguna untuk web dan mobile. Dalam tutorial ini, saya akan menunjukkan kepada anda bagaimana untuk menggunakannya sebagai alat wireframing untuk aplikasi mobile berikutnya atau website anda.
Kami akan merancang hipotetis aplikasi sederhana, disebut "Bucket" yang akan memungkinkan pengguna untuk melihat dan menambahkan ke daftar bucket kehidupan mereka (alias "sesuatu harus dilakukan sebelum aku mati").
Ikuti sepanjang untuk belajar esensi wireframing proyek anda sendiri.
1. Mulailah dengan memikirkan ide Anda
Pengalaman pengguna desain adalah disiplin yang luas, tetapi dalam lingkup artikel ini (dan untuk desainer newbie apapun), saya ingin Anda untuk mengikuti hanya satu prinsip: melakukan satu hal (dan melakukannya dengan baik!) pada setiap layar Anda gambar rangka dan desain.
Untuk membuat tata letak desain dan aliran yang pengguna-sentris, pikirkan tentang kebutuhan pengguna inti Anda mencoba untuk memenuhi setiap layar dan fokus pada cara yang paling sederhana dan paling efektif melakukan hal itu. Itu adalah kesalahan pemula untuk memeras terlalu banyak fitur ke satu layar. Sebaliknya, dengan hati-hati menambahkan lapisan lebih fungsionalitas setelah pengalaman utama.
Tip: untuk melihat contoh yang baik dalam tindakan, check out Shopify POS aplikasi yang menyederhanakan proses mengintegrasikan sebuah toko online dengan satu offline.
Untuk aplikasi ember kami, kami akan menjadi wireframing halaman masuk nya, layar menampilkan daftar sekarang dan layar untuk menambahkan item baru.
2. Pilih ukuran layar
Ketika Anda jalankan Adobe XD, itu akan meminta Anda untuk memilih ukuran layar. Untuk tutorial ini, kami akan memilih dimensi iPhone 6/7/8 (375 x 667) tetapi Anda dapat dengan mudah memulai dengan iPad, Web atau Custom ukuran.
Anda dapat, tentu saja, memulai dengan membuat sketsa ide-ide Anda (praktik yang lazim bagi kebanyakan desainer) tapi saya secara pribadi merasa berguna untuk desain dalam lingkungan dimaksudkan dari awal. Jika Anda merancang untuk layar 1920 x 1080, hal ini lebih sulit untuk mendapatkan rasa yang tepat skala dari sketsa.
Setelah Anda membuat pilihan Anda, Anda akan disambut oleh ruang kerja XD dan kanvas baru dalam ukuran yang Anda pilih.
3. membuat duplikat Artboards
Kita akan mulai dengan membuat duplikat dari artboard.
Kita akan menjadi wireframing tiga layar, sehingga membuat dua lebih artboards dengan memilih fungsi artboard dari panel kiri dan mengklik di manapun di artboard pertama Anda.
Selain itu, Anda juga dapat mengklik artboard pertama untuk memilih dan kemudian pergi Edit > duplikat.
Anda dapat mengubah layar dengan double mengetuk judul standar, terlihat di bagian kiri dari setiap artboard.
4. sederhana objek
Untuk layar pertama, kita akan memiliki sebuah tempat untuk logo dan dua tombol untuk mendaftar (pengguna terdaftar) dan masuk (untuk yang terdaftar).
Pilih alat teks dari panel di sebelah kiri dan klik di mana pun Anda ingin di artboard pertama mulai menulis. Kami membutuhkan pengganti untuk app logo jadi aku mulai di dekat bagian atas, tapi Anda dapat memindahkannya yang diinginkan dengan mengeklik dan menyeret. Untuk teks itu sendiri, Anda hanya dapat memasukkan "Logo" untuk sekarang. Salah grafis untuk merek logo bisa pergi di sini kemudian dalam proses desain.
Di bawah teks logo, menggunakan alat teks lagi untuk menulis "masuk" dan "sign up" saling bertumpukan (tapi meninggalkan ruang yang cukup untuk menggambar lingkaran di sekitar mereka).
Pilih alat Ellipse dari panel kiri dan drag-dan-menggambar lingkaran di sekitar tombol. Anda juga hanya dapat menyalin dan menyisipkan lingkaran pertama Anda.
Menggunakan objek > mengatur > mengirim kembali ke tempat lingkaran di belakang teks dan tidak atas mereka. Atau, Anda dapat memilih lingkaran secara individual dan menggunakan bagian tampilan di panel kanan untuk menghapus mereka mengisi, untuk efek yang sama.
XD, seperti produk Adobe lainnya, memiliki otomatis panduan yang akan membantu Anda menempatkan setiap elemen. Jika Anda ingin mengubah koordinat tepat, Anda dapat memilih setiap elemen dan menggunakan panel kanan untuk mengubah posisi (serta ukuran dan rotasi).
5. keajaiban ulangi Grid
Untuk layar daftar kami, kami akan menggunakan fitur XD yang disebut ulangi Grid. Jika Anda gambar rangka melibatkan mengulang elemen atau daftar isi, fitur ulangi Grid memungkinkan Anda untuk melakukan itu sementara masih membuatnya mudah untuk membuat perubahan yang diperbarui secara otomatis di seluruh grid.
Gunakan Rectangle tool dari panel kiri untuk menggambar persegi panjang x 150px 150px dan kemudian menggunakan alat isi dari panel kanan warna abu-abu terang untuk menunjukkan ini adalah pengganti gambar. Menambahkan keterangan di bawah ini menggunakan alat teks. Pilih keduanya bersama-sama dan membuat salinan di samping mereka untuk membuat baris konten.
Anda dapat menggunakan placeholder teks (seperti desain standar, Lorem Ipsum) untuk daftar konten tetapi saya ingin menambahkan sentuhan personalisasi untuk bahkan saya wireframes seperti melakukan begitu membantu saya mendapatkan merasakan seluruh pengalaman dari get-pergi. Sekarang kami daftar ember memiliki item seperti "Naik balon udara panas" dan "Mengunjungi Paris".
Sekarang pilih semua elemen dalam baris Anda bersama-sama dan klik pada Grid ulangi dalam pane kanan (atau objek > ulangi Grid). Garis hijau dan hijau slider akan muncul di sekitar pilihan Anda, memungkinkan Anda untuk memperluas daftar Anda konten ke segala arah (vertikal dalam kasus kami). Untuk saat ini, klik dan seret cukup lama untuk hanya membuat satu baris lebih banyak (walaupun Anda tentu dapat pergi lebih jauh).
Anda dapat menggunakan alat teks lagi untuk menulis pesan pembuka (seperti pada gambar di bawah) dan Salin salah satu tombol dari layar pertama repurpose itu untuk tombol "Tambah" (klik-ganda pada teks untuk mengubahnya). Anda juga dapat mengubah teks untuk salah satu item di grid Anda.
6. praktek dengan lebih teks dan bentuk
Akhirnya, mari kita wireframe layar untuk pengguna kami untuk menambahkan item baru ke daftar ember.
Pengulangan adalah kunci untuk belajar setiap konsep-konsep baru, jadi mari kita mengulangi beberapa keterampilan kita sudah digunakan. Gunakan alat teks untuk menulis dalam proses item ("pergi ke Coachella" dalam gambar di bawah) dan, opsional, masukkan bar vertikal dari keyboard Anda pada akhir teks yang membuatnya terlihat seperti kursor (dan berkomunikasi bahwa teks ini sedang dimasukkan oleh pengguna).
Menggunakan alat-alat teks dan persegi panjang, seperti sebelumnya, untuk menambahkan sisa dari unsur-unsur di artboard ini. Repurpose tombol dari layar sebelumnya untuk tombol "selesai" yang akan memungkinkan pengguna untuk menyelesaikan penambahan item baru.
Dan itu saja-Anda sekarang dapat memeriksa off "belajar bagaimana wireframe" dari daftar ember Anda!
7. berbagi pekerjaan Anda (opsional)
Adobe XD memungkinkan Anda untuk dengan cepat dan mudah berbagi apa pun yang sedang Anda kerjakan dengan kolaborator dan stakeholder lainnya.
Jika Anda bekerja pada sebuah aplikasi atau website untuk klien, Anda dapat berbagi link ke proyek desain Anda dengan mereka dengan memilih File > berbagi > mempublikasikan prototipe. Ini sepenuhnya sukarela, tetapi kolaborasi adalah bagian penting dari wireframing, jadi jangan takut untuk berbagi apa yang Anda lakukan dan mendapatkan umpan balik.
Kesimpulan
Wireframing merupakan latihan yang sempurna untuk Adobe XD alat belajar, dan kita hanya telah membahas dasar-dasar sangat dalam tutorial ini. Untuk sumber belajar lebih banyak mengenai hal ini, periksa link di bawah ini.
