นำร่างภาพและเอฟเฟ็กต์ใกล้เข้ามาด้วยกัน

แนะนำเครื่องมือเวิร์กโฟลว์ภาพเคลื่อนไหวใหม่สองชิ้นจาก UX Motion Design ที่ Google

แนะนำผู้ตรวจสอบ Spacetime และ Sketch2AE

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

ในฐานะนักออกแบบการเคลื่อนไหว UX ที่ Google ฉันได้ดูความน่าเชื่อถือของแพลตฟอร์มและแอปพลิเคชันของเราเพิ่มขึ้นเพื่อเชื่อมช่องว่างระหว่างการออกแบบการโต้ตอบและภาพเคลื่อนไหวบางส่วน Google เข้าใจถึงความแตกต่างที่สำคัญระหว่างการเล่าเรื่องและการคลิกผ่านหน้าจอ การเสริมอำนาจนั้นรวมกับความยุ่งยากในช่องว่างที่เหลือในขั้นตอนการทำงานของเราเป็นแรงบันดาลใจให้ Adam Plouffou ให้เวลากับเราในการเล่าเรื่องมากขึ้น

เครื่องมือออกแบบอาจมีความเจ็บปวดได้¯ \ _ (ツ) _ / ¯

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

อดัมและฉันทำงานกับนักออกแบบ UX โดยใช้ Sketch ในขณะที่เราทำงานใน After Effects (AE) เป็นหลัก แม้ว่าเครื่องมือเหล่านี้จะกลายเป็นมาตรฐานอุตสาหกรรม แต่พวกเขาก็ไม่สามารถเล่นด้วยกันได้เลย วันที่ชื่นชอบน้อยที่สุดของเราถูกใช้ไปกับการสร้างเนื้อหาใหม่ใน Illustrator หรือ After Effects ซึ่งมักใช้เวลาเพียงไม่กี่ชั่วโมงในการสร้างบางสิ่งที่มีความหมาย และเมื่อเราสร้างบางสิ่งขึ้นมาในที่สุดก็มีอีกหนึ่งงานเขียนที่น่าเบื่อ - การหาวิธีอธิบายรายละเอียดการเคลื่อนไหวในงานวิศวกรรม (╯°□°) ╯︵ ┻━┻) เหนื่อยกับการเสียเวลาอดัมฟักเครื่องมือทองสำหรับSUMux² Motion ทีมงานออกแบบที่เราไม่สามารถจินตนาการได้ว่าจะรักษาตนเองไว้ดังนั้นเราจึงรู้สึกตื่นเต้นที่จะแบ่งปัน:

Sketch2AE: เนยถั่วกับเยลลี่ระหว่าง Sketch และ AE
Inspector Spacetime: Google Translate สำหรับวิศวกร

Sketch2AE: ร่างเพื่อผลหลังจากลบแอสไพริน

Sketch2AE เป็นปลั๊กอินร่างและสคริปต์ AE ที่ส่งผลงานศิลปะจาก Sketch ไปยัง After Effects เป็นเลเยอร์รูปร่างและข้อความที่แก้ไขได้โดยไม่จำเป็นต้องใช้ไฟล์ภายนอก กลุ่มและสัญลักษณ์จะได้รับการเก็บรักษาไว้ในขณะที่นำเข้ารูปร่างที่เรียบง่ายเป็นรูปร่างแบบพาราเมตริกเพื่อให้เคลื่อนไหวได้ง่าย ราวกับว่ามีคนสร้างและจัดระเบียบเนื้อหา Sketch ทั้งหมดสำหรับคุณโดยกำเนิดใน After Effects ภายในไม่กี่วินาที ขอบคุณอดัม!

สำหรับทีมของฉันขั้นตอนนี้เป็นขั้นตอนที่เพิ่มขึ้นจาก Adobe Illustrator => เวิร์กโฟลว์ AE เมื่อฉันได้รับไฟล์ Illustrator จากนักออกแบบฉันยังมีงานเตรียมมากมายก่อนที่ฉันจะเริ่มแอนิเมชั่นใน AE ที่เกี่ยวข้องกับการกลับไปกลับมาระหว่างแอพ ไปแล้วเป็นวันแห่งการเล่าเรื่อง

