Zeplin เป็นเครื่องมือการทำงานร่วมกันที่มีประสิทธิภาพซึ่งเชื่อมช่องว่างระหว่างนักออกแบบและนักพัฒนาโดยการสร้างพื้นที่เชื่อมต่อสำหรับทีมผลิตภัณฑ์

ทำไมต้อง Zeplin?

ส่วนสำคัญของปริศนาการพัฒนาผลิตภัณฑ์คือสถานที่ที่การออกแบบมาบรรจบกับการพัฒนา เมื่อการออกแบบพร้อมที่จะก้าวเข้าสู่ขั้นตอนการพัฒนา ('Handoff') วิศวกรต้องมีวิธีทำความเข้าใจและแปลเป็นรหัส

เซปลิน อำนวยความสะดวกในการแฮนด์ออฟโดยการออกแบบจาก Sketch, Adobe XD, Figma และ Photoshop แล้วส่งออกเป็นรูปแบบที่สามารถสร้างข้อมูลโค้ดคำแนะนำสไตล์ข้อกำหนดและเนื้อหาได้อย่างง่ายดาย

บอกลาวันแห่งการ 'ปรับสีแดง' Zeplin มุ่งเน้นไปที่การปรับปรุงการทำงานร่วมกันระหว่าง นักออกแบบผลิตภัณฑ์ และทีมพัฒนาและใช้งานโดยทีมผลิตภัณฑ์ชั้นนำที่ Airbnb, Dropbox, Pinterest, Microsoft และอื่น ๆ อีกมากมาย

ด้วย Zeplin ไม่จำเป็นต้องเขียนขนาดหรือระยะขอบด้วยตนเองพิมพ์สำเนาไอคอนส่งออก มันยอดเยี่ยมมากและประหยัดเวลาในการมุ่งเน้นไปที่การสำรวจการออกแบบ - Alex Potrivaev นักออกแบบผลิตภัณฑ์ @ อินเตอร์คอม

ในบทความที่ผ่านมาของเรา ApeeScape Designer มิคาห์โบเยอร์ส พูดคุยเกี่ยวกับความสำคัญของการมีมาตรฐาน ระบบภาษาออกแบบ เพื่อสื่อสารอย่างมีประสิทธิภาพในหน้าที่ต่างๆของทีมผลิตภัณฑ์ที่ทำงานเกี่ยวกับผลิตภัณฑ์ดิจิทัล

ด้วยการกำหนดเวอร์ชันสินทรัพย์การออกแบบการสร้างไลบรารีคอมโพเนนต์และการสร้างคำแนะนำเกี่ยวกับรูปแบบการใช้ชีวิตโครงการที่ส่งไปยัง Zeplin สามารถใช้เป็น 'แหล่งเดียวของความจริง' สำหรับทีมผลิตภัณฑ์

โดยพื้นฐานแล้วเราถือว่า Zeplin เป็นแหล่งความจริงของเราในการร่วมมือกับ Engineering หากไม่ได้อยู่ใน Zeplin แสดงว่าไม่เป็นทางการ - Jason Stoff นักออกแบบอาวุโสผลิตภัณฑ์ดิจิทัล @ สตาร์บัคส์

ข้อ จำกัด ของ Zeplin

แม้ว่า Zeplin จะมีคุณสมบัติที่เป็นประโยชน์มากมาย แต่ก็ยังไม่สมบูรณ์แบบ Zeplin เสนอแผนบริการฟรี แต่ภายใต้แผนดังกล่าว จำกัด เพียงโครงการเดียว เมื่อออกแบบสำหรับทั้ง iOS และ Android จำเป็นต้องมีสองโครงการแยกกัน ณ จุดนั้นก แผนการชำระเงิน จะจำเป็น

