Belajar dengan Prototipe Sederhana Part3

Panduan Cerdas

Panduan Cerdas awalnya diperkenalkan di Sketch dan kemudian diadopsi di Photoshop setelah fitur menjadi hit. Adobe XD menjelaskannya di bagian bantuan mereka: “Saat Anda memindahkan objek atau artboard, gunakan Panduan Cerdas untuk menyelaraskan objek atau artboard yang dipilih dengan objek atau artboards lain. Penjajaran didasarkan pada geometri objek dan artboards. Panduan muncul saat objek mendekati tepi atau titik tengah dari objek lain. "

 

Mari saya mulai dengan mengatakan bahwa objek adalah istilah umum yang digunakan untuk menggambarkan lapisan bentuk, lapisan teks, grup atau bitmap pada kanvas. Pada dasarnya, semua jenis lapisan atau grup adalah objek.

 

Panduan adalah isyarat visual yang mengilustrasikan bagaimana benda-benda sejajar satu sama lain - mereka dapat menampilkan jarak antara dua lapisan, atau menunjukkan apakah suatu lapisan telah terpaku pada batas-batas benda lain atau tepi artboard. Adobe XD akan mencoba mengantisipasi di mana Anda ingin memindahkan layer, dan secara otomatis beralih ke lokasi itu ketika Anda mendekatinya, sambil menunjukkan seberapa jauh Anda telah meninggalkannya sampai Anda mencapainya. Anda dapat menentukan jarak secara manual dengan memilih layer pertama, menahan Option / Alt, dan mengarahkan kursor ke layer kedua.

 

Perataan Manual

Mari kita mulai dengan meratakan layer secara manual, jadi kami memahami perbedaannya. Beberapa saat yang lalu kami mengelompokkan dua lapisan teks menjadi satu - pilih keduanya sekali lagi (tahan Shift sembari mengklik) dan klik tombol Align Center (Secara horizontal) di Inspektur, atau gunakan pintasan: Cmd + Control + C (Shift + C di Windows).

2-9. Lapisan yang berpusat secara manual

Panduan Cerdas Saat Memindahkan Lapisan

Sekarang pilih grup yang sebenarnya. Anda dapat menggunakan alat Pilih (pintasan keyboard: V) dan memilih grup dengan mengkliknya, atau menggunakan tombol Esc untuk melintasi wadah induk, yang merupakan grup. Pindahkan sampai dua hal terjadi:

1.    Muncul 28px di bawah formulir

2.    Ini terkunci ke tengah-mati artboard secara horizontal

Anda akan tahu bahwa Anda telah melakukan ini dengan benar karena garis-garis berwarna dari panduan cerdas akan menggambarkan apa yang telah diambil oleh objek (yang akan menjadi pusat deadboard artboard, seperti yang ditunjukkan oleh garis vertikal yang muncul). Anda juga akan melihat jarak relatif antara grup fungsi pencarian dan grup teks sambutan (seperti yang ditunjukkan oleh nilai numerik).

2-10. Menyelaraskan dengan panduan cerdas

Panduan Cerdas Dengan Opsi / Alt-Tahan

Pilih lapisan paling bawah dari grup ini, tahan Option (Alt di Windows), lalu arahkan kursor ke atas lapisan paling atas. Ini adalah pendekatan manual (juga dikenal sebagai Option / Alt-hold) untuk mengukur jarak relatif antara dua lapisan. Anda dapat memindahkan layer seperti biasa sambil menahan opsi, jadi gunakan tombol panah ↑ → ↓ ← sampai jaraknya 5px

2-11. Panduan dengan opsi / alt-tahan

Mari kita gunakan apa yang telah kita pelajari untuk menambahkan beberapa elemen lagi. Sejauh ini kami telah melihat lapisan bentuk pertama, lapisan teks, pengelompokan lapisan, penyelarasan, panduan cerdas, dan beberapa dasar lainnya. Mari kita rekap sebagian dari itu dan tutup layar ini, mulai dengan komponen navigasi bawah dengan empat tautan.

Buat persegi panjang dengan panjang 345 x 44px (44px, lebar dan tinggi, adalah ukuran minimum untuk target ketukan - ketuk target yang lebih kecil dari ini sangat sulit bagi pengguna untuk mengetuk). Gunakan Option / Alt-Hold untuk memastikan bahwa persegi panjang memiliki margin 15px di tiga sisi.

