แอนิเมชั่นเว็บในยุคหลังแฟลช

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

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

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

ถ้าภาพนิ่งแทนคำพันคำ แอนิเมชั่นมีมูลค่าเท่าไร?

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

แอนิเมชั่นเว็บเริ่มต้นอย่างไร การเพิ่มขึ้นของ GIF

ในช่วงแรกๆ ของเวิลด์ไวด์เว็บ สิ่งต่างๆ ค่อนข้างนิ่งและน่าเบื่อ หน้าเว็บส่วนใหญ่ใช้การออกแบบกราฟิกและเลย์เอาต์จากโลกแห่งการพิมพ์ อย่างไรก็ตาม นักออกแบบบางคนได้ใช้ความพยายามร่วมกัน แม้จะมีความท้าทายด้านเทคนิคและแบนด์วิดท์ในการรวมแอนิเมชั่นเว็บรูปแบบแรกๆ เข้าไว้ด้วยกัน เพื่อทำให้เคลื่อนไหวและน่าสนใจยิ่งขึ้น หนึ่งในการเพิ่มภาพเคลื่อนไหว GIF ครั้งแรกในเว็บไซต์คือเรื่อง Batman Forever ของ Jeffrey Zeldman ในปี 1995 ผู้มาเยือนได้รับการต้อนรับจากการที่แบทแมนบินเข้าหาพวกเขา โดยเคลื่อนไหวเป็นลำดับภาพ

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

ก้าวไปข้างหน้าอย่างรวดเร็ว 20 ปีและ GIF แบบเคลื่อนไหวอยู่ทุกที่ พวกเขาอยู่ใน Twitter, Messenger, iMessage, WhatsApp, Skype, Instagram และ Facebook GIF เหมาะสำหรับภาพเคลื่อนไหวแบบวนรอบสั้น ลำดับภาพ และแม้แต่วิดีโอวนซ้ำแบบสั้น ข้อเสียที่น่าเสียดายคือรูปแบบไฟล์ GIF ไม่มีความโปร่งใสของตัวแปรและไม่รองรับช่องอัลฟา ดังนั้น พิกเซลทั้งหมดจึงมีความทึบเต็มที่หรือโปร่งใสทั้งหมด

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

รุ่งอรุณแห่งแฟลชเว็บแอนิเมชั่น

เว็บแอนิเมชั่นบูมขนาดใหญ่มาพร้อมกับการเปิดตัว Flash ในปี 1996 เมื่อ Macromedia ประกาศปลั๊กอินเว็บและเครื่องมือสร้างแอนิเมชั่นแบบเฟรมตาม: Macromedia Flash (หลังจากที่พวกเขาซื้อ FutureSplash Animator ซึ่งเป็นโปรแกรมแอนิเมชั่นเวกเตอร์) Flash มีบทบาทสำคัญในการนำความสามารถใหม่ๆ มาสู่เว็บ ตั้งแต่เสียงและแอนิเมชั่นไปจนถึงการโต้ตอบและวิดีโอ Flash ช่วยผลักดันอินเทอร์เน็ตไปข้างหน้า

โอกาสในการสร้างแอนิเมชั่นเว็บที่ใช้เวกเตอร์แบบเรียบง่าย แบบลีน ทั่วทั้งไซต์ที่มีการโต้ตอบ สร้างสิ่งที่เรียกได้ว่าเป็นช่วง “บาโรก” ของการออกแบบเว็บด้วย (เช่นกัน) องค์ประกอบที่เป็นแอนิเมชั่นจำนวนมากที่อัดแน่นอยู่ในแนวนอน อย่างไรก็ตาม Flash ได้นำเสนอภาพรวมของความเป็นไปได้ของการออกแบบเว็บแบบไดนามิก ทำให้นักออกแบบมีอิสระในการทดลองและปลดปล่อยช่วงเวลาแห่งการพัฒนาการออกแบบเว็บที่รวดเร็ว

แอนิเมชั่น Flash นั้นมีน้ำหนักเบาและค่อนข้างง่ายในการสร้าง มีขนาดเพียงไม่กี่กิโลไบต์ โดยจะแจกจ่ายในรูปแบบไฟล์ SWF และไฟล์ที่ใช้เสียงพร้อมกราฟิกแบบเวกเตอร์ที่คมชัด การสร้างภาพเคลื่อนไหวบนเว็บกลายเป็นกระบวนการที่คล่องตัวซึ่งไม่ได้เพิ่มเวลาในการโหลดหน้าเว็บมากนัก แต่สำหรับข้อเสียที่สำคัญยังคงมีอยู่—จำเป็นต้องมีปลั๊กอินของเบราว์เซอร์เพื่อให้ทำงาน

