ออกแบบหน้าจอเว็บแอปพลิเคชั่นโดยใช้ Adobe Xd
Moderator: mindphp, ผู้ดูแลกระดาน
-
- PHP Hero Member
- โพสต์: 166
- ลงทะเบียนเมื่อ: 07/12/2020 9:33 am
ออกแบบหน้าจอเว็บแอปพลิเคชั่นโดยใช้ Adobe Xd
ออกแบบหน้าจอเว็บแอปพลิเคชั่นโดยใช้ Adobe Xd
แนะนำวิธีการใช้ Adobe xd (Adobe Experience Design)
ออกแบบหน้าจอหรือฟังก์ชั่นการใช้งานของเว็บแอปพลิเคชั่น
1. เลือก Template ที่เป็นเว็บ สามารถเลือกขนาดของหน้าจอที่้เราต้องการได้
2. ตกแต่ง - เราสามารถตกแต่งพื้นหลังโดยการกดตรง Template แล้วเลือกสีหรือรูปแบบการใส่สี
3. ใส่รูปภาพ - ใส่รูปภาพโดยการดึงภาพในเครื่องของเรามาใส่เลย
4. เชื่อมหน้าจอ - เชื่อมหน้าจอโดยคลิกคำว่า Prototype
- จากนั้นโยงเส้นเชื่อมไปยังหน้าที่เราต้องการให้เชื่อมต่อการ
5. แสดงผล แสดงผลโดยการคลิกปุ่มสามเหลี่ยมขวามือด้านบน
การออกแบบหน้าจอเว็บแอปพลิเคชั่นก็จะมีประมาณนี้นะคะ ส่วนการออกแแบบโมบายแอปพลิเคชั่นสามารถไปดูได้ที่ >>คลิก<<
แนะนำวิธีการใช้ Adobe xd (Adobe Experience Design)
ออกแบบหน้าจอหรือฟังก์ชั่นการใช้งานของเว็บแอปพลิเคชั่น
1. เลือก Template ที่เป็นเว็บ สามารถเลือกขนาดของหน้าจอที่้เราต้องการได้
2. ตกแต่ง - เราสามารถตกแต่งพื้นหลังโดยการกดตรง Template แล้วเลือกสีหรือรูปแบบการใส่สี
3. ใส่รูปภาพ - ใส่รูปภาพโดยการดึงภาพในเครื่องของเรามาใส่เลย
4. เชื่อมหน้าจอ - เชื่อมหน้าจอโดยคลิกคำว่า Prototype
- จากนั้นโยงเส้นเชื่อมไปยังหน้าที่เราต้องการให้เชื่อมต่อการ
5. แสดงผล แสดงผลโดยการคลิกปุ่มสามเหลี่ยมขวามือด้านบน
การออกแบบหน้าจอเว็บแอปพลิเคชั่นก็จะมีประมาณนี้นะคะ ส่วนการออกแแบบโมบายแอปพลิเคชั่นสามารถไปดูได้ที่ >>คลิก<<
-
- PHP Super Hero Member
- โพสต์: 849
- ลงทะเบียนเมื่อ: 30/11/2020 10:24 am
Re: ออกแบบหน้าจอเว็บแอปพลิเคชั่นโดยใช้ Adobe Xd
ขาดส่วนเกริ่น
เพิ่มส่วนสรุป และการแนบลิงค์ในส่วนสรุปให้เชื่อมไปยังบทความอื่นได้หรือเชื่อมกับบทความในเรื่องเดียวกันสามารถเชื่อมต่อไปมากันได้
เพิ่มส่วนสรุป และการแนบลิงค์ในส่วนสรุปให้เชื่อมไปยังบทความอื่นได้หรือเชื่อมกับบทความในเรื่องเดียวกันสามารถเชื่อมต่อไปมากันได้
-
- PHP Hero Member
- โพสต์: 166
- ลงทะเบียนเมื่อ: 07/12/2020 9:33 am
Re: ออกแบบหน้าจอเว็บแอปพลิเคชั่นโดยใช้ Adobe Xd
ออกแบบหน้าจอเว็บแอปพลิเคชั่นโดยใช้ Adobe Xd
Adobe XD โปรแกรมออกแบบ UX UI จากค่าย Adobe เหมาะสำหรับดีไซน์ที่ต้องการออกแบบเว็บไซต์และแอปพลิเคชันรองรับการสร้างต้นแบบ Prototype
แนะนำวิธีการใช้ Adobe xd (Adobe Experience Design)
ออกแบบหน้าจอหรือฟังก์ชั่นการใช้งานของเว็บแอปพลิเคชั่น
1. เลือก Template ที่เป็นเว็บ สามารถเลือกขนาดของหน้าจอที่้เราต้องการได้
2. ตกแต่ง - เราสามารถตกแต่งพื้นหลังโดยการกดตรง Template แล้วเลือกสีหรือรูปแบบการใส่สี
3. ใส่รูปภาพ - ใส่รูปภาพโดยการดึงภาพในเครื่องของเรามาใส่เลย
4. เชื่อมหน้าจอ - เชื่อมหน้าจอโดยคลิกคำว่า Prototype
- จากนั้นโยงเส้นเชื่อมไปยังหน้าที่เราต้องการให้เชื่อมต่อการ
5. แสดงผล แสดงผลโดยการคลิกปุ่มสามเหลี่ยมขวามือด้านบน
การออกแบบหน้าจอเว็บแอปพลิเคชั่นก็จะมีประมาณนี้นะคะ ส่วนการออกแแบบโมบายแอปพลิเคชั่นสามารถไปดูได้ที่ >>คลิก<<
Adobe XD ถูกสร้างมาเพื่อการออกแบบเว็บไซต์และ UX/UI เลยทำให้ฟังก์ชั่นและเครื่องมือต่างๆในโปรแกรมมีน้อย แต่เพียงพอที่จะออกแบบงานได้ครบถ้วน เหมาะมากสำหรับคนที่เริ่มต้นออกแบบ UI เพราะมีการที่อธิบายการทำงานของเครื่องมือที่จำเป็นอย่างครอบคลุม รวมทั้งมี Interface ที่ดูสบายตาและใช้งานง่าย
Adobe XD โปรแกรมออกแบบ UX UI จากค่าย Adobe เหมาะสำหรับดีไซน์ที่ต้องการออกแบบเว็บไซต์และแอปพลิเคชันรองรับการสร้างต้นแบบ Prototype
แนะนำวิธีการใช้ Adobe xd (Adobe Experience Design)
ออกแบบหน้าจอหรือฟังก์ชั่นการใช้งานของเว็บแอปพลิเคชั่น
1. เลือก Template ที่เป็นเว็บ สามารถเลือกขนาดของหน้าจอที่้เราต้องการได้
2. ตกแต่ง - เราสามารถตกแต่งพื้นหลังโดยการกดตรง Template แล้วเลือกสีหรือรูปแบบการใส่สี
3. ใส่รูปภาพ - ใส่รูปภาพโดยการดึงภาพในเครื่องของเรามาใส่เลย
4. เชื่อมหน้าจอ - เชื่อมหน้าจอโดยคลิกคำว่า Prototype
- จากนั้นโยงเส้นเชื่อมไปยังหน้าที่เราต้องการให้เชื่อมต่อการ
5. แสดงผล แสดงผลโดยการคลิกปุ่มสามเหลี่ยมขวามือด้านบน
การออกแบบหน้าจอเว็บแอปพลิเคชั่นก็จะมีประมาณนี้นะคะ ส่วนการออกแแบบโมบายแอปพลิเคชั่นสามารถไปดูได้ที่ >>คลิก<<
Adobe XD ถูกสร้างมาเพื่อการออกแบบเว็บไซต์และ UX/UI เลยทำให้ฟังก์ชั่นและเครื่องมือต่างๆในโปรแกรมมีน้อย แต่เพียงพอที่จะออกแบบงานได้ครบถ้วน เหมาะมากสำหรับคนที่เริ่มต้นออกแบบ UI เพราะมีการที่อธิบายการทำงานของเครื่องมือที่จำเป็นอย่างครอบคลุม รวมทั้งมี Interface ที่ดูสบายตาและใช้งานง่าย
แก้ไขล่าสุดโดย Aoranuch Phupaloy เมื่อ 24/12/2020 2:50 pm, แก้ไขไปแล้ว 4 ครั้ง.
-
- PHP Hero Member
- โพสต์: 166
- ลงทะเบียนเมื่อ: 07/12/2020 9:33 am
Re: ออกแบบหน้าจอเว็บแอปพลิเคชั่นโดยใช้ Adobe Xd
แก้ไขแล้วDuanghathai Termtem เขียน: ↑14/12/2020 5:54 pm ขาดส่วนเกริ่น
เพิ่มส่วนสรุป และการแนบลิงค์ในส่วนสรุปให้เชื่อมไปยังบทความอื่นได้หรือเชื่อมกับบทความในเรื่องเดียวกันสามารถเชื่อมต่อไปมากันได้
- เพิ่มส่วนเกริ่น
- เพิ่มส่วนสรุป
- ใส่ลิงค์เชื่อมโยงในส่วนเกริ่นและส่วนสรุป
-
- PHP Super Hero Member
- โพสต์: 849
- ลงทะเบียนเมื่อ: 30/11/2020 10:24 am
Re: ออกแบบหน้าจอเว็บแอปพลิเคชั่นโดยใช้ Adobe Xd
แก้ไขของตัวเองให้ลบ Quote บนล่างทิ้งก่อน
ชื่อภาพ
ลิงค์เชื่อมมส่วนสรุปยังไม่ครบ 3 (นับที่เชื่อมของ mindphp)
ชื่อภาพ
ลิงค์เชื่อมมส่วนสรุปยังไม่ครบ 3 (นับที่เชื่อมของ mindphp)
-
- PHP Hero Member
- โพสต์: 166
- ลงทะเบียนเมื่อ: 07/12/2020 9:33 am
Re: ออกแบบหน้าจอเว็บแอปพลิเคชั่นโดยใช้ Adobe Xd
แก้ไขแล้วค่ะDuanghathai Termtem เขียน: ↑22/12/2020 2:53 pm แก้ไขของตัวเองให้ลบ Quote บนล่างทิ้งก่อน
ชื่อภาพ
ลิงค์เชื่อมมส่วนสรุปยังไม่ครบ 3 (นับที่เชื่อมของ mindphp)
-
- PHP Super Hero Member
- โพสต์: 849
- ลงทะเบียนเมื่อ: 30/11/2020 10:24 am
Re: ออกแบบหน้าจอเว็บแอปพลิเคชั่นโดยใช้ Adobe Xd
มีการเชื่อมลิงค์ที่ซ้ำกันในบทความAoranuch Phupaloy เขียน: ↑22/12/2020 6:12 pmแก้ไขแล้วค่ะDuanghathai Termtem เขียน: ↑22/12/2020 2:53 pm แก้ไขของตัวเองให้ลบ Quote บนล่างทิ้งก่อน
ชื่อภาพ
ลิงค์เชื่อมมส่วนสรุปยังไม่ครบ 3 (นับที่เชื่อมของ mindphp)
-
- PHP Hero Member
- โพสต์: 166
- ลงทะเบียนเมื่อ: 07/12/2020 9:33 am
Re: ออกแบบหน้าจอเว็บแอปพลิเคชั่นโดยใช้ Adobe Xd
แก้ไขแล้วค่ะDuanghathai Termtem เขียน: ↑23/12/2020 1:16 pmมีการเชื่อมลิงค์ที่ซ้ำกันในบทความAoranuch Phupaloy เขียน: ↑22/12/2020 6:12 pmแก้ไขแล้วค่ะDuanghathai Termtem เขียน: ↑22/12/2020 2:53 pm แก้ไขของตัวเองให้ลบ Quote บนล่างทิ้งก่อน
ชื่อภาพ
ลิงค์เชื่อมมส่วนสรุปยังไม่ครบ 3 (นับที่เชื่อมของ mindphp)
-
- Similar Topics
- ตอบกลับ
- แสดง
- โพสต์ล่าสุด
-
-
โพสต์ใหม่ การออกแบบหน้าจอการใช้งานของระบบโดยใช้ Adobe XD
โดย Aoranuch Phupaloy » 08/12/2020 11:18 am » ใน Graphic design - 10 ตอบกลับ
- 2767 แสดง
-
โพสต์ล่าสุด โดย Duanghathai Termtem
23/12/2020 1:12 pm
-
-
-
โพสต์ใหม่ วิธีการเชื่อมหน้าจอใน Adobe Xd
โดย Aoranuch Phupaloy » 11/12/2020 10:15 pm » ใน Graphic design - 3 ตอบกลับ
- 1936 แสดง
-
โพสต์ล่าสุด โดย Aoranuch Phupaloy
24/12/2020 4:46 pm
-
-
- 3 ตอบกลับ
- 1772 แสดง
-
โพสต์ล่าสุด โดย Aoranuch Phupaloy
24/12/2020 3:49 pm
-
-
โพสต์ใหม่ วิธีการติดตั้งโปรแกรมออกแบบหน้าจอ Adobe XD
โดย Aoranuch Phupaloy » 12/12/2020 2:43 pm » ใน Graphic design - 3 ตอบกลับ
- 1102 แสดง
-
โพสต์ล่าสุด โดย Aoranuch Phupaloy
24/12/2020 4:58 pm
-
-
-
โพสต์ใหม่ เทคนิคการใช้งานโปรแกรม Adobe Dreamweaver CS6
โดย winnerzx » 23/06/2021 6:25 pm » ใน CSS Knowledge - 0 ตอบกลับ
- 3350 แสดง
-
โพสต์ล่าสุด โดย winnerzx
23/06/2021 6:25 pm
-
-
-
โพสต์ใหม่ ทำแบนเนอร์เว็บไซต์ง่ายๆด้วย Adobe Photoshop
โดย nutapisit » 23/06/2021 3:36 pm » ใน Graphic design - 0 ตอบกลับ
- 1319 แสดง
-
โพสต์ล่าสุด โดย nutapisit
23/06/2021 3:36 pm
-
-
-
โพสต์ใหม่ การเลือกสเปคเพื่อใช้ในการตัดต่อ Adobe primere pro
โดย suhaila » 21/04/2021 6:47 pm » ใน Graphic design - 0 ตอบกลับ
- 4638 แสดง
-
โพสต์ล่าสุด โดย suhaila
21/04/2021 6:47 pm
-
-
- 0 ตอบกลับ
- 1428 แสดง
-
โพสต์ล่าสุด โดย hayatee
20/04/2021 3:53 pm
ผู้ใช้งานขณะนี้
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 70