ใช้ Adobe XD เพื่อสร้างปฏิสัมพันธ์แบบไมโคร

Sep 18, 2025
วิธีการ
Adobe XD interactions
(เครดิตรูปภาพ: Adobe)

Adobe XD สามารถช่วยในการสร้างต้นแบบได้ - หนึ่งในกระบวนการที่สำคัญที่สุดในวงจรชีวิตการออกแบบซึ่งมีบทบาทสำคัญในการพัฒนาโดยช่วยเหลือนักออกแบบและทีม Dev ด้วยการบำรุงรักษาเวิร์กโฟลว์ มีการเปลี่ยนแปลงที่สำคัญบางอย่างในภูมิทัศน์การสร้างต้นแบบเมื่อเร็ว ๆ นี้: นักออกแบบจะถูกทำลายเพื่อเลือก

เช่นเดียวกับสาขาวิชาอื่น ๆ อีกมากมายไม่มีเครื่องมือการออกแบบและการสร้างต้นแบบเดียวที่สามารถบรรลุทุกอย่าง ขั้นตอนที่แตกต่างกันต้องใช้ชุดเครื่องมือที่เป็นเอกลักษณ์ ไปเป็นวันที่นักออกแบบเคยพึ่งพา Photoshop และ Sketch เพียงอย่างเดียว แม้ว่าพวกเขาจะเป็นเครื่องมือออกแบบ UI ที่ยอดเยี่ยม แต่พวกเขาไม่มีความสามารถสำหรับการไหลของผู้ใช้ที่รวดเร็วและ Wireframes (ดูอันดับต้น ๆ ของเรา เครื่องมือ wireframe สำหรับตัวเลือก Wireframing เพิ่มเติม)

ขณะนี้มีการเพิ่มขึ้นของการมีปฏิสัมพันธ์ในการออกแบบเช่นภาพเคลื่อนไหวท่าทางและการควบคุมเสียง - มันยากที่จะหาเครื่องมือที่สามารถบรรลุความสามารถในการสร้างต้นแบบทั้งหมดเหล่านี้และยังคงรักษาสิ่งต่าง ๆ ให้ง่าย การเข้ารหัสเป็นวิธีหนึ่งในการสร้างการโต้ตอบเหล่านี้ แต่ใช้เวลานาน โชคดีที่ Adobe XD ได้มาช่วยด้วยการปล่อยการอัปเดตเป็นเครื่องมือสร้างต้นแบบที่มีคุณสมบัติที่มีประโยชน์เรียกว่า 'Auto Animate' มันเป็นอีกไกลที่สุดนอกเหนือจากชุดเครื่องมือที่ทรงพลัง

ความคิดที่นี่ง่ายมาก: Auto Animate ช่วยให้นักออกแบบสร้างต้นแบบแบบโต้ตอบกับภาพเคลื่อนไหวที่ดื่มด่ำโดยการทำสำเนาอาร์ตบอร์ดหรือแก้ไขคุณสมบัติของวัตถุ คุณสมบัติเหล่านี้อาจเป็นอะไรก็ได้เช่นมิติตำแหน่งของ x และ y, ความทึบ, การหมุน ก่อนหน้านี้ Adobe XD เสนอการโต้ตอบขั้นพื้นฐานเช่นการเลื่อนกดและละลาย

ด้วยการเพิ่มคุณสมบัติใหม่นักออกแบบสามารถสร้างภาพเคลื่อนไหวที่ใช้การเคลื่อนไหวได้อย่างง่ายดายซึ่งจะช่วยให้ผู้ใช้สร้างแบบจำลองทางจิตของการไหลของข้อมูลเมื่อพวกเขานำทางระหว่างหลายหน้าจอ สิ่งนี้ยังสามารถใช้ในการสร้างลำดับชั้นของภาพ, ctas หรือข้อความที่จางหายไปหรือออกจากหน้าจอชั่วคราว

