Adobe XD: วิธีใช้คุณสมบัติ Auto-onmate

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

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

ในฐานะนักออกแบบเรามักต้องการเครื่องมือมากมายในการออกแบบขั้นตอนต่าง ๆ ของการทำงานของผู้ใช้ประสบการณ์ Adobe กำลังสร้างสรรค์เครื่องมือข้ามแพลตฟอร์มที่สามารถใช้สำหรับการทดสอบการสร้าง Wireframes ส่งข้อมูลจำเพาะออกไปยังทีม Dev และการออกแบบร่วมกัน (ดูรายการของเรา เครื่องมือ wireframe สำหรับตัวเลือกเพิ่มเติม)

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

ในบทความนี้ฉันจะอธิบายวิธีสร้างภาพเคลื่อนไหวขนาดเล็กอย่างง่ายโดยใช้คุณสมบัติ Auto-onmate เราจะดูการโต้ตอบด้วยท่าทางที่อิงด้วยท่าทาง

หากคุณยังไม่มี Adobe XD ให้ดูวิธีการของเรา ดาวน์โหลด Adobe XD โพสต์แล้วตรวจสอบรายการโปรดของเรา Adobe XD ปลั๊กอิน .

01. ปัดท่าทางเพื่อเพิ่มไปที่ Fav หรือ Delete

Adobe XD

(รูปภาพ: © Vamsi Batchu)

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


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

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

02. สร้างไพ่ใบที่สอง

สำหรับการ์ดใบที่สอง - C2 - เรากำลังจะเพิ่มการเพิ่มในการดำเนินการปัดขวาในคิวในลักษณะที่คล้ายคลึงกัน สร้างกลุ่ม A2 ด้วยไอคอนข้อความและพื้นหลังสีเขียว เพิ่มเข้าไปในด้านซ้ายของกลุ่ม C2 และสร้างเลเยอร์รวมชื่อ L2 ตอนนี้ Artboard แรก (S1) เสร็จสมบูรณ์ ลองทำสำเนาอาร์ตบอร์ดทั้งหมดสองครั้งในสองรัฐ - S2 และ S3 เราจะใช้ S2 สำหรับการลบ Swipe และ S3 เพื่อเพิ่มในการปัดคิว เพื่อที่จะทำเช่นนั้นเราต้องทำการเปลี่ยนแปลงบางอย่างสำหรับแต่ละเพลงเหล่านี้ นี่คือการตั้งค่าสำหรับ Swipes ทั้งสอง:

● S1 - เปลี่ยนความทึบของ A1 และ A2 เป็น 0% และจัดเรียง L1, L2 เพื่อให้พวกเขาอยู่ตรงกลาง

● S2 - จัดเรียงการ์ด L1 เพื่อให้ขอบขวาของ L1 สอดคล้องกับการ์ดอื่น ๆ เปลี่ยนความทึบของ A2 เป็น 0%

● S3 - จัดเรียงการ์ด L2 เพื่อให้ขอบด้านซ้ายของ L2 สอดคล้องกับการ์ดอื่น ๆ เปลี่ยนความทึบของ A1 เป็น 0%


03. เคลื่อนไหว Artboards

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

04. ขยายการ์ดของคุณ

Adobe XD

(รูปภาพ: © Vamsi Batchu)

การโต้ตอบครั้งที่สองเราจะดูที่พบได้ทั่วไปในแอพและเว็บไซต์ส่วนใหญ่ที่คุณกำลังดำเนินการตามรายการหรือแคตตาล็อกของผลิตภัณฑ์และเมื่อคุณคลิกที่หนึ่งในนั้นคุณจะถูกนำไปใช้ในหน้าใหม่ที่มีรายละเอียดเพิ่มเติมเกี่ยวกับผลิตภัณฑ์ . Auto-onimate ทำให้ง่ายมากในการเคลื่อนไหวปฏิสัมพันธ์แบบนี้ สำหรับตัวอย่างนี้ให้เราเริ่มต้นด้วยการสร้างหน้าแคตตาล็อกผลิตภัณฑ์ คุณสามารถเลือกผลิตภัณฑ์ใด ๆ เช่นโทรศัพท์มือถือ (ซึ่งจะเป็นตัวอย่างของเรา) เครื่องแต่งกาย ฯลฯ สำหรับ Artboard แรก (S1) สร้างแถบส่วนหัวด้วยเมนูแฮมเบอร์เกอร์และไอคอนโปรไฟล์

05. ทำงานกับรูปภาพและรายละเอียด

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

06. ออกแบบอาร์ตบอร์ดที่สอง

ตอนนี้เพื่อไปทำงานบนกระดานศิลปะที่สอง ทำซ้ำ Artboard และ Delete Cards C1, C3-C6 เรากำลังจะใช้การ์ดที่มีอยู่ C2 เพื่อสร้างหน้านี้ดังนั้นชื่อของเลเยอร์จึงเหมือนกัน ก่อนอื่นให้ขยายพื้นหลังของการ์ดเพื่อให้ครอบคลุมทั้งหน้าด้านล่างแถบส่วนหัว ตอนนี้เราสามารถจัดเรียงรายการอื่น ๆ ในลักษณะที่เราต้องการ - แนวคิดพื้นฐานที่ควรจะแตกต่างจากวิธีที่การ์ดอยู่ใน Artboard S1 เพราะเมื่อคุณเห็นการเปลี่ยนแปลง ด้วยเหตุผลนั้นมาชนชื่อมือถือเป็น 25px และทำให้ตัวหนา ในทำนองเดียวกันเพิ่มขนาดของราคาและวางไว้ใต้ชื่อมือถือ ถัดไปเป็นส่วนสำคัญ - ภาพของโทรศัพท์มือถือ คุณต้องเพิ่มขนาดของมันอย่างมีนัยสำคัญและสอดคล้องกับมันในศูนย์

