ROASWELLDIGITAL
GROWTH
STUDIO
04.5 / โมชันเว็บและ UI← โมชันกราฟิก

อินเทอร์เฟซที่รู้สึกมีชีวิต

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

ดูฝีมือ

แล็บโมชัน: เจ็ดการโต้ตอบที่คุณสัมผัสได้

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

Spring toggle

A spring, not a tween. It overshoots a hair and settles, so it feels physical.

spring 520 / 30

Magnetic pull

The control leans toward the pointer. Click for a ripple from the touch point.

strength 0.4
04Depth

Depth tilt

A card that reads the pointer and tilts in 3D with a moving highlight.

perspective 700

Menu morph

Three lines become a cross. One icon, two states, no swapping assets.

spring 420 / 28
0%

Progress ring

A stroke that draws on an ease-out curve while the number counts to match.

ease 0.16, 1, 0.3, 1
  • Brief
  • Boards
  • Animate
  • Ship

Drag to reorder

Grab a step and move it. Neighbours make room as you go.

layout animation

Text scramble

Hover the word. Characters resolve left to right, like a decoder locking on.

800 ms

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

สิ่งที่คุณได้รับ

ทุกอย่างที่ต้องใช้
เพื่อเปิดตัว

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

01

หลักการโมชัน

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

02

การเปลี่ยนเมื่อเลื่อนและเปลี่ยนหน้า

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

03

ไลบรารีไมโครอินเทอร์แอคชัน

ปุ่ม สวิตช์ เมนู การ์ด และแบบฟอร์มที่ตอบสนองอย่างมีจุดมุ่งหมาย

04

โค้ดใช้งานจริงหรือไฟล์ส่งออก

CSS และ JavaScript ที่สะอาด หรือไฟล์ส่งออก Lottie และวิดีโอ พร้อมสำหรับสแตกของคุณ

05

เวอร์ชันเพื่อการเข้าถึง

ทางเลือกลดการเคลื่อนไหวและพฤติกรรมโฟกัสที่ออกแบบมาตั้งแต่แรก ไม่ใช่แปะภายหลัง

06

งบประสิทธิภาพ

โมชันถูกวัดเทียบกับเวลาโหลดและความหน่วงในการโต้ตอบก่อนปล่อยใช้งาน

ขั้นตอนการทำงาน

จากบรีฟ
สู่ผลงานสำเร็จ

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

01

ตรวจสอบ

หาว่าโมชันจะช่วยให้ชัดเจนตรงไหน และจะแค่เพิ่มสัญญาณรบกวนตรงไหน

02

กำหนดหลักการ

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

03

สร้างต้นแบบในเบราว์เซอร์

สร้างในสื่อจริง เพื่อให้สิ่งที่คุณอนุมัติคือสิ่งที่ปล่อยออกไป

04

ปล่อยใช้งานและวัดผล

ปล่อยพร้อมงบประสิทธิภาพ และดูว่าผู้ใช้ทำอะไรจริง ๆ

เชื่อมกับอะไร

หนึ่งสตูดิโอ
หนึ่งระบบ

โมชันทำงานได้แรงที่สุดเมื่อบรีฟด้วยข้อมูลและส่งไปยังที่ที่มีงบประมาณ

คำถาม

คำถามดี ๆ
คำตอบตรงไปตรงมา

ไม่ใช่สิ่งที่คุณมองหา? ถามเราได้โดยตรง และผู้อาวุโสจะตอบกลับ

แอนิเมชันจะทำให้เว็บไซต์เราช้าลงไหม

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

คุณเขียนโค้ดให้ไหม

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

แล้วเรื่องการเข้าถึงล่ะ

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

ใช้งานร่วมกับ CMS หรือเฟรมเวิร์กของเราได้ไหม

เราทำงานกับสแตกสมัยใหม่ส่วนใหญ่ บอกเราว่าคุณใช้อะไร แล้วเราจะยืนยันแนวทางที่ดีที่สุด

ขอดูมันทำงานได้ไหม

คุณกำลังดูอยู่ ลำดับการเลื่อน ตัวนับ และเอฟเฟกต์เผยตัวในเว็บไซต์นี้สร้างด้วยแนวทางเดียวกัน

มาคุยเรื่อง
การเติบโตกัน

เริ่มบทสนทนา