Sketch ซึ่งเป็นเครื่องมือออกแบบที่มีชื่อเสียงและมีการเติบโตอย่างมากนับตั้งแต่เปิดตัวในปี 2010 ในปี 2559 Adobe ได้แนะนำ XD ให้เป็นคู่แข่งที่น่ากลัว หลังจากพัฒนามาเกือบสามปี Adobe XD เสนอความท้าทายเพียงพอสำหรับนักออกแบบในการพิจารณาการเปลี่ยนแปลงหรือไม่

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

เครื่องมือออกแบบที่ได้รับการยอมรับอย่างกว้างขวางสองอย่างที่นักออกแบบ UX ต้องพึ่งพาคือ Adobe XD และ ร่าง .

Sketch กลายเป็นมาตรฐานโดยพฤตินัยสำหรับนักออกแบบดิจิทัลส่วนใหญ่เนื่องจากอินเทอร์เฟซที่เรียบง่ายปลั๊กอินจำนวนมากฟังก์ชันชุดเครื่องมือที่สมบูรณ์และการอัปเดตบ่อยครั้ง

ในขณะที่ Sketch กลายเป็นเครื่องมือที่เลือกใช้สำหรับ นักออกแบบ UX Adobe ซึ่งเป็นที่รู้จักกันมานานในเรื่องซอฟต์แวร์การออกแบบที่ได้รับรางวัลและความผูกพันอย่างลึกซึ้งกับชุมชนการออกแบบไม่มีตัวเลือกที่คล้ายกัน พวกเขามี Photoshop, Illustrator และ Fireworks แต่นักออกแบบไม่มีความกระหายที่จะใช้เครื่องมือสามอย่างเพื่อทำงานให้สำเร็จซึ่ง Sketch มีให้ในแอปพลิเคชันเดียว

ในปี 2559 Adobe เปิดตัว XD (Experience Design) คู่แข่งตัวฉกาจของ Sketch พวกเขายังมีเรื่องให้ทำอีกมาก ตอนที่ Sketch อายุหกขวบมีฐานผู้ใช้ที่กว้างขวางและระบบนิเวศทั้งหมดของปลั๊กอินทำให้เป็นเครื่องมือออกแบบที่มีประสิทธิภาพ การแข่งขันทวีความรุนแรงขึ้นในอีก 2 ปีข้างหน้าและ Adobe XD เติบโตขึ้นจากคู่แข่งที่ว่องไวไปสู่เครื่องมือออกแบบที่ได้รับการยกย่องซึ่งได้รับชัยชนะเหนือนักออกแบบมืออาชีพหลายคน

บล็อกการออกแบบ ApeeScape เผยแพร่บทความเกี่ยวกับ Sketch vs Adobe XD ในปี 2560 เมื่อยังอยู่ในรุ่นเบต้า สองปีต่อมา Adobe XD ได้เห็นการแก้ไขหลายครั้งโดยมีวัตถุประสงค์ที่ชัดเจน: นำเสนอทุกสิ่งที่นักออกแบบ UX ต้องการและด้วยประสิทธิภาพที่ยอดเยี่ยม

ถึงเวลาที่นักออกแบบ UX จะเปลี่ยนจาก Sketch เป็น Adobe XD แล้วหรือยัง?

Adobe XD กับ Sketch

มาดูกันว่า Adobe XD เปรียบเทียบกับ Sketch อย่างไร เราจะเปรียบเทียบคุณสมบัติดังต่อไปนี้:

อาร์เรย์หลามของอินสแตนซ์คลาส

• หน้าจอผู้ใช้
• ทำซ้ำตาราง
• สัญลักษณ์และแผงเนื้อหา
• เครื่องมือออกแบบที่ตอบสนอง
• Add-Ons และ Plugins
• การสร้างต้นแบบด้วย Auto-Animate
• การแบ่งปันและความคิดเห็น
• การทำงานกับนักพัฒนา
• การควบคุมเวอร์ชันและการทำงานร่วมกันแบบเรียลไทม์

หน้าจอผู้ใช้