07. ใช้สัมผัสการตกแต่ง

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

08. สร้างการโต้ตอบขนาดเล็ก

ไปที่โหมดต้นแบบตอนนี้เพื่อสร้างการโต้ตอบขนาดเล็ก เมื่อต้องการทำเช่นนี้ให้เลือกการ์ด C2 ใน Artboard S1 แล้วลากลูกศรสีน้ำเงินไปที่ ArtBoard S2 ในแผงปฏิสัมพันธ์ทางด้านขวามือให้ตั้งทริกเกอร์เป็น Tap, Action เป็น Auto-animate และปลายทางเป็น S2 สำหรับการมีปฏิสัมพันธ์ที่ราบรื่นยิ่งขึ้นเป็นเรื่องดีที่จะไปได้อย่างง่ายดายเพื่อการผ่อนคลายและเวลา 0.4 หรือ 0.6 วินาที คลิกที่ไอคอนลูกศรด้านหลังบน Artboard S2 แล้วลากลูกศรไปที่ S1 คุณสามารถใช้การตั้งค่าเดียวกันสำหรับสิ่งนี้เพื่อให้สอดคล้องกัน ตอนนี้คลิกที่ S1 และเล่นต้นแบบเพื่อดูเวทมนตร์ คุณจะสังเกตภาพเคลื่อนไหวที่ราบรื่นเมื่อการ์ด C2 ถูกแตะ ปรับการตั้งค่าการผ่อนคลายเพื่อทำให้แอนิเมชั่นราบรื่นขึ้น

09. ไปไกลกว่าพื้นฐาน

Adobe XD

(รูปภาพ: © Vamsi Batchu)

ตอนนี้คุณมีแนวคิดพื้นฐานเกี่ยวกับวิธีการสร้างการโต้ตอบอย่างง่าย นอกจากนี้คุณยังสามารถลองใช้การเคลื่อนไหวอัตโนมัติโดยการเปลี่ยนสีขององค์ประกอบขนาดและรูปร่างเพื่อดูการเปลี่ยนผ่านที่ราบรื่นระหว่างอาร์ตบอร์ดหลายรายการ นอกเหนือจากการแตะและลากทริกเกอร์แล้วยังมีทริกเกอร์อื่น ๆ ที่นักออกแบบสามารถทดลองได้เช่นการใช้แป้นคีย์บอร์ดและปุ่ม Gamepad เพื่อทริกเกอร์ต้นแบบในการแตะปุ่มเฉพาะ นอกจากนี้ยังมีโหมดที่คุณสามารถสร้างและออกแบบต้นแบบเสียงสำหรับ Alexa, Siri และอื่น ๆ ที่คุณสามารถกำหนดประโยคและพูดเพื่อรับคำตอบที่เฉพาะเจาะจง

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

  • ที่ ผู้สร้างเว็บไซต์ที่ดีที่สุด
  • ทางลัด Adobe XD ที่คุณควรรู้ (แต่อาจไม่ใช่)
  • สร้างต้นแบบด้วย Adobe XD

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

เริ่มต้นกับ Grav CMS

วิธีการ Sep 11, 2025

(เครดิตรูปภาพ: ในอนาคต) Grav เป็นระบบการจัดกา�..

สำรวจการสร้างภาพข้อมูลด้วย P5.js

วิธีการ Sep 11, 2025

(เครดิตรูปภาพ: นิตยสารสุทธิ) P5.JS เป็นการใช้ง�..

เข้าใจการประมวลผลภาษาธรรมชาติ

วิธีการ Sep 11, 2025

เว็บไซต์และแอพสามารถมีชิ้นส่วนที่เคลื่อนไหว..

เริ่มต้นด้วย Express.js

วิธีการ Sep 11, 2025

การสร้างแอปพลิเคชันที่หันหน้าไปทางเบราว์เซอ..

สร้างภาพบุคคลที่แสดงจากภาพถ่าย

วิธีการ Sep 11, 2025

ฉันเรียนศิลปะและ เทคนิคการวาดภาพ และเป็�..

19 เคล็ดลับสำหรับศิลปะที่กล้าหาญที่ยอดเยี่ยม

วิธีการ Sep 11, 2025

หน้า 1 จาก 2: หน้า 1 หน้า 1 ..

วิธีการสร้างมอนสเตอร์สไตล์เขาวงกตของ Pan

วิธีการ Sep 11, 2025

หน้า 1 จาก 2: หน้า 1 หน้า 1 ..

ทาสีชีวิตที่แสดงออกในอะคริลิก

วิธีการ Sep 11, 2025

ยังคงมีชีวิตไม่ใช่ถ้วยชาของทุกคน - ใช้ชุดหนึ่งของ เทคนิคการวาดภ�..

หมวดหมู่