เมื่อเข้าใจขั้นตอนการทำงานกับ Zeplin และ Sketch (หรือแอปอื่น ๆ ที่กล่าวถึงข้างต้น) แล้วขั้นตอนการทำงานจะกลายเป็นเรื่องง่าย อย่างไรก็ตาม Zeplin มีช่วงการเรียนรู้เล็กน้อยที่ต้องใช้เวลาและความสนใจ หากต้องการดูภาพรวมทั่วไปและเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการใช้งานโปรดดูที่ วิดีโอสาธิต Zeplin ด้านล่าง:

การทำงานกับ Sketch และ Zeplin: ขั้นตอนและเคล็ดลับ

1. เริ่มต้นกับ Zeplin

• สร้างบัญชี Zeplin หากคุณยังไม่มี คุณสามารถสมัครได้ฟรี: https://app.zeplin.io/register
• ดาวน์โหลด Zeplin แอปเดสก์ท็อป สำหรับ Mac หรือ Windows
• ดาวน์โหลด Zeplin เสียบเข้าไป สำหรับ Sketch

2. เตรียมไฟล์ Sketch ของคุณ

• เมื่อเรามี Sketch และ Zeplin พร้อมใช้งานแล้วเราจะตั้งค่าไฟล์ Sketch ของเราเพื่อการส่งออกไปยัง Zeplin อย่างราบรื่น
• ใน Sketch จัดระเบียบเนื้อหาและเลเยอร์ของคุณโดยใช้หลักการตั้งชื่อที่สอดคล้องกัน หากร่วมมือกับผู้อื่น นักออกแบบ กำหนดอนุสัญญาที่เหมาะกับทุกคนในทีมของคุณ ขึ้นอยู่กับประเภทของโครงการนี้ (เช่น iOS, Android หรือเว็บ) Zeplin จะปรับรูปแบบการตั้งชื่อเนื้อหาโดยอัตโนมัติทำให้การส่งออกเป็นขั้นตอนเดียว
• สร้างสัญลักษณ์สำหรับองค์ประกอบทั่วไปและเนื้อหาภายใน Sketch ซึ่งจะช่วยให้คุณสามารถตั้งค่าส่วนประกอบใน Zeplin
• บันทึกสีลงในจานสีและแบบอักษร“ สีเอกสาร” ของคุณเป็น“ ลักษณะข้อความ” ในไฟล์ Sketch ของคุณ สิ่งเหล่านี้จะปรากฏในคู่มือสไตล์ที่สร้างโดย Zeplin ของคุณ

3. ทำให้สินทรัพย์ที่ส่งออกได้ใน Sketch

• นี่เป็นขั้นตอนที่สำคัญมาก เมื่อเนื้อหาของคุณถูกจัดกลุ่มเป็นสัญลักษณ์แล้วให้เปิดหน้า Symbols ในไฟล์ Sketch ของคุณ
• คลิกที่กลุ่มภายในสัญลักษณ์เช่น“ ic-menu” (ไอคอนโฟลเดอร์)
• เมื่อไฮไลต์กลุ่มแล้วให้ค้นหาการกระทำ“ ทำให้ส่งออกได้” ที่ด้านขวาล่างของ“ ตัวตรวจสอบ” ใน Sketch แล้วคลิกตัวเลือกนี้ ตอนนี้ไอคอนสไลซ์ควรปรากฏถัดจากชื่อกลุ่มของคุณ
• ขั้นตอนนี้จะช่วยให้วิศวกรสามารถส่งออกสินทรัพย์จาก Zeplin ได้โดยตรง

บทบาทของ cfo คืออะไร

4. สร้างโครงการใหม่ใน Zeplin

• เลือกประเภทของโครงการที่คุณกำลังสร้าง โปรดทราบว่าคุณควรมีโครงการแยกกันสำหรับ iOS และ Android แม้ว่าการออกแบบจะเหมือนกันก็ตาม เนื่องจาก Zeplin จะสร้างรหัสที่แตกต่างกันตามประเภทของโครงการ
• เลือกความละเอียดโปรเจ็กต์ที่ตรงกับอาร์ตบอร์ด Sketch ของคุณ (เช่น 1x, 320px)