นักออกแบบที่คุ้นเคยกับเครื่องมืออย่าง Photoshop ไม่น่าจะมีปัญหาในการเรียนรู้ Adobe XD หรือ Sketch เนื่องจากพวกเขาแชร์ UI ที่คล้ายกัน

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

Sketch เทียบกับ XD : Sketch มีขอบสำหรับ Toolbar ที่เป็นประโยชน์

ทำซ้ำตาราง

คุณสมบัติเด่นใน Adobe XD คือกริดซ้ำ นี่เป็นเครื่องมือที่มีประโยชน์ที่ช่วยให้สร้างรายการที่ปรับเปลี่ยนได้และหน้าจอแบบกริด แม้ว่า Sketch ไม่มีคุณสมบัตินี้ แต่ก็สามารถจำลองด้วยปลั๊กอินได้มากหรือน้อย

Sketch เทียบกับ XD : Adobe XD มีขอบด้วยกริดซ้ำซึ่งมาจากซอฟต์แวร์

สัญลักษณ์และแผงเนื้อหา

สัญลักษณ์เป็นคุณลักษณะแรก ๆ ที่มีส่วนสำคัญต่อความสำเร็จของ Sketch สัญลักษณ์คือ Sketch เช่น CSS (Cascading Style Sheets) คือการออกแบบเว็บไซต์ ช่วยให้นักออกแบบสามารถใช้ซ้ำและแก้ไขเนื้อหาจำนวนมากได้อย่างง่ายดายซึ่งช่วยประหยัดเวลาได้มากช่วยสร้างระบบการออกแบบสำเร็จรูปและให้ความสอดคล้องกันในทุกหน้าจอ

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

Sketch เทียบกับ XD : Adobe XD มีขอบเล็กน้อยเนื่องจากองค์ประกอบ UI ที่รวมกันภายในแผงเนื้อหา

เครื่องมือออกแบบที่ตอบสนอง

Adobe XD มีชุดเครื่องมือออกแบบที่ตอบสนองได้ดี คุณสมบัติที่โดดเด่นหนึ่งเดียวตอบสนอง แฟชั่นอัตโนมัติ คาดเดาว่าหน้าจอควรตอบสนองต่อขนาดอุปกรณ์ที่แตกต่างกันอย่างไร

นี่เป็นคุณสมบัติที่มีประโยชน์อย่างเหลือเชื่อซึ่งสามารถเปิดและปิดได้โดยใช้ปุ่มเลื่อนแบบธรรมดา หากโหมดอัตโนมัติไม่เป็นไปตามลักษณะการทำงานที่คาดไว้นักออกแบบสามารถเปลี่ยนคุณสมบัติการตอบสนองด้วยตนเอง

Sketch ไม่มีคุณลักษณะนี้ในตัว แต่มีปลั๊กอินมากมายเช่น อนิมาทูล ที่ทำงานได้ดี

วิธีการทดสอบการใช้งาน

Sketch กับ XD: Adobe XD มีข้อได้เปรียบที่นี่ พวกเขาเสนอวิธีในตัวเพื่อดูเอฟเฟกต์ตอบสนองต่อองค์ประกอบ UI

Add-Ons & Plugins

ระบบนิเวศของปลั๊กอิน ภายใน Sketch เป็นหนึ่งในคุณสมบัติที่ยอดเยี่ยมที่สุด มีปลั๊กอินหลายร้อยรายการที่ขยายการทำงานของ Sketch และอนุญาตให้นักออกแบบใช้คุณสมบัติขั้นสูงในขณะที่อยู่ในระบบนิเวศของ Sketch

ส่วนเสริมเป็น Adobe XD เทียบเท่ากับปลั๊กอิน Adobe เริ่มต้นระบบนิเวศส่วนเสริมในปี 2018 ดังนั้นจึงไม่แข็งแกร่งเท่ากับ Sketch Adobe ไม่ต้องกังวลเพราะเป้าหมายของพวกเขาคือการพยายามลดความจำเป็นในการใช้โปรแกรมเสริมและมุ่งเน้นไปที่การสร้างคุณลักษณะที่มีอยู่ในซอฟต์แวร์

Sketch กับ XD: Sketch มีข้อได้เปรียบด้วยไลบรารีปลั๊กอินที่กว้างขวาง

