การใช้งาน Adobe XD เบื้องต้น

[norisa_dl]

Adobe XD หรือ Adobe Experience Design เป็นโปรแกรมสำหรับออกแบบ UX/UI ทั้งในรูป Website และ Mobile Application อีกทั้งยังสามารถใช้งานและติดตั้งผ่านสมาร์ทโฟนหรือคอมพิวเตอร์ก็ได้

โดยวิธีการใช้เบื้องต้นมีขั้นตอนดังนี้

เทมเพลตที่มีใน Adobe XD

1.png (15.39 KiB) Viewed 940 times

รูปแบบขนาดของเทมเพลต

2.png (41.64 KiB) Viewed 940 times

1.เลือกเทมเพลตที่ต้องการสร้าง โดยแต่ละเทมเพลตสามารถเลือกรูปแบบขนาดหรือจะกำหนดขนาดเองก็ได้

เครื่องมือหลักๆที่ใช้ในการออกแบบ

33.png (3.88 KiB) Viewed 940 times

2.เลือกเครื่องมือที่จะใช้ในการออกแบบชิ้นงาน โดยเครื่องมือหลักๆ จะมีทั้งหมด 7 อย่าง

• select คลิกเพื่อเลือกหรือย้าย

• Regtangle สร้างรูปร่างที่เป็นสี่เหลี่ยม สามารถปรับความมนได้โดยการกดลากเพื่อปรับขนาดตามที่ต้องการ

• Ellipse สร้างรูปร่างที่เป็นสี่เหลี่ยม โดยการกดลากเพื่อปรับขนาดตามที่ต้องการ สามารถปรับความมนได้

• Line สร้างเส้นตรง

• Pen สร้างเส้นโดยที่สามารถปรับเส้น ให้เป็นเส้นโค้ง

• Text คลิกเพื่อพิมพ์ตัวอักษรหรือสร้างข้อความ

• Artboard สร้างแผ่นกระดาษหรือหน้าใหม่

Option เสริมสำหรับตกแต่งให้สวยงาม

4.png (45.09 KiB) Viewed 940 times

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

เมนูโหมดโปรโตไทป์

6.png (5.38 KiB) Viewed 920 times

3.หากต้องการเชื่อมโยงวัตถุไปยังหน้าชิ้นงานอื่นๆ ให้เลือกในโหมด Prototype

การเชื่อมโปรโตไทป์

5.png (22.58 KiB) Viewed 940 times

โดยการคลิกวัตถุ เเล้วลากไปที่หน้าชิ้นงานที่เราต้องการให้ทำการ Action ไปยังหน้านั้น

อย่างไรก็ตาม Adobe XD เป็นเพียงโปรแกรมที่ใช้ในการสร้างmock up เพื่อการนำเสนอหรือเป็นแนวทางในการสร้างแอปพลิเคชันหรือเว็บไซต์เพื่อให้เห็นภาพ เท่านั้น ไม่สามารถสร้างเว็บไซต์หรือแอพพลิเคชันที่ทำงานได้จริงๆ

อ้างอิง
https://en.wikipedia.org/wiki/Adobe_XD
https://www.adobe.in.th/review/1391.html
https://www.adobe.com/products/xd/learn/design/layout/adobe-xd-for-mobile-design.html