ในบทความนี้ฉันจะอธิบายวิธีสร้างภาพเคลื่อนไหวขนาดเล็กที่เรียบง่ายโดยใช้คุณสมบัติ Auto Animate ใหม่ของ Adobe XD ก่อนที่เราจะเริ่มมีบางสิ่งที่ต้องพิจารณาเกี่ยวกับวิธีการจัดการวัตถุสำหรับแอนิเมชั่นอัตโนมัติ:

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

ทำการเปลี่ยนแปลงของรัฐโดยใช้ Auto Animate

Adobe XD tutorial

มันอาจฟังดูง่าย แต่คุณจะต้องเริ่มต้นด้วยสองรูปร่าง (เครดิตรูปภาพ: Vamsi Batchu)

เริ่มต้นด้วยการสร้างตัวอย่างง่ายๆของการเปลี่ยนแปลงสถานะโดยใช้ Auto Animate ในตัวอย่างนี้คุณสมบัติที่จะเปลี่ยนแปลงคือความกว้างความสูงและสี สำหรับการเปลี่ยนภาพเคลื่อนไหวอัตโนมัติใด ๆ คุณต้องมีมากกว่าสองอาร์ตบอร์ด

บนอาร์ตบอร์ดเริ่มต้นวาดรูปร่าง - ในตัวอย่างของเรามันเป็นสี่เหลี่ยมสีเขียว 500px x 200px ทำสำเนาอาร์ตบอร์ดนี้แล้วเลือกสี่เหลี่ยมบนอาร์ตบอร์ดที่สอง เราจำเป็นต้องปรับเปลี่ยนคุณสมบัติของสี่เหลี่ยมผืนผ้าโดยการเพิ่มความกว้างเป็น 1,000 และความสูงถึง 500 คุณสามารถทำการแก้ไขเพิ่มเติมเช่นการเปลี่ยนความทึบเป็น 50% หรือทำให้สีชมพูสี

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

ตั้งค่าการกระทำแท็บเริ่มต้นเป็น Auto Animate และเนื่องจากมีเพียงสองอาร์ตบอร์ดในตัวอย่างของเราตั้งค่าแท็บปลายทางไปยัง Artboard 2 นอกจากนี้ยังมีการเปลี่ยนแปลงที่ราบรื่นหลายอย่างที่สามารถเลือกและกำหนดเวลาได้ คลิกที่ไอคอนเล่นที่ด้านบนขวาเพื่อดูภาพเคลื่อนไหวอัตโนมัติทำเวทมนตร์และเคลื่อนไหวสี่เหลี่ยมผืนผ้า เมื่อมีองค์ประกอบมากกว่าสององค์ประกอบที่ต้องเปลี่ยนพร้อมกันตรวจสอบให้แน่ใจว่าชื่อขององค์ประกอบเหล่านี้เหมือนกันทั้งในอาร์ตบอร์ด สิ่งนี้จะแจ้งให้แอปพลิเคชันที่สององค์ประกอบนี้ต้องมีการเคลื่อนไหว

ขยายการ์ด

Adobe XD tutorial

การขยายไพ่เป็นอีกปฏิกิริยาง่าย ๆ ในการสร้าง (เครดิตรูปภาพ: Vamsi Batchu)

ตอนนี้ขอให้คืบหน้ากับตัวอย่างที่มีการโต้ตอบมากขึ้นและหนึ่งที่มีองค์ประกอบหลายอย่าง เริ่มต้นด้วยการสร้างอาร์ตบอร์ดแรกสำหรับสิ่งนี้ประกอบด้วยการ์ด บัตรจะมีองค์ประกอบเช่นส่วนหัวคำอธิบายและลิงค์ที่ประวัติมุมมองการอ่านด้านล่าง ถัดจากลิงค์จะมีไอคอนลูกศรหันหน้าลง เมื่อผู้ใช้คลิกที่ลิงค์การ์ดจะเปิดเหมือนลิ้นชักเพื่อแสดงรายการก่อนหน้า เนื่องจากสิ่งนี้เกิดขึ้นในฟังก์ชั่น Click / Tap รายการก่อนหน้านี้ไม่ควรสร้างใน Artboard แรก

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

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

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

ทำให้ภาพเคลื่อนไหวลาก