การวางเนื้อหาจาก Sketch ไปยัง After Effects

เวิร์กโฟลว์ที่ไหลจริง

Sketch2AE ลบขั้นตอนกลางและสร้างองค์ประกอบใน AE ที่คล้ายคลึงกับโครงการร่าง Sketch2AE แปลงของคุณ:

  • ร่างสัญลักษณ์ลงใน precomps ทั่วทั้งโครงการใน After Effects อัปเดตเมื่ออัปเดตทุกที่
  • กลุ่มสเก็ตช์ลงในเลเยอร์ที่มีผู้ปกครองสำหรับการปรับขนาดและการเปลี่ยนตำแหน่ง สิ่งนี้ประสบความสำเร็จเช่นฟังก์ชั่นการจัดกลุ่มมาตรฐาน
  • Sketch Masks เป็นกลุ่มที่มีเอฟเฟกต์ชุดแบบด้าน ไม่มีการสร้างมาสก์ขึ้นใหม่จากศูนย์
  • ร่างรูปร่างเป็นเลเยอร์รูปร่าง AE ดั้งเดิม rectangles stay รูปสี่เหลี่ยมผืนผ้าและ ovals stay ellipses เคลื่อนไหวได้อย่างมีประสิทธิภาพ (ในที่สุด)

เรียนรู้เพิ่มเติมหรือดาวน์โหลด Sketch2AE

สารวัตร Spacetime: รับรายละเอียดของคุณถึงรหัส

สารวัตร Spacetime ยังเป็นปลั๊กอินและสคริปต์ AE แต่มันก็เข้ามาเล่นหลังจากเวทมนตร์ออกแบบการเคลื่อนไหวเกิดขึ้น Inspector Spacetime สร้างรายละเอียดการเคลื่อนไหวสำหรับวิดีโออ้างอิงในคลิกเดียวดังนั้นคุณสามารถอยู่ห่างจากบ้านหมาของทีมวิศวกรรม

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

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

ฉันมักต้องการให้ไม้กายสิทธิ์ข้ามการทรมานและความเบื่อในการเขียนรายละเอียด ฉันอยากล้างจานหรือปัดฝุ่นที่บ้าน ตอนนี้เมื่อฉันใช้ Inspector Spacetime สิ่งที่ฉันต้องทำคือเลือกกลุ่มของคู่เฟรมหลักและคลิกปุ่ม ใช่. แค่นั้นแหละ. ไม่มีแคลคูลัส (ขออภัย / ไม่เสียใจนิวตัน)

การสร้างข้อมูลจำเพาะทางวิศวกรรมจากเฟรมเอฟเฟกต์ After Effects

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

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

เรียนรู้เพิ่มเติมหรือดาวน์โหลด Inspector Spacetime

กลองฮัมอัตโนมัติโดยอัตโนมัติเพื่อให้คุณสามารถใช้เวลาสนุกสนานได้มากขึ้น

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

ลองใช้เครื่องมือและช่วยเราปรับปรุงให้ดียิ่งขึ้น

  • Sketch2AE
  • สารวัตร Spacetime

สนใจร่วมงานกับเรา? ส่งแฟ้มผลงานหรือตัวอย่างม้วนไปที่ [email protected]

- - - -

1. Adam Plouff ออกจาก Google เพื่อไล่ตามความพยายามอื่น ๆ อดีตตระกูล Google ของเขาคงเป็นสถานที่อบอุ่นในใจ ค้นหาข้อมูลเพิ่มเติมเกี่ยวกับโครงการเดี่ยวของอดัมที่ battleaxe.co

2. ทีม Search, User และ Maps UX (SUMux) ออกแบบผลิตภัณฑ์เช่น Google Assistant, Google Search App และ Google Maps