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

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

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

Aoranuch Phupaloy
PHP Hero Member
PHP Hero Member
โพสต์: 166
ลงทะเบียนเมื่อ: 07/12/2020 9:33 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย Aoranuch Phupaloy »

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

2. กำหนดหน้า Home
prototype2.png
prototype2.png (225.7 KiB) Viewed 1924 times
- คลิกที่ หน้าจอนั้น
- คลิกที่ icon บ้าน

3. ทำการกรุ๊ปตัวอักษรและปุ่มเป็นตัวเดียวกัน
prototype3.png
prototype3.png (43.32 KiB) Viewed 1924 times
- คลิกไปยังตัวอักษรและปุ่มที่เราอยากกรุ๊ป แล้วคลิกขวา
- เลือกคำว่า Group

4. เชื่อมโยง
prototype4.png
prototype4.png (278.33 KiB) Viewed 1924 times
เพียงเราดึงเส้นเชื่อมจากปุ่มไปยังอีกหน้า ตัวอย่างในรูปคือ เชื่อมปุ่ม Login ไปยังหน้า Menu, เชื่อมปุ่ม Register ไปยังหน้า Register

5. Run (แสดงผล)
prototype5.png
prototype5.png (213.01 KiB) Viewed 1924 times
จากการแสดงผลจะเห็นว่าหน้า Menu จะแสดงก่อน เพราะว่าเรากำหนดให้หน้านี้เป็นหน้าHome
แต่ถ้าอยากแสดงหน้าอื่นก่อนให้เราไปคลิกตรงหน้านั้นแล้วรันใหม่

การทำ Prototyping จะทำได้ก็ต่อเมื่อมีการสร้างหน้าอย่างน้อย 2 หน้า แล้วไปคลิกที่วัตถุอะไรก็ได้ ถึงจะใช้การดึงเส้นจากวัตถุไปที่อีกหน้าเพื่อให้ทำการเชื่อมประสานเสร็จสมบูรณ์
Duanghathai Termtem
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 849
ลงทะเบียนเมื่อ: 30/11/2020 10:24 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย Duanghathai Termtem »

ลิงค์เชื่อมส่วนเกริ่นยังไม่ครบ
ตั้งชื่อภาพ
สัญลักษณ์ต้องใช้สีเขียว
การเชื่อมลิงค์ส่วนสรุปไม่ครบ
Aoranuch Phupaloy
PHP Hero Member
PHP Hero Member
โพสต์: 166
ลงทะเบียนเมื่อ: 07/12/2020 9:33 am

Re: วิธีการเชื่อมหน้าจอของโปรแกรมออกแบบหน้าจอ Adobe Xd

โพสต์ที่ยังไม่ได้อ่าน โดย Aoranuch Phupaloy »

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

2. กำหนดหน้า Home
กำหนดหน้า Home
กำหนดหน้า Home
prototype2.png (225.22 KiB) Viewed 1895 times
- คลิกที่ หน้าจอนั้น
- คลิกที่ icon บ้าน

3. ทำการกรุ๊ปตัวอักษรและปุ่มเป็นตัวเดียวกัน
กรุ๊ปตัวอักษรและปุ่มเป็นตัวเดียวกัน
กรุ๊ปตัวอักษรและปุ่มเป็นตัวเดียวกัน
prototype3.png (43.39 KiB) Viewed 1895 times
- คลิกไปยังตัวอักษรและปุ่มที่เราอยากกรุ๊ป แล้วคลิกขวา
- เลือกคำว่า Group

4. เชื่อมโยง
เชื่อมโยง
เชื่อมโยง
prototype4.png (278.33 KiB) Viewed 1895 times
เพียงเราดึงเส้นเชื่อมจากปุ่มไปยังอีกหน้า ตัวอย่างในรูปคือ เชื่อมปุ่ม Login ไปยังหน้า Menu, เชื่อมปุ่ม Register ไปยังหน้า Register

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

การทำ Prototyping จะทำได้ก็ต่อเมื่อมีการสร้างหน้าอย่างน้อย 2 หน้าแล้วไปคลิกที่วัตถุอะไรก็ได้ ถึงจะใช้การดึงเส้นจากวัตถุไปที่อีกหน้าเพื่อให้ทำการเชื่อมประสานเสร็จสมบูรณ์และการทำ Prototyping ส่วนมากจะทำต่อจากขั้นตอนการออกแบบโดยจะสามารถกดคลิกมาใช้ฟังก์ชั่นได้ทันทีแต่หน้าตาของโปรแกรมจะเปลี่ยนไปบ้างเล็กน้อย การเชื่อมหน้าจอในรูปแบบ Web กับ Mobile จะทำการเชื่อมในรูปแบบเดียวกันหรือถ้าแตกต่างกันก็จะมีบางส่วนเล็กน้อย
แก้ไขล่าสุดโดย Aoranuch Phupaloy เมื่อ 25/12/2020 1:16 pm, แก้ไขไปแล้ว 1 ครั้ง.
Aoranuch Phupaloy
PHP Hero Member
PHP Hero Member
โพสต์: 166
ลงทะเบียนเมื่อ: 07/12/2020 9:33 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย Aoranuch Phupaloy »

Duanghathai Termtem เขียน: 22/12/2020 2:58 pm ลิงค์เชื่อมส่วนเกริ่นยังไม่ครบ
ตั้งชื่อภาพ
สัญลักษณ์ต้องใช้สีเขียว
การเชื่อมลิงค์ส่วนสรุปไม่ครบ
แก้ไขแล้วค่ะ
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: Google [Bot] และบุคลทั่วไป 66