Adobe XD tutorial

ตัวอย่างง่ายๆของการลากอนิเมชั่นที่มีทรงกลมให้ดูแม้ว่ามันจะเป็นการบีบอัดข้อความบล็อก (เครดิตรูปภาพ: Vamsi Batchu)

การลากเป็นหนึ่งในภาพเคลื่อนไหวที่พบมากที่สุดเมื่อพูดถึงการโต้ตอบบนมือถือ ลองตัวอย่างง่ายๆด้วยสอง Artboards สำหรับอาร์ตบอร์ดแรกเริ่มต้นด้วยการสร้างวงกลมของสีและขนาดใดก็ได้ ตอนนี้สร้างสี่เหลี่ยมผืนผ้าที่มีความกว้าง 250px และความสูง 25px ทำซ้ำสี่เหลี่ยมผืนผ้านี้แปดครั้งรักษาพื้นที่ 20px ระหว่างแต่ละซ้ำกันเพื่อสร้างสแต็ก วางวงกลมที่ด้านบนของสี่เหลี่ยมแรกก่อนที่จะทำสำเนาอาร์ตบอร์ดนี้

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

สร้างภาพเคลื่อนไหว Loader Infinite

Adobe XD tutorial

Auto Animate สามารถตั้งค่าให้ทำงานบน Manuers Artboards - สมบูรณ์แบบสำหรับการสร้างอนิเมชั่นโหลดที่ไม่มีที่สิ้นสุด (เครดิตรูปภาพ: Vamsi Batchu)

หนึ่งในคุณสมบัติที่ดีที่สุดของ Adobe XD คือ Auto Animate สามารถนำไปใช้ระหว่าง Artboards หลายรายการ ในการทำภาพเคลื่อนไหวดังกล่าวคุณเพียงแค่ต้องทำการเปลี่ยนแปลงอย่างง่าย ๆ กับคุณสมบัติหนึ่ง

มาสร้างอนิเมชั่นที่กำลังโหลดซึ่งแบตเตอรี่จะถูกเติมเต็ม กุญแจสำคัญในการได้รับความสมบูรณ์แบบนี้คือการสร้างอาร์ตบอร์ดแรกอย่างเหมาะสม อาร์ตบอร์ดแรกมีตัวยึดแบตเตอรี่ตามที่แสดงในภาพ มันสามารถสร้างขึ้นโดยใช้รูปทรงสี่เหลี่ยม สำหรับแบตเตอรี่จริงภายในตัวยึดตำแหน่งอาร์ตบอร์ดแรกควรว่างเปล่า (ซึ่งแสดงถึง 0%) ทำสำเนาอาร์ตบอร์ดนี้และสร้างสี่เหลี่ยมสีเขียวที่มีความสูง 50px ที่เข้ากันได้อย่างสมบูรณ์แบบภายในตัวยึดตำแหน่ง สร้างซ้ำที่คล้ายกันดังนั้นความสูงของแบตเตอรี่ในอาร์ตบอร์ดที่สามจะเพิ่มขึ้น 50px และอื่น ๆ ดำเนินการต่อไปจนกระทั่งอาร์ตบอร์ดเต็มไปหมด

ตอนนี้เราต้องสร้างลูปที่ไม่มีที่สิ้นสุดระหว่าง Artboards เหล่านี้เพื่อสร้างภาพเคลื่อนไหวการโหลดแบบซิงโครนัส สำหรับสิ่งนี้ให้ไปที่โหมดต้นแบบคลิกที่อาร์ตบอร์ดแรกแล้วลากลูกศรต้นแบบไปยังอาร์ตบอร์ดที่สอง เปลี่ยนคุณสมบัติในแผงปฏิสัมพันธ์โดยการตั้งค่า TRIGGER เป็นเวลาจากนั้นตั้งค่าความล่าช้าเป็น 0 วินาทีซึ่งจะเคลื่อนไหวไปยัง Artboard ที่สองเมื่อดูตัวอย่าง ดำเนินการเปลี่ยนแปลงเดียวกันกับ Artboards ทั้งหมดโดยการเชื่อมโยงที่สองไปยังที่สามและอื่น ๆ ก่อนที่จะเชื่อมโยงอาร์ตบอร์ดสุดท้ายไปยังอันแรก เราประสบความสำเร็จในการเชื่อมโยงอาร์ตบอร์ดทั้งหมดเพื่อสร้างลูปที่ไม่มีที่สิ้นสุด เปลี่ยนการตั้งค่าการผ่อนคลายและระยะเวลาตามความต้องการของคุณเพื่อให้การโหลดราบรื่นขึ้น

