Use Adobe XD to create micro interactions

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

เมื่อเร็ว ๆ นี้มีการเปลี่ยนแปลงที่สำคัญบางอย่างในภูมิทัศน์ต้นแบบ: นักออกแบบมีทางเลือกมากมาย

เช่นเดียวกับสาขาวิชาอื่น ๆ ไม่มีการออกแบบและเครื่องมือต้นแบบเพียงชิ้นเดียวที่สามารถทำทุกอย่างได้สำเร็จ

ขั้นตอนต้องใช้ชุดเครื่องมือเฉพาะ นี่เป็นช่วงเวลาที่นักออกแบบใช้ Photoshop และ Sketch เท่านั้น

แม้ว่าจะเป็นเครื่องมือออกแบบ UI ที่ยอดเยี่ยม แต่ก็ขาดการไหลเวียนของผู้ใช้ที่รวดเร็วและความสามารถของ wireframes (เครื่องมือ wireframe อันดับต้น ๆ ของเราสำหรับตัวเลือก wireframing เพิ่มเติม)

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

การเข้ารหัสเป็นวิธีการสร้างปฏิสัมพันธ์เหล่านี้ แต่ต้องใช้เวลานาน

โชคดีที่หนึ่งในส่วนเสริมที่ทรงพลังที่สุดของ Adobe XD Toolkit สามารถช่วยเผยแพร่การอัปเดตเครื่องมือต้นแบบที่มีประโยชน์ที่เรียกว่า “Auto Chetan”

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

คุณสมบัติเหล่านี้อาจเป็นอะไรก็ได้เช่นขนาดตำแหน่งของ X และ Y ความทึบการหมุน เห็นได้ชัดว่า Adobe XD นำเสนอการโต้ตอบพื้นฐานเช่นการเลื่อนการกดและการหยุดพัก

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

นอกจากนี้ยังสามารถใช้เพื่อสร้างลำดับชั้นภาพ CTA หรือข้อความที่เลือนหายไปในหรือนอกหน้าจอชั่วคราว

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

ทำการเปลี่ยนแปลงสถานะโดยใช้ Auto-animate

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

ในอาร์ตบอร์ดเริ่มต้นให้วาดรูปร่าง – ในตัวอย่างของเราคือสี่เหลี่ยมผืนผ้าสีเขียว 500px X 200px เปิดอาร์ตบอร์ดนี้แล้วเลือกสี่เหลี่ยมผืนผ้าบนอาร์ตบอร์ดอื่น

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

ตอนนี้คลิกที่แท็บ Prototype ที่มุมบนซ้ายเลือกอาร์ตบอร์ดแรกและเชื่อมโยงโดยใช้ลูกศรบนอาร์ตบอร์ดที่สอง

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

พารามิเตอร์แต่ละตัวสามารถปรับแต่งได้ตามความต้องการ ทริกเกอร์มีห้าประเภท: แตะลากและตั้งเวลาเพื่อเริ่มแอนิเมชั่น

ตั้งค่าเริ่มต้นของแท็บ Action เป็น Auto Animate และเนื่องจากมีเพียงสองอาร์ตบอร์ดในตัวอย่างของเราเรามาตั้งแท็บ Destination เป็น Artboard 2 กันเถอะนอกจากนี้ยังมีการเปลี่ยนที่ราบรื่นมากมายซึ่งสามารถเลือกและตั้งเวลาได้

คลิกที่ไอคอนเล่นที่ด้านบนขวาเพื่อดูว่า Auto Chetan แสดงมายากลและทำให้สี่เหลี่ยมผืนผ้าเคลื่อนไหว

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

ขยายการ์ด

ตอนนี้เรามาดูตัวอย่างแบบโต้ตอบเพิ่มเติมและอีกหนึ่งองค์ประกอบที่มีหลายองค์ประกอบ เริ่มต้นด้วยการสร้างอาร์ตบอร์ดแรกที่มีการ์ด การ์ดมีองค์ประกอบต่างๆเช่นส่วนหัวคำอธิบายและลิงก์ที่ด้านล่าง ดูประวัติ

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

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

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

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

Leave a Comment