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 เสนอแผนบริการฟรี แต่ภายใต้แผนดังกล่าว จำกัด เพียงโครงการเดียว เมื่อออกแบบสำหรับทั้ง iOS และ Android จำเป็นต้องมีสองโครงการแยกกัน ณ จุดนั้นก แผนการชำระเงิน จะจำเป็น
เมื่อเข้าใจขั้นตอนการทำงานกับ Zeplin และ Sketch (หรือแอปอื่น ๆ ที่กล่าวถึงข้างต้น) แล้วขั้นตอนการทำงานจะกลายเป็นเรื่องง่าย อย่างไรก็ตาม Zeplin มีช่วงการเรียนรู้เล็กน้อยที่ต้องใช้เวลาและความสนใจ หากต้องการดูภาพรวมทั่วไปและเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการใช้งานโปรดดูที่ วิดีโอสาธิต Zeplin ด้านล่าง:
1. เริ่มต้นกับ Zeplin
2. เตรียมไฟล์ Sketch ของคุณ
3. ทำให้สินทรัพย์ที่ส่งออกได้ใน Sketch
บทบาทของ cfo คืออะไร
4. สร้างโครงการใหม่ใน Zeplin
5. ส่งออก Sketch artboards ไปยัง Zeplin
6. จัดโครงการใน Zeplin
7. ใช้ประโยชน์จากส่วนประกอบใน Zeplin
บางทีคุณสมบัติที่มีประโยชน์ที่สุดอย่างหนึ่งของ Zeplin ก็คือความสามารถในการจัดระเบียบเนื้อหาลงในไลบรารีคอมโพเนนต์ นี่เป็นสิ่งสำคัญเมื่อการออกแบบของโครงการได้รับการพัฒนาสำหรับหลายแพลตฟอร์มโดยสมาชิกในทีมที่แตกต่างกัน การผสมผสานการออกแบบเป็นสิ่งสำคัญเนื่องจาก Karri Saarinen นักออกแบบ Airbnb ได้กล่าวเอาไว้ การสร้างภาษาภาพ :
ระบบการออกแบบที่เป็นหนึ่งเดียวมีความสำคัญต่อการสร้างให้ดีขึ้นและเร็วขึ้น ดีกว่าเนื่องจากผู้ใช้ของเราเข้าใจประสบการณ์ที่สอดคล้องกันได้ง่ายกว่าและเร็วกว่าเพราะทำให้เรามีภาษากลางในการทำงานด้วย
8. ส่งออกคำแนะนำสไตล์จาก Zeplin
9. ใส่คำอธิบายประกอบการออกแบบของคุณใน Zeplin
10. ทำงานร่วมกันแชร์และใช้การควบคุมเวอร์ชัน
การสร้างขั้นตอนการทำงานแบบไดนามิกจัดระเบียบและทำงานร่วมกันระหว่าง ออกแบบ และทีมพัฒนาเป็นสิ่งสำคัญในการสร้างผลิตภัณฑ์ดิจิทัลที่ยอดเยี่ยม การมีสะพานเวิร์กโฟลว์เช่น Zeplin ช่วยให้นักออกแบบสามารถใส่คำอธิบายประกอบหน้าจอและลดขั้นตอนการแฮนด์ออฟที่มักจะหวั่น ๆ ได้ด้วยคุณสมบัติที่ครบถ้วนและแม่นยำ
ความยืดหยุ่นในการอัปเดตเนื้อหาแบบไดนามิกจากแหล่งศูนย์กลางเดียวเช่นสัญลักษณ์ใน Sketch ที่ส่งออกไปยังส่วนประกอบใน Zeplin ทำให้เกิดความยืดหยุ่นอย่างมาก จากนั้นวิศวกรสามารถส่งออกสินทรัพย์เป็นรหัสดั้งเดิมได้อย่างง่ายดายช่วยประหยัดเวลาและความน่าเบื่อ
ในขณะที่ UX ที่รอบคอบและการออกแบบที่สวยงามสวยงามเป็นรากฐานของผลิตภัณฑ์ที่ประสบความสำเร็จ แต่กระบวนการในการทำให้การออกแบบนั้นอยู่ในมือของผู้ใช้เป็นสิ่งสำคัญ
นักออกแบบที่ต้องการมีประสิทธิภาพและพึ่งพา 'แหล่งแห่งความจริง' แหล่งเดียวควรพิจารณาเวิร์กโฟลว์ Sketch to Zeplin ที่ระบุไว้ข้างต้น พลังเบื้องหลังความสัมพันธ์ของซอฟต์แวร์ที่แข็งแกร่งระหว่างเครื่องมือออกแบบทั้งสองนี้จะช่วยให้นักออกแบบและทีมพัฒนาไปถึงเส้นชัยได้อย่างง่ายดายและพึงพอใจมากขึ้น
•••
Zeplin เป็นปลั๊กอินและแอปพลิเคชันเดสก์ท็อปแบบสแตนด์อโลนสำหรับ Mac และ Windows ที่ออกแบบมาโดยเฉพาะเพื่อลดช่องว่างระหว่างนักออกแบบและวิศวกร ใช้การออกแบบจาก Sketch, Adobe XD CC, Figma หรือ Adobe Photoshop CC และส่งออกเป็นรูปแบบที่สร้างข้อมูลโค้ดรายละเอียดการออกแบบและเนื้อหา
ข้อมูลโค้ดในการเขียนโปรแกรมคือโค้ดที่ใช้ซ้ำได้ 'snippet' เป็นคำที่ใช้เขียนโปรแกรมสำหรับส่วนเล็ก ๆ ของซอร์สโค้ดที่ใช้ซ้ำได้รหัสเครื่องหรือข้อความ โดยปกติหน่วยปฏิบัติการเหล่านี้เป็นหน่วยปฏิบัติการที่กำหนดไว้อย่างเป็นทางการเพื่อรวมเข้ากับโมดูลการเขียนโปรแกรมขนาดใหญ่
Sketch เป็นชุดเครื่องมือการออกแบบที่ใช้เวกเตอร์ที่ครอบคลุมบนแพลตฟอร์ม macOS สำหรับการสร้างการออกแบบที่มีความเที่ยงตรงหลากหลายสำหรับอุปกรณ์ต่างๆ ซึ่งรวมถึงชุดเครื่องมือออกแบบที่ครอบคลุมการจัดการไลบรารีการออกแบบสไตล์ไลบรารีการจัดการสีส่วนประกอบที่ใช้ซ้ำได้การมาสก์และอื่น ๆ อีกมากมาย
ระบบภาษาออกแบบช่วยให้ทีมงานหลากหลายที่ทำงานเกี่ยวกับผลิตภัณฑ์ดิจิทัลที่ซับซ้อนสามารถสื่อสารโดยใช้ภาษาภาพที่เป็นมาตรฐานได้ คำแนะนำสไตล์ UI ถูกถักทอเป็นโครงสร้างของระบบภาษาการออกแบบและทำหน้าที่เป็นเครื่องมือที่วางใจได้สำหรับการทำซ้ำอย่างรวดเร็วและประสบการณ์ดิจิทัลที่สอดคล้องกัน
กระบวนการพัฒนาผลิตภัณฑ์คือการนำผลิตภัณฑ์หรือบริการจากแนวคิดสู่ตลาด กระบวนการนี้กำหนดขั้นตอนต่างๆโดยทั่วไปประมาณ 7 หรือ 8 รายการซึ่งโดยทั่วไปแล้วผลิตภัณฑ์ใหม่จะต้องดำเนินการโดยเริ่มต้นด้วยแนวคิดและการสร้างแนวคิดและลงท้ายด้วยการทำเชิงพาณิชย์การแนะนำผลิตภัณฑ์สู่ตลาด