Adobe XD จะแบ่งออกเป็น 2 ส่วนใหญ่ๆ คือ ก็คือ ส่วนของการ Design และส่วนของ Prototype ในส่วนของ Design จะทำหน้าที่ออกแบบ UI หรือ User Interface เมื่ออกแบบเสร็จแล้ว เราจะไปที่ส่วน Prototype เพื่อเชื่อมโยงแต่ละหน้าเข้าด้วยกัน โดยการเชื่อมโยงจากวัตถุไปยังหน้าต่างๆ
วิธีการเชื่อมหน้าจอใน Adobe Xd
1้. เปลี่ยนชื่อ Template
เราสามารถเปลี่ยนชื่อ Template เพื่อกรณีที่จะไม่สับสนเวลาเชื่อมหน้าจอ โดยการดับเบิ้ลคลิกไปตรงวงชื่อเดิม ที่วงกลมสีแดงไว้ แล้วสามารถแก้ไขชื่อ แล้วกดเ enter (ทำแบบนี้กับหน้าอื่นไปเรื่อยๆ)
2. กำหนดหน้า Home
- คลิกที่ หน้าจอนั้น
- คลิกที่ icon บ้าน
3. ทำการกรุ๊ปตัวอักษรและปุ่มเป็นตัวเดียวกัน
- คลิกไปยังตัวอักษรและปุ่มที่เราอยากกรุ๊ป แล้วคลิกขวา
- เลือกคำว่า Group
4. เชื่อมโยง
เพียงเราดึงเส้นเชื่อมจากปุ่มไปยังอีกหน้า ตัวอย่างในรูปคือ เชื่อมปุ่ม Login ไปยังหน้า Menu, เชื่อมปุ่ม Register ไปยังหน้า Register
5. Run (แสดงผล)
จากการแสดงผลจะเห็นว่าหน้า Menu จะแสดงก่อน เพราะว่าเรากำหนดให้หน้านี้เป็นหน้าHome
แต่ถ้าอยากแสดงหน้าอื่นก่อนให้เราไปคลิกตรงหน้านั้นแล้วรันใหม่
การทำ Prototyping จะทำได้ก็ต่อเมื่อมีการสร้างหน้าอย่างน้อย 2 หน้า แล้วไปคลิกที่วัตถุอะไรก็ได้ ถึงจะใช้การดึงเส้นจากวัตถุไปที่อีกหน้าเพื่อให้ทำการเชื่อมประสานเสร็จสมบูรณ์
วิธีการเชื่อมหน้าจอใน Adobe Xd
Moderator: mindphp, ผู้ดูแลกระดาน
-
- PHP Hero Member
- โพสต์: 166
- ลงทะเบียนเมื่อ: 07/12/2020 9:33 am
-
- 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 จะแบ่งออกเป็น 2 ส่วนใหญ่ๆก็คือส่วนของการ Design และส่วนของ Prototype ในส่วนของ Design จะทำหน้าที่ออกแบบ UI หรือ User Interface เมื่ออกแบบเสร็จแล้ว เราจะไปที่ส่วน Prototype เพื่อเชื่อมโยงแต่ละหน้าเข้าด้วยกันโดยการเชื่อมโยงจากวัตถุไปยังหน้าต่างๆ
วิธีการเชื่อมหน้าจอใน Adobe Xd
1. เปลี่ยนชื่อ Template เราสามารถเปลี่ยนชื่อ Template เพื่อกรณีที่จะไม่สับสนเวลาเชื่อมหน้าจอ โดยการดับเบิ้ลคลิกไปตรงวงชื่อเดิม ที่วงกลมสีแดงไว้ แล้วสามารถแก้ไขชื่อ แล้วกดเ enter (ทำแบบนี้กับหน้าอื่นไปเรื่อยๆ)
2. กำหนดหน้า Home - คลิกที่ หน้าจอนั้น
- คลิกที่ icon บ้าน
3. ทำการกรุ๊ปตัวอักษรและปุ่มเป็นตัวเดียวกัน - คลิกไปยังตัวอักษรและปุ่มที่เราอยากกรุ๊ป แล้วคลิกขวา
- เลือกคำว่า Group
4. เชื่อมโยง เพียงเราดึงเส้นเชื่อมจากปุ่มไปยังอีกหน้า ตัวอย่างในรูปคือ เชื่อมปุ่ม Login ไปยังหน้า Menu, เชื่อมปุ่ม Register ไปยังหน้า Register
5. Run (แสดงผล) จากการแสดงผลจะเห็นว่าหน้า Menu จะแสดงก่อน เพราะว่าเรากำหนดให้หน้านี้เป็นหน้าHome
แต่ถ้าอยากแสดงหน้าอื่นก่อนให้เราไปคลิกตรงหน้านั้นแล้วรันใหม่
การทำ Prototyping จะทำได้ก็ต่อเมื่อมีการสร้างหน้าอย่างน้อย 2 หน้าแล้วไปคลิกที่วัตถุอะไรก็ได้ ถึงจะใช้การดึงเส้นจากวัตถุไปที่อีกหน้าเพื่อให้ทำการเชื่อมประสานเสร็จสมบูรณ์และการทำ Prototyping ส่วนมากจะทำต่อจากขั้นตอนการออกแบบโดยจะสามารถกดคลิกมาใช้ฟังก์ชั่นได้ทันทีแต่หน้าตาของโปรแกรมจะเปลี่ยนไปบ้างเล็กน้อย การเชื่อมหน้าจอในรูปแบบ Web กับ Mobile จะทำการเชื่อมในรูปแบบเดียวกันหรือถ้าแตกต่างกันก็จะมีบางส่วนเล็กน้อย
วิธีการเชื่อมหน้าจอใน Adobe Xd
1. เปลี่ยนชื่อ Template เราสามารถเปลี่ยนชื่อ Template เพื่อกรณีที่จะไม่สับสนเวลาเชื่อมหน้าจอ โดยการดับเบิ้ลคลิกไปตรงวงชื่อเดิม ที่วงกลมสีแดงไว้ แล้วสามารถแก้ไขชื่อ แล้วกดเ enter (ทำแบบนี้กับหน้าอื่นไปเรื่อยๆ)
2. กำหนดหน้า Home - คลิกที่ หน้าจอนั้น
- คลิกที่ icon บ้าน
3. ทำการกรุ๊ปตัวอักษรและปุ่มเป็นตัวเดียวกัน - คลิกไปยังตัวอักษรและปุ่มที่เราอยากกรุ๊ป แล้วคลิกขวา
- เลือกคำว่า Group
4. เชื่อมโยง เพียงเราดึงเส้นเชื่อมจากปุ่มไปยังอีกหน้า ตัวอย่างในรูปคือ เชื่อมปุ่ม Login ไปยังหน้า Menu, เชื่อมปุ่ม Register ไปยังหน้า Register
5. Run (แสดงผล) จากการแสดงผลจะเห็นว่าหน้า Menu จะแสดงก่อน เพราะว่าเรากำหนดให้หน้านี้เป็นหน้าHome
แต่ถ้าอยากแสดงหน้าอื่นก่อนให้เราไปคลิกตรงหน้านั้นแล้วรันใหม่
การทำ Prototyping จะทำได้ก็ต่อเมื่อมีการสร้างหน้าอย่างน้อย 2 หน้าแล้วไปคลิกที่วัตถุอะไรก็ได้ ถึงจะใช้การดึงเส้นจากวัตถุไปที่อีกหน้าเพื่อให้ทำการเชื่อมประสานเสร็จสมบูรณ์และการทำ Prototyping ส่วนมากจะทำต่อจากขั้นตอนการออกแบบโดยจะสามารถกดคลิกมาใช้ฟังก์ชั่นได้ทันทีแต่หน้าตาของโปรแกรมจะเปลี่ยนไปบ้างเล็กน้อย การเชื่อมหน้าจอในรูปแบบ Web กับ Mobile จะทำการเชื่อมในรูปแบบเดียวกันหรือถ้าแตกต่างกันก็จะมีบางส่วนเล็กน้อย
แก้ไขล่าสุดโดย Aoranuch Phupaloy เมื่อ 25/12/2020 1:16 pm, แก้ไขไปแล้ว 1 ครั้ง.
-
- PHP Hero Member
- โพสต์: 166
- ลงทะเบียนเมื่อ: 07/12/2020 9:33 am
Re: วิธีการเชื่อมหน้าจอใน Adobe Xd
แก้ไขแล้วค่ะDuanghathai Termtem เขียน: ↑22/12/2020 2:58 pm ลิงค์เชื่อมส่วนเกริ่นยังไม่ครบ
ตั้งชื่อภาพ
สัญลักษณ์ต้องใช้สีเขียว
การเชื่อมลิงค์ส่วนสรุปไม่ครบ
-
- Similar Topics
- ตอบกลับ
- แสดง
- โพสต์ล่าสุด
-
-
โพสต์ใหม่ การออกแบบหน้าจอการใช้งานของระบบโดยใช้ Adobe XD
โดย Aoranuch Phupaloy » 08/12/2020 11:18 am » ใน Graphic design - 10 ตอบกลับ
- 2767 แสดง
-
โพสต์ล่าสุด โดย Duanghathai Termtem
23/12/2020 1:12 pm
-
-
- 3 ตอบกลับ
- 1772 แสดง
-
โพสต์ล่าสุด โดย Aoranuch Phupaloy
24/12/2020 3:49 pm
-
-
โพสต์ใหม่ ออกแบบหน้าจอเว็บแอปพลิเคชั่นโดยใช้ Adobe Xd
โดย Aoranuch Phupaloy » 11/12/2020 4:02 pm » ใน Graphic design - 7 ตอบกลับ
- 1387 แสดง
-
โพสต์ล่าสุด โดย Aoranuch Phupaloy
24/12/2020 2:51 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 ตอบกลับ
- 3353 แสดง
-
โพสต์ล่าสุด โดย winnerzx
23/06/2021 6:25 pm
-
-
-
โพสต์ใหม่ ทำแบนเนอร์เว็บไซต์ง่ายๆด้วย Adobe Photoshop
โดย nutapisit » 23/06/2021 3:36 pm » ใน Graphic design - 0 ตอบกลับ
- 1321 แสดง
-
โพสต์ล่าสุด โดย nutapisit
23/06/2021 3:36 pm
-
-
-
โพสต์ใหม่ การเลือกสเปคเพื่อใช้ในการตัดต่อ Adobe primere pro
โดย suhaila » 21/04/2021 6:47 pm » ใน Graphic design - 0 ตอบกลับ
- 4640 แสดง
-
โพสต์ล่าสุด โดย suhaila
21/04/2021 6:47 pm
-
-
- 0 ตอบกลับ
- 1430 แสดง
-
โพสต์ล่าสุด โดย hayatee
20/04/2021 3:53 pm
ผู้ใช้งานขณะนี้
สมาชิกกำลังดูบอร์ดนี้: Google Adsense [Bot] และบุคลทั่วไป 63