portaldacalheta.pt
  • หลัก
  • การจัดการวิศวกรรม
  • Kpi และ Analytics
  • เทคโนโลยี
  • ว่องไว
เครื่องมือและบทช่วยสอน

Zeplin Sketch Plugin - สะพานเวิร์กโฟลว์ระหว่างการออกแบบและวิศวกรรม



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

Sketch Handoff: ซอฟต์แวร์ Zeplin และ Sketch ทำงานร่วมกัน



ทำไมต้อง Zeplin?

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



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



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

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



Zeplin for Sketch ไม่จำเป็นต้องมีข้อกำหนดการออกแบบ

ข้อกำหนดการออกแบบแบบดั้งเดิมหรือที่เรียกว่า“ redlining” ก่อนเครื่องมือเช่น Zeplin

ในบทความที่ผ่านมาของเรา 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 ของคุณ

Sketch เพิ่มสีของเอกสารเพื่อแสดงใน Zeplin

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

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

ร่างสินทรัพย์ที่ส่งออกได้ก่อนส่งออกไปยัง Zeplin

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

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

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

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

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

ภาพร่างอาร์ตบอร์ดถูกไฮไลต์และพร้อมที่จะส่งออกไปยัง Zeplin ซึ่งคุณสามารถจัดการเนื้อหา Sketch ได้

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

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

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

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

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

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

Zeplin for Sketch - ส่วนประกอบใน Zeplin

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

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

Sketch and Zeplin: แชร์สไตล์โดยใช้ Zeplin Scene

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 รายการซึ่งโดยทั่วไปแล้วผลิตภัณฑ์ใหม่จะต้องดำเนินการโดยเริ่มต้นด้วยแนวคิดและการสร้างแนวคิดและลงท้ายด้วยการทำเชิงพาณิชย์การแนะนำผลิตภัณฑ์สู่ตลาด

Unity with MVC: วิธียกระดับการพัฒนาเกมของคุณ

แบ็คเอนด์

Unity with MVC: วิธียกระดับการพัฒนาเกมของคุณ
SQL Server 2016 เข้ารหัสเสมอ: ใช้งานง่ายยากต่อการถอดรหัส

SQL Server 2016 เข้ารหัสเสมอ: ใช้งานง่ายยากต่อการถอดรหัส

แบ็คเอนด์

โพสต์ยอดนิยม
Nvidia Shield - สิ่งที่แตกต่างบนคอนโซลเกม Android
Nvidia Shield - สิ่งที่แตกต่างบนคอนโซลเกม Android
แผ่นโกงการจัดการโครงการ
แผ่นโกงการจัดการโครงการ
เริ่มต้นใช้งาน Microservices: บทช่วยสอน Dropwizard
เริ่มต้นใช้งาน Microservices: บทช่วยสอน Dropwizard
การแยกการเรียกเก็บเงิน: เรื่องของการเพิ่มประสิทธิภาพ API ภายใน GraphQL
การแยกการเรียกเก็บเงิน: เรื่องของการเพิ่มประสิทธิภาพ API ภายใน GraphQL
กรณีศึกษา: การใช้ ApeeScape เพื่อม้วนปลาใหญ่
กรณีศึกษา: การใช้ ApeeScape เพื่อม้วนปลาใหญ่
 
การประมาณต้นทุนซอฟต์แวร์ในการจัดการโครงการแบบ Agile
การประมาณต้นทุนซอฟต์แวร์ในการจัดการโครงการแบบ Agile
แชทล่ม - เมื่อ Chatbot ล้มเหลว
แชทล่ม - เมื่อ Chatbot ล้มเหลว
ที่ปรึกษาการระดมทุนกับนายหน้า - ตัวแทนจำหน่าย
ที่ปรึกษาการระดมทุนกับนายหน้า - ตัวแทนจำหน่าย
ทำให้ Web Front-end เชื่อถือได้ด้วย Elm
ทำให้ Web Front-end เชื่อถือได้ด้วย Elm
คู่มือสำหรับนักลงทุนเกี่ยวกับน้ำมันปาล์ม
คู่มือสำหรับนักลงทุนเกี่ยวกับน้ำมันปาล์ม
โพสต์ยอดนิยม
  • ไฟล์ .cpp คืออะไร
  • บริษัทตัดสินใจว่าจะลงทุนเท่าไรโดยเปรียบเทียบอัตราผลตอบแทนจากโครงการกับ
  • หมายเลขบัตรเครดิตที่ใช้งานได้ฟรี 2017
  • วิธีที่มีประสิทธิภาพและง่ายที่สุดวิธีหนึ่งสำหรับบริษัทในการเปลี่ยนภาพลักษณ์คือ:
  • ข้อความใดต่อไปนี้ไม่ถูกต้องเกี่ยวกับการใช้อักษรตัวพิมพ์ใหญ่ของห้างหุ้นส่วนสามัญ
  • การรับรอง aws ยากแค่ไหน
หมวดหมู่
  • การจัดการวิศวกรรม
  • Kpi และ Analytics
  • เทคโนโลยี
  • ว่องไว
  • © 2022 | สงวนลิขสิทธิ์

    portaldacalheta.pt