5. ส่งออก Sketch artboards ไปยัง Zeplin

• จาก Sketch ให้ไฮไลต์อาร์ตบอร์ดทั้งหมดที่คุณต้องการส่งออกไปยัง Zeplin
• ไปที่ ปลั๊กอิน> Zeplin> ส่งออกที่เลือก ... หรือกด ⌃⌘E บนแป้นพิมพ์ของคุณ
• ต่อไปเราจะส่งออก Symbols จาก Sketch เปิดหน้า Symbols ใน Sketch และไฮไลต์อาร์ตบอร์ดทั้งหมด ส่งออกไปยัง Zeplin

6. จัดโครงการใน Zeplin

• ตอนนี้ Sketch artboards ของคุณอยู่ใน Zeplin แล้วเรามาจัดอาร์ตเวิร์คเป็นส่วน ๆ กัน
• จากมุมมองแดชบอร์ดของโครงการของคุณให้เลือกหน้าจอที่คล้ายกันเพื่อจัดกลุ่มเป็นหมวดหมู่ เมื่อไฮไลต์แล้วให้คลิกขวาและเลือก“ ส่วนใหม่จากการเลือก” ทำซ้ำจนกว่าไฟล์ Zeplin ของคุณจะได้รับการจัดระเบียบอย่างถูกต้อง

7. ใช้ประโยชน์จากส่วนประกอบใน Zeplin

บางทีคุณสมบัติที่มีประโยชน์ที่สุดอย่างหนึ่งของ Zeplin ก็คือความสามารถในการจัดระเบียบเนื้อหาลงในไลบรารีคอมโพเนนต์ นี่เป็นสิ่งสำคัญเมื่อการออกแบบของโครงการได้รับการพัฒนาสำหรับหลายแพลตฟอร์มโดยสมาชิกในทีมที่แตกต่างกัน การผสมผสานการออกแบบเป็นสิ่งสำคัญเนื่องจาก Karri Saarinen นักออกแบบ Airbnb ได้กล่าวเอาไว้ การสร้างภาษาภาพ :

ระบบการออกแบบที่เป็นหนึ่งเดียวมีความสำคัญต่อการสร้างให้ดีขึ้นและเร็วขึ้น ดีกว่าเนื่องจากผู้ใช้ของเราเข้าใจประสบการณ์ที่สอดคล้องกันได้ง่ายกว่าและเร็วกว่าเพราะทำให้เรามีภาษากลางในการทำงานด้วย

• เลือกแท็บ“ Styleguide” ที่ตรงกลางด้านบนของ Zeplin (ถัดจาก“ แดชบอร์ด”)
• เมื่ออยู่ในแท็บ 'Styleguide' ให้เลือกแท็บรอง 'ส่วนประกอบ' ที่นี่คุณจะเห็นสัญลักษณ์ทั้งหมดที่ส่งออกจาก Sketch
• จัดระเบียบสิ่งเหล่านี้เป็นส่วนต่างๆเช่น 'ไอคอน' 'รูปภาพ' 'องค์ประกอบทั่วไป' เป็นต้นคุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับแท็บส่วนประกอบของคำแนะนำสไตล์โครงการของคุณใน Zeplin ที่นี่ .

8. ส่งออกคำแนะนำสไตล์จาก Zeplin

• จากมุมมองแดชบอร์ดของโครงการ Zeplin ของคุณให้ค้นหาปุ่ม“ แบ่งปัน” ที่มุมขวาบนของแอปพลิเคชัน
• เลือก“ แบ่งปัน” จากนั้นค้นหา“ ฉาก” ที่ด้านล่างของเมนู เลือก“ เปิดใช้งาน” แล้วเลือก“ เปิด” สิ่งนี้จะสร้างคำแนะนำรูปแบบไดนามิกสำหรับโครงการของคุณ แบ่งปัน URL กับทีมของคุณ