การสร้างต้นแบบด้วย Auto-Animate

Adobe เพิ่งอัปเดต XD ด้วยคุณสมบัติที่มีประโยชน์อย่างเหลือเชื่อสำหรับนักออกแบบ UX: รถยนต์เคลื่อนไหว . ทำงานโดยทำการเปลี่ยนอย่างชาญฉลาดและราบรื่นระหว่างองค์ประกอบของหน้าจอต่างๆ ผลลัพธ์เป็นที่น่าประทับใจทำให้การสร้างต้นแบบเป็นประสบการณ์ที่น่ายินดีที่จะดึงดูดผู้มีโอกาสเป็นลูกค้า Sketch ไม่มีฟังก์ชันนี้แม้ว่าจะมีปลั๊กอินก็ตาม

คุณลักษณะการสร้างต้นแบบที่ยอดเยี่ยมอีกอย่างที่ Adobe นำมาใช้คือการรองรับการโต้ตอบระดับเล็กเช่นการดึงแผงจากขอบของหน้าจอหรือทำให้แป้นพิมพ์ปรากฏขึ้น Adobe XD ยังรองรับ UI ที่ทำงานด้วยเสียง (เช่น Alexa หรือ Google Home)

Sketch กับ XD: Adobe XD มีข้อได้เปรียบที่นี่ด้วยคุณสมบัติการเคลื่อนไหวอัตโนมัติที่ช่วยประหยัดเวลาและรองรับการโต้ตอบขนาดเล็กที่ Sketch ขาดไป

การแบ่งปันและแสดงความคิดเห็น

นักออกแบบมักมีส่วนร่วมกับสมาชิกในทีมนักพัฒนาและผู้มีส่วนได้ส่วนเสียอื่น ๆ ความสามารถในการแบ่งปันการออกแบบและรับข้อเสนอแนะเป็นส่วนสำคัญของกระบวนการออกแบบ ด้วยเหตุนี้ Adobe XD จึงมีฟังก์ชันในตัวสำหรับการจำลองและต้นแบบที่จะแชร์ทางออนไลน์เพื่อให้ทุกคนสามารถเพิ่มความคิดเห็นทั่วไปหรือชี้ไปที่ตำแหน่งเฉพาะบนเค้าโครงและแสดงความคิดเห็น

คุณลักษณะเหล่านี้เมื่อรวมกับโหมดการสร้างต้นแบบแบบไดนามิกของ Adobe XD แล้วยังสามารถทดสอบบนโทรศัพท์มือถือด้วยแอป Adobe XD ที่มาพร้อมเครื่องหรือแม้กระทั่งบันทึกไว้สำหรับการสาธิตแบบไม่โต้ตอบ

Sketch สามารถใช้ประโยชน์จากการแบ่งปันและแสดงความคิดเห็นโดยใช้เครื่องมือการทำงานร่วมกันเช่น เซปลิน หรือการผสานรวมกับเครื่องมือของบุคคลที่สามเช่น Invision

Sketch กับ XD: Adobe มีข้อได้เปรียบเล็กน้อยที่นี่ด้วยการแบ่งปันและแสดงความคิดเห็นออนไลน์ในตัว

รายละเอียดการออกแบบ

ในระหว่างโครงการออกแบบนักออกแบบ UX มักจะต้องแชร์รายละเอียดการออกแบบกับนักพัฒนา Adobe รวมฟังก์ชันนี้ไว้ใน XD ในขณะที่ผู้ใช้ Sketch จะต้องใช้การผสานรวมเช่น เซปลิน หรือ InVision .

Sketch กับ XD: Adobe มีความได้เปรียบเหนือ Sketch เนื่องจากข้อกำหนดการออกแบบมีอยู่แล้วและไม่จำเป็นต้องมีการผสานรวมของบุคคลที่สาม

การควบคุมเวอร์ชันและการทำงานร่วมกันแบบเรียลไทม์

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

Adobe กล่าวถึงการทำงานร่วมกันด้วยการเปิดตัว เอกสารบนคลาวด์ . สิ่งนี้ทำให้ทุกคนในทีมรวมถึงนักพัฒนาเป็นศูนย์กลางในการทำงาน ตาม Adobe ขั้นตอนต่อไปสำหรับคุณลักษณะเอกสารระบบคลาวด์คือการควบคุมเวอร์ชัน

