ระบบการเคลื่อนไหวคืออะไร? คู่มือปฏิบัติสำหรับทีม UI
ระบบการเคลื่อนไหวคือกฎ โทเค็น และส่วนประกอบที่ใช้ร่วมกันซึ่งตัดสินว่าผลิตภัณฑ์จะเคลื่อนย้ายอย่างไร มีอะไรอยู่ในหนึ่งเดียว วิธีจัดการ และตำแหน่งที่ ExodeUI เหมาะสม
หลัก Takeaway
ระบบการเคลื่อนไหวคือชุดกฎ โทเค็น ส่วนประกอบ และรหัสที่ใช้ร่วมกันซึ่งตัดสินใจว่าจะเคลื่อนย้ายผลิตภัณฑ์อย่างไร โดยครอบคลุมระยะเวลา การผ่อนแรง สปริง การออกแบบท่าเต้น และสถานะการโต้ตอบ เพื่อให้ทีมนำการเคลื่อนไหวที่ได้รับการอนุมัติมาใช้ซ้ำ แทนที่จะสร้างใหม่ทีละหน้าจอ ระบบการเคลื่อนไหวเป็นปัญหาด้านการจัดการพอๆ กับปัญหาการออกแบบ: ระบบต้องการเจ้าของ แหล่งที่มาของความจริง และเส้นทางสู่การผลิต
ระบบการเคลื่อนไหวคืออะไร?
ระบบการเคลื่อนไหวเป็นส่วนหนึ่งของระบบการออกแบบที่อธิบายการเคลื่อนไหว โดยตอบคำถามที่ไลบรารีส่วนประกอบแบบคงที่ไม่สามารถทำได้ เช่น เมนูเปิดได้เร็วแค่ไหน ปุ่มตอบสนองอย่างไรเมื่อกด จะเกิดอะไรขึ้นเมื่อผู้ใช้ขัดจังหวะการเปลี่ยนแปลง และค่าสปริงใดที่เป็นของพื้นผิวใด ผลลัพธ์ไม่ใช่หน้าคำแนะนำสไตล์ ผลลัพธ์คือชุดการตัดสินใจเล็กๆ น้อยๆ ที่สามารถนำกลับมาใช้ใหม่ได้ ซึ่งนักออกแบบและนักพัฒนาสามารถนำไปใช้ได้โดยไม่ต้องสร้างแอนิเมชันใหม่ทุกครั้ง
สิ่งที่อยู่ในระบบการเคลื่อนไหว
ระบบการเคลื่อนไหวที่มีประโยชน์มีห้าส่วน ข้ามไปและระบบจะกลายเป็นโฟลเดอร์ของไฟล์ที่ไม่มีใครใช้
Principle
กฎสั้นๆ ที่อธิบายบุคลิกภาพของผลิตภัณฑ์ ตัวอย่างเช่น: การเคลื่อนไหวยืนยันอินพุตในเฟรมแรก หรือพื้นผิวขนาดใหญ่เคลื่อนที่น้อยกว่าเฟรมเล็ก
โทเค็น
ค่าที่มีชื่อสำหรับระยะเวลา การค่อยๆ เปลี่ยน และสปริง เช่น Motion.enter.fast หรือ Motion.spring.snappy โทเค็นทำให้สามารถตรวจสอบการเคลื่อนไหวได้และรักษาค่าให้สอดคล้องกัน
รูปแบบ
พฤติกรรมที่ใช้ซ้ำได้สำหรับงานทั่วไป: เข้า ออก ขยาย จัดลำดับใหม่ ลาก ยกเลิก สำเร็จ และผิดพลาด
ส่วนประกอบ
Building Block ที่ใช้งานจริงซึ่งใช้รูปแบบอยู่แล้ว ดังนั้นทีมจึงสามารถเข้าไปใช้รูปแบบนี้แทนการอ่านเอกสารแล้วสร้างใหม่ได้
ธรรมาภิบาล
ใครบ้างที่สามารถเปลี่ยนระบบได้ วิธีตรวจสอบการเปลี่ยนแปลง และวิธียกเลิกการเคลื่อนไหวที่เลิกใช้แล้ว
ระบบการเคลื่อนไหวเทียบกับระบบการออกแบบเทียบกับโทเค็นการเคลื่อนไหว
ระบบการออกแบบครอบคลุมถึงสี ประเภท ระยะห่าง ส่วนประกอบ และกฎการใช้งาน ระบบการเคลื่อนไหวคือชั้นการเคลื่อนไหวที่อยู่ภายใน และมักจะมีเจ้าของเป็นของตัวเอง เนื่องจากการเคลื่อนไหวเปลี่ยนแปลงด้วยเหตุผลที่แตกต่างจากสี โทเค็นการเคลื่อนไหวเป็นหน่วยที่เล็กที่สุดของเลเยอร์นั้น: ค่าที่กำหนดชื่อสำหรับจังหวะเวลาและฟิสิกส์ จำเป็นต้องมีไลบรารีโทเค็นแต่ยังไม่เพียงพอ หากไม่มีรูปแบบและส่วนประกอบที่ใช้งานอยู่ โทเค็นจะกลายเป็นรายการตัวเลขที่นักออกแบบตีความแตกต่างกันไปในทุกหน้าจอ
เหตุใดระบบการเคลื่อนไหวจึงล้มเหลว
ระบบการเคลื่อนไหวส่วนใหญ่ล้มเหลวด้วยเหตุผลด้านการปฏิบัติงาน ไม่ใช่ด้านความสวยงาม โทเค็นอยู่ในเอกสารที่ถูกตัดการเชื่อมต่อจากส่วนประกอบต่างๆ การเคลื่อนไหวที่ได้รับอนุมัติจะมีอยู่ในต้นแบบที่นักพัฒนาไม่สามารถเรียกใช้ได้เท่านั้น ทีมหนึ่งใช้ระบบนี้และอีกทีมหนึ่งคงการจัดส่งตามระยะเวลาที่กำหนดตายตัว ระบบไม่มีเจ้าของจึงลอยไป การแก้ไขนั้นหมายถึงการวางระบบไว้ในที่ที่งานเกิดขึ้นแล้ว: ในไฟล์การออกแบบ ในไลบรารีส่วนประกอบ และในการตรวจสอบโค้ด
วิธีการจัดการระบบการเคลื่อนไหว
เริ่มต้นด้วยพื้นผิวเล็กๆ ที่เป็นเจ้าของ และทำให้ระบบเป็นเส้นทางที่ง่ายดาย
- เลือกแหล่งที่มาของความจริงสำหรับโทเค็นและลิงก์ไปยังแหล่งนั้นจากไฟล์การออกแบบและโค้ดเบส
- โทเค็นชื่อตามเจตนา ไม่ใช่ตามค่า: motion.exit.fast มีประโยชน์มากกว่า Motion.200ms
- จัดส่งชุดรูปแบบเล็กๆ ก่อนที่จะเพิ่มโทเค็นเพิ่มเติม
- ตรวจสอบการเปลี่ยนแปลงการเคลื่อนไหว เช่น การเปลี่ยนแปลงโค้ด ด้วยการบันทึกก่อนและหลัง
- ติดตามการใช้ซ้ำ: จำนวนส่วนประกอบใหม่ที่ใช้รูปแบบที่ได้รับอนุมัติแทนการกำหนดเวลาแบบกำหนดเอง
- เลิกใช้ค่าเก่าตามกำหนดเวลาเพื่อให้ระบบไม่สะสมค่าที่ซ้ำกัน
ExodeUI เหมาะกับตรงไหน
ExodeUI เก็บการเคลื่อนไหวไว้ในไฟล์ .exode ที่เปิดอยู่ แทนที่จะอยู่ในข้อกำหนดแยกต่างหาก เค้าโครง สถานะ ไทม์ไลน์ ฟิสิกส์สปริง ลอจิกและอินพุตพร้อมกัน และแพ็กเกจรันไทม์จะเล่นไฟล์ใน React, Vue, Svelte, Angular, Solid, React Native, SwiftUI และ Flutter นั่นทำให้ระบบการเคลื่อนไหวมีข้อมูลอ้างอิงในการทำงาน: นักออกแบบสามารถเปิดส่วนประกอบที่ได้รับอนุมัติ นักพัฒนาสามารถตรวจสอบไฟล์เดียวกัน และเครื่องมือเข้ารหัส AI สามารถแก้ไขได้ผ่านเซิร์ฟเวอร์ MCP ไฟล์นี้ไม่ได้แทนที่การกำกับดูแล มันแค่ทำให้การกำกับดูแลมีบางสิ่งที่เป็นรูปธรรมในการชี้ให้เห็น
วิธีสตาร์ทระบบการเคลื่อนไหวในการสปรินต์ครั้งเดียว
ตรวจสอบส่วนประกอบที่คุณใช้บ่อยที่สุด 10 รายการ และแสดงรายการทุกระยะเวลา เส้นโค้ง และสปริงในส่วนประกอบเหล่านั้น จัดกลุ่มค่าที่ทำงานเหมือนกันและตั้งชื่อกลุ่ม เลือกห้ารูปแบบที่ครอบคลุมการโต้ตอบส่วนใหญ่ สร้างส่วนประกอบอ้างอิงหนึ่งรายการต่อรูปแบบ บันทึกว่าควรใช้เมื่อใด และเพิ่มโทเค็นให้กับการออกแบบและไลบรารีโค้ดของคุณ จากนั้นเรียกใช้คุณลักษณะเดียวผ่านระบบใหม่และวัดจำนวนค่าที่กำหนดเองที่ยังต้องการ หมายเลขนั้นเป็นพื้นฐานของคุณสำหรับการวิ่งครั้งต่อไป
ตัวอย่างการใช้งานการผลิต
import { ExodeUICanvas } from 'exodeui';
// The motion system lives in the .exode file. Your app supplies inputs
// and listens for events; it does not restate spring values in code.
export function SystemButton({ pressed, onConfirm }) {
return (
<ExodeUICanvas
src="/system_button.exode"
inputs={{ pressed }}
onTrigger={(name) => name === 'confirm' && onConfirm()}
/>
);
}คีย์ Principles ที่ต้องจำ
- ระบบการเคลื่อนไหวคือเลเยอร์การเคลื่อนไหวของระบบการออกแบบ ไม่ใช่โฟลเดอร์ของวิดีโอต้นแบบ
- มันต้องการหลักการ โทเค็น รูปแบบ ส่วนประกอบที่ใช้งานจริง และการกำกับดูแล
- โทเค็นที่ไม่มีกฎการใช้งานจะกลายเป็นตัวเลขที่ทุกทีมตีความต่างกัน
- การเปลี่ยนแปลงการเคลื่อนไหวควรได้รับการตรวจสอบเช่นเดียวกับการเปลี่ยนแปลงโค้ด
- ExodeUI เก็บการเคลื่อนไหว สถานะ และตรรกะไว้ในไฟล์เปิดไฟล์เดียวที่รันไทม์สามารถเล่นได้