9. ใส่คำอธิบายประกอบการออกแบบของคุณใน Zeplin

• การเพิ่มบันทึกในการออกแบบทำได้ง่ายด้วย Zeplin จากมุมมองโดยละเอียดของหน้าจอให้เลือกไอคอนเพิ่มบันทึกและตรึงโน้ตของคุณไว้ที่ส่วนประกอบ
• คุณสามารถเพิ่มโน้ตได้โดยกดค้างไว้ Cmd ( Ctrl สำหรับผู้ใช้ Windows และ Linux) และคลิกที่ใดก็ได้บนหน้าจอ
• คุณสามารถพูดถึงเพื่อนร่วมทีมคนอื่นด้วย“ @” และพวกเขาจะได้รับการแจ้งเตือน

10. ทำงานร่วมกันแชร์และใช้การควบคุมเวอร์ชัน

• ตอนนี้ไฟล์ Zeplin ของคุณพร้อมที่จะแบ่งปันกับทีมของคุณแล้วเชิญผู้ใช้ผ่านที่อยู่อีเมลของพวกเขาหรือส่ง URL โครงการให้พวกเขา
• อัปเดตไฟล์ Zeplin ของคุณต่อไปโดยส่งออกอาร์ตบอร์ดจาก Sketch
• Zeplin จะควบคุมไฟล์ของคุณโดยอัตโนมัติและคุณสามารถทำงานร่วมกับสมาชิกในทีมต่อไปได้โดยใช้ 'แหล่งที่มาของความจริง' แบบไดนามิกนี้

สรุป

การสร้างขั้นตอนการทำงานแบบไดนามิกจัดระเบียบและทำงานร่วมกันระหว่าง ออกแบบ และทีมพัฒนาเป็นสิ่งสำคัญในการสร้างผลิตภัณฑ์ดิจิทัลที่ยอดเยี่ยม การมีสะพานเวิร์กโฟลว์เช่น Zeplin ช่วยให้นักออกแบบสามารถใส่คำอธิบายประกอบหน้าจอและลดขั้นตอนการแฮนด์ออฟที่มักจะหวั่น ๆ ได้ด้วยคุณสมบัติที่ครบถ้วนและแม่นยำ

ความยืดหยุ่นในการอัปเดตเนื้อหาแบบไดนามิกจากแหล่งศูนย์กลางเดียวเช่นสัญลักษณ์ใน Sketch ที่ส่งออกไปยังส่วนประกอบใน Zeplin ทำให้เกิดความยืดหยุ่นอย่างมาก จากนั้นวิศวกรสามารถส่งออกสินทรัพย์เป็นรหัสดั้งเดิมได้อย่างง่ายดายช่วยประหยัดเวลาและความน่าเบื่อ

ในขณะที่ UX ที่รอบคอบและการออกแบบที่สวยงามสวยงามเป็นรากฐานของผลิตภัณฑ์ที่ประสบความสำเร็จ แต่กระบวนการในการทำให้การออกแบบนั้นอยู่ในมือของผู้ใช้เป็นสิ่งสำคัญ

นักออกแบบที่ต้องการมีประสิทธิภาพและพึ่งพา 'แหล่งแห่งความจริง' แหล่งเดียวควรพิจารณาเวิร์กโฟลว์ Sketch to Zeplin ที่ระบุไว้ข้างต้น พลังเบื้องหลังความสัมพันธ์ของซอฟต์แวร์ที่แข็งแกร่งระหว่างเครื่องมือออกแบบทั้งสองนี้จะช่วยให้นักออกแบบและทีมพัฒนาไปถึงเส้นชัยได้อย่างง่ายดายและพึงพอใจมากขึ้น

•••

อ่านเพิ่มเติมในบล็อกการออกแบบ ApeeScape:

• Adobe XD เทียบกับ Sketch - เครื่องมือ UX ใดที่เหมาะกับคุณ
• วิธีสร้างกรอบการออกแบบที่มีประสิทธิภาพ (รวมถึง Sketch UI Framework ฟรี)
• สิ่งที่คุณอาจไม่รู้เกี่ยวกับวิชาการพิมพ์ใน Sketch
• ทำความคุ้นเคยกับ Sketch Plugin Development
• การสร้างภาพประกอบที่ดัดความคิดด้วย Sketch และ Looper ในเวลาอันรวดเร็ว

ทำความเข้าใจพื้นฐาน

การใช้ Zeplin คืออะไร?

Zeplin เป็นปลั๊กอินและแอปพลิเคชันเดสก์ท็อปแบบสแตนด์อโลนสำหรับ Mac และ Windows ที่ออกแบบมาโดยเฉพาะเพื่อลดช่องว่างระหว่างนักออกแบบและวิศวกร ใช้การออกแบบจาก Sketch, Adobe XD CC, Figma หรือ Adobe Photoshop CC และส่งออกเป็นรูปแบบที่สร้างข้อมูลโค้ดรายละเอียดการออกแบบและเนื้อหา

ข้อมูลโค้ดคืออะไร

ข้อมูลโค้ดในการเขียนโปรแกรมคือโค้ดที่ใช้ซ้ำได้ 'snippet' เป็นคำที่ใช้เขียนโปรแกรมสำหรับส่วนเล็ก ๆ ของซอร์สโค้ดที่ใช้ซ้ำได้รหัสเครื่องหรือข้อความ โดยปกติหน่วยปฏิบัติการเหล่านี้เป็นหน่วยปฏิบัติการที่กำหนดไว้อย่างเป็นทางการเพื่อรวมเข้ากับโมดูลการเขียนโปรแกรมขนาดใหญ่

แอพ Sketch คืออะไร?

Sketch เป็นชุดเครื่องมือการออกแบบที่ใช้เวกเตอร์ที่ครอบคลุมบนแพลตฟอร์ม macOS สำหรับการสร้างการออกแบบที่มีความเที่ยงตรงหลากหลายสำหรับอุปกรณ์ต่างๆ ซึ่งรวมถึงชุดเครื่องมือออกแบบที่ครอบคลุมการจัดการไลบรารีการออกแบบสไตล์ไลบรารีการจัดการสีส่วนประกอบที่ใช้ซ้ำได้การมาสก์และอื่น ๆ อีกมากมาย

ระบบภาษาออกแบบคืออะไร?

ระบบภาษาออกแบบช่วยให้ทีมงานหลากหลายที่ทำงานเกี่ยวกับผลิตภัณฑ์ดิจิทัลที่ซับซ้อนสามารถสื่อสารโดยใช้ภาษาภาพที่เป็นมาตรฐานได้ คำแนะนำสไตล์ UI ถูกถักทอเป็นโครงสร้างของระบบภาษาการออกแบบและทำหน้าที่เป็นเครื่องมือที่วางใจได้สำหรับการทำซ้ำอย่างรวดเร็วและประสบการณ์ดิจิทัลที่สอดคล้องกัน

กระบวนการพัฒนาผลิตภัณฑ์คืออะไร?

กระบวนการพัฒนาผลิตภัณฑ์คือการนำผลิตภัณฑ์หรือบริการจากแนวคิดสู่ตลาด กระบวนการนี้กำหนดขั้นตอนต่างๆโดยทั่วไปประมาณ 7 หรือ 8 รายการซึ่งโดยทั่วไปแล้วผลิตภัณฑ์ใหม่จะต้องดำเนินการโดยเริ่มต้นด้วยแนวคิดและการสร้างแนวคิดและลงท้ายด้วยการทำเชิงพาณิชย์การแนะนำผลิตภัณฑ์สู่ตลาด