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

Graphic design ความรู้สำหรับ การออกแบบ ออกแบบเว็บ Phothoshop ตัดต่อวีดีโอ

Moderators: mindphp, ผู้ดูแลกระดาน

Aoranuch Phupaloy
PHP Hero Member
PHP Hero Member
Posts: 166
Joined: 07/12/2020 9:33 am

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

Post by 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 กรณีที่เรามีโปรเจคเดิมอยู่แล้ว เราสามารถกดเข้าไปแก้ไขหรือเข้าไปดูได้เลย
x2.PNG
x3.PNG
1.2 ปรับแต่งสีและใส่ลูกเล่นต่างๆได้เลย โดยกดเลือกโทนสี ปรับขนาดตัวอักษรตรงแถบขวามือ
x4.PNG
1.3 สามารถตกแต่งรูปภาพ โดยการดึงรูปภาพลงเลย และรับขนาดตามความต้องการ
x รูปภาพตกแต่ง.PNG
1.4 เชื่อมตัวโปรโตไทป์ ตรงแถบด้านบนจะมีคำว่า prototype เราสามารถดึงจุดที่เราอยากให้เชื่อมกันมาใส่อีกหน้าหนึ่งได้
เช่นอยากให้กดปุ่ม Login แล้วไปหน้าหลัก ก็สามารถโยงตรงปุ่มนี้ไปหน้าหลักได้เลย
x p.PNG
1.5 สามารถรันดูงานได้ตลอดเวลาตรง ปุ่มสามเหลี่ยมด้านบน
x run.PNG
สำหรับการออกแบบโมบายแอปพลิเคชั่นก็มีประมาณนี้ค่ะ
Aoranuch Phupaloy
PHP Hero Member
PHP Hero Member
Posts: 166
Joined: 07/12/2020 9:33 am

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

Post by Aoranuch Phupaloy »

แก้ไข
ลิงค์ เชื่อมข้อมูล
คำอธิบายภาพ
รูปแบบภาพ ไม่เกิน800
เพิ่มบทสรุป
Aoranuch Phupaloy
PHP Hero Member
PHP Hero Member
Posts: 166
Joined: 07/12/2020 9:33 am

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

Post by Aoranuch Phupaloy »

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

2. ปรับแต่งสี, ตัวอักษร, และใส่รูปทรงต่างๆ
ปรับแต่งสีและใส่ลูกเล่น.PNG
ปรับแต่งสีและใส่ลูกเล่น.PNG (42.84 KiB) Viewed 444 times
ปรับแต่งสีและใส่ลูกเล่นต่างๆได้เลย โดยกดเลือกโทนสี ปรับขนาดตัวอักษรตรงแถบขวามือ

3. ตกแต่งรูปภาพ
ใส่รูปภาพ.PNG
ใส่รูปภาพ.PNG (141.29 KiB) Viewed 444 times
ตกแต่งรูปภาพ โดย การดึงรูปภาพลงในตัว Template และปรับขนาดตามความต้องการ
4. เชื่อมตัวโปรโตไทป์
เชื่อมโปรโตไทป์.PNG
เชื่อมโปรโตไทป์.PNG (133.13 KiB) Viewed 444 times
ตรงแถบด้านบนจะมีคำว่า prototype เราสามารถดึงจุดที่เราอยากให้เชื่อมกันมาใส่อีกหน้าหนึ่งได้
เช่น อยากให้กดปุ่ม Login แล้วไปหน้าเมนู ก็สามารถโยงตรงปุ่มนี้ไปหน้าหลักได้เลย
5. รันแสดงผล
run.PNG
run.PNG (44.56 KiB) Viewed 444 times
สามารถรันดูงาน ปุ่มสามเหลี่ยมด้านบน
การใช้Adobe XD ออกแบบหน้าจอโมบายแอปพลิเคชั่น จะมีประมาณนี้ค่ะ
Last edited by Aoranuch Phupaloy on 11/12/2020 3:51 pm, edited 4 times in total.
Aoranuch Phupaloy
PHP Hero Member
PHP Hero Member
Posts: 166
Joined: 07/12/2020 9:33 am

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

Post by Aoranuch Phupaloy »

Aoranuch Phupaloy wrote: 08/12/2020 7:48 pm แก้ไข
ลิงค์ เชื่อมข้อมูล
คำอธิบายภาพ
รูปแบบภาพ ไม่เกิน800
เพิ่มบทสรุป
แก้ไขแล้ว
- ลิงค์เชื่อมข้อมูล
- คำอธิบายภาพ
- ปรับขนาดภาพ
- บทสรุป
viewtopic.php?f=75&t=71392&p=203445#p203445
Aoranuch Phupaloy
PHP Hero Member
PHP Hero Member
Posts: 166
Joined: 07/12/2020 9:33 am

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

Post by Aoranuch Phupaloy »