Sketch นำเสนอการควบคุมเวอร์ชันและการทำงานร่วมกันแบบเรียลไทม์ด้วยปลั๊กอิน แต่คุณลักษณะเหล่านี้ไม่ได้รวมอยู่ในผลิตภัณฑ์

Sketch กับ XD: Sketch ชนะอันนี้ พวกเขามีการควบคุมเวอร์ชันแม้ว่าจะมีปลั๊กอิน ขณะนี้ยังไม่มีให้บริการใน XD

ใครจ่าย uber หรือ lyft มากกว่า 2016

สรุปคุณสมบัติ: Adobe XD เทียบกับ Sketch

มีความเหมือนและความแตกต่างระหว่าง Adobe XD และ Sketch เวอร์ชันปัจจุบัน นี่คือการเปรียบเทียบของแต่ละผลิตภัณฑ์:

คุณสมบัติ	Adobe XD	ร่าง
กราฟิกแบบเวกเตอร์	ใช่ (และรวม Adobe Illustrator ในการสมัคร CC)	ใช่
การแก้ไขภาพ	ไม่ (แต่รวม Adobe Photoshop ในการสมัคร CC)	ใช่การแก้ไขขั้นพื้นฐาน
น้ำหนักเบา	ใช่	ไม่
การสร้างต้นแบบ	ใช่รวมถึงการสร้างภาพเคลื่อนไหวอัตโนมัติและการสร้างต้นแบบเสียง	ใช่
การส่งออกสินทรัพย์	ใช่	ใช่
Handoff กับผู้ตรวจสอบออนไลน์	ใช่	ไม่ (แต่ใช้ได้กับปลั๊กอินของบุคคลที่สาม)
สัญลักษณ์และรูปแบบ	ใช่	ใช่
ทำซ้ำเส้นตาราง	ใช่	ไม่ (แต่ใช้ได้กับปลั๊กอินของบุคคลที่สาม)
คุณสมบัติ	Adobe XD	ร่าง
เค้าโครงตาราง	ใช่	ใช่
เครื่องมือออกแบบที่ตอบสนอง	ใช่	ไม่ (แต่ใช้ได้กับปลั๊กอินของบุคคลที่สาม)
การทำงานร่วมกันแบบเรียลไทม์	ไม่ (ประกาศเป็นฟีเจอร์ในอนาคต)	ไม่ (ใช้ได้กับปลั๊กอินของบุคคลที่สาม)
การกำหนดเวอร์ชัน	ไม่ (ประกาศเป็นฟีเจอร์ในอนาคต)	ไม่ (ใช้ได้กับปลั๊กอินของบุคคลที่สาม)
ปลั๊กอิน / โปรแกรมเสริม	ใช่	ใช่ด้วยความหลากหลายที่เหนือกว่า
เวอร์ชัน MacOS	ใช่	ใช่
เวอร์ชัน Windows	ใช่ (Windows 10)	ไม่
ราคาและใบอนุญาต	แผนเริ่มต้นใช้งานได้ฟรีพร้อมคุณสมบัติทั้งหมดและต้นแบบที่แชร์ที่ใช้งานอยู่ รุ่นพรีเมี่ยมคือ USD $ 9.99 / เดือนพร้อมต้นแบบที่แชร์ได้ไม่ จำกัด การสมัคร CC พร้อมแอป Adobe อื่น ๆ ทั้งหมดคือ USD $ 52.99 / เดือน	99 ดอลลาร์สหรัฐสำหรับการอัปเดตหนึ่งปี แต่คุณสามารถใช้ต่อได้หลังจากนั้นโดยไม่ต้องอัปเดต

ถึงเวลาเปลี่ยนเครื่องมือออกแบบ UX แล้วหรือยัง?

การเปรียบเทียบคุณสมบัติ Sketch และ XD อยู่ใกล้ Sketch ขาดคุณสมบัติบางอย่างเช่นการเคลื่อนไหวอัตโนมัติการออกแบบที่ตอบสนองอัตโนมัติและตารางการทำซ้ำที่เป็นของ XD ทั้งหมด