2-12. Merekam panduan cerdas

 Sekarang kita memiliki bentuk dasar komponen navbar.

Gambarlah persegi panjang lain dengan lebar 25% dari total lebar navbar (karena kita harus membuat empat tautan di dalam navbar, di mana setiap tautan adalah 25% dari total lebar). Mulai gambar Anda dari sudut kiri atas navbar's rectangle. Anda akan melihat panduan pintar lagi, menunjukkan bahwa gambar Anda akan patah dari sudut lapisan itu, yang merupakan apa yang kita inginkan.

2-13. Menggambar dengan snap

Dengan alat Ellipse (E), gambarlah lingkaran 14 x 14px (tahan Shift untuk mempertahankan rasio aspek) dan kelompokkan bersama-sama tautan dan lingkaran navbar, yang menggantikan ikon navbar untuk saat ini. Gandakan grup ini tiga kali dan seret masing-masing secara horizontal untuk mendistribusikannya secara merata di dalam navbar. Terakhir, kelompokkan seluruh komponen.

2-14. Membentuk komponen

Mengganti Nama Layers

Kami sekarang memiliki lo-f mockup dari navbar, tetapi kami juga memiliki banyak objek yang diberi nama "persegi panjang" dan "grup", yang membingungkan jika Anda mencoba menemukan lapisan dalam daftar lapisan.

Pada saat ini tidak ada jalan pintas untuk mengganti nama layer, jadi Anda harus mengklik dua kali pada nama layer di daftar layer, dan ganti nama itu dengan mengetikkan nama baru untuk layer tersebut. Mengganti nama layer membantu Anda menjaga kebersihan dalam desain Anda, dan membuat daftar layer terlihat jauh lebih membingungkan.

2-15. Mengganti nama layer

Tutup layar ini dengan membuat tiga layer lagi:

1. Sebuah persegi panjang, berganti nama menjadi "Logo BG"

2. Layer teks yang disebut "DISHY"

3. Grup yang berisi dua layer ini, diubah namanya menjadi "Logo"

Pusatkan grup secara horizontal / vertikal di ruang atas.

2-16. Mengisi layar pertama

Fast-forward

Maju cepat 30 menit dan kami memiliki layar tambahan. Ketika pengguna telah mencari jenis masakan menggunakan formulir di layar pembuka, mereka kemudian diundang untuk mengatur lokasi mereka sehingga aplikasi dapat mengembalikan hasil yang relevan dengan lokasi pengguna.

Dalam bab berikutnya kami akan membuat prototipe / mendemonstrasikan pengguna ini mengalir, tetapi untuk sekarang mari kita coba mempercantik layar ini sambil mempelajari tentang alat desain Adobe XD lainnya. Dari arsip, ambil armada dukungan bernama C2.xd untuk melanjutkan.

 

2-17. Maju cepat

 Ulangi Grid

Ulangi kisi memungkinkan Anda untuk mengulangi objek secara horizontal dan / atau vertikal - ini adalah cara yang jauh lebih cepat untuk menduplikasi dan mendistribusikan objek sehingga Anda tidak perlu menggandakan dan memposisikannya secara manual. Pilih grup "Lokasi Terbaru" dari papan seni "Tetapkan Lokasi" yang saya tambahkan ke fle dukungan, dan tekan tombol "Ulangi Kotak" di inspektur, atau gunakan pintasan keyboard Cmd + R (Ctrl + R di Windows) .

2-18. Buat grid ulangi

Anda akan melihat bahwa komponen ini sekarang memiliki dua pegangan yang dapat disentuh. Tarik yang tepat untuk mengulangi komponen secara horizontal, dan yang bawah untuk mengulanginya secara vertikal. Dalam hal ini, kami ingin mengulanginya secara vertikal, jadi maju dan lakukan itu. Perhatikan bahwa tidak masalah jika kontennya meluap di atas artboard; pada kenyataannya, pada bab berikutnya kita akan mempelajari semua tentang prototipe yang dapat digulir.

2-19. Komponen berulang

Jika Anda menggunakan kursor untuk mengarahkan kursor ke ruang di antara objek yang diulang, Anda akan dapat mengklik dan menyeret ruang itu untuk menyesuaikannya. Sesuaikan jarak ke 20px (Anda akan melihat penyesuaian jarak berlaku untuk semua objek yang diulang).

2-20. Menyesuaikan ruang antara objek yang diulang