แนะนำวิธีการใช้ Adobe xd (Adobe Experience Design)
ออกแบบหน้าจอหรือฟังก์ชั่นการใช้งานของเว็บแอปพลิเคชั่น
1. เลือก Template ที่เป็นเว็บ
web.1.1.png
web.1.1.png (26.16 KiB) Viewed 399 times
สามารถเลือกขนาดของหน้าจอที่้เราต้องการได้

2. ตกแต่ง
web2.2.jpg
web2.2.jpg (78.81 KiB) Viewed 399 times
- เราสามารถตกแต่งพื้นหลังโดยการกดตรง Template แล้วเลือกสีหรือรูปแบบการใส่สี

3. ใส่รูปภาพ
web5.1.jpg
web5.1.jpg (153.22 KiB) Viewed 399 times
- ใส่รูปภาพโดยการดึงภาพในเครื่องของเรามาใส่เลย

4. เชื่อมหน้าจอ
web3.3.jpg
web3.3.jpg (99.09 KiB) Viewed 399 times
- เชื่อมหน้าจอโดยคลิกคำว่า Prototype
- จากนั้นโยงเส้นเชื่อมไปยังหน้าที่เราต้องการให้เชื่อมต่อการ

5. แสดงผล
web4.1.jpg
web4.1.jpg (77.65 KiB) Viewed 399 times
แสดงผลโดยการคลิกปุ่มสามเหลี่ยมขวามือด้านบน
การออกแบบหน้าจอเว็บแอปพลิเคชั่นก็จะมีประมาณนี้นะคะ ส่วนการออกแแบบโมบายแอปพลิเคชั่นสามารถไปดูได้ที่ >>คลิก<<
Duanghathai Termtem
PHP Super Hero Member
PHP Super Hero Member
Posts: 849
Joined: 30/11/2020 10:24 am

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

Post by Duanghathai Termtem »

ส่วนเกริ่นว่าคืออะไรและการเชื่อมลิงค์
เพิ่มสรุปและเชื่อมลิงค์ไปยังบความอื่นที่เกี่ยวเนื่องกัน
(ลิงค์ที่แนบมา นำมาสู่หน้าเดิมอยู่)
Aoranuch Phupaloy
PHP Hero Member
PHP Hero Member
Posts: 166
Joined: 07/12/2020 9:33 am

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

Post by Aoranuch Phupaloy »

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

2. ตกแต่ง
ตกแต่ง
ตกแต่ง
web2.2.jpg (78.81 KiB) Viewed 236 times
- เราสามารถตกแต่งพื้นหลังโดยการกดตรง Template แล้วเลือกสีหรือรูปแบบการใส่สี

3. ใส่รูปภาพ
เชื่อมหน้าจอ
เชื่อมหน้าจอ
web5.1.jpg (153.22 KiB) Viewed 236 times
- ใส่รูปภาพโดยการดึงภาพในเครื่องของเรามาใส่เลย

4. เชื่อมหน้าจอ
ใส่รูปภาพ
ใส่รูปภาพ
web3.3.jpg (99.09 KiB) Viewed 236 times
- เชื่อมหน้าจอโดยคลิกคำว่า Prototype
- จากนั้นโยงเส้นเชื่อมไปยังหน้าที่เราต้องการให้เชื่อมต่อการ

5. แสดงผล
แสดงผล
แสดงผล
web4.1.jpg (77.65 KiB) Viewed 236 times
แสดงผลโดยการคลิกปุ่มสามเหลี่ยมขวามือด้านบน
การออกแบบหน้าจอเว็บแอปพลิเคชัน จะเน้นความเรียบง่าย สม่ำเสมอ ความเป็นเอกลักษณ์ให้คนจดจำง่าย และการใช้ Adobe xd ออกแบบหน้าจอของเว็บนั้นเป็นการออกแบบอย่างง่าย ทุกๆคนสามารถศึกษาและใช้งาน Adobe xd ได้เพียงแค่เรียนรู้แป๊บเดียวเท่านั้น และยังสามารถออกแบบในรูปแบบโมบายแอปพลิเคชันได้
Last edited by Aoranuch Phupaloy on 22/12/2020 3:29 pm, edited 2 times in total.
Aoranuch Phupaloy
PHP Hero Member
PHP Hero Member
Posts: 166
Joined: 07/12/2020 9:33 am

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

Post by Aoranuch Phupaloy »

Duanghathai Termtem wrote: 14/12/2020 5:44 pm ส่วนเกริ่นว่าคืออะไรและการเชื่อมลิงค์
เพิ่มสรุปและเชื่อมลิงค์ไปยังบความอื่นที่เกี่ยวเนื่องกัน
(ลิงค์ที่แนบมา นำมาสู่หน้าเดิมอยู่)
แก้ไขแล้ว
- เพิ่มส่วนเกริ่นนำ
- เพิ่มส่วนสรุป
- เพิ่มลิงก์เชื่อมโยงส่วนเกริ่นและส่วนสรุป
Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “Graphic design”

Who is online

Users browsing this forum: No registered users and 22 guests