แม้ว่าจะมีการเปลี่ยนแปลงมากมายที่สามารถลองใช้ Adobe XD แต่ความสามารถในปัจจุบันของเครื่องมือมี จำกัด และยังคงได้รับการปรับปรุงตามปกติโดยทีมพัฒนา ดังนั้นเมื่อเปรียบเทียบกับเครื่องมือเช่นหลักการคุณอาจรู้สึกราวกับว่า XD มีชุดเครื่องมือที่ จำกัด อย่างไรก็ตาม Adobe ได้ทำงานที่ยอดเยี่ยมในการทำให้เครื่องมือเรียนรู้และใช้งานง่าย การสร้างปฏิสัมพันธ์ที่ซับซ้อนอาจใช้เวลาและความพยายาม แต่พวกเขาทำได้โดยสิ้นเชิงโดยใช้คุณสมบัติ Auto Animate ของ XD กุญแจสำคัญคือการเข้าใจพื้นฐานของวัตถุที่เคลื่อนไหวปรับขนาดพวกเขาเพิ่มเลเยอร์และการใช้ทริกเกอร์

บทความนี้ปรากฏว่าปัญหาเดิม 326 ของ สุทธิ นิตยสารชั้นนำของโลกสำหรับนักออกแบบเว็บไซต์และนักพัฒนา ซื้อ ปัญหา 326 หรือ สมัครสมาชิกที่นี่ .

อ่านเพิ่มเติม:

  • 40 บทช่วยสอน WordPress ที่ยอดเยี่ยม
  • 11 Framework จาวาสคริปต์ที่น่าตื่นตาตื่นใจ
  • Neumorphism เป็นแนวโน้มที่ร้อนแรงที่สุดของ 2020 หรือไม่

วิธีการ - บทความยอดนิยม

วิธีการวาดสุนัข

วิธีการ Sep 18, 2025

บทช่วยสอนวันนี้จะแสดงวิธีการวาดสุนัข โครงกร�..

ใช้ WordPress เป็น CMS หัวขาด

วิธีการ Sep 18, 2025

ก่อนอื่นฉันเคยได้ยินเกี่ยวกับวิธีการ CMS แบบหั�..

รูปแบบที่ยืดหยุ่นแฟชั่นด้วย CSS Grid

วิธีการ Sep 18, 2025

กริด CSS เหมาะสำหรับการสร้างเลย์เอาต์สองแกนของ�..

วิธีการทาสีสะท้อนความน่าเชื่อถือ

วิธีการ Sep 18, 2025

เทคนิคการวาดภาพดิจิทัลทำให้เป็นไปได้ที่จะแส..

สร้างร่างดิจิทัลแบบร่าง

วิธีการ Sep 18, 2025

ในบทช่วยสอนนี้เรานำการวาดภาพการวาดภาพเชิงกล..

วิธีการใช้โลโก้เวกเตอร์ของคุณจาก 2D เป็น 3D

วิธีการ Sep 18, 2025

ในบทช่วยสอนนี้เรากำลังดูวิธีที่คุณสามารถใช้..

วิธีการฝึกซ้อมผิวหนังในแบบ 3 มิติ

วิธีการ Sep 18, 2025

เป็นเวลานานแล้วตอนนี้ฉันติดอยู่ในร่องด้วยขอ..

วาดกระดูกและกล้ามเนื้อที่แม่นยำ

วิธีการ Sep 18, 2025

กายวิภาคศาสตร์เป็นวิชาขนาดใหญ่และต้องการการ..

หมวดหมู่