สิ่งเดียวที่สำคัญที่ Adobe XD ยังขาดคือการควบคุมเวอร์ชันซึ่ง Sketch ต้องขอบคุณปลั๊กอิน คาดว่าสิ่งนี้จะมาถึงใน XD ทันทีที่ Adobe ยังคงพัฒนาชุดคุณลักษณะเอกสารบนคลาวด์

การเปลี่ยนจาก Sketch (และ Photoshop หรือ Illustrator) เป็น XD นั้นง่ายกว่าวิธีอื่นเนื่องจาก XD สามารถเปิดไฟล์ Sketch ด้วยความเที่ยงตรงที่ยอดเยี่ยม คุณอาจพบปัญหาบางอย่างหากคุณใช้ปลั๊กอิน Sketch เท่านั้นเช่น Abstract หรือ InVision Craft

ในบางสถานการณ์มีตัวเลือกที่ชัดเจน: สำหรับผู้ใช้ Windows Sketch ไม่พร้อมใช้งานและสำหรับสมาชิก Adobe Creative Cloud XD จะรวมไว้ให้ฟรีพร้อมกับต้นแบบที่แชร์ไม่ จำกัด นั่นไม่ได้เกิดขึ้นโดยบังเอิญ

แต่ Sketch ก็สู้กลับ บริษัท เพิ่งปิดการระดมทุน 20 ล้านดอลลาร์ และสัญญาคุณสมบัติที่สำคัญเช่นการทำงานร่วมกันเป็นทีมแฮนด์ออฟแบบเนทีฟและแอพเวอร์ชันเว็บในปี 2019

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

•••

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

• Adobe XD เทียบกับ Sketch - เครื่องมือ UX ใดที่เหมาะกับคุณ
• Atomic Design and Sketch - คำแนะนำในการปรับปรุงเวิร์กโฟลว์
• ออกแบบด้วยความแม่นยำ - รีวิว Adobe XD
• สิ่งที่คุณอาจไม่รู้เกี่ยวกับวิชาการพิมพ์ใน Sketch
• ทำความคุ้นเคยกับ Sketch Plugin Development

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

นักออกแบบ UX ใช้เครื่องมืออะไร

นักออกแบบ UX จะใช้เครื่องมือสำหรับการวิจัยผู้ใช้ Wireframing การจำลองและการสร้างต้นแบบขึ้นอยู่กับเป้าหมายและขั้นตอนของกระบวนการออกแบบ เครื่องมือยอดนิยม ได้แก่ Sketch, Adobe XD, InVision, Zeplin และ Figma

ซอฟต์แวร์ออกแบบ UX คืออะไร?

ซอฟต์แวร์ออกแบบ UX ช่วยให้นักออกแบบ UX สามารถสื่อสารโครงร่างต้นแบบและออกแบบจำลองได้ ซอฟต์แวร์ออกแบบ UX ช่วยอำนวยความสะดวกในการสร้างระบบการออกแบบมากขึ้น

Sketch คืออะไร?

Sketch เปิดตัวในปี 2010 เป็นชุดเครื่องมือออกแบบกราฟิกเวกเตอร์สำหรับนักออกแบบ UX และ UI Sketch เป็นแอปพลิเคชันสำหรับ Mac เท่านั้นและช่วยให้นักออกแบบสร้างโครงร่างภาพจำลองและต้นแบบได้ นอกจากนี้ยังมีไลบรารีปลั๊กอินมากมายที่ขยายการทำงานของแอปพลิเคชัน

Adobe XD คืออะไร

Adobe XD ซึ่งเปิดตัวในปี 2560 เป็นชุดเครื่องมือการออกแบบกราฟิกเวกเตอร์รุ่นใหม่สำหรับนักออกแบบ UX และ UI XD ทำงานบน Mac, Windows และแพลตฟอร์ม Android ใช้สำหรับ wireframing, mockups และ click-through prototyping XD ยังมีไลบรารีส่วนเสริมที่เพิ่มขึ้นสำหรับความสามารถเพิ่มเติม