การออกแบบหน้าจอการใช้งานของระบบโดยใช้ Adobe XD

[Aoranuch Phupaloy]

การออกแบบหน้าจอการใช้งานของระบบโดยใช้ Adobe XD
Adobe XD (Adobe Experience Design ) เป็นโปรแกรมที่ทำมาเพื่อช่วยออกแบบ เหมาะกับการออกแบบเว็บไซต์และแอปพลิเคชั่น
การใช้โปรแกรม adobe xd มี 2 แบบ คือ
-ไม่ฟรี
-ฟรี แบบฟรีจะถูกจำกัดโปรเจคงาน โดยจะสามารถทำได้1งาน แต่สามารถลบโปรเจคเดิมแล้วสร้างโปรเจคใหม่ได้ และ Save งานได้บน Adobe Cloud เท่านั้น
ข้อดีของ adobe xd
-ใช้งานง่าย
-ทำงานได้รวดเร็ว
-ส่งงานให้บุคคลอื่นดูได้แบบเรียลไทม์
-สามารถแบ่งงานกับทีมทำไปพร้อมๆกันได้ โดยแชร์ไปบน Adobe Cloud
-สามารถเชื่อมโปรโตไทป์ทดสอบได้โดยไม่ต้องโค้ด
ข้อเสีย adobe xd
- มีลูกเล่นไม่เยอะ
- เครื่องมือการใช้งานน้อย
- ชอบบัคเวลาแชร์งานทำเป็นทีม
แนะนำวิธีการใช้adobe xd ออกแบบโมบายแอปพลิเคชั่น
1. เลือกรูปแบบหน้าจอที่เราต้อง
1.1 กรณีที่เรามีโปรเจคเดิมอยู่แล้ว เราสามารถกดเข้าไปแก้ไขหรือเข้าไปดูได้เลย

1.2 ปรับแต่งสีและใส่ลูกเล่นต่างๆได้เลย โดยกดเลือกโทนสี ปรับขนาดตัวอักษรตรงแถบขวามือ

1.3 สามารถตกแต่งรูปภาพ โดยการดึงรูปภาพลงเลย และรับขนาดตามความต้องการ

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

1.5 สามารถรันดูงานได้ตลอดเวลาตรง ปุ่มสามเหลี่ยมด้านบน

สำหรับการออกแบบโมบายแอปพลิเคชั่นก็มีประมาณนี้ค่ะ

[Aoranuch Phupaloy]

แก้ไข
ลิงค์ เชื่อมข้อมูล
คำอธิบายภาพ
รูปแบบภาพ ไม่เกิน800
เพิ่มบทสรุป

[Aoranuch Phupaloy]

Adobe XD เป็นโปรแกรมที่ใช้ใน การออกแบบ หน้าจอของระบบ โดยมักจะนำมาใช้ออกแบบ moblie และ Web
สามารถไปดาวน์โหลดได้ที่ https://www.adobe.com/products/xd.html
แนะนำวิธีการใช้adobe xd ออกแบบโมบายแอปพลิเคชั่น
1. เลือก Template ที่เป็นโมบาย (รูปแบบที่เป็นมือถือ)

เลือกtemplate.png (29.4 KiB) Viewed 2334 times

เราสามารถเลือกรูปแบบ Template เพิ่มเติมได้ที่ Costom Size

2. ปรับแต่งสี, ตัวอักษร, และใส่รูปทรงต่างๆ

ปรับแต่งสีและใส่ลูกเล่น.PNG (42.84 KiB) Viewed 2352 times

ปรับแต่งสีและใส่ลูกเล่นต่างๆได้เลย โดยกดเลือกโทนสี ปรับขนาดตัวอักษรตรงแถบขวามือ

3. ตกแต่งรูปภาพ

ใส่รูปภาพ.PNG (141.29 KiB) Viewed 2352 times

ตกแต่งรูปภาพ โดย การดึงรูปภาพลงในตัว Template และปรับขนาดตามความต้องการ
4. เชื่อมตัวโปรโตไทป์

