Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Sketch
Webdesign

Cara Menggunakan Lakaran Simbol untuk Membuat Rajah Aliran

by
Difficulty:BeginnerLength:LongLanguages:

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

Final product image
What You'll Be Creating

Dalam tutorial ini, kita akan membuat aliran pengguna dan tugas rajah aliran yang boleh digunakan semula dalam Sketch. Kita akan memanfaatkan simbol Sketch, menggunakan elemen dasar dan beberapa penyesuaian agar simbol kita dapat bekerja untuk kita.

"[A] carta aliran adalah gerak urutan urutan atau tindakan orang atau perkara yang terlibat dalam sistem atau aktiviti yang kompleks." - Naema Baskanderi

Untuk membangunkan rajah alir kita, kita memerlukan elemen untuk rumah, anak panah, tindakan (termasuk keputusan dan indikator ya / tidak), label, dan nota. Saya akan membahas setiap elemen ini, bagaimana seharusnya kelihatan (jika anda merasa ingin menyalin styling ku), bagaimana fungsinya, dan bagaimana mereka sesuai dengan gambaran besarnya. Tapi sebelum melakukannya, kita perlu membahas konvensi penamaan dalam Sketch. Ini adalah salah satu faktor kunci dalam membuat karya ini. Mari selami langsung, bukan?

Sketch symbols for flow diagrams
Lakaran simbol sangat sesuai untuk rajah aliran

Kita Perlu Bicara Tentang Penamaan Konvensyen

Yup, kita buat, dan untuk dua alasan spesifik. Pertama, praktik yang baik adalah menjaga lapisan Anda diberi nama untuk tujuan organisasi, terutama jika Anda menangani file dengan orang lain. Bila anda membuat simbol dengan beberapa bidang teks di dalamnya, teks lapisan yang diberi nama dengan benar akan membantu Anda membedakan mana teks yang sedang Anda coba untuk mengganti atau mengesampingkannya.

Alasan kedua jauh lebih sejuk sekalipun. Lakaran secara automatik akan mengelompokkan simbol, gaya teks, dan gaya bersama ke dalam lapisan yang berbeza, dengan mengandaikan Anda mengikuti suatu sintaks tertentu. Lakaran bergantung pada nama pengkomitan seperti URL dan folder, contohnya dua simbol berikut akan dikelompokkan dengan rapi bersama.

  • Arrow / S-Shape / Kiri ke Kanan
  • Arrow / S-Shape / Right-Down-Right

Lalu jika kita beri nama lain:

  • Arrow / Default / Kiri-Up-Kiri

itu juga akan dikelompokkan di bawah panah, tetapi di subfolder yang berbeda: Default. Ini kategorisasi membolehkan kita mencari tepat simbol yang kita perlukan, kapan kita memerlukannya:

Organizing symbols in Sketch
Simbol terorganisir dalam Sketch

Ingatlah ini ketika memberikan nama yang bergerak maju, terutama lapisan teks, simbol dan gaya bersama.

Elemen Halaman

'Halaman' adalah bahagian asas dari gambar rajah aliran kami. Pengguna laman web atau aplikasi akan mengikuti pelbagai laluan, menyelesaikan tugas, dan halaman akan selalu menjadi pusatnya.

Untuk membuat laman halaman kita memerlukan persegi panjang dan bidang teks di atasnya. Gaya persegi panjang termasuk #325372 untuk warna, Helvetica Neue, medium berat dan saiz font 11. Anda boleh membuat Style Dikongsi untuk ini kerana elemen lain akan mempunyai tipografi yang sama, walaupun halaman elemen akan menggunakan huruf besar. Untuk melakukan ini, di bawah pilihan , ubah teks menjadi huruf besar.

Segi Empat Persegi Panjang adalah 144px dengan 96px dengan jejari 5, #F7FCFD untuk latar belakang dan #B7E7EE untuk sempadan dalam 1px. Sebaiknya putar setidaknya segi empat segi laman menjadi Gaya Dikongsi. Ini akan memudahkan pengeditan nanti.

Ubah nama layer text menjadi 'Halaman nama'. Dengan cara ini, apabila anda menggunakan semula elemen ini sebagai simbol baru, teks yang override akan memiliki judul dan bukan 'teks'. Pilih kedua dan ubah menjadi satu simbol melalui tombol Buat Simbol di Alat Bar.

Membuat Shortcut Custom dalam Lakaran

Dalam tutorial ini, kita akan membuat banyak simbol . Lakaran tidak mempunyai perintah utama khusus untuk bawaan ini, tetapi kita boleh membuat pintasan kustom kita sendiri.

