UI Animation Principles: Disney is Dead

การถ่ายภาพถูกคาดการณ์ว่าเป็นการเสียชีวิตของการทาสี

(หากคุณต้องการรับบทความของฉันเกี่ยวกับภาพเคลื่อนไหว UI ผ่านอีเมลและเพิ่มลงในจดหมายข่าวของฉันคลิกที่นี่)

สื่อใหม่

เมื่อ Paul Delaroche พบ Daguerreotype ในราว ๆ ปี 1839 เขาประกาศว่า“ ตั้งแต่วันนี้การวาดภาพนั้นตายแล้ว!”

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

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

มันใช้เวลาเกือบหนึ่งร้อยปีก่อนที่ช่างภาพอย่าง Ansel Adams, Imogen Cunningham, Edward Weston และคนอื่น ๆ ใน 'Group f / 64' ได้รุกล้ำเข้ามาในภาษาภาพที่ทำให้การถ่ายภาพแตกต่างจากสื่อในรูปแบบที่เป็นเอกลักษณ์ ภาษาและหลักการและในการทำเช่นนั้นพวกเขาปฏิวัติโดเมนของการถ่ายภาพ

เอ็ดเวิร์ดเวสตัน, อิโมเจนคันนิงแฮม, Ansel Adams

ดิสนีย์แก้ปัญหาต่าง ๆ

อย่างมีความสุขเราพบว่าตัวเองมีการปฏิวัติในภาพเคลื่อนไหว UI

ในปี 1981 Ollie Johnston และ Frank Thomas เปิดตัวแอนิเมชัน Disney: The Illusion of Life และแนะนำสิ่งที่เป็นที่รู้จักกันในขณะนี้ว่า 'หลักการพื้นฐานของการเคลื่อนไหว 12' หลักการเหล่านี้แก้ไขปัญหาของการสร้าง 'การเคลื่อนไหวที่สมจริง' ที่เกิดขึ้นเมื่อร่างกายอินทรีย์ ย้ายและตอบสนองในพื้นที่ทางกายภาพ (หลักการยังครอบคลุมถึงสิ่งต่าง ๆ เช่นเวลาอารมณ์และเสน่ห์ของตัวละคร)

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

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

การแยกย่อยทั้งหมดนั้นชัดเจนเมื่อเรามองดู 12 หลักการในบริบทของส่วนต่อประสานผู้ใช้

สควอชและยืดให้น้ำหนักและความยืดหยุ่นให้กับวัตถุสิ่งที่เป็นข้อยกเว้นมากกว่ากฎในส่วนติดต่อผู้ใช้

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

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

Straight Ahead Action และ Pose to Pose นั้นมีหลักการน้อยกว่าวิธีการวาด / อนิเมชั่นจริง ๆ : คุณสามารถสร้างภาพเคลื่อนไหวที่ลื่นไหลมากขึ้นหากคุณวาดเฟรมต่อเนื่องหรือใช้โพสท่าเพื่อจัดวางเฟรมหลักสองสามตัวและเติมช่องว่าง . ในประสบการณ์ของผู้ใช้กระบวนการนี้แทบจะไม่แปลเว้นแต่ว่าจะเกิดเฟรมภาพเคลื่อนไหวเฟรมจริง ตามค่าเริ่มต้นเครื่องมือที่คุณใช้โดยไม่คำนึงถึงภาพเคลื่อนไหว UI เกือบทั้งหมดจะถูกสร้างขึ้นโดยใช้คีย์เฟรม

Follow through และ Overlapping Action ต้องทำตามกฎของฟิสิกส์และความเฉื่อยและร่างกายตอบสนองอย่างไรซึ่งทั้งสองอย่างนี้มีส่วนเกี่ยวข้องกับส่วนต่อประสานผู้ใช้น้อยมากเว้นแต่คุณจะเชื่อในหลักการต่อไปซึ่งมีประโยชน์มากที่สุดในกลุ่ม .

ช้าในและช้าออกบอกว่าวัตถุต้องใช้เวลาในการเพิ่มความเร็วและช้าลง สิ่งนี้มีความเกี่ยวข้องอย่างยิ่งเนื่องจาก 100% ของภาพเคลื่อนไหว UI ควรใช้หลักการนี้ โดยทั่วไปเรียกว่า 'การผ่อนคลาย' และมีความสำคัญอย่างยิ่ง

อาร์ค (จำเป็นสำหรับการสร้างภาพเคลื่อนไหวทางกายภาพ) นั้นแทบจะไร้ประโยชน์สำหรับภาพเคลื่อนไหว UI และยังเป็นข้อยกเว้นมากกว่ากฎ

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

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

การพูดเกินจริงเกี่ยวข้องกับระดับของความสมจริงหรือภาพล้อเลียนอีกครั้งแทบจะไม่เกี่ยวข้องกับภาพเคลื่อนไหว UI เนื่องจากการออกแบบได้ถูกกำหนดไว้ล่วงหน้า

การวาดแบบทึบนั้นส่วนใหญ่จะเป็น moot เนื่องจาก UI Animation เกี่ยวข้องกับพฤติกรรมของวัตถุอินเตอร์เฟสเมื่อเวลาผ่านไปไม่ใช่การออกแบบจริงของวัตถุเอง

อุทธรณ์ยังพูดถึงการรักษาด้วยภาพอีกครั้งไม่เกี่ยวข้องกับวิธีการทำงานของอินเตอร์เฟซเมื่อเวลาผ่านไป

สรุปแล้ว

ดังนั้นคำถามยังคงอยู่: ทำไมไม่มีหลักการพื้นฐานของภาพเคลื่อนไหวทั้ง 12 ข้อที่อธิบายการเคลื่อนไหวของ UI อย่างถูกต้อง

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

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

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