เชื่อมโปรโตไทป์.PNG (133.13 KiB) Viewed 2352 times

ตรงแถบด้านบนจะมีคำว่า prototype เราสามารถดึงจุดที่เราอยากให้เชื่อมกันมาใส่อีกหน้าหนึ่งได้
เช่น อยากให้กดปุ่ม Login แล้วไปหน้าเมนู ก็สามารถโยงตรงปุ่มนี้ไปหน้าหลักได้เลย
5. รันแสดงผล

run.PNG (44.56 KiB) Viewed 2352 times

สามารถรันดูงาน ปุ่มสามเหลี่ยมด้านบน
การใช้Adobe XD ออกแบบหน้าจอโมบายแอปพลิเคชั่น จะมีประมาณนี้ค่ะ

[Aoranuch Phupaloy]

แก้ไข
ลิงค์ เชื่อมข้อมูล
คำอธิบายภาพ
รูปแบบภาพ ไม่เกิน800
เพิ่มบทสรุป

แก้ไขแล้ว
- ลิงค์เชื่อมข้อมูล
- คำอธิบายภาพ
- ปรับขนาดภาพ
- บทสรุป
viewtopic.php?f=75&t=71392&p=203445#p203445

[Aoranuch Phupaloy]

แนะนำวิธีการใช้ Adobe xd (Adobe Experience Design)
ออกแบบหน้าจอหรือฟังก์ชั่นการใช้งานของเว็บแอปพลิเคชั่น
1. เลือก Template ที่เป็นเว็บ

web.1.1.png (26.16 KiB) Viewed 2307 times

สามารถเลือกขนาดของหน้าจอที่้เราต้องการได้

2. ตกแต่ง

web2.2.jpg (78.81 KiB) Viewed 2307 times

- เราสามารถตกแต่งพื้นหลังโดยการกดตรง Template แล้วเลือกสีหรือรูปแบบการใส่สี

3. ใส่รูปภาพ

web5.1.jpg (153.22 KiB) Viewed 2307 times

- ใส่รูปภาพโดยการดึงภาพในเครื่องของเรามาใส่เลย

4. เชื่อมหน้าจอ

web3.3.jpg (99.09 KiB) Viewed 2307 times

- เชื่อมหน้าจอโดยคลิกคำว่า Prototype
- จากนั้นโยงเส้นเชื่อมไปยังหน้าที่เราต้องการให้เชื่อมต่อการ

5. แสดงผล

web4.1.jpg (77.65 KiB) Viewed 2307 times

แสดงผลโดยการคลิกปุ่มสามเหลี่ยมขวามือด้านบน
การออกแบบหน้าจอเว็บแอปพลิเคชั่นก็จะมีประมาณนี้นะคะ ส่วนการออกแแบบโมบายแอปพลิเคชั่นสามารถไปดูได้ที่ >>คลิก<<

[Duanghathai Termtem]

ส่วนเกริ่นว่าคืออะไรและการเชื่อมลิงค์
เพิ่มสรุปและเชื่อมลิงค์ไปยังบความอื่นที่เกี่ยวเนื่องกัน
(ลิงค์ที่แนบมา นำมาสู่หน้าเดิมอยู่)

[Aoranuch Phupaloy]

เมื่อก่อนเวลาจะออกแบบงานเว็บไซต์หรือ UX/UI จะต้องคอยหา Size ของหน้าจอขนาดต่างๆตามเว็บไซต์ แต่ตอนนี้โปรแกรม Adobe XD มี Template ให้เลือกครบทั้งหน้าเว็บ จอ iPhone ไปจนถึงจอ Andriod ทุกขนาด เรียกได้ว่าไม่ต้องเสียเวลาไปหาขนาดหน้าจอต่างๆให้วุ่นวายอีกแล้ว ตอนนี้ Adobe ได้ปล่อย Adobe XD ให้ดาวน์โหลดและใช้ฟรีแบบไม่มีกำหนด ซึ่งเป็นเรื่องที่ดีมากๆสำหรับนักออกแบบหรือคนที่อยากจะเริ่มศึกษาโปรแกรม แนะนำวิธีการใช้ Adobe xd (Adobe Experience Design)
ออกแบบหน้าจอหรือฟังก์ชั่นการใช้งานของเว็บแอปพลิเคชัน
1. เลือก Template ที่เป็นเว็บ

