Languageไทย
เสาหลัก 06 · ระบบการออกแบบ
Motion Tokens: สถาปัตยกรรมที่สมบูรณ์แบบสำหรับระบบการออกแบบ
สร้างมาตรฐานการเคลื่อนไหวทั่วทั้งระบบนิเวศผลิตภัณฑ์ของคุณ หยุดการเข้ารหัสแบบฮาร์ดโค้ดขนาด 300 มิลลิวินาทีในคลังเก็บนักพัฒนาหลายสิบแห่ง
What is Motion Tokens: in ExodeUI?
Motion Token เป็นโทเค็นการออกแบบมาตรฐานที่กำหนดพารามิเตอร์แอนิเมชั่น เช่น ความแข็งของสปริง อัตราส่วนการหน่วง มวล เส้นโค้งการค่อยๆ เปลี่ยน และระยะเวลา ในรูปแบบที่เครื่องสามารถอ่านได้ Motion Token Generator ฟรีของเราสร้างชุดเริ่มต้นที่คุณสามารถส่งออกสำหรับ CSS และ JSON และเครื่องมือสร้างโทเค็นจะเปลี่ยนเป็นโค้ดสำหรับแต่ละแพลตฟอร์ม
สถาปัตยกรรมหลัก
เหตุใดวิศวกรและนักออกแบบจึงเลือก ExodeUI
Design, logic and motion in one file that runs inside your app.
โทเค็นฟิสิกส์สปริง
กำหนดการเคลื่อนไหวด้วยโทเค็นทางกายภาพ (ความแข็ง การหน่วง มวล) แทนที่จะใช้ตัวเลขกำหนดจังหวะเอง
การสร้างรหัสอัตโนมัติ
เปลี่ยนโทเค็นให้เป็นตัวแปร CSS และโค้ดแพลตฟอร์มด้วยไปป์ไลน์การสร้างโทเค็นที่มีอยู่ของคุณ
ลำดับชั้นความหมาย
จัดระเบียบโทเค็นการเคลื่อนไหวในระดับส่วนกลาง ความหมาย และองค์ประกอบ (เช่น Motion.spring.snappy, Motion.feedback.success)
การซิงโครไนซ์เครื่องมือออกแบบ
ซิงค์โทเค็นการเคลื่อนไหวได้อย่างราบรื่นระหว่างตัวแปร Figma และโค้ดเบส Git ที่ใช้งานจริง
การประเมินวัตถุประสงค์
ExodeUI เปรียบเทียบกับอย่างไร Traditional Design Tokens (Color/Type Only)
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- การสนับสนุนชั้นหนึ่งเต็มรูปแบบสำหรับโทเค็นสปริงทางกายภาพและเส้นโค้งความเร็ว
- ส่งออกไปยังอุปกรณ์เคลื่อนที่แบบเนทีฟ (SwiftUI/เขียน) และรูปแบบเว็บพร้อมกัน
- ตัวตรวจสอบภาพช่วยให้นักออกแบบรู้สึกถึงฟิสิกส์ของโทเค็นแบบเรียลไทม์
- ทางเลือกในการเข้าถึงอัตโนมัติสำหรับการเคลื่อนไหวแบบลดความชอบ
Traditional Design Tokens (Color/Type Only)
- เครื่องมือโทเค็นส่วนใหญ่รองรับเฉพาะสีคงที่ การพิมพ์ และการเว้นวรรค
- การเคลื่อนไหวลดลงเหลือเพียงสตริงระยะเวลาคร่าวๆ เช่น "การค่อยๆ เข้า-ออก 300 มิลลิวินาที"
- ไม่มีวิธีทดสอบโทเค็นไดนามิกแบบเห็นภาพก่อนที่จะส่งไปยังโค้ด
- วิศวกรต้องตีความข้อกำหนดการเคลื่อนไหวเป็นโค้ดเฟรมเวิร์กด้วยตนเอง
นักพัฒนาแฮนด์ออฟ
ใช้ในรหัสของคุณ
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
นำเข้า { ExodeUICanvas } จาก 'exodeui';
// สปริง สถานะ และเวลาอยู่ในไฟล์ .exode (ออกแบบใน
// บรรณาธิการ) รหัสของคุณส่งผ่านอินพุตและได้ยินเหตุการณ์กลับ
ฟังก์ชั่นการส่งออก SnappyButton() {
กลับ (
<ExodeUICanvas
src="/snappy_button.bexode"
onTrigger={(ชื่อ) => console.log('เหตุการณ์ ExodeUI:', ชื่อ)}
/>
);
}เหตุใดระบบการออกแบบจึงล้มเหลวเมื่อมีการเคลื่อนไหว
ระบบการออกแบบสมัยใหม่มีจานสี สเกลการพิมพ์ เงาระดับความสูง และตารางระยะห่างที่สมบูรณ์แบบ แต่การเคลื่อนไหวยังคงเป็นสัญลักษณ์การออกแบบที่ถูกลืม ในองค์กรส่วนใหญ่ เอกสารภาพเคลื่อนไหวประกอบด้วยหลักเกณฑ์ที่คลุมเครือ เช่น "ภาพเคลื่อนไหวควรรวดเร็ว" หรือตัวแปรระยะเวลาคงที่ 250 มิลลิวินาที
- ความรู้สึกของแบรนด์ที่ไม่สอดคล้องกัน: วิศวกรคนหนึ่งใช้การค่อยๆ เปลี่ยน อีกคนใช้การค่อยๆ เข้าออก และมือถือใช้ค่าเริ่มต้นของ Apple
- เส้นโค้งระยะเวลาแบบเปราะ: ภาพเคลื่อนไหวตามกำหนดเวลาจะรู้สึกช้าในองค์ประกอบขนาดเล็กและรีบไปบนแผ่นงานด้านล่างขนาดใหญ่
- การละเลยความสามารถในการเข้าถึง: ทีมล้มเหลวในการดำเนินการแทนที่การลดการเคลื่อนไหวแบบเหนียวแน่นในทุกองค์ประกอบ
ลำดับชั้นโทเค็นการเคลื่อนไหว 3 ระดับ
ExodeUI จำลองโทเค็นการเคลื่อนไหวในสามระดับที่มีโครงสร้าง:
ระดับที่ 1: โทเค็นดั้งเดิมระดับโลก
ค่าคงที่ทางคณิตศาสตร์ดิบ (เช่น ความแข็ง -400, การหน่วง -25, มวล -1)
ระดับ 2: โทเค็นเจตนาความหมาย
ชื่อการทำงานที่เชื่อมโยงกับเจตนา (เช่น Motion.interactive.snappy, Motion.modal.enter)
ระดับ 3: โทเค็นเฉพาะส่วนประกอบ
แทนที่การเชื่อมโยงกับส่วนประกอบเฉพาะ (เช่น button.toggle.switch)
Topic Cluster Network
สำรวจแนวคิดและเครื่องมือที่เชื่อมต่อกัน
เครื่องมือสร้าง Motion Token
สร้างและส่งออกโทเค็นการเคลื่อนไหว
สภาพแวดล้อมการพัฒนาการเคลื่อนไหว
วิสัยทัศน์ของแพลตฟอร์ม MDE
ไฟล์ ExodeUI ถูกสร้างขึ้นอย่างไร
จาก .exode สู่แอปของคุณ
อภิธานศัพท์: โทเค็นการเคลื่อนไหว
คำจำกัดความที่เป็นทางการและสคีมามาตรฐาน
มีคำถามใช่ไหม?
คำถามที่พบบ่อย
สร้างส่วนประกอบที่มีชีวิตด้วยการเคลื่อนไหวจริง
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.