วิธีการเชื่อมหน้าจอใน Adobe Xd

[Aoranuch Phupaloy]

Adobe XD จะแบ่งออกเป็น 2 ส่วนใหญ่ๆ คือ ก็คือ ส่วนของการ Design และส่วนของ Prototype ในส่วนของ Design จะทำหน้าที่ออกแบบ UI หรือ User Interface เมื่ออกแบบเสร็จแล้ว เราจะไปที่ส่วน Prototype เพื่อเชื่อมโยงแต่ละหน้าเข้าด้วยกัน โดยการเชื่อมโยงจากวัตถุไปยังหน้าต่างๆ
วิธีการเชื่อมหน้าจอใน Adobe Xd
1้. เปลี่ยนชื่อ Template

prototype1.png (82.3 KiB) Viewed 150 times

เราสามารถเปลี่ยนชื่อ Template เพื่อกรณีที่จะไม่สับสนเวลาเชื่อมหน้าจอ โดยการดับเบิ้ลคลิกไปตรงวงชื่อเดิม ที่วงกลมสีแดงไว้ แล้วสามารถแก้ไขชื่อ แล้วกดเ enter (ทำแบบนี้กับหน้าอื่นไปเรื่อยๆ)

2. กำหนดหน้า Home

prototype2.png (225.7 KiB) Viewed 150 times

- คลิกที่ หน้าจอนั้น
- คลิกที่ icon บ้าน

3. ทำการกรุ๊ปตัวอักษรและปุ่มเป็นตัวเดียวกัน

prototype3.png (43.32 KiB) Viewed 150 times

- คลิกไปยังตัวอักษรและปุ่มที่เราอยากกรุ๊ป แล้วคลิกขวา
- เลือกคำว่า Group

4. เชื่อมโยง

prototype4.png (278.33 KiB) Viewed 150 times

เพียงเราดึงเส้นเชื่อมจากปุ่มไปยังอีกหน้า ตัวอย่างในรูปคือ เชื่อมปุ่ม Login ไปยังหน้า Menu, เชื่อมปุ่ม Register ไปยังหน้า Register

5. Run (แสดงผล)

prototype5.png (213.01 KiB) Viewed 150 times

จากการแสดงผลจะเห็นว่าหน้า Menu จะแสดงก่อน เพราะว่าเรากำหนดให้หน้านี้เป็นหน้าHome
แต่ถ้าอยากแสดงหน้าอื่นก่อนให้เราไปคลิกตรงหน้านั้นแล้วรันใหม่

การทำ Prototyping จะทำได้ก็ต่อเมื่อมีการสร้างหน้าอย่างน้อย 2 หน้า แล้วไปคลิกที่วัตถุอะไรก็ได้ ถึงจะใช้การดึงเส้นจากวัตถุไปที่อีกหน้าเพื่อให้ทำการเชื่อมประสานเสร็จสมบูรณ์

[Duanghathai Termtem]

ลิงค์เชื่อมส่วนเกริ่นยังไม่ครบ
ตั้งชื่อภาพ
สัญลักษณ์ต้องใช้สีเขียว
การเชื่อมลิงค์ส่วนสรุปไม่ครบ

[Aoranuch Phupaloy]

Adobe XD จะแบ่งออกเป็น 2 ส่วนใหญ่ๆก็คือส่วนของการ Design และส่วนของ Prototype ในส่วนของ Design จะทำหน้าที่ออกแบบ UI หรือ User Interface เมื่ออกแบบเสร็จแล้ว เราจะไปที่ส่วน Prototype เพื่อเชื่อมโยงแต่ละหน้าเข้าด้วยกันโดยการเชื่อมโยงจากวัตถุไปยังหน้าต่างๆ
วิธีการเชื่อมหน้าจอใน Adobe Xd
1. เปลี่ยนชื่อ Template

เปลี่ยนชื่อ Template

prototype1.png (82.37 KiB) Viewed 121 times

เราสามารถเปลี่ยนชื่อ Template เพื่อกรณีที่จะไม่สับสนเวลาเชื่อมหน้าจอ โดยการดับเบิ้ลคลิกไปตรงวงชื่อเดิม ที่วงกลมสีแดงไว้ แล้วสามารถแก้ไขชื่อ แล้วกดเ enter (ทำแบบนี้กับหน้าอื่นไปเรื่อยๆ)

2. กำหนดหน้า Home

กำหนดหน้า Home

prototype2.png (225.22 KiB) Viewed 121 times

- คลิกที่ หน้าจอนั้น
- คลิกที่ icon บ้าน

3. ทำการกรุ๊ปตัวอักษรและปุ่มเป็นตัวเดียวกัน

กรุ๊ปตัวอักษรและปุ่มเป็นตัวเดียวกัน

prototype3.png (43.39 KiB) Viewed 121 times

- คลิกไปยังตัวอักษรและปุ่มที่เราอยากกรุ๊ป แล้วคลิกขวา
- เลือกคำว่า Group

4. เชื่อมโยง

เชื่อมโยง

prototype4.png (278.33 KiB) Viewed 121 times

เพียงเราดึงเส้นเชื่อมจากปุ่มไปยังอีกหน้า ตัวอย่างในรูปคือ เชื่อมปุ่ม Login ไปยังหน้า Menu, เชื่อมปุ่ม Register ไปยังหน้า Register

5. Run (แสดงผล)

แสดงผล

จากการแสดงผลจะเห็นว่าหน้า Menu จะแสดงก่อน เพราะว่าเรากำหนดให้หน้านี้เป็นหน้าHome
แต่ถ้าอยากแสดงหน้าอื่นก่อนให้เราไปคลิกตรงหน้านั้นแล้วรันใหม่

การทำ Prototyping จะทำได้ก็ต่อเมื่อมีการสร้างหน้าอย่างน้อย 2 หน้าแล้วไปคลิกที่วัตถุอะไรก็ได้ ถึงจะใช้การดึงเส้นจากวัตถุไปที่อีกหน้าเพื่อให้ทำการเชื่อมประสานเสร็จสมบูรณ์และการทำ Prototyping ส่วนมากจะทำต่อจากขั้นตอนการออกแบบโดยจะสามารถกดคลิกมาใช้ฟังก์ชั่นได้ทันทีแต่หน้าตาของโปรแกรมจะเปลี่ยนไปบ้างเล็กน้อย การเชื่อมหน้าจอในรูปแบบ Web กับ Mobile จะทำการเชื่อมในรูปแบบเดียวกันหรือถ้าแตกต่างกันก็จะมีบางส่วนเล็กน้อย

[Aoranuch Phupaloy]

ลิงค์เชื่อมส่วนเกริ่นยังไม่ครบ
ตั้งชื่อภาพ
สัญลักษณ์ต้องใช้สีเขียว
การเชื่อมลิงค์ส่วนสรุปไม่ครบ

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