เลือก Template

web.1.1.png (26.16 KiB) Viewed 2144 times

สามารถเลือกขนาดของหน้าจอที่้เราต้องการได้

2. ตกแต่ง

ตกแต่ง

web2.2.jpg (78.81 KiB) Viewed 2144 times

- เราสามารถตกแต่งพื้นหลังโดยการกดตรง Template แล้วเลือกสีหรือรูปแบบการใส่สี

3. ใส่รูปภาพ

เชื่อมหน้าจอ

web5.1.jpg (153.22 KiB) Viewed 2144 times

- ใส่รูปภาพโดยการดึงภาพในเครื่องของเรามาใส่เลย

4. เชื่อมหน้าจอ

ใส่รูปภาพ

web3.3.jpg (99.09 KiB) Viewed 2144 times

- เชื่อมหน้าจอโดยคลิกคำว่า Prototype
- จากนั้นโยงเส้นเชื่อมไปยังหน้าที่เราต้องการให้เชื่อมต่อการ

5. แสดงผล

แสดงผล

web4.1.jpg (77.65 KiB) Viewed 2144 times

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

[Aoranuch Phupaloy]

ส่วนเกริ่นว่าคืออะไรและการเชื่อมลิงค์
เพิ่มสรุปและเชื่อมลิงค์ไปยังบความอื่นที่เกี่ยวเนื่องกัน
(ลิงค์ที่แนบมา นำมาสู่หน้าเดิมอยู่)

แก้ไขแล้ว
- เพิ่มส่วนเกริ่นนำ
- เพิ่มส่วนสรุป
- เพิ่มลิงก์เชื่อมโยงส่วนเกริ่นและส่วนสรุป

[Duanghathai Termtem]

ส่วนเกริ่นว่าคืออะไรและการเชื่อมลิงค์
เพิ่มสรุปและเชื่อมลิงค์ไปยังบความอื่นที่เกี่ยวเนื่องกัน
(ลิงค์ที่แนบมา นำมาสู่หน้าเดิมอยู่)

แก้ไขแล้ว
- เพิ่มส่วนเกริ่นนำ
- เพิ่มส่วนสรุป
- เพิ่มลิงก์เชื่อมโยงส่วนเกริ่นและส่วนสรุป

แก้ไขของตัวเองให้ลบ Quote บนล่างทิ้งก่อน
อันที่แก้ใหม่ชื่อภาพหายไป
ลิงค์เชื่อมมส่วนสรุปยังไม่ครบ3 (นับที่เชื่อมของ mindphp)

[Aoranuch Phupaloy]

ส่วนเกริ่นว่าคืออะไรและการเชื่อมลิงค์
เพิ่มสรุปและเชื่อมลิงค์ไปยังบความอื่นที่เกี่ยวเนื่องกัน
(ลิงค์ที่แนบมา นำมาสู่หน้าเดิมอยู่)

แก้ไขแล้ว
- เพิ่มส่วนเกริ่นนำ
- เพิ่มส่วนสรุป
- เพิ่มลิงก์เชื่อมโยงส่วนเกริ่นและส่วนสรุป

แก้ไขของตัวเองให้ลบ Quote บนล่างทิ้งก่อน
อันที่แก้ใหม่ชื่อภาพหายไป
ลิงค์เชื่อมมส่วนสรุปยังไม่ครบ3 (นับที่เชื่อมของ mindphp)

แก้ไขแล้วค่ะ