Advertisement
  1. Web Design
  2. Sketch
Webdesign

Lakaran dan Zeplin: Membantu Pereka dan Pembangun Kerjasama

Length:LongLanguages:

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

Kerjasama antara pereka dan pemaju adalah penting untuk kejayaan projek web, dan ini merupakan ukuran kejayaan pasukan. Walaupun berkongsi ruang kerja yang sama tidak ternilai, mempunyai sumber kebenaran dalam talian yang membantu dengan kerjasama ini sangat membantu. Dalam artikel ini, kita akan melihat Zeplin dan bagaimana ia berfungsi dengan kombinasi Sketsa untuk membawa pasukan bersama.

Firman Pantas pada sketch

Sekitar enam bulan yang lalu, apabila saya berpindah pekerjaan, saya digalakkan untuk mencuba Sketch. Perkara yang hebat tentang perisian ini adalah bahawa ia secara khusus memberi tumpuan kepada reka bentuk antara muka dan ikon; dari papan iklan dengan saiz tertentu untuk web, mudah alih, dan ikon, kepada ciri-ciri yang membantu meningkatkan proses reka bentuk, Sketch adalah harus mempunyai pereka.

Di samping itu, lengkung pembelajaran jika anda seorang pengguna Photoshop atau Illustrator pertengahan hampir tiada.

Berikut adalah beberapa contoh yang memberikan gambaran keseluruhan tentang apa yang boleh anda lakukan dengan lakaran:

  1. Buat Halaman untuk menyusun kandungan anda (sebagai contoh: reka bentuk mudah alih, reka bentuk desktop) dan Artboards di dalam halaman ini untuk menghargai produk anda (contohnya: membuat perjalanan pelanggan langkah demi langkah).
  2. Gunakan Inspektor untuk mencari semua butiran tentang objek tertentu (saiz, kedudukan, warna, gaya font, kelegapan dan banyak lagi).
  3. Gunakan ciri Eksport untuk mengeksport Artboards atau objek individu ke format fail tertentu (PNG, JPG, PDF, dan sebagainya).

“I’m a dev, I’ve never used Sketch!”

Dalam tahun-tahun kebelakangan ini pereka telah belajar untuk bekerjasama di antara mereka menggunakan alat seperti InVision, tetapi platform ini masih tidak mempunyai ciri-ciri yang membolehkan reka bentuk cepat dibawa ke pasukan pembangunan.

Kita tidak boleh meminta pemaju untuk mahir dalam alat yang sama menggunakan pereka alat untuk mencopot produk. Yang berkata, tidak sepatutnya kita memerlukan pereka untuk bergerak dari apa yang mereka lakukan dengan baik: reka bentuk! Membina 'dokumen spesifikasi' setiap kali mereka menyerahkan reka bentuk adalah jauh daripada 'tangkas', dan boleh membawa banyak masa yang sia-sia antara menyerahkan reka bentuk dan harus berulang jika perlu.

Zeplin

Di sinilah Zeplin memasuki tempat kejadian.

Zeplin adalah alat kerjasama untuk pereka UI dan pemaju depan. Ia melampaui aliran reka bentuk reka bentuk dan membantu pasukan dengan reka bentuk tangan.

Ia membolehkan pereka untuk memuat naik wireframes atau reka bentuk visualnya terus dari Sketsa dan menambahkannya ke folder projek di Zeplin. Perkara yang terbaik? Anotasi akan ditambah secara automatik kepada reka bentuk (saiz, warna, margin dan juga cadangan CSS untuk unsur-unsur tertentu) yang akan meninggalkan anda dengan repositori dalam talian yang dapat disumbangkan oleh seluruh pasukan.

'Zeplin berfungsi dengan baik sebagai satu sumber kebenaran, apabila digunakan sedemikian.

Juga, kerana ia boleh didapati sebagai aplikasi yang berdiri sendiri dan aplikasi web, anda boleh mengaksesnya di mana-mana sahaja. Memudahkan untuk menyemak reka bentuk dan perkara seperti jarak, saiz, warna, dan sebagainya '- Daniel Setas Pontes, pemaju JavascriptrnSEKARANG TV, Sky

