この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
ในสังคมปัจจุบัน social network ได้กลายมาเป็นส่วนสำคัญในการใช้ชีวิตประจำของคนเรามากขึ้น ดังนั้น บริษัทต่างๆ จึงจำเป็นที่จะต้องมีการออกแบบการใช้งานตัวโปรแกรม เว็บไซต์ หรือแอปพลิเคชัน ต่างๆ เพื่อให้ผู้ใช้งานได้เพลิดเพลิน หรือง่ายต่อการใช้งาน ดังนั้นจึงจำเป็นที่จะต้องมีการ กำหนด หรือ ออกแบบโปรแกรมต่างๆขึ้นมาโดยนักออกแบบ หรือที่เรารู้จักกันในชื่อ UX&UI designer โดยสำหรับบทความในครั้งนี้ จะขอพาผู้อ่านทุกท่านมาทำความรู้จักกับโปรแกรม Adobe Xd โปรแกรมที่มีขั้นตอนในการทำงานที่ไม่ซับซ้อน และสามารถออกแบบได้อย่างหลากหลายกันครับ โดยผมจะขอแบ่งรายละเอียดเนื้อหาออกเป็นดังหัวข้อต่อไปนี้
Adobe Xd คืออะไร ?
Adobe XD หรือชื่อเรียกเต็มๆคือ Adobe Experience Design ถูกสร้างมาเพื่อตอบโจทย์ในการทำงานของ UI (User Interface) Designer ในปัจจุบัน ที่มีเครื่องมือการใช้งานที่ครบครันทั้งการ Design และการทำ Prototyping ต่างๆ สำหรับการออกแบบเว็บไซต์ หรือแอปพลิเคชันบนอุปกรณ์ต่างๆ เป็นต้น
โดยจากที่ได้ทำการทดลองใช้งานมาในระยะเวลาหนึ่ง ผมจะขออนุญาต สรุปการใช้งานตัวโปรแกรม Adobe Xd โดยแบ่งเป็นข้อดี และเสีย ดังต่อไปนี้
ข้อดี
☑ ใช้งานได้ฟรี อ่านรายละเอียดเพิ่มเติม
☑ สามารถเรียนรู้การใช้งานได้ง่าย
☑ มีการอัพเดตตัวโปรแกรมให้ลูกเล่นเพิ่มเติมอย่างต่อเนื่อง
☑ มี Plugins ให้เลือกใช้งานอย่างหลากหลาย
ข้อเสีย
☒ ในปัจจุบัน ลูกเล่นการใช้งาน ของตัวโปรแกรม ยังมีไม่เยอะเท่าที่ควร
การใช้งานเบื้องต้น
ในส่วนหน้าต่างโปรแกรมนั้นค่อนข้างที่จะมีความเรียบง่ายในการใช้งาน โดยหากเราเคยใช้ โปรแกรม Photoshop หรือ Illustrator มาก่อน ก็แทบจะไม่ต้องเรียนรู้การใช้งานใดๆเพิ่มเติมเลยล่ะครับ โดยผมจะขอแบ่งอธิบายวิธีการใช้งานเบื้องต้นออกเป็นดังนี้ครับ
- การกำหนดขนาดของชิ้นงานที่ต้องการ
- การกำหนดเส้น Grid
- การใช้งานเครื่องมือพื้นฐาน
- การกำหนด Layer
- การใช้งาน Prototype เบื้องต้น
- การ Preview หน้าเพจที่เราสร้าง
- การเชื่อมลิงค์เพจใน Prototype
การกำหนดขนาดของชิ้นงานที่ต้องการ
โดย Adobe Xd นั้น ได้มีการกำหนดค่าพื้นฐานขนาดชิ้นงานให้เหมาะสมกับการใช้งานต่างๆ เช่น ขนาดหน้าจอมือถือ เว็บไซต์ หรือขนาดหน้าเพจ Facebook หรือ Instagram ให้ผู้ใช้งานเลือกใช้งานได้ในเบื้องต้น และผู้ใช้งานยังสามารถกำหนดขนาดตามที่ต้องการได้เองอีกด้วย
การกำหนดเส้น Grid
อีก1สิ่งที่จำเป็นสำหรับการออกแบบ คงหนีไม่พ้นการกำหนดเส้น Grid นั่นเอง โดยตัวโปรแกรม Adobe Xd เราสามารถกำหนดเส้น Grid ได้ง่ายๆ 2 วิธี คือ
-การกำหนดเส้น Grid โดยรวม ซึ่งสามารถทำได้ โดยการไปที่ หน้า Artboards ของเรา จากนั้นให้เราไปที่หัวข้อ Grid ในแถบเครื่องมือทางด้านขวา และคลิ๊กเครื่องหมายถูกในช่อง Layout
-การกำหนดเส้น Grid ตามขนาดที่ต้องการ โดยสามารถทำได้โดยการคลิ๊กที่มุมซ้าย หรือ บน เพื่อทำการดึงเส้น Grid ออกมา และปรับขนาดให้พอดีกับความต้องการในการใช้งานของเรานั่นเอง
การใช้งานเครื่องมือพื้นฐาน
อย่างที่กล่าวไปในด้านบนว่า โปรแกรม Adobe Xd นั้น มีการใช้งานที่ค่อนข้างใกล้เคียงกับโปรแกรม Photoshop หรือ Illustrator ดังนั้น เครื่องมือพื้นฐานที่ทางโปรแกรมมีให้ในปัจจุบัน จะมีเครื่องมือคำสั่งการสร้าง วงกลม สีเหลี่ยม หรือสร้าง Text ต่างๆ โดยเราสามารถปรับแต่งรูปทรงต่างๆได้ นั่นจึงทำให้เพียงพอต่อการใช้งาน
การกำหนด Layer
หลายๆคนที่เคยทำงานทางด้านการออกแบบมา คงคุ้นเคยกับการแยกหรือรวม Layer กันมาบ้าง ซึ่งประโยชน์ของการที่เราจัดเรียง Layer ให้เป็นระเบียบนั้นคือ เราจะสามารถค้นหาหรือแก้ไขงานได้อย่างง่ายดาย ซึ่ง ทางด้าน Xd ทุกๆอย่างที่เราแต่งเติมเข้าไปในหน้าเพจ จะถูกแบ่งออกเป็น Layer เหมือนกันโปรแกรม Design อื่นๆ ซึ่งสามารถทำให้เราระบุจุดที่ต้องการแก้ไขได้อย่างง่ายดาย
การ Preview หน้าเพจที่เราสร้าง
ในการทำเว็บไซต์นั้น อีกสิ่งหนึ่งที่สำคัญเลยก็คือ การส่งผลงานตัวอย่างหรือดราฟต์ผลงานไปให้ลูกค้าดูตัวอย่าง เป็นหนึ่งในขั้นตอนการทำงาน เพื่อตรวจเช็คว่าตัวโปรดักต์ที่เรา ออกแบบมานั้น ตรงตามคอนเซปต์ลูกค้าได้ว่างไว้มั้ย เพื่อปรับแก้ก่อนจะนำดราฟต์ที่ได้ ส่งต่อไปให้ทีมผู้พัฒนา (Developer) นำไปพัฒนาต่อ ซึ่งในตัวโปรแกรม Adobe Xd นั้น เราสามารถเรียกดูหน้า Preview ได้โดยการไปที่คำสั่ง Preview ทางด้านขวาบนของหน้าจอ โดยการ Preview นั้นสามารถ Preview ได้ทั้ง2แบบ ไม่ว่าจะเป็น Desktop หรือ Mobile
การเชื่อมลิงค์เพจใน Prototype
ถัดจากหน้า Preview ที่ได้อธิบายไว้ในหัวข้อด้านบนแล้ว ในส่วนของตัว Adobe Xd นั้นยังสามารถเชื่อมลิงค์เพจ เข้ากับหน้าต่างๆที่เราต้องการได้ โดยการทำนั้นไม่ยุ่งยากซับซ้อนเลย เพียงแค่เราคลิ๊กที่ Object ที่เราต้องการเชื่อมเพจ หลังจากนั้น Object จะปรากฎลูกศรออกมา โดยที่เรา มีหน้าที่ลากลูกศรให้ไปเชื่อมกับหน้าที่เราต้องการ ซึ่งในส่วนของ Prototype นอกจากจะสามารถเชื่อมลิงค์เพจได้แล้ว ยังสามารถเพิ่มเติมลูกเล่นต่างๆ ให้กับเว็บไซต์ที่เราสร้างได้อีกมากมาย ไม่ว่าจะเป็นในส่วนของการทำ Animation ต่างๆ โดยในส่วนนี้ เนื่องจากทางผู้เขียนเองก็กำลังศึกษาวิธีการใช้งานอยู่ ดังนั้นจึงจะขอมาอธิบายเพิ่มเติมในบทความถัดไปนะครับ
ก็เรียกได้ว่า โปรแกรม Adobe Xd นั้น ถือเป็นโปรแกรมที่มีความสะดวกสบายในการใช้งาน และมีลูกเล่นในการใช้งานเพียงพอต่อการทำงาน และสามารถช่วยให้การทำงานระหว่าง UX และ UI มีประสิทธิภาพได้มากขึ้นเป็นอย่างมาก สำหรับบทความในครั้งนี้ทางผู้เขียนก็หวังเป็นอย่างยิ่งว่า จะทำให้ผู้อ่านมีความรู้เพิ่มขึ้นเกี่ยวกับการใช้งาน Adobe Xd และหวังเป็นอย่างยิ่งว่าผู้อ่านจะรู้สึกสนใจ และลองหยิบจับโปรแกรมนี้ขึ้นมาฝึกใช้งาน และหากผู้เขียนมีความรู้เพิ่มเติมหรือมีลูกเล่นอะไรใหม่ๆเกี่ยวกับการใช้งาน Adobe Xd จะมาเล่าสู่กันฟังใหม่ ในบทความครั้งต่อๆไปครับ
6