Pertama, masuk ke Keutamaan Sistem dan masuk ke Papan Kekunci . Pilih tab Pintasan dari atas. Di sebelah kiri panel pilih Pintasan Apl dan tekan kekunci + . Hamparan akan muncul; dalam senarai aplikasi mencari lakaran . Di bawah Tajuk Menu Anda harus mengisi nama menu item tertentu yang kami targetkan, yang dalam hal ini adalah Buat Simbol (ini adalah menu pertama di bawah Layer ). Terakhir, pilih kekunci pintasan anda, dan hanya itu.

Pro tip : ini boleh digunakan untuk aplikasi apa saja.

Custom keyboard shortcut for Sketch
Membuat keyboard pintasan kustom untuk Lakaran

Panah

Anda boleh membuat sebanyak mungkin gaya panah yang sesuai dengan keinginan anda, tetapi idea di sini adalah untuk menunjukkan cara membuat satu panah yang dapat disesuaikan untuk memulai. Anda boleh menambah gaya dan variasi anda sendiri nanti.

Seperti yang boleh dilihat pada gambar di atas, panah akan mengambil banyak bentuk; kita harus pintar menciptakannya. Pertama, kita perlu titik awal dan titik akhir. Dalam kes saya, ini adalah lingkaran terbuka dan segitiga. Segitiga adalah ikon SVG yang saya temukan di Project Noun . Anda boleh membuat segitiga sederhana sendiri, atau menggunakan ikon.

Saya menggunakan #325372 untuk anak panah, perbatasan lingkaran dan garis. Lingkaran ini mempunyai latar belakang putih #FFFFFF juga. Sekarang, ubah keduanya menjadi simbol dan beri nama sesuai dengan keinginan. Jika anda ingin sedikit gila dan buat simbol individu untuk segitiga naik, turun, ke kiri atau ke kanan, lalu jalanlah untuk itu. Tapi itu tidak perlu.

Berikut adalah garis sendiri. Buat satu baris piksel dengan garis alat. Gaya Apapun yang anda lakukan di sana, ubah gaya garis menjadi Gaya Bersama. Saya mempunyai dua; gaya pepejal dan titik untuk panah utama dan menengah. Memiliki beberapa gaya bersama akan menjadikan beralih antara mereka menjadi lebih mudah. Lebih lanjut mengenai itu nanti.

Selanjutnya, kita harus membuat setiap jenis panah dengan menggabungkan titik awal, garis dan titik akhir. Anak panah perlu dipertukarkan untuk pembuatan diagram, jadi ayo kita lakukan sekarang juga.

Membuat Simbol Panah Lurus

Pertama, ayo buat persegi artboard. Sebuah persegi akan membantu kita menjaga segala sesuatunya dengan bentuk yang sama dan panahnya akan lebih mudah untuk bekerja dengannya. Menurut saya 80px dengan 80px. Saya ingin bermula dengan membuat artboard untuk setiap anak panah. Dengan cara ini, saya dapat melihat mereka sekaligus. Mari kita mulakan dengan membuat panah kiri, kanan, atas dan bawah yang menghadap. Sekarang, pilih panah anda dan ubah menjadi simbol seperti yang telah kami lakukan. Jangan lupa gunakan jalan pintas yang baru disiapkan juga. Sebutkan simbol-simbol ini, Panah / Default / Kiri, Panah / Default / Kanan dan seterusnya (Anda mendapat idea).

Membuat Panah Lengkung

Sekarang panah yang lebih mudah diurus; mari kita beralih ke yang melengkung. Bahagian ini sangat penting kerana kita memerlukan anak panah supaya mudah resizable dan disesuaikan. Saya akan terus maju dan mencipta satu daripada masing-masing untuk ketiga gaya terlebih dahulu.

Dalam papan art baru, bersaiz 80px dengan 80px, dan menggunakan alat vektor (V), gambar garis panah untuk Bentuk L, Bentuk, dan gaya U-Shape. Pastikan bahawa garis anda diselaraskan. Jangan buat lengkungan sendiri dahulu. Jika anda mengalami masalah dalam membuat garis yang sempurna, letakkan poin lebih atau kurang di tempat yang seharusnya, kemudian edit lokasinya secara manual dengan memasukkan kedudukan X dan Y sendiri.

Lihatlah gambarnya. Selanjutnya, kita perlu mengedit kurva. Bagi setiap baris pilih hanya titik yang membentuk sudut. Jangan pilih titik awal atau titik akhir. Di sebelah kanan, tingkatkan jumlah sudut apa saja yang anda inginkan. Saya menyusunnya ke 10px. Sekarang, sudutnya akan diubah saiznya secara automatik tanpa mendistorsi garis.

