การใช้หลักการแอนิเมชั่น 12 ประการของดิสนีย์ในโครงการออกแบบเว็บครั้งต่อไปของคุณ

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

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

หลักการแอนิเมชั่นทั้ง 12 ประการในตอนนี้เป็นพื้นฐานสำหรับงานเคลื่อนไหวทั้งหมด ไม่ว่าจะเป็น Disney และอื่นๆ นอกจากนี้ยังเกี่ยวข้องกับฟิลด์นอกแอนิเมชั่น เช่น การออกแบบเว็บ

ประวัติโดยย่อของหลักการ 12 ประการของแอนิเมชั่น

หลักการของแอนิเมชั่นทั้ง 12 ประการได้รับการแนะนำโดย Ollie Johnston และ Frank Thomas สองคนใน Nine Old Men ของดิสนีย์ ซึ่งเป็นกลุ่มหลักของแอนิเมเตอร์ที่เข้าร่วมในช่วงทศวรรษที่ 1920 และ 30 Johnston และ Thomas เขียน The Illusion of Life: Disney Animation ในปี 1981 และยังคงเป็น “พระคัมภีร์” ของแอนิเมชั่น หนังสือเล่มนี้กล่าวถึงแนวทางของอนิเมเตอร์ชั้นนำของดิสนีย์อย่างใกล้ชิดเพื่อดึงเอาหลักการทั้ง 12 ประการออกมา แม้ว่าหลักการเหล่านี้เดิมมีไว้สำหรับแอนิเมชั่นที่วาดด้วยมือ แต่ก็สามารถอยู่รอดได้ผ่านการเปลี่ยนแปลงทางเทคโนโลยี และปัจจุบันมีการใช้โดยอนิเมเตอร์คอมพิวเตอร์ (เช่น Pixar) และนักออกแบบเว็บไซต์

หลักการ 12 ประการของแอนิเมชั่นและวิธีที่พวกเขาแจ้งการออกแบบเว็บ

มีเหตุผลว่าทำไมหลักการเหล่านี้จึงยืนหยัดผ่านการทดสอบของเวลา บางครั้งพื้นฐานก็ยังดีที่สุด

1. สควอชและยืด

ที่มา: Chris Gannon via Giphy

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

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

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

2. ความคาดหวัง

ที่มา: CentoLodigiani ผ่าน Giphy

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

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

3. การแสดงละคร

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

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

4. ตรงไปข้างหน้าและโพสท่า

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

ที่มา: Vincenzo Lodigiani, Motion Artist

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

5. ติดตามผ่านและการกระทำที่ทับซ้อนกัน

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

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

ในตัวอย่างด้านล่าง แขนและขาของราพันเซลขยับในอัตราที่ต่างไปจากศีรษะของเธอ นั่นคือการกระทำที่ทับซ้อนกัน เมื่อเธอหยุดหมุนผมของเธอยังคงแกว่งอยู่ครู่หนึ่ง – ตามมา

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

“การถือศีลอด” ก็เกี่ยวข้องกับเรื่องนี้เช่นกัน ตัวละครที่เหลืออยู่ยังคงมีการเคลื่อนไหวเล็กน้อยเพื่อให้อนิเมชั่นไม่นิ่ง

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

คุณยังสามารถเห็นหลักการนี้ในการดำเนินการบน iPhone ของคุณ เมื่อคุณเปลี่ยนระหว่างมุมมองหรือย้ายไอคอนบนหน้าจอหลัก องค์ประกอบต่างๆ จะเคลื่อนที่ในอัตราที่แตกต่างกันเล็กน้อย นี่คือวิธีที่ iPhone ของคุณสื่อสารว่า "สิ่งต่างๆ กำลังเปลี่ยนไป"

6. เข้าช้าและออกช้า

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

ที่มา: The Illusion of Life on Tumblr

สำหรับการออกแบบเว็บ CSS มีฟังก์ชันจับเวลาสองฟังก์ชันที่เกี่ยวข้องกับหลักการนี้: ความสะดวกในและง่ายออก คุณสามารถดูตัวอย่างได้บนเว็บไซต์ Your Plan, Your Planet (คลิก “มาเริ่มกันเลย” ก่อน)

7. อาร์ค

เช่นเดียวกับหลักการอนิเมชั่นอีก 12 ประการ “ส่วนโค้ง” มีพื้นฐานมาจากฟิสิกส์ วัตถุมักจะเป็นไปตามส่วนโค้งบางประเภทขณะที่เคลื่อนที่เนื่องจากแรงโน้มถ่วง ถ้าให้ตั้งตรง การเคลื่อนไหวจะเป็นแบบกลไก ไม่สมจริง

สิ่งนี้ใช้ได้กับการเคลื่อนไหวทุกประเภทเช่นกัน ไม่ใช่แค่ส่วนโค้งต่ำไปสูงไปต่ำ:

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

8. การดำเนินการรอง

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

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

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

9. เวลา

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

ในตัวอย่างนี้ การกระทำแรกของ Daffy Duck มีจังหวะที่เป็นธรรมชาติ และการกระทำสุดท้ายเมื่อเข้าใกล้ผู้ดูจะเน้นอย่างรวดเร็ว

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

ที่มา: @scottthigpen บน Giphy

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

10. การพูดเกินจริง

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

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

11. การวาดภาพที่เป็นของแข็ง

ที่มา: The Illusion of Life on Tumblr

แม้ว่าแอนิเมชั่นจะเป็น 2D ในทางเทคนิค แต่ก็ต้องนำเสนออย่างสมจริงในแบบ 3 มิติ หลักการ “การวาดภาพแบบทึบ” อาจเรียกได้ว่าเป็น “มุมมอง” ก็ได้ เพราะเป็นการมีความสามารถในการวาดภาพและทำความเข้าใจพื้นฐานต่างๆ เช่น

• กายวิภาคศาสตร์
• สมดุล
• ความสม่ำเสมอ
• แสงและเงา
• ปริมาณ
• น้ำหนัก

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

12. อุทธรณ์

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

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

ในการออกแบบเว็บ “อุทธรณ์” หมายความว่าเว็บไซต์โดยรวมมีส่วนร่วม สนุกสนานและใช้งานง่าย

ห่อ

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

กำลังมองหาวิธีเพิ่มเติมในการเชื่อมต่อกับผู้ชมของคุณหรือไม่? อ่านโพสต์บล็อกของเราเกี่ยวกับการใช้อารมณ์สี