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

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

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

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

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

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

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

2. กำหนดหน้า Home
กำหนดหน้า 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 จะทำการเชื่อมในรูปแบบเดียวกันหรือถ้าแตกต่างกันก็จะมีบางส่วนเล็กน้อย
Last edited by Aoranuch Phupaloy on 25/12/2020 1:16 pm, edited 1 time 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: 22/12/2020 2:58 pm ลิงค์เชื่อมส่วนเกริ่นยังไม่ครบ
ตั้งชื่อภาพ
สัญลักษณ์ต้องใช้สีเขียว
การเชื่อมลิงค์ส่วนสรุปไม่ครบ
แก้ไขแล้วค่ะ
Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “Graphic design”

Who is online

Users browsing this forum: No registered users and 5 guests