นอกจากนี้ การโต้ตอบที่ซับซ้อนใน Flash ยังเปิดใช้งานโดย ActionScript (AS) ซึ่งเป็นภาษาการเขียนโปรแกรมเชิงวัตถุที่คล้ายกับ JavaScript เริ่มแรก ActionScript ได้รับการออกแบบมาเพื่อควบคุมแอนิเมชั่น 2D แบบเวกเตอร์ที่เรียบง่าย แต่ต่อมาได้พัฒนาเป็นเครื่องมือที่ซับซ้อน

น่าเสียดายที่แอนิเมชั่น Flash ไม่ได้ตั้งใจให้ตอบสนอง ทำงานได้ไม่ดีในทุกอุปกรณ์ และในที่สุดก็หลุดออกจากอุปกรณ์พกพายอดนิยมทั้งหมด แม้ว่าขนาดไฟล์จะค่อนข้างเล็ก แต่ Flash ไม่ได้รับการปรับให้เหมาะสมและจบลงที่ CPU หิว ซึ่งเป็นปัญหาในมือถือเช่นกัน การสิ้นสุดของยุค Flash เกิดขึ้นหลังจาก Steve Jobs ตัดสินใจที่จะไม่รองรับ Flash บนอุปกรณ์พกพาของ Apple

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

สตีฟจ็อบส์

แอนิเมชั่นเว็บวันนี้

ทุกวันนี้ เนื่องจาก Flash ล้าสมัย เราจึงมีความต้องการแอนิเมชั่นบนเว็บที่แตกต่างกัน เครื่องมือต้องยืดหยุ่นและเบา นักออกแบบเว็บไซต์ต้องสร้างเนื้อหาที่ตอบสนองและปรับเปลี่ยนได้สำหรับอุปกรณ์ต่างๆ (เดสก์ท็อป แท็บเล็ต และมือถือ) โดยคำนึงถึงขนาดหน้าจอ เบราว์เซอร์ อัตราส่วนภาพ ความหนาแน่นของพิกเซล และอื่นๆ ผลงานแอนิเมชั่นบนเว็บของเราต้องทำงานบนอุปกรณ์พกพาขนาด 5 นิ้ว 720px ไปจนถึงแท็บเล็ต QXGA ขนาด 9.7 นิ้ว ไปจนถึงจอภาพ Retina 6K ขนาด 32 นิ้ว

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

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

HTML5, CSS3, JavaScript และ SVG (กราฟิกที่ปรับขนาดได้) ดูเหมือนจะเป็นโซลูชันที่ดีที่สุดสำหรับแอนิเมชั่นเว็บ การใช้เทคโนโลยีเว็บและภาษาที่ทันสมัยเหล่านี้จะช่วยแก้ไขปัญหาข้างต้นได้เกือบทั้งหมด แต่ไม่ใช่ทั้งหมด แต่เป็นความคิดที่ดีเสมอที่จะก้าวอย่างระมัดระวัง โดยเฉพาะอย่างยิ่งเมื่ออยู่ในพื้นที่ที่ไม่จดที่แผนที่ และต้องมีการควบคุมคุณภาพและการทดสอบอย่างครอบคลุม

ทำไมต้องใช้เว็บแอนิเมชั่น?

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

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

นักออกแบบเว็บไซต์ต้องไม่ดูแอนิเมชั่นเว็บจากมุมมองทางเทคนิคล้วนๆ พวกเขาต้องมองจากมุมมองของผู้ใช้

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

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

จากมุมมองเชิงตรรกะ เราสามารถแบ่งแอนิเมชั่นเว็บออกเป็นสองประเภทพื้นฐาน:

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

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

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

ข้อดีและข้อเสียของแอนิเมชั่นเว็บ

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

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

อันดับแรก เราต้องตรวจสอบ ว่า แอนิเมชั่นจะส่งผลต่อประสบการณ์ของผู้ใช้อย่างไร มันจะ ปรับปรุง UX ของเว็บไซต์หรือไม่ นักออกแบบควร:

• ตรวจสอบการออกแบบเว็บไซต์ที่มีอยู่ (ถ้ามี)
• ตรวจสอบกลุ่มเป้าหมายและแพลตฟอร์มฮาร์ดแวร์ที่พวกเขาใช้
• ตรวจสอบเวลาโหลดไซต์และโหลด CPU
• สำรวจทางเลือกอื่นๆ
• คอยดูการใช้งาน

ไม่ ควรใช้แอนิเมชั่นเว็บบนไซต์เพื่อติดตามแนวโน้มเพียงอย่างเดียว

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

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

อ่านเพิ่มเติมเกี่ยวกับบล็อก Toptal Design:

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