Hal terakhir yang perlu kita lakukan di sini adalah menambah titik awal dan akhir. Tapi sebelum kita melakukannya, mari kita mengubah garis (hanya garis untuk sekarang) menjadi simbol. Kami ingin agar garis boleh disesuaikan berdasarkan titik akhir sebenarnya, awal dan akhirnya, tidak seperti ikon di ujungnya. Kami akan menambah titik awal dan akhir dalam satu minit. Beri nama ketiga panah Arrow / L-Shape / Right-Down, Arrow / S-Shape / Right-Down-Right, and Arrow / U-Shape / Right-Down-Kiri.

Sekarang, klik dua kali pada salah satu simbol yang baru dibuat untuk mengeditnya. Kami ingin meletakkan titik awal dan akhir di tepi simbol dan tengah menyelaraskannya dengan titik akhir garis. Idealnya, anda ingin menempatkan titik awal dan titik akhir yang terpusat di sudut artboard symbol itu.

Terakhir, untuk membuat resizable panah, baik untuk titik awal dan titik akhir, di bawah pilihan resting pilih menetapkan lebar dan menetapkan ketinggian . Juga, jangan lupa untuk mengubah nama mereka menjadi titik mula dan titik akhir. Perubahan nama ini akan memudahkan untuk mengetahui mana yang sedang berubah tipenya.

Kita harus mengulanginya dengan panah yang tersisa, termasuk arah yang tersisa dari panah L-Shape, S-Shape dan U-Shape. Lakukan dengan mengulang langkah sebelumnya.

Bagaimana dengan Gaya Panah yang Berbeda?

Anda boleh mempunyai banyak gaya panah yang anda inginkan; putus asa, putus asa, pepejal atau apa itu. Bahagian yang lembab adalah anda akan membuat satu set new arrow untuk setiap gaya jika anda ingin menggunakan lebih dari satu file yang sama. Kalau tidak mengemas kini Gaya Dikongsi sahaja. Jangan lupa untuk menyesuaikan penamaan konvensyen dengan Arrow / S-Shape / Right-Down-Right / Dotted atau Arrow / Dotted / S-Shape / Right-Down-Right.

Tindakan

Saya fikir perkembangan yang paling penting ada di belakang kita. Unsur yang tersisa tidak terlalu rumit. Tindakan Elemen di sini merangkumi elemen untuk indikator yes / no, keputusan, tindakan tunggal label.

Indikator Ya dan Tidak

Indikator ya dan tidak ada yang memungkinkan kita untuk mengilustrasikan mata pada diagram kita dimana arah aliran dipengaruhi oleh tindakan 'ya' atau 'tidak'.

Indikator ini sangat mudah (paling tidak berbanding panah). Saya buat mereka dengan mendownload dua ikon dari Project Noun. Berikut adalah pautan untuk cek dan pautan ke X. Ion Project Noun berwarna putih, #FFFFFF . Sedangkan warna latar belakangnya adalah #F89B8D untuk #F89B8D dan # FECD75 untuk �.

Mengubahnya menjadi simbol dan namakannya Anotasi / Ya-Tidak / 👎 dan Anotasi / Ya-Tidak / 👍🏿 (ya, emoji disokong.) ted.) # F2F2F2, tiada sempadan. Simpan sebagai gaya kongsi. Di atas dataran, kita memerlukan kawasan teks. Saya telah bertajuk lapisan teks saya "Keputusan". Ingat, penamaan lapisan adalah penting. Anda boleh menggunakan semula gaya teks dikongsi jika anda menyimpannya sebelum ini. Jika tidak, gaya untuk teks adalah # 325372 untuk warna, Helvetica Neue, berat sederhana, 11 saiz fon. Jika anda menyalin gaya saya, tukar gaya kedua, teks dan persegi, ke dalam gaya yang dikongsi.tyles.

# 6FCFDB untuk latar belakang. Seterusnya, kawasan teks. Gunakan semula gaya teks daripada petunjuk tindakan atau keputusan. Kemudian, buat gaya kongsi baru yang dipanggil Label Label dan kembalikan teks ke #FFFFFF. Seterusnya, buat mereka menjadi simbol sekali lagi (adakah anda telah menggunakan jalan pintas dan membiasakan diri di situ berada di sana? Hebat.) t. 🙌) < Klik dua kali pada simbol yang baru dibuat dan pilih lapisan teks. Kita perlu mengedit sifat ubahsuaiannya. Kita perlu memasukkannya ke tepi kiri dan kanan objek. Kadang-kala, Lakaran melakukan ini secara automatik untuk anda, tetapi tidak semestinya, oleh itu lebih baik untuk diperiksa dua kali. check.

# A4A4A4 untuk warna teks, Helvetica Neue, berat badan kali ini dan 11 saiz fon. Ini tidak seperti segala-galanya setakat ini, jadi jangan buat teks nota menjadi simbol. Hanya masukkannya sebagai gaya yang dikongsi. style.
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.