Mengeksport Reka Bentuk Dari Lakaran ke Zeplin

Zeplin berfungsi sebagai plugin dalam Lakaran, jadi reka bentuk muat naik adalah satu klik pekerjaan.

Inilah cara memulakan projek:

Memulakan projek Zeplin
  1. Muat turun Zeplin (mac sahaja) * memasang. Pemaju tidak perlu menjalankan OS X kerana mereka hanya perlu mengakses alat berasaskan web untuk mendapatkan akses kepada kandungan.
  2. Buat projek.
  3. Pilih platform yang telah anda buat.
  4. Label projek (pastikan anda memilih nama yang biasa kepada seluruh pasukan).
Export from Sketch
Mengeksport dari lakaran

Dalam Sketch, pilih objek individu dan buatnya boleh dieksport. Ini akan membolehkan pasukan dev anda mengeksport setiap elemen kemudian dari dalam Zeplin. Inilah caranya:

  1. Seterusnya, pilih papan iklan yang anda mahu muat naik ke Zeplin.
  2. Pergi ke Plugins > Zeplin > Export Selected Artboards.
  3. Pilih projek yang anda ingin muat naik reka bentuk anda, kemudian klik Import.

Bekerja Dengan Zeplin

Sekali di Zeplin, anda boleh menavigasi antara projek dan dengan mudah meneroka semua komponen di dalamnya. Mencari spesifikasi unsur-unsur tertentu juga intuitif; pilih elemen yang anda mahu, maka semua maklumat yang relevan akan muncul di lajur sebelah kanan.

Pemaju: inilah cara yang berfungsi, sebaik sahaja anda membuka alat berasaskan web dan log masuk:

  1. Pilih objek yang ingin anda periksa.
  2. Lihat lajur sebelah kanan untuk maklumat terperinci seperti gaya font, warna, dan sebagainya (maklumat akan dipaparkan mengikut objek yang anda pilih).
  3. Salin CSS yang dicadangkan.

Jika pasukan reka bentuk dibenarkan untuk elemen yang boleh dieksport apabila mengimport reka bentuk ke dalam Zeplin, pasukan pembangunan harus dapat mengeksport aset individu. Aset akan tersedia untuk dimuat turun dalam format SVG dan tiga saiz PNG yang berbeza.

  1. Di sini anda boleh menambah nota dan ulasan kepada reka bentuk.
  2. Di sini anda boleh menyalin dan berkongsi pautan projek, mungkin juga diintegrasikan dengan saluran Slack pasukan untuk mendapatkan pemberitahuan atau menjemput ahli pasukan untuk berkolaborasi!

Kenapa Pasukan Anda Perlu Melangkah

Bekerja dengan Zeplin mempunyai banyak kelebihan, berikut adalah beberapa contoh:

  • Anda akan mengelakkan membina dokumen spesifikasi; sesuatu yang tidak lincah dan mudah dikemas kini.
  • Buat reka bentuk beranotasi segera dengan semua maklumat yang relevan untuk pemaju dan pereka lain.
  • Anda boleh membuat reka bentuk yang boleh dieksport, jadi pemaju mendapatkan akses cepat kepada aset individu.
  • Buat seberapa banyak projek yang anda mahu, kemudian muat naik dan kemas kini dengan hanya beberapa klik.
  • Buat panduan gaya yang akan membantu pasukan reka bentuk kekal konsisten.
  • Ambil kesempatan daripada integrasi Slack, dengan serta-merta notifiying pasukan anda setiap kali terdapat kemas kini.

Cuba ia!

Bekerja dengan Sket dan Zeplin adalah cara yang baik untuk pereka untuk bekerjasama secara harmoni dengan pemaju. Pasukan saya suka bekerja dengan cara ini-Saya suka mendengar pendapat dan pengalaman anda yang bekerja dengan alat ini